ARIA HTML Tutorial - What is ARIA & Why it's Important to Use!

today you are going to make your UIs mega accessible like whoa heading one hey everyone what's up Gary Simon so today we're gonna be checking out Aria attributes alright so if you've seen these and you don't know what they are maybe you're looking through code pen demos and you saw them in other people it's HTML and their attributes well it's a good idea to start familiarizing yourself with these all right so I'm gonna link I the following link here in the description YouTube description basically we're at developer dominoes illa org and it's Aria is an acronym for accessible rich Internet applications alright so it's a set of attributes that define ways to make web content and applications by accessible for with people who have disabilities primarily vision disabilities are people who you have to use screen readers alright so I you know I've talked about in the past the importance of understanding contrast as it pertains to UI design in people with bad vision but there are some people their eyesight is so bad it doesn't matter they have to use I have to rely on audio so screen readers is what they use so we're I'm going to show you how to install this chromevox which is a free google extension - that emulates a screen reader it basically is a screen reader for websites and this is by buying this tutorial right here is by no means an elaborate comprehensive tutorial on how to use these it's I'm just gonna show you a couple examples with this screen reader and how we can make it much easier for people who don't have eyesight or have a really bad eyesight to use your applications and your websites alright so it's very important I there's also if you go to Google and you type in air Aria examples you're gonna find a bunch of them you don't have to learn them all all you have to do is just when you encounter a situation where you're not sure how you should deal with in terms of accessibility go to google and type it in you know the attribute or what you're building like an accordion or a custom alert or something like that and you should be able to to self teach yourself alright so make sure to to subscribe if you haven't yet and also very soon I'm releasing a UI design course so go to complete UI design enter your email to get notified and let's get started before we begin this video sponsor Isla node in make it easy and affordable to host your site app or service on whatever technology stack you use unlike entry-level hosting services lenôtre is a step up to powerful fast fully configurable cloud computing with server plans starting at just $5 plus no hidden fees or surprise outages Linode offers a no-nonsense hosting at a price you can afford so sign up now using the link below to get a $20 credit on your new Linode account alright so the very first thing you want to do in order to get this up and running is to visit the Chrome Web Store search for Chrome Vox extension alright it's free it has low ratings but only because people couldn't figure out how to disable it because it does get annoying hearing that I and so the way you disable this plug-in I is to hit shift alt and then double tap AAA so just shift alt AAA while holding shift and alt down and so just get installed and it'll automatically you know get ready the way you activate it or deactivate it again should shift a a home extensions curls locks classic extension chromevox chromevox is now actually turn it off alright so I have this very quick markup here it's just a simple index.html with a CSS file I already styled it we don't need to worry about that and just take a look at the mark-up it's just a div class of a container we got a header element we also have a logo here and then an unordered list for a navigation okay now if we look at what this looks like in the browser very straightforward just a logo and then our services we can see it this isn't really an issue of accessibility for us now let's go ahead and enable that plugin shift alt a window this is my website so by default I mean my services and everything that we have here and if I hit you can hit tab or you can hit shift alt in the arrow keys like up and down grab a hit link down it just says link for this one usually it would read them out but sometimes it's a little bit finicky this plug-in if I hit shift all lists down to get items Who am I link list item that's exactly what a person who's blind or see burly eye has to work off of is just that audio alone so very Simon lat time it read it and then go back to this this the next element list with three items so it says list with three at least I did alright that's that's basically all that you have to go off of you I they are not informed that this is an actual navigation or an important element for this website so what we could do i we could do one of two things one is the incorrect way I'm going to show you the incorrect way first what we could do is say ul role equals navigation and this is the the area approach to doing this but is this is my website exhale navigation with three items gary simon who am i services but let me get started here rack here late list item link navigation with three items who am i linked list item notices said navigation this time with three items all right but the thing is we don't want to use these i the the area attributes area i'm not sure how to pronounce that hopefully i'll get that correct here in a second oh but you want to use the nav m elements your html5 semantic out elements where they're needed and this will give us the same result this is my website gary simon who am i services contact so let's try this again rap to top link navigation list with three items who am i linked list item so as you see it does the same thing it says it's a navigation so very important I to understand that you only want to use these elements when you need to and you want to have the I want to use your your HTML tags where necessary because that's their purpose is accessibility so let's go ahead and move on to yet another example okay so what we have here that it just typed out is we have this read more section where it's basically kind of like an accordion UI where we have an unordered list we have a button and then we have this paragraph for each one of them that is hidden in the CSS by default so in the browser about accessibility this is my little chrome bar right now with that off and as you can see click on it well yeah it doesn't work but I'm gonna go ahead and fix that real quick all right there we go I just updated the code I'll show you in a second what it did but we click on this and basically you know we have our basic accordion situation going on so let's go ahead and Riaan a bowl what a screen reader how it would traverse these and how they would basically be presented I guess before we know we'll go ahead and do that right now so Gary Simon why my services come ability this head up here come list with three items list item back heading to all right so it's star my little nifty paragraph this is my paragraph so read more about my services all right so the next encounter is going to be this right here list with three items list item UI design button alright so it says it's a UI design button okay so that's all you have to work with a member remember you're not looking at the the the UI so you don't know what's gonna happen so I you could keep on going down list item UI design button says the same thing okay I you know their buttons list item so let's go ahead click on one which you can do by hitting enter UI design button that's all happens so imagine if you're blind or you can't see same thing early or you can't see very well and you could click the button all it does is just repeat the button that's bad so we can fix this with those attributes and this is a perfect use case for it so the first thing that we would want to do is on the button itself because that's the element that they have to interact with is we want to add some attributes and the key attribute that we want to add is a RI a - expanded equals false so it's gonna let them know by default that this is something that can collapse and expand and we're setting it to a value of either true or false a boolean value I next if I button controls another area I or another div element or another piece of content like in our case then we also should specify area controls equals for instance sect one which is in relation to an ID attribute on the element you wanted to control so in this case I if you wanted a bunch of elements like maker div wrapper you could play someone in a div but since ours is very simple we're just using a single paragraph so we could say ID equals section one and then also role equals region all right and you would also want to add area - labeled by equals BTN one and we can place an ID of BTN one here alright so let's go this is my website Gary Simon who rap to bottom rap to top button this is heading two so remember we only placed this on the first UI design element here in the accordion so let's go ahead and see how this changes the situation now list with three items list item UI design button collapsed there we go button collapsed alright so if we hit enter UI design button collapsed it still says button collapsed that's why you wanted to use javascript in order to get this working so this is the existing JavaScript that I have just to make the accordion work and the expander icon which is right over here UI design UI design so what we want to do is we have an if statement that sets the panels style.display to none if it's already expanded and then if it's not expanded we just do the reverse we just we set it to a block so down here in this else statement we would want to reset the value of that area area whatever expanded to true alright so you this is a simple matter of understanding basic JavaScript and vanilla JavaScript so to do that we would simply say because we're already referencing the I the button here we simply say this thought set attribute we wrap it in the attribute name that's tied to it which is area expanded we set it to true that's it I and then also we would reverse that and set that up here to false very very simple so now we'll go back we know this is my website tab this heading to list with three items list item UI design button collapsed all right it's a button and it's collapsed UI design button expanded there we go if we hit it again UI design button collapsed and there you go so that gives you a really solid you can't use case and there's a bunch more of course I where you know there's a there's many other very helpful ways that you can use these attributes for accessibility and making your website I or your app something that even blind people can easily navigate all right so hopefully you found that useful it's very important I if you want to get a job especially working with you know a company that takes himself seriously and they want to appeal to the largest audience as possible I make sure that you understand what these Aria attributes are and how to implement them alright so as always make sure to subscribe I'll see you guys real soon goodbye [Music] [Music]

Channel: DesignCourse

Views: 77,867

Rating: 4.9088607 out of 5

Keywords: web accessibility, aria, aria tutorial, aria html examples, aria html, aria attributes, aria attributes list, accessibility, aria accessibility, inclusive design, screen reader, screen reader web design, user experience, web design, aria course, aria accessible

Id: 0hqhAIjE_8I

Length: 13min 54sec (834 seconds)

Published: Mon Sep 30 2019