Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
>> Traditionally, web designers have used HTML tables for defining the layout of the page. However, using tables for visual formatting not only violates the practice of separation of content and presentation that we talked about earlier, but also can provide problems for screen readers and text browsers who need to reflow The page in a linear way, as well as people who prefer to read web pages at very narrow width, such as people with tunnel vision or dyslexia. Screen readers method of reading table context is called linearization.
They basically read from top to bottom and left to right. They start in the first row, read every cell in that row in order, and then move onto the second row and so on. If there's a nested table in any of the cells that whole nested table is read following the same order before moving onto the next cell. So the order the content appears in the source is the order that it will be read. To check your reading order, then, you just need to look at the source. But you can also use some of the tools that we went over earlier. You could use Jaws or another screen reader, of course, or you could use Lynx, a text browser, or the Firefox extension Fangs, which outputs a text version of your page.
Let's look at a couple examples of simple tables to make sure we understand how they're going to linearize. If you're following along with the exercise files I have open Table1.html and Table2.html from the Chapter Three exercise files. Table1.html is a very simple table. In this table the first cell that would be read would be the top left cell, with the text name of the site. The next cell that would be read would be the next one in the row. So it would be the second cell with the text tag line. The third item read would be the third cell in the first row with the text search bar.
After this row is completed being read the screen reader would go onto the second row starting with the left-most cell, navigation menu. Then it would read main content, then it would read featured items. So in this simple case the linearization is probably OK. It will probably make sense to people using a screen reader or text browser. However, the user would have to listen to the entire navigation menu read before they got to hear the main content. If there are a number of items in that menu that could become a problem.
There are ways that we can get around this, as we'll talk about in later movies. But many times linearization disconnects related content from each other so that it doesn't make sense, or it makes the user hear even more less important content before they finally get to the content they were wanting. Table2.html is a slightly more complex table that illustrates this. It's the same table except in the main content cell another table has been nested within. This table also has two rows and three columns. The order that this content would be read would be header 1, then header 2, then header 3, followed by the story 1 text cell, story 2 text, and finally, story 3 text.
So this example shows headings disconnected from their content. So the text that will be read doesn't have the correct context and probably would be confusing. It could also even be misleading depending on the text of the third header and the text of the story 1 content that would be read in order. Although there are changes that we could make to the table itself to make this bad example linearize better, many real-world sites are too complicated to modify for compliance. In those cases, CSS should be used for laying out the site. We'll talk about that next.
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.