Accessibility

- [Instructor] One of the things you can do easily in both Flexbox and Grid is to change the order of elements on the page. Now this seems really useful, if say you wanted to move something from the header to the footer based on view port size. But there are a few issues that you need to worry about, first keep in mind that people who are blind may be accessing your page with a screen reader that reads the text out loud to them. A screen reader won't take into account any of the CSS you are using for a layout so it will read the content in the order it is in the HTML. That's why you should always create your HTML in a logical order before you apply any CSS.

But even if your source code is in a logical order moving things to different positions on the page can cause problems for anyone who is using a keyboard to navigate, you might do this yourself sometimes if you're a so-called power user because it's often faster between keyboard and mouse. Most of the time you can easily navigate from one selectable element to the next using the Tab key but sometimes if a webpage isn't designed or coded correctly it might be difficult or impossible to navigate through the page in this way. Many people have difficulty using a mouse because of a disability or because using a mouse requires movements that are painful.

It's really important to make sure that these users are able to successfully navigate your webpage using a keyboard because they might not have another option. Another group of people to consider is those who use speech recognition as their primary or only means of using a computer, the way this works is they have special software that recognizes voice commands such as press Tab or press Enter. Although they are not using a physical keyboard, the way they use the computer essentially mirrors keyboard navigation. Tab order is the order in which elements receive focus as the user Tabs through the page.

It's important to keep this in mind as you're creating a layout. I'll show you an example of how this works. Once you open a webpage you can start clicking Tab to navigate to selectable elements on the page, by selectable we're referring to any element you can take action on such as links or form fields. One note, tabbing doesn't work by default in Firefox and requires changing browser settings. So you may want to test Tab order in Chrome or another browser. Here I am on the page, when I hit Tab for the first time, it brings me up with this hidden link in the top-left corner that says Skip to main navigation.

It's hidden by default to anyone viewing the page but it becomes visible when it has focus. We can click enter to skip ahead to the main navigation section of the page from this link. Two more hidden links are in the same place, as I keep hitting tab, to allow me to skip directly to search or to the main content. After that, the Tab key takes me to the selectable elements on the page in the order they appear in the HTML. You can see what element we're currently on because it's outlined in blue. This is very important to users who are tabbing through the page, because otherwise they don't know where they are.

If you change the outline property in CSS make sure you're not doing something that makes focused elements no longer visible. As we Tab through this particular page, you can see now I'm on hours and location on the top right, it's very easy for us to see where we're going because the Tab goes in a logical order from left to right, and top to bottom. The issue we might run into when we're layout, is when we change the order that elements are displayed on the screen, here is an example. Here's a simple page using Flexbox for layout.

In the HTML when I scroll down you can see that I have five elements in order, one, two, three, four, five. If I go here to the browser and Tab through the page you can see them selected in that order, one, two, three, four, five. Now using Flexbox or we can do the same thing with Grid we can change the order of how the elements appear on the page, we'll actually learn the code for this in a later video but for right now all I'm doing is making element five appear first, and element three last.

So to do that I'm just giving the class of item five an order, of negative one and then the class of item three an order of positive one. Save, refresh over here. Now when we Tab through them you can see they still tab one, two, three, four, and five even though they're in a different order on the page. So as a user we would expect that our tabbing would start at the top and go down, or start at the left and go right so this could definitely be confusing.

Here it's not too bad, because there are only a few elements close together, but imagine you're on a long webpage with dozens of elements in a complicated layout. It would be really difficult to find your place on the page if tabbing jumps you to a totally different section of the page, or imagine you're trying to get a particular element on the page, but it's skipped over as you're tabbing and you can't figure out how to get there. Another issue that comes up when you re-order things on the page is it can make it difficult to select text on the page. So if you try to select multiple elements, like you want to copy and paste it will only select them in the order they are coded in the HTML.

So for example, here let's say I wanted to select two, and four I can select two but when I try to go to four it highlights three before I get to four even though it's in a different place. An average user of your site would have no idea why select and copy aren't working correctly. There isn't a magic answer here you just need to be aware that this can be a problem and always design layouts with this issue in mind. Test out the Tab order on your layout and make sure it makes sense. If the Tab order has you leaping from the top to the bottom of the page that's generally not OK.

Always keep in mind that your goal with responsive layout is to make the site work as well as possible for all users.