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.
>> People with and without disabilities use the titles of web pages to uniquely identify each page from each other, whether that's within their bookmarks list, browser tabs, or task bar. It provides the basic information about what the page is about, and where you are in the site. Because of that, it's very important to use meaningful text. As you saw in previous movies the title is the first thing that is read by Jaws. So you want to make the title informative, but not too long. Put the most important information at the start of the title.
That means there's less for a screen reader user to listen to, and it's faster for them to identify what the page is about. So put the name of the specific page you are working with first in the title and then put the site name. This will be less annoying not having to listen to the name of the site repeated over and over again as the user views various pages throughout your site. They can just listen to the start of the title being read, then skip over the rest and get straight to the content of the page. This also makes it easier for sighted users too, as the amount of space in each browser tab or block on the task bar is very limited.
So with the most important information shown at the beginning of the title, it's easier to know which page is which. This is our visitor's page in the site. So we're going to give it a title of visitors, and then town of Wardscott. Click on the title field in the document toolbar. Highlight over the default text untitled document, and hit back space or delete to delete the text. Type in visitors, then put pipe character, then town of Wardscott.
Another accessibility consideration with titles is the character that you use as a separator. Here we've used a pipe character. In Jaws this is read out as vertical bar. If you use special characters as a separator they could be read as a long string of words by Jaws. So stick with something simple, like the pipe character, a dash, or a dot. If you do need to use a different type of character test it in Jaws to see how it will be read. With both our language and title setup, our page is now ready for its content.
Next we'll add some real text to the page and look at how to set the headings and paragraphs correctly.
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.