Meeting Accessibility Guidelines w/ HTML5 | Flow Speeches | Skillshare

Meeting Accessibility Guidelines w/ HTML5

Flow Speeches, Freelancer

Meeting Accessibility Guidelines w/ HTML5

Flow Speeches, Freelancer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (1h 5m)
    • 1. 1

      6:11
    • 2. 2

      1:40
    • 3. 3

      1:39
    • 4. 4

      6:14
    • 5. 5

      3:09
    • 6. 6

      2:43
    • 7. 7

      3:16
    • 8. 8

      4:50
    • 9. 9

      3:26
    • 10. 10

      3:13
    • 11. 11

      6:26
    • 12. 12

      2:38
    • 13. 13

      6:14
    • 14. 14

      2:56
    • 15. 15

      1:59
    • 16. 1

      3:08
    • 17. 2

      1:24
    • 18. 3

      1:49
    • 19. 4

      2:28
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

106

Students

1

Project

About This Class

With this course you'll be able to make websites that meet government standards, clear a couple of common questions that are asked in interviews, and even have some of the core building blocks of SEO given to you as a bonus.

Meet Your Teacher

Teacher Profile Image

Flow Speeches

Freelancer

Teacher

Hi, my name is Andrew. I started Flow Speeches to help people learn foreign language. Basically, when I started learning foreign languages I knew nothing. Now I know slightly more than nothing. My goal here is to share with you the things I wish someone had just told me from the start.

 

Becoming Fluent 3-Day Video Series

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. 1: hi there. And welcome to the course all about conformance guidelines. Now I realize this isn't the sexiest title, so I want to take a second and talk to you about what conformance guidelines actually are and why we might even consider them now. First, these conformance guidelines are essentially a set of criteria that were defined to make the Internet more accessible to people with disabilities. So it's the same principle as if someone visits a restaurant and they can't walk. They should still be able to go in and have a nice meal with their family by using a ramp or something like that. So why should we consider them? Well, there's the obvious reason. The moral reason that is, that even if you're blind or even if you're deaf, you should still have access to information and all the wonderful things on the Internet. Now, if that's not enough of a reason for you, there are a number of benefits for you and your website personally, the first of which is that conformance guidelines actually fall Ah, law, in line with S CEO best practices that is making your website appear higher and Google more people see it, more people visit it, and maybe you make some more money. Aside from that, whenever you follow these guidelines, oftentimes you're structuring your HTML in a more logical and consistent way. So that way your life becomes easier. When other people look at your Web pages, they'll be able to navigate them better. And not only that, whenever you're working with CSS and JavaScript, it becomes a lot easier to access different parts of your HTML dumb. Lastly, last reason, I'll say, is often times whenever you do front end developer interviews. There are some common questions that get asked, and a couple of these common questions are things like, for example, what recent best s CEO practices Have you implemented on a site, or how have you made an application more accessible to people with disabilities? So S CEO easier or makes your life easier when you're working with CSS JavaScript and just reading the HTML structure, And on top of that, it might even help you out in an interview. Now that we've talked about all of the different benefits for you personally, let's actually get into what these things are So first and foremost, the accessibility guidelines, there are basically two of them now. The 1st 1 is Section 508 which is a set of requirements defined by the government for Elektronik and information technology. In this section, five away applies to federal agencies, projects that are funded by or under the contract of a federal agency and then the other one on the right hand side. There is what CAG, which is of course, a funny thing to say, but it stands for ah, Web conformance accessibility guidelines. It consists of 61 criteria that are put into 12 guidelines and that are categorized into four principles. The four principles are poor, which is perceivable, operable, understandable and robust. Now this is my goal With this course is to take this sort of vague language in which these guidelines are written and transfer it into actionable steps that weaken, taken, implement on our sites and applications. So perceivable, what does that mean? It basically means that a person with disabilities can perceive the information on the website, so if they can't see, they can still navigate through the website and hear the information I'm presenting to them operable, meaning that they can actually navigate the website. Maybe go to the career section or the about US section. They can operate the website. Understandable you is a kind of combination of P and O. It's basically the user can understand the info that's being presented to them and how to operate the interface to get to the other pieces of info they need. Lastly, robust. This is a bit of an ambiguous one, but what it means is as technology advances, your website continues to be accessible to people with disabilities, even as technology changes. Now we can consist of three different levels of conformance, the 1st 1 level A and then double A and then triple it. Now, every single level higher encompasses all of the levels below it. So level Triple A would consist of level a conformance level to conformance and level three conformance. Now, if you want more information about this, this is a great resource right here. I'm not going to read it, of course, because that's a very, very long link. But you can see it right there, and I'll also include a link in the resource is section. So at this point, you may be asking yourself Well, which one do I implement in my sight? Do I use section five away? Do I use what? CAG? If I use Will CAG, which level of conformance do I use? Well, I got a pretty straightforward answer for you. I would personally recommend that you use what CAG level double a compliance. Now, there's a reason for that. First section five await, especially as of the recent update. Just uses what CAG as their conformance levels or guidelines. So by using were CAG level double A. You're essentially killing two birds with one stone. So you'll be good from the government perspective. And you'll be good on a global perspective. Now, not only that, you may be thinking that it might be more noble to make your website, you know, Triple A compliant. Well, the thing I would say to you is that level A is essentially a person with disabilities can more or less use your website, you know, in simple terms and then level double A is a person has all of the main problems that people with disabilities have. All of those problems are addressed in your website so they can navigate your website. No problem level Triple A most times is unnecessary In the W three, that is, the World Wide Web consortium doesn't even expect most websites to reach Triple A level conformity. So in other words, Double A is enough, and it covers all of your bases. Now we've talked a lot about the details of what these things are, so let's actually look at how we can implement this in one of our projects. 2. 2: so, believe it or not, one of the quote unquote secrets to making your Web sites more accessible is just to use HTML correctly. That's right by default. Html is semantic. So it stands to reason that if we use HTML correctly, our websites will be a lot more accessible by default because semantics actually has a lot to do with accessibility. Now, the way the Web stack works and when I say Web Stack, I mean HTML, CSS and JavaScript is that you could actually make an entire application with just dibs and spans just gives and gives and spans and spans, and that would work OK, but basically you would have no idea what anything meant. And so you would have to use a lot of classes and i DS to make things function properly and be able to identify the different parts of your application. Now, this doesn't obviously help screen readers out a lot, and it also doesn't help site crawlers spiders that crawl your website to figure out what it's about so it can index it in the search engines. So if we use age team oh, properly, we get a lot of that accessibility for free, and you could use dibs and spans and then use something like aria toe, make it more semantic and better for screen readers. But then you're going through all this trouble to adul this extra information that you originally stripped out with dibs and spans. So why not just use semantic html from the very beginning? So in this first section of the course, we're gonna be talking about the different things that weaken do with HTML to just get some default accessibility out of the box. 3. 3: All right. So in the last video, I basically told you that by default or for free, we can actually get a lot of accessibility if we use our HTML correctly. And if we structure our HTML docks correctly, we get a lot of things for free. So the way we have our document structure actually divides up into two different categories . So the first category is going to be your page structure. That is essentially how you organize your HTML elements. Okay, this is the machine readable code that's going to get parsed. And so how we set up these HTML elements here and here and here are gonna play a big role in how people with disabilities use our websites and also how spiders crawl our websites. And if they can crawl them effectively now that's gonna be mostly landmarks and landmarks is just another term for HTML sectioning elements. So things like your header, your knave, your main constant, your articles, things like that. Now the second category is going to be your content structure. OK, now, if the page structure is going to be the machine readable HTML elements the machine readable code, then it stands to reason that the content structure is going to be the human readable content. That is what your users actually see and how they go through that information. So we need toe, actually logically structure our document from a user perspective. So that way, any user with vision without vision can kind of see the hierarchy of things. And we're going to be a doing that a lot with things like headings and so on and so forth. So let's go ahead and dive into that. 4. 4: now. Obviously these guidelines thes were CAG compliance and usability guidelines are kind of lengthy. And not only that, they're organized according to numbers and things like that. And as you can see, I've just taken a list of the things we're going to be talking about in this very video. And as you can see, it's like level A 4.1 point one level double A 1.4 point four, obviously very difficult to remember. So what I'm gonna do for you is at the end of every single module, I'm going to include a checklist, okay? And then at the end of the entire Siri's, I'm going to include one big checklist so you can go down the rows, go down the list items and actually check off and make sure that your website is actually accessible to all different types of users. And this is also good because it means you don't have to memorize a bunch of numbers. I wouldn't expect anyone to memorize a set of over 50 or 60 criteria. You know, that's just not reasonable. So instead, just having a good checklist will do well, and I'll also include little tags or little stars to let you know if he's also help you with s CEO. For those of you out there looking to do things with S U and make money like that, so first thing we'll talk about is parsing now, according toa level A. That is the lowest level of accessibility compliance. You need to be able to make sure that your documents parse correctly with no errors. Okay, that way there's no hiccups with screen readers or anything like that. The first step to doing this is actually adding a doc type, so we'll do less than exclamation point doc type HTML. And of course, I'm sure most people have already been doing this just to make sure that you're in strict mode when you're working with HTML. But this is also good for screen readers because it lets them know what type of HTML they're using or that you're using and what to expect now a couple of other things for parsing to make sure your docks parse correctly and they're very accessible. Uh, make sure you're using your opening and closing tags correctly. And if it is an empty tager, a self closing tag make sure you do that correctly, like with these meta tags here were with these image tags that I have right here. So that's the first thing. Secondly, no duplicate attributes. What I mean by no duplicate attributes is, for example, on my image tag right here. If I had two sources, that's that's a no no right there. That's gonna be very confusing when someone parses or ah, when a machine essentially parses your HTML documents and then no duplicate I DS now, like I said, most hte HTML best practices are already kind of ingrained in you. So, like I said, if we use HTML correctly, we get a lot of this accessibility for free, and that covers us under level a 4.1 point one of the guidelines, which is parsing. I sound very technical when I say that. Well, like I said, I'll just include a checklist at the end, and it will be no problem to remember now. The next thing is going to be specifying the language of your actual website or the specific HTML page that you're on. So the way we do this is right here at the HTML tag, which you should already be, including we're gonna do an attributes and it's gonna be laying, and we're just gonna set it equal to Ian right there for English. Now, this is also very useful for S CEO, especially if you're trying to rank websites for other countries. And you're trying to get language specific results. I know S e o can be a lot easier. And there's a lot less competition in the foreign markets for S E o. So this is a really good thing to remember, even if not for accessibility, to get some language specific results in Google for people in Brazil or Italy or what have you. Now the next thing is going to be level a 2.4 point two once again. Sounds very technical. Not that complicated, though. Ah, Page title. So, as you can see, we have our title tag here that we keep up in the head. This is going to be unique, descriptive, in different for every page. Okay. And I can show you some examples of this. But if you go to something like, for example, amazon dot com every time you click on a different department in that website, or a different category the title up in the tab or actually changes every time. Okay, And this can also be good for S CEO. So if you want to throw in some long tail keywords or something like that in your title, given that their different or supposed to be different for every page, that could also be a little beneficial for your s e o. Obviously not going to make any huge changes, but definitely worth noting. Now. The next one is Ah, level double A 1.4 point four re sizing text. Okay, So as you can see, I have a couple of tags right here in the head, and this meta tag right here is going to help me be compliant with this criteria right here . What I'm doing is essentially setting it toe where I can pinch and zoom my Web page. So that's going to allow people who can see but have trouble seeing to be able to zoom in on my page and stuff like that. And according to this criteria, users should be able to adjust and increase the text by about 200% without losing readability and still being able to navigate the Web site and things like that. Another really good way to ensure that this is doable is by using relative units. So whenever you're working with CSS using rims and M's and Vieux Port units instead of using things like pixels or centimeters, if you've ever used that unit of measurement. So like I said, use rims and M's and set this specific meta tag right here to what I have here, name equals view porn with equals device with initial scale equals one. So this makes sure that it's not crazy and that the user can zoom in and out now. Obviously, a lot of this a lot of this structure that I'm teaching you right here is probably the easiest part to remember, because first, a lot of it's ingrained from the moment we learned HTM. Oh, but secondly, because it's so do clickable and so ubiquitous throughout our Web pages that we can actually template this out and turn this into each two HTML templates that we can replicate across all of our Web pages. So just something to keep in mind 5. 5: next we'll go ahead and talk about landmarks, which they are essentially just sectioning elements for dividing our structure of our document into logical parts. So the sectioning or landmark elements are as follows its header, knave, main footer and decide. And of course, I will have an entire course about doing semantic ht mo and when to use these and a few other elements. But for now, ah, their names are pretty self explanatory. We use this for the header part, this for the knave navigation and so on and so forth. This is going to help us meet the requirement 1.3 point one as well as the requirement 2.4 point one, which we will talk about in more detail later. So now what I want to do is go ahead and go through this entire document and try and meet this criteria that I've defined so far. So I can't have any duplicate I ds. And so first thing I'll do is I know I have to I d s for two rappers. So I'll go and take that out and just change this to a class right here, and I'll change this second did blow the banner image to a class right there. Perfect. Now, since this is the header, I haven't a div. I'm gonna go ahead and change that to a header right there and then inside of here. I have my navigation, so I'll change this to just a knave element right here. And this is gonna make it a lot easier whenever we see this through the eyes of a screen reader. Now, after that will go down. And as you can see, this is my main content right here. And then I'll change this to a main tag because this is where the main part goes. Then you can see I have a sidebar, so I'll change this to a side, and I'll change that to a side as well. And then after that, we have a navigation inside of this sidebar. So we'll change this to have. And we'll also change this to never and down at the bottom. Right here we have a footer. So we'll change this two footer. And we also have navigation inside of the foot. Or so we'll change this to Navas. Well, and then after we do this, we should be good to go. The only problem here is this is still a little confusing through a screen reader because we have three different sets of navigation, right? We have top level navigation right there at the very top in our header. We also have navigation in the sidebar, and we have navigation at the Footer. So what we can do is essentially label these different navigations with Aria, and that'll give some context to the user. So we'll add a new attribute called Aria Label. And this is gonna be my high level navigation. So this is gonna be called the site navigation. So now when the screen reader reads, it will be navigation for the site. And then for this sidebar right here, this is gonna be page navigation. So it's gonna be navigating into sub pages of the page. So we'll do Aria label, and then we'll just DuPage and up top of the header. Once again. That's my high level navigation. So we're going to go ahead and add in a aria label of sight. So as you can see, it's really not rocket science. It's not that complicated. It just takes a little bit of thought but really not too much thought. Now that we've gone ahead and looked at how we change the page structure, let's go ahead and look at how we change the content structure. 6. 6: now organizing the content structure of your Web page is going to be pretty straightforward , and this is gonna help us with Level A 2.4 point six as well as Level A 1.3 point one. So that's headings and labels and info in relationships. So what will be doing is using H one through age six text to kind of give, ah, hierarchical structure to our Web page. And not only that for S CEO, there's a concept called weight or some people call it weights. Some people may call it something else, and basically, ghoul or being is going to give different weight to different level element tags or heading tags. So on H one tag is going to get the most weight. So that might be where you put the main keyword that you're targeting for S CEO, and it's also going to be the main subject of your page. So what we'll do here is we'll go ahead and take this about inside of our main tag right here, and we'll just change this to an H one so I can easily do that real quick. Will do H one and then we'll go ahead and delete this right here. Let me go ahead and close that off. And now we have one h one that says about and I have another header title right here, and I'll just change this to a span real quick. So it is OK to use spans and gives just not everywhere just every once in a while, if you don't have anything of better to use. So now that we have our h one right here, we can change these other ones to actual H threes, for example. So we can change this to an age to for our services and get rid of these paragraph tags right here and same thing for our mission will change that to an age to That's pretty important. And then after that, we'll get rid of these paragraphs and less one. I promise we're gonna do an H two for meet the team right there. So now that we have that set up a couple of extra things to keep in mind, whenever you're doing or using HTML heading tags, remember that you have to go on order from 1234 so you can't do, for example, or it's not advisable to do something like 1378 or something crazy like that. So always go in order. 1234 and level of importance. That's also good for s CEO as well. So this H one is going to get the most weight or the most importance in the eyes of Google . So I would probably put my main keyword here. So if I was targeting something like, ah, say, um, how to lose £20 I would put that is the main title right here. And then these subtitles would get the second most weight. So I would put my long tail keywords here. And also, screen readers used these titles as a way to navigate your Web page, so it's important to also make them meaningful. 7. 7: So next on this journey of semantics is going to be list. Essentially, so list are obviously super important. I use them for everything. Ah, from slide shows to navigation. They're very, very useful. And they're also very useful to people who can't see very well also because, for example, right now we're on the services page of our document. And as you can see here, it looks like I have a list. And right above that list, I have a heading. So a screen reader, as you saw kind of how they work before, Ah, Screen Reader is going to be able to navigate this I according to the hierarchy of the content, it's going to go to our services. And then the user is going to be able to discover this list either directly from the heading or using keyboard shortcuts to see the different services that we offer. Now. There are many different types of list. Well, there's only three. I don't know why I said many. There is the one ordered list, which we have here, and then we have an ordered list which, as its name implies, is ordered or structured. 1234 a B C D. And then we have a definition list or a dictionary list, as I sometimes call it. And basically it's just got a list of key value pairs, and this could be very useful for things like, for example, definitions, glossaries. And, of course, FAA cues are another good thing to use with these because you have a key, which is a question and the value, which is the actual answer to the question. So what we could do here to make this better for users is to actually go ahead and turn the list of our process into a non ordered list. So we'll do ol and then we'll do. Let's say, Times six and this is of course, a actual emit. Short cuts will do. L A Times six, And that's just gonna allow me to do things quicker now, so we'll do one to find the problem. And then after that, we'll do two. And we could just copy and paste this. There's no sense in us actually having to write all of this, So why am I doing this? Why am I going through the trouble of this? Well, it has a couple of benefits to meet personally, the first of which is that whenever I go to style this, I don't have to work. It's hard to do it whenever I do this paragraph with these break tags right here. I do accomplish the same goal. Visually, however, I don't actually have to work that hard, and I could just take advantage of the built in functionality of an order list. And on top of that, whenever a user goes and navigates through the website, it's gonna be very easy for them to discover this list with a screen reader and go through the necessary steps. And that actually brings me to a point of accessibility, which is that don't rely on visual cues. So in other words, whenever you're using CSS, if I were to take away the CSS of a document, I should still be able to understand how to use it. So even if you do rely on visual cues for something cool, like an animation to draw people's attention, remember that if I took away the CSS as long as I can still use the website very well and clearly understand how toe operated and things like that It's, of course, okay to use things like animations and images so long as other people who maybe couldn't see those types of things could still make sense of your website easily. 8. 8: All right, So now let's talk about navigation. As you can see here, I've added another list of three different criteria for us to meet, and it looks intimidating. But a lot of it's really just common sense and, honestly, just best Web design practices. And I know design is kind of a tricky subject, but so the 1st 1 here is images of text. So if technology is being used, can achieve the visual presentation is used to convey information rather than images of text. So ah, this kind of a shorthand version of what it originally said. So basically, what it's saying here is let's say you want to display some text, Okay, so you might use a new image of text. So where possible instead of using an image of text, just used text because a screen reader can't read an image because it's just a picture. So, for example, here where I have my navigation, if I had an image of the home button right there in an image of the word about that wouldn't make a lot of sense. Even if I use something like the altar attributes, as you see on this image element right here. So another thing we can do real quick, like we talked about in the previous section, is go ahead and just add a really quick own ordered list. So that way we can make this just a little more logical because that's basically what navigation is, right? It's just a list of links. So while I'm doing that, I know what you're thinking. It was one of the first conflicts I had with this specifications, which is a lot of times in my websites. I like to use icons, and the reason I like to use icons is because, you know, it's kind of like when you're driving on the road, right, You have these symbols that you associate with certain meanings. So a big red octagon basically means stop and ah ah, green circle means go. So we're gonna talk more detail about images as we get deeper into the course. But for now, just know that any time you would maybe have an image of some text, try to use some regular text instead. That way, a user can access it. And of course, we're turning this into a non ordered list here because that's what we talked about in the last video. Now the next thing, this is really just a good Web design idea, consistent navigation. So I have a big technical definition right here that I'm not going to go through. Ah, but in other words, if I have this top ah, horizontal navigation right here the idea is to keep it consistent. So consistent navigation, meaning that I put it in the same place every time. And that's just a good idea from a user experience perspective, because that means they'll know where to expect the navigation every time. And the last thing is multiple ways. Ah, what this specifications means right here is a user should have more than one way to find a Web page. And this could be a good idea once again from a user experience perspective. And we do have that criteria already met because we have our top navigation here we have a sidebar, and we even have a footer. But we could even go a step further, and we could also add, for example, search functionality and the way we do. That's pretty simple. We could just make a form right up top in our in our actual thing here, and I'll send this to slash search. And then after I do that, I'm going to go ahead and give it a method of post right there, like so and then closed that Tagro quick. And the last thing I'll do is I'll give it a landmark roll and I'll give it a roll of search. Now, the reason I'm doing this is so that way, a screen reader can easily identify where the search box is inside of here. I'll just do an input and I'll set it to type search and that'll be easy and I'll give it a name of search as well. And then I need to give it a label. And this goes into kind of what we talked about with. If I'm not mistaken, 3.1 point, where is it before I go and say something at 2.4 point six? Like I said, it's much easier to have a check list than to remember all of these numbers and codes. Ah, headings and labels. So we have a nice label here to associate with our input, so that's very easy for a screen reader to associate the actual input with the purpose of the input. So we can put something like search right there and then in order to associate this label with this input, we just give it a nice I d. Right there. And so now these labels in these inputs are linked to each other and lastly, at an input of type submit right there and then we'll just put search. Now that we have that all set up, we're gonna go and look at a few other things Weaken due to meet the criteria of multiple ways, but a couple of different ways to do it You've already seen. You can add a search bar up here so you can find different parts of your Web pages. And you've also have a navigation up top A sidebar in a bottom footer. Navigation 9. 9: Okay, So a couple more things for us to talk about, and then we're gonna move on to more advanced things like tables, forms, images and how to make those more accessible to people with disabilities. But first, let's talk about a couple of things, some of which is common sense. And some of it Ah, I'm guilty of doing myself. So the first thing is gonna be consistent identification. This means the different components or pieces of your Web applications should have the same name or consistent naming conventions all throughout. Whenever we added are a search functionality in our bar are now bar right here. You can see I gave it a value of submit. So if I actually added this search function functionality to the services page, I would give it the same name up top. I wouldn't give it a name of like, for example, go or let's go our find it or anything like that. I would have the same consistent names all throughout. Now the 2nd 1 level a 2.4 point four link purpose. I'm guilty of this myself. So basically, whenever you're using a screen reader, you can hop around from link to link toe link, which is very useful. However, a lot of times people have these text inside of their links that are very ambiguous. So they might say something like, uh, check out our inventory and then they'll have a link and I'll just give it a hashtag right there and then we'll say here. So if I was hopping around on a screen reader, it would say here once I actually focused in on this link right here, so that wouldn't be very clear. So something better would be something like, For example, check out our inventory product listings here, so that would be a better name. Now, I've created a good example of this on our services page, where we have our F A. Q. A lot of times for ethic use. They'll have ah, read Mawr Link like so. So there's a couple of ways to make this link more clear to people with disabilities. The first way is instead of saying read more, I could say something more specific, like read more about our pricing options. Okay, and now that's very clear to both cited and non sighted users. What this link actually does or what it leads to now. Another technique that you'll sometimes see is basically just hiding the text from visual users. That way, you can still just put read more like so and then you're sighted. Users will still know what it's about, but then having some extra text that you've hidden with CSS. So that way screen readers also can give more context to the people that use them. So you can do this with the S are only class in bootstrap. But if you're not using bootstrap, you can do the CSS like so I've written out for you. And as you can see, I have a class of hidden text with all of the CSS you'll need, so you can pause this and copy it if you would like. Then after that, all I have to do is go in here and the read more and I'll make a span with hidden text class. And all it's going to say is read more about the services about free consultations will put it like that. So now whenever a screen reader user hovers over this or focuses in on this link, it'll say, read more about free consultations So those were the two different techniques. Obviously, you would typically just choose one in which is making your link text more explicit. We're using hidden text. I just wanted to use both of them in the same video to illustrate both are possible. 10. 10: now before I told you we would come back to bypass blocks and now is the time to actually talk about them. So it's, ah, level A specifications, meaning that it's basically just the bare minimum requirements for people who have disabilities to be able to use your site. And bypass blocks are basically a way to bypass or a skip pieces of content that are repeated all throughout your website. So a good example of this is navigation. So if a user goes from, let's say, our index page to our services page to our about page, etcetera, etcetera, it's kind of annoying to have to tab through the heading and all of these different links every single time. So what we can do is provide a skip link, which is a way to skip this repeated content and get straight to the meat and potatoes of our Web page. The way we do it is pretty simple. The Skip Link is the first thing that is included in your header, so it will be the first thing that they actually tab on to our focus onto So it will be the first thing they know about and so they can take advantage of it. So first link inside of the header will be a skip link, and what we'll do is we'll give it a hashtag main as the H ref. And if you've ever seen these direct jumps from different parts of the Web page, then they should be familiar to you and we'll call this Skip to were, we'll call it go to main content. This will be very, very convenient for a non sighted user. That way they don't have to listen to search go home about all over again. Now that we've added our skip link, we can go down to our main content and we give it that same class that we specified in our H ref or the same idea of Maine. And one last thing we have to do is add a tab index of minus one. Now I'll talk to you more about what this means for now, but this is basically just so this Skip Link works in all browsers Now, Obviously, when I load up my HTML, this skip link is kind of out of place. It's in the middle of my actual knave bar. So what's typically done is you go to CSS and it's absolutely positioned off the screen. And then whenever someone focuses on it, it comes back onto the screen that way. Typically, only people with disabilities would even know that this link exist. So what we'll do is we'll add a class of Skip Link, Skip Dash Link and inside of here we're going to basically position it to the left 100%. And then after that, we'll go ahead and add a skip Link Focus pseudo selector right there, and we'll actually give it a left of 50%. So that way, whenever the user focuses on it, it actually comes back onto the screen, and we need to position it. Absolutely. So now that we have that set up, the only thing left to do is actually give this link a class of skip link. And then, if we have skip links all throughout, our content will be able to just add this class to our anchor text. So that's pretty much it as far a structuring things properly in general HTML. Now we're going to start to get more specific and dive into things like tables and forms 11. 11: All right, so now we're gonna talk about how we can make tables more accessible. So what I've done here is I've taken two different complex tables from Indian, which we've already talked about before. A great resource for Web developers, especially front and Web developers. However, they are getting more and more into back in development. They have some good tutorials on express in python as well. But what I've done is I've taken these two tables right here, and, as you can see, the relatively complex. Okay, if we look at these inside of our actual i. D. E or a text editor, you can see the It's the same table. But we've got a couple of things going on here. We have a table, and then we have a table head, and it looks like we have two rows inside of our header which actually maps to what we have right here with the clothes and accessories for the 1st 1 And you can see we skipped the 1st 2 columns right here and went ahead and made it stretch across the other five columns for a total of seven and same thing with the second row we skipped the 1st 2 columns, and then we have five different columns for the different types of clothes and accessories . And if we scroll down to the body, we have some more table heads right here. Ah, one for the Belgium, which is apparently where these items were sold and then specific cities inside of Belgium which also constitute columns themselves. And this data is pretty easy to look at Honestly. I mean, it's structured relatively well, so I can clearly see okay clothes, skirts sold in Belgium and verb and the number of clothes that were sold. And so it's really, really straightforward, However, for a screen reader, Ah, complex table like this would be nightmarish, at least. So there's two different ways I want to talk to you about how we can make this more accessible, and I'll talk about the pros and cons of each one. So the first thing we can do is we can add a caption. Okay, the caption is going to be something that tells the screen reader at least what this table is about. And we can even add some stuff in hidden text so we could add, for example, a span and do some hidden text rate here. And then we could add a description like, for example, items sold in various countries. Ah, for our company, our company on, I don't know, close Unlimited. So this would definitely help things out. And obviously this wouldn't take away from a visual users experience because they wouldn't even be able to see it. But it would give a little more detail as far as what's actually inside of the table Now, the first way we can actually make this accessible to users is to add something called Scope, because scope is going to basically be this attribute that I've added right here. And all it's gonna do is basically tell the user kind of how to relate the different pieces of information. So, for example, close right here. I could add a scope attributes and not a spellcheck attributes rather a scope attributes. And I would put this under the category of a column group. Okay, it's a column because it's going horizontally down, and it's grouping together several other columns, including pants, skirts and dresses. So that would be the first thing I would do there. And then, of course, I would also give these a scope attributes equal to column. So we'll go ahead and do a multi line right here. And we would just be adding these for the table headers and right here will give them a scope. Attribute of column scroll down. And as you can see, I have given this one table heading right here, a scope attribute of rope, and I would give this second table heading a scope attributes of rogue group because obviously it's grouping together several different rows of for the different cities in Belgium. Same thing down here. We have ro scope, attribute of row, and then we have scope attribute of Rogue Group because the Netherlands is grouping together several of them. And that's pretty much is so. This is the way that we can actually make different associations between the various columns and column groups. So the attributes we give a scope and we can give it a value of column group if it's grouping together. Columns. Ah, scope, attribute of column If it's just a individual column that maps to certain data and the same thing for row and row group as well now this is good however, it doesn't create very strict associations, and it can kind of fall down when it comes to more specific or more complex tables like what we have here. So another thing we can use is headers and I ds So I've taken the same exact table right here. And instead of making it more accessible with scope attribute, I've done things with headers and I DS. It's very simple. Basically, what we do is we give each of our table headers and I d So with this first table header of close right here of Given it an I D. Of clothes. Pretty logical. Same thing with accessories. Same thing with all of these table headings right here. Pants, skirts, dresses, etcetera. And then what I do is for the table data, not the table header, but the table data. I given an attribute of headers and then I provide a list off all of the different headers that are associated with this data. Okay. And that's why we give our table headers and I d. So that way we can map the table headers. I d to the table data. So right here for the first value 56. This number 56 for pants right here is associated with a lot of different headers. It's associated with Antwerp, Belgium, pants and clothes. And so that's exactly what I provide as a list of I DS and then, of course, for skirts as well. 22. So it would be all of the same ideas except for skirts. And it keeps going like that for dresses, bracelets and rings. Now there's a couple of benefits to this. First, if provides very tight associations or relationships between the different labels and the data for the labels itself. The bad part about this is there's not a lot of room for error. Okay, so you can't have typos. You can't forget a particular idea and things like that. So the good news is, it really helps out with more complex relationships. However, there's not as much room for error, so you're definitely gonna want to take your time. If you're using this approach 12. 12: All right, So now we're gonna talk about how we can make a form much more accessible. So these are all of the different rules we're gonna talk about. Obviously, it looks like a lot, but like I said before, we're going to take it one piece at a time, and then I'll include a checklist at the end so you can make sure you're on point with all of your different Web pages and your accessibility within those Web pages. So the first thing I see here that might be problematic is that there's no labels, and so what? Right now what we're doing is we're using place holders to tell the user exactly what field is supposed to be used for. What information? Now, this is fine for most people who can see really well. But even just using this placeholder text has a couple of problems. First, the placeholder text is really faint. So if someone with say, ah, vision problem, not necessarily blind, but just has a hard time seeing this really faint text might not be great for them, and this actually falls in line with the first thing which is contrast. So ideally, you want to have a contrast ratio of between 4 to 5 toe one, and so that way it's very clear whenever you're using text, what is being said? It's very easy to actually see the text on top of that. Whenever we use this, let's say we're using a screen reader and we go to the first input and its user name, so we type in your user name and then we go to the next one and then we go to our email and so on and so forth. That's all well and good. But if we tab back over to the user name inbox or input bar, excuse me, all of that information is gone. And so the user might not actually know what this input is for now, especially if they forgot what they typed in or something along those lines. So an easy way to actually fix this up would be to just add labels, and I would make it a lot better. Another thing is name, role and value. So this is mainly for people who are making their own actual widgets, their own actual custom components, which I might be doing a course about By the way, I'm pretty excited to do that, working with Shadow Dom and whatnot. Ah, but mainly what this is about is making sure that whenever you make your own widgets or your own components, it needs to be accessible. So if you're making, like, custom react components or custom angular components, those things still need to be accessible to. Last thing I would say is for now, at least in this video is this form is kind of big. It's got a lot of different pieces, So a really good way for us to actually help make this more cohesive or more digestible is toe actually divide up the sections of the form according to what the information relates to, so we'll see about that in the next video. 13. 13: Okay, so the first thing we'll do to make this better is we'll go ahead and add labels for each one of these. And obviously, this is gonna be a little time consuming. So once you get the idea, you can obviously skipped past this. And why is Emmett not working there? We g o So I'm just gonna go and copy this and then paste it in for every one of them. So we'll go to email and we'll get a phone number and we'll go to That's about it. So on, then I just need to associate them so I might do something like name in the name here and then add the i. D. And it would obviously go on like that for a while and then name now. Another way I could do this is I could also do what's called an implicit label, and as its name implies, it's just a little bit of a difference in text. But it's pretty similar in principle, So all I would do is essentially a wrap. The input in a label elements so we can do that right now with just a label like so, get rid of the four, then go inside of it and hit Enter. And then I'm just gonna copy this right here. So just to shift up, copy or cut and throw it inside right there and we can do this for every one of them. So we would just do label and then get rid of the four. Open it up, make another label, and there's really no difference. Most of the time, I really prefer to use an explosive label just to make it clear. But for the radio buttons, I'll do on implicit label because of what I talked about before, which was the fact that basically, this is a pretty big form. So a lot of times when you're working with a big form, it helps to group different sections of the form together. That way, it's nice and clear what each part of the form is. Four. So we'll click right here at this together and the last thing for me to do in order to group this section of the form together we use what's called a field. So we just do a field set, not a field lips field set. There we go. Field set there it is. So now that I have this field set, all I have to do is put this group of radio buttons together. A lot of times you'll use field sets to group together things like addresses. I know this is kind of a contrived example, but let's say you had a shipping address and a billing address. You would definitely want a section that up with the field set right here, and this will help you organize different parts of your page. The last thing we can add to this fuel toe is a legend tag, and this is basically like a label, but for an entire group of form elements. So we'll just add legend like so And then we can put phone number types like So now that we have that, it's a lot easier to live breed. And if we reload our page, you can see it even gives us a little styling for the field set. But now this would be much, much easier for a non sighted user toe work through. He understands what the different radio buttons therefore, and obviously we could add text each one of them so we could do work like that, and if we reload it now, it'll add and work right there next to the radio button. And we could do the same thing for home and for the cell. And now the field set or the legend of the field set needs to be first. OK, so that's one important thing. It has to be the first element in the field set, but now the user has a lot more context about what the's radio buttons actually do, and he can easily associate the label with the input itself. Now, another problem with this form is most of the time certain parts are required, but other parts are not required. And whenever I hit submit, I have no idea which part is required in which part is not required Now. Obviously, this is a pretty big subject because we're talking about error handling. But for now, we just need to know that if you can try to provide them with information whenever they don't fill in a certain input, where they fill it in incorrectly, if you can try to provide them with an error message, and if you want to let them know that they didn't fill it incorrectly. Don't just use colors. A lot of times, I'll see people use something like red to let them know that they didn't feel in the input correctly. Honestly, the color red is pretty useless to a blind person, or even a colorblind person might not even see that. So definitely make sure to include something like textiles. Well, toe, let them know that they made a mistake and they need to go back. So for now, what we can do, aside from that, since air handling is outside of scope, is we can take this paragraph tag right here, and we can put it outside of the form. I put it inside of the form, and the problem with that is whenever you're actually in a form, the screen reader enters for mode. So it knows that you're not trying to discover new information about the page and knows that you just want to fill out inputs. So this would basically be ignored by the screen reader, and it's pretty important information telling the user to fill out the form so we would put it outside of the form tag right here. Another problem with this text right here is that it says, please fill out the required form field and click the blue button. So this goes against a couple of guidelines right here. You're gonna try not to use things like sensory characteristics. So describing things like, you know, click the red box to the right click the big blue button down below. Those were all based on, like, position and how it looks, and that's not very helpful to someone who can't see. So we can just go ahead and delete this right here, right after form fields where it says, click the blue button. So we'll get rid of that real quick if I can. And then it says right here, fill out the required form fields. But I have no idea which one is required. Now, we talked about how you would do error handling. Another thing you can do is something very explicit or very verbose. So in the label, you could put an asterisk and put something like required. Obviously, this is a very verbose thing to do. Ah, you could also put an asterisk just so long as you explicitly explain what the meaning of the asterisk actually is. But with that being said, we've just about made this form a lot better. Now we're gonna talk about a couple of other things we can do to take it one step further. 14. 14: So another thing like I said that would make this form a lot better is if something was invalid if I knew what I did wrong and how to fix it. Now how you do error handling is completely up to you and out of scope for this course. But for what we might do, we could do something like, for example, a span. And we would add something like, for example, a class of error message. So the error message and you would say something that maybe name cannot cannot be empty. And on top of that, you might add something to the input element Lincoln Aria attributes. And you could do Aria invalid and you could set that equal to true. And this is basically a way of letting a screen reader user no like, Hey, this is not correct. And you would, of course, dynamically insert these messages and this attribute of aria invalid using JavaScript. So the way you handle that is up to you now. On top of that, another thing that would be very helpful to someone with a screen reader is sort of a summary of all the things they did wrong, not exactly the nicest way to say it. But you could do something like, for example, a section, and then you would give it maybe an I D. Of errors. And then after that, you would give it a label of aria Dash Live instead of equal to assertive. Now Ari alive is considered a live area, and what it does is since a section is typically not part of a form, it would be ignored. But by putting Ari alive right here, you're allowing the screen reader or telling the screen reader toe Let the user know that this was updated on the form and you need to check it out. The next thing we need to do is add a tab index and said it equal to negative one now. I talked about the tab index before, but I didn't really say what it did. Essentially, what it allows us to do is control the focus of our form or of our Web page. So there are two main values that you'll set it to. The 1st 1 is zero, and the 2nd 1 is negative one. By setting into tab index negative one, you're essentially taking it out of the typical tab order, but it is still accessible, and you're able to focus on it in via JavaScript. Zero does the same thing. It allows it to still be focused via JavaScript, but you're still keeping it within the typical tab order. So by setting it to negative one and setting it to aria live assertive were essentially allowing the screen reader to let the user know that dynamically, something was changed in the form. And we can include a list of error messages like your user name is empty, your email is empty, etcetera, and this tab index helps the screen reader to focus on this particular part of the form. And you would control the focus via, you know, javascript or something along those lines, because the TAB index still allows this piece of the form to be focused in on 15. 15: now one last final thing I'll show you to make this better is we could actually include a couple other things to let the user know that it's required and to make sure that the default html doesn't interfere. So we could put the required attributes on all of the HTML inputs that are required in a screen. Reader will actually be able to access this information so they're very clear, and they completely understand that something is required now, aside from that, we could also include on the form element itself on attribute called No validate. Now, the reason we do this is because if I don't do it and I say this and I reload, we should get some balloons. And we also get this red hue right here, which for a non sighted user, it tells them nothing. But if I click right here you see, I get this nice balloon right here, Fill this in, go to the email and then tried to hit it again. And I get this nice balloon. As of the time of making this recording, these balloons are non accessible to screen readers. So in other words, they will have no idea that there there. And that's why we include the span error messages that we talked about before, as well as the list of error messages at the very top, which will be ah, focused on. And speaking of focus, another thing to make sure to avoid it to make sure that it's accessible to people with motor disabilities is whenever you're controlling things like focus, make sure that a user can always tab through your website so they can always navigate your website with just the keyboard. And that way, if they're able to tab into a certain thing or focus in on a certain thing like the section element right here, they're also ableto actually tad out of that some of the common things that cause people to get into these keyboard traps where they can focus on an actual element but they can't focus out of it is things like hijacking the focus, things like, you know, what, JavaScript or some responsive design best practices create keyboard traps, which will talk about here in just a moment 16. 1: all right, so there's a couple of things that we need to talk about with media. One of the main reasons that the Internet really caught fire is with the addition of media that is images, videos and things like that. And if we use things like images and videos in our websites, which we probably will, we need to make sure that people with visual disabilities and things like that can still access and make full use of our website. So there's a couple of different guidelines to talk about, but they're pretty straightforward. The 1st 1 is level A 1.1 point one, which is non text content. All non text content that is presented to the user has a text alternative that serves the equivalent purpose. So all this means is, whenever we're including things like images, we include things like an altar attributes. Now, one of the things to know about the altar attributes is that if you include an altar attributes and you leave it empty, a screen reader will consider it decoration. So as you can see with this header right here, I've included a logo, and I've also included unaltered attribute, even though I've left empty. So a screen reader will now treat this as decoration, which is exactly what I want, because there's really no purpose. And then, let's say I wanted to add a big banner that showed a bunch of cool designs. What I might do is add that up in the main content right here and then at an image, but what a lot of people would do with their all Texas. They would say, This is a picture of, ah, cool designs, okay? And this is definitely not what you want to do. So this goes into images of text. If technology is being used, can achieve the visual presentation. Text is used to convey information rather than images of text. So what this means is, whenever we're conveying information to users, we do not want to convey essential information to people with images, or if we do, we need a text alternative that a visually disabled person could still take advantage of. So, in other words, make sure whenever you're using images, you're not using images as a fundamental way toe. Operate the website or learn about how to operate the interface. Now what I was saying before is that a lot of people make mistakes like this whenever they use their all text. So I've included a couple of guidelines for whenever you're filling out your all text first , don't describe the image literally. So if I had a picture of a house, I wouldn't say this is a picture of a big green house with a brown roof, not at all what you want to do. Instead, what you want to do is describe the meaning or the purpose of your image and include any text is well, that might have been included in your image. So what I might say instead is design is what we do live and breathe. So that more clearly expresses the message I wanted to convey with this particular image and as a side note. For those of you who like to know about S CEO, all text is also a good place to put some longer tail keywords. I definitely wouldn't put my main keyword in the old attributes, but you could definitely put some long tail keywords in here as well 17. 2: now, another common way that we apply images in our websites is to use CSS background images, and it's a pretty common technique to use things like sprites so we can cut down on network requests. One of the problems is Let's at a rapper class inside of this HTML document and then inside of here I go down and I had a background image to my rapper class so we would do something like Background slash image perfect at E u r O. And everything would be all well and good in the world. However, someone with a screen reader would have no idea that there is an image right here because there's no text. So one of the things we could do is actually make an image tack with some all text, and then the screen reader would be able to read that all text as long as we don't leave the Ault text blank. As we're doing right now, however, that's not really what I want to do. I'm trying to cut back on network requests, and every single time I add an image. It's an extra network request. So a great alternative to this is the hidden text technique that I showed you before. So what I could do is add a span with hidden text. And, as you can see inside of the CSS, it's the same CSS from the other video I showed you so inside of here I could write extra information to give the screen reader users some context about what the actual image is, or, more importantly, what meaning the images trying to convey. 18. 3: Now what I've done here is I've essentially added an SPG that basically just creates the Google plus icon. Now, from a screen readers perspective, this is not very helpful. And honestly, it might not even know that this SPG is an image. So that is a lot of things we could do to make this better. First of which we can add a role attributes to R S V. G and just call it image. And that'll tell the screen reader that this actually is an image. Aside from that, within the SPG opening and closing tags, we can add a title tag not to be confused with the title Attribute that you'll find on things like anchor tags. But what we can do now is we can add something like, for example, Ah, go to Google Page And this will be a little more helpful for the screen reader because now what it's gonna dio is it's actually gonna read the title of this image to the user. In that way, if we turn this SPG into a link, it would be a lot more helpful to the user. Now, aside from that, we can actually do one more thing. We can actually associate the SPG with this title just to make it abundantly clear to the screen reader that this image is associated with this title. So we'll use Aria labeled by and then we'll set a equal to Google Page. And then we can do that by adding an I d to the title, and it will be the same. Exact thing is what we put on the Oriole labeled by perfect. So now the screen reader knows that this is actually an image, and we have the S V g actually associated with the title. So now everything is crystal clear. So if we turn this into a link, even though it's a link that is an image, it is still abundantly clear to people with screen readers what it leads to and the purpose of it. 19. 4: all right. We've pretty much covered images and how we can make our images more accessible to people with visual impairments. Now I want to take a second and talk about audio. That is, people with, ah, hearing problems and things like that. So what we're working with here is level A 1.2 point one, and basically what it states here is for all pre recorded audio and video content. An alternative is provided that presents equivalent information. So I wanted to handle video in a separate video. So I'll just talk to you about audio, right? So, namely when we're working with audio, it may be something like a podcast. It may be something like a musical piece. It could be any number of things, typically, what you'll do when you're handling things like podcasts or even videos that have audio content in them. You'll be creating a transcript. Now there's a number of different ways that you could go about doing this. Um, you could have a paid service for creating transcripts. I know there's businesses that offer that service. Typically, that would be for larger projects, though there's a lot of other ways you could do it. So one thing is speech recognition software. I know Google Docks has voiced typing. You have Windows speech recognition. You also have apple dictation, which I spelled incorrectly. And aside from that, you can also, for example, upload a YouTube video. And if you have an audio Onley video that you upload, it will actually provide a transcript for you. If you turn on the settings now. Obviously, I'm not going to go into detail about that. But all you have to do is Google how to use YouTube for transcribing. And the last option would be, of course, to manually do it now. A couple of tips for you as far as transcribing, I would say, include the names of the speakers, though it has more context and try to describe not everything. But, you know, we communicate not just with our words, but also with our tone, our intonation, how we're sitting, whether or not we start to speak faster or slower. So try to give as much detail as you can whenever you're actually transcribing things, because there's a lot of little nuances that might be missed if you don't now, as far as actually presenting these transcriptions to your audience who has hearing problems. You could do it in line, so that would be like right after the audio. Or another option is to link to the transcript. So I would recommend putting the link directly after the audio clip or the podcast. So that way it's very easy. And the to the link and the actual podcast itself are associated with each other.