Episode 123: Accessibility, Drag and Drop Interaction, Emojis

I'm Nick Petit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of internet, 0:02 where we talk about all things web design, Web development and more. 0:04 >> In this episode we'll be talking about accessibility, drag and 0:08 drop interfaces, Emoji and more. 0:11 >> Lets check it out. 0:14 [MUSIC] 0:15 First up we have a great blog post with Aria examples. 0:20 Now Aria is a term standing for 0:25 accessible rich internet application suite as determined by the W3C and 0:28 this wonderful blog post goes over different ways to use aria in your html. 0:35 So here we have a bunch of examples, the first one being an accessible input 0:41 tool tip, and this does not use JavaScript, just ARIA attributes. 0:47 So, if we look at your username, it says your username is your email address. 0:51 And the same thing, little hint, with the password. 0:56 And, it goes through and 0:59 explains the HTML that you can use to accomplish these different feats. 1:01 And here we have a label, inside the label we have the input and 1:07 then here's the aria attribute which is prefixed with aria and then a hyphen and 1:13 described by, which is going to go for this tool tip. 1:20 And it shows you right here the value of that attribute is username-tip, 1:27 which is is the ID of this div. 1:32 And actually we also have a role which describes what kind of attribute it is, 1:36 in this case it is the tooltip. 1:42 Now there are a bunch of different possible options that you can use and 1:45 this is, of course, gonna be accessible in all the different browsers. 1:49 Accessibility being very important so 1:53 that people with disabilities can access the site. 1:56 So we have different things here. 1:58 Drop downs. 2:00 Pretty good. About. 2:00 Who we are. What we do. 2:02 And then we can also see the ARIA attributes there. 2:03 Any way, not going to go over everything in this article but 2:05 definitely check it out. 2:08 We'll have a link in the show notes, it's very important to keep 2:09 your sites accessible, especially when you're making rich internet applications. 2:11 >> Very cool stuff. 2:16 Well next up are some drag and drop interaction ideas. 2:16 This is from the co drops blog. 2:21 And of course, they always include the code so you can download the source here. 2:23 But let's just take a look at this demo because that's really what 2:29 is interesting here. 2:32 There's a couple different drag and drop ideas. 2:34 And they're listed all here. 2:37 There's a bottom area, sidebar, page scale, modal. 2:38 Let's just try this bottom area one. 2:42 So when I click and drag one of these. 2:43 Whoa, look at that? 2:46 >> What? Where did that come from, the future? 2:47 >> It came from the bottom area. 2:49 I know that because it says it in a label right there. 2:51 And, and so it pops up there and we can drag stuff there. 2:53 There is also a sidebar, which is pretty similar idea. 2:59 There's a page scale one- 3:03 >> What? 3:04 >> Where this whole thing slides in and you can drop stuff. 3:05 I, I thought this modal one was pretty interesting, I'd never seen something like 3:10 this, it's a little bit tricky if you just click because it pops up. 3:13 But if you actually click and 3:17 drag [CROSSTALK] can choose which one you want to go to. 3:19 So, these ideas are just a little bit more on the experimental side but still 3:23 very cool design ideas if you are trying to implement a drag and drop interface. 3:29 >> Yeah Codrops always has pretty interesting, stuff on there. 3:35 >> Definitely. >> Cool ideas. 3:38 Next up everybody loves emoji, including Twitter who 3:40 recently open-sourced the library that they use and they called it twemoji. 3:43 Now >> Very clever. 3:48 >> Yeah. 3:49 It's like they just put the first couple letters of the company name in front of. 3:50 [UNKNOWN] >> Oh, yeah. 3:54 Yeah. 3:55 >> Yeah. >> I see what they did there. 3:55 >> So here is an example of emoji that you might see, on a tweet. 3:57 So let's say we open, so we're seeing our emoji to share with everybody and 4:02 they got, you know, the, the, those smiley face there, face with stuck out tongue and 4:05 winking eye, they've got some woman with bunny ears, some clinking beer mugs. 4:10 Great. So if you've ever tried to get emoji in 4:16 your site that can be a little bit cumbersome because what are you gonna do, 4:19 go ahead and replace every single image on the page or emoji with images. 4:22 No just use a library called Twemoji. 4:26 Now this is going to be in JavaScript and 4:29 actually they include all the different assets to go along with it. 4:32 So you have, access to the different images inside of the library, 4:36 so just clone this onto your site, or use it inside of a CDN. 4:41 They have a free CDN that you can use. 4:46 Through that into your page. 4:49 And then call this twemoji.parse method, and 4:51 that you pass a string with the imoge character code in there. 4:56 And it will give it a class of emoji, make sure it's not draggable, and 5:00 even replace it with one of the images that are included in the library. 5:05 Now, this even includes different sized images, and, in 5:10 addition to the parse method, you can also give it a different dom element to use. 5:13 Anyway, pretty simple, but very useful, so 5:18 definitely, check that out if you need to support emoji on your site. 5:21 And who doesn't? 5:25 Honestly. 5:26 >> Literally no one. 5:27 >> Very cool stuff. 5:28 Next up is a blog post called everybody scrolls. 5:29 I love this blog post because once I tell you about it 5:33 you'll understand that the title is literally the tldr, everybody scrolls. 5:36 This is an article from Rebecca Gordon. 5:42 Very cool stuff here. 5:44 Lot's of good ux research. 5:46 Basically they did a test to determine whether or 5:48 not users actually scroll on a web page. 5:54 Or if they mostly looked at what is known as above the fold. 5:58 So before you actually scroll on a web page. 6:03 And it's hard to even say, 6:05 what's above the fold these days because of responsive web design. 6:08 There's different sized devices, you know, what's above and 6:11 below the fold can change based on your screen resolution. 6:15 >> Back in the early days of web people were always debating what should be 6:18 above the fold because that could be all that somebody looks at on your webpage. 6:21 >> Exactly, people were new to the web, they maybe wouldn't scroll down, and 6:25 you could pretty easily determine what was above the fold, 6:29 just like the fold of a newspaper, because pretty much everyone had 6:33 the same screen resolution like 800 x 600 or 1024/768. 6:37 But now. 6:40 >> And there was only like one browser. 6:41 >> Yeah. It was really easy. 6:43 We should just go back to that. 6:45 It was perfect. 6:46 >> If only we could turn back time. 6:48 >> If only. 6:49 The did four tests here. 6:51 They had a control image where they said 91% of people scrolled, 6:53 91% scrolled immediately and that same 91% reached the bottom. 6:58 There was also the scroll arrow. 7:04 So they had a little arrow here, showing people that they should scroll down. 7:07 They had a shorter image and then they had this animated image and basically, 7:12 in all of these cases, 90 to 100% of people scrolled and reached the bottom. 7:17 It was only in this animated image that a few less people, 7:24 reached the bottom and even then it was still a pretty high number. 7:28 So, the lesson is, almost all participants scrolled in this study no matter what. 7:32 And that, that is the TLDR of the article is that pretty much everyone scrolls. 7:39 About the only time that you could confuse users with scrolling is if 7:43 you had a certain responsive size, and you had some really nice padding around, 7:49 maybe a hero image and it looks like maybe the content just ended. 7:53 It might not necessarily be intuitive that you need to scroll there, so 7:59 actually having a little bit of stuff cut off towards the bottom of 8:02 web pages tends to help people scroll a little bit better. 8:05 Citation needed on that one? 8:09 >> Give a little hint that something is lurking below the fold. 8:11 >> I've read that in a couple different of places but other than that, 8:14 pretty much almost all the time, people will scroll down a web page. 8:18 So the next time you hear, somebody arguing about whether or 8:22 not something should be above or below the fold, truth is it really doesn't matter. 8:24 >> TLDR. >> Yeah. 8:29 >> Everybody scrolls. 8:30 >> Everybody scrolls. 8:31 >> Next up we have a great blog post that attempts to summarize the accessibility of 8:33 all of the new HTML 5 attributes across browsers. 8:38 >> And, you're gonna give us the summary of the summary. 8:42 >> Yes. 8:45 No, I'm just scroll with everybody so that they can see. 8:45 What browsers support what? 8:48 >> So as we've been going along you know, 8:49 we've gotten all of these different new HTML 5 elements. 8:52 And hey how are they supported everywhere? 8:55 Well the accessibility support is okay in Chrome and Firefox. 8:58 It's not that great in IE, only scoring about a 37 out of 100, 9:03 or 37% if my math is correct. 9:09 >> Is it? 9:12 >> Yeah. >> I'm going to have to 9:13 think about that one. 9:14 Go ahead. 9:15 >> Citation needed. 9:16 Now this only goes through and lists Windows browsers for the moment. 9:17 It is a work in progress. 9:21 So you can see these check marks mean it is partially supported, so 9:24 for example this audio attribute is supported across all three browsers. 9:27 In Firefox, keyboard access is provided with Firefox specific shortcuts. 9:33 In chrome and IE eleven have full accessibility support. 9:38 Now once again, 9:42 accessibility is very important when you're developing your site. 9:43 So that people who use assisted devices can browse everything on your site. 9:45 Now if you are using any of these elements, go ahead and 9:51 just spin by this page. 9:55 We'll have a link in the show notes. 9:56 Just check and see if the inputs you are using, or 9:57 if the attributes you're using are supported. 10:01 >> That's very cool. 10:04 It's kind of like the cite, CanIuse.com but for accessibility. 10:04 >> Exactly. 10:10 >> Very cool stuff. 10:10 Well that's all we have time for this week, I'm @nickrp on Twitter. 10:12 >> And I'm @jseifer, thank you so 10:15 much for tuning in and we will talk to you next week. 10:17 [MUSIC] 10:20

You need to sign up for Treehouse in order to set up Workspace

Sign up