Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. Instructor Zoe Gillenwater explains the concept of accessibility as it applies to the web, and describes how it affects the audience. She also covers how to set up accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials.
>> A common type of navigation menu that we haven't yet created in this chapter is the fly out menu, also called a drop down or rollout menu. This is the menu where each of the items displays a submenu of links when you hover over the item using your mouse. They're popular because they allow you to add a lot of links to the page without having to find spaces for all of them to show at all times and they decrease the number of clicks it takes to get to a page buried in the site. Whatever the reason a fly out menu is chosen over a traditional menu, they pose a number of accessibility problems.
This is another topic that overlaps heavily with usability, so we'll focus just on the issues with fly out menus that cause particular problems for people with disabilities. One problem is that they require a lot of fine motor control in order to operate them properly. You have to move the mouse in just the right sequence and without shaking in order to not accidentally mouse off the item and cause the submenu to close or to trigger another item that you didn't want. It's especially hard to use vertical fly out menus where the menus appear to the right of each item. Another problem is the huge number of links that are in fly out menus.
Screen readers and keyboard users will have a huge amount of content to tab through. Skipped navigation links can help them get past the fly out menu, but what about when the user doesn't want to skip it, but wants to get to an item in it. If the item is near the end of the fly out menu they're going to have a lot of tabbing to do before they can finally get to it. It's also worth noting that the huge number of links you're adding to each page with a fly out menu will increase your page weight, download times and bandwidth usage. It can also negatively impact your search engine rankings by lowering your keyword density and moving your main content further down the page.
Another accessibility problem with these menus is that the sub menus may appear outside the visible range of the user's device. This is especially true if the user has a very narrow window or if they're using a screen magnifier and they're only seeing a very small area of the screen at one time. The sub menu may be completely overlooked or it may be seen, but the user is not able to access it because in order to do so they'd need to scroll horizontally and as soon as they do that they have to take the mouse off of the top level item and the sub menu would vanish.
So we're able to select the links in the sub menus, but we can't see what we have selected to know if it's what we want. Hit tab three more times on your keyboard. Finally on the last tab, we're back to item two being highlighted. We had to tab through all of the invisible links in the first sub menu before we could get on to the second top level item in the menu. You can see how confusing and frustrating this would be for a keyboard user. So already the spry menu has failed. Let's continue testing the next two scenarios.
For times when you do have to use them, we looked at how to test and evaluate a fly out menu to see if it works in the base scenarios necessary for a minimum level of accessibility. Since spry menus don't pass these tests, we'll need to turn to another fly out menu system that is more accessible to more users.
There are currently no FAQs about Web Accessibility Principles.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.