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.
>> Let's look at how someone using a screen reader would experience a web page that is inaccessible and the improvements that can be made when accessibility features are added. We are at the W3C's web accessibility initiative website at www.w3.org/wai/eo/2005/demo. On this page are a series of links to inaccessible web pages as well as links to the same web pages with accessibility features added.
But for now, I just want you to sit back and get a sense of the experience of having a disability and using a screen reader to access a web page. Let's scroll down the page, and underneath the heading demonstration contents are the listing of pages that we can look at. I'm going to go to the Inaccessible Homepage link. This is a fairly common type of website that you may find. It has a logo on the top left corner identifying the name of the site that we can immediately see. This is also evident in this large heading text in the middle of the page.
We can quickly get a sense of what the sections of the website are by looking in the left-hand column at the four links listed; home, news, tickets and survey. And we can see what the main stories on the website are in this middle column with these three headings: Heat wave link to temperatures, Man gets nine months in violin case, and Lack of brains hinders research. Another thing that we can view on this web page, if we scroll down, is some brief text about each of these stories and a link that says More that we can click on to read the full story.
Now we're going to look at this web page with a screen reader. And I would like you to pay attention to these same parts of the web page that I have pointed out and see how the screen reader reads this and the information that it gives to the user. (Start Screenreader) >> Jaws 40 minute loads dot dot colon colon city lights colon colon colon dot dot dot dash Mozilla Firefox combo box to left's click menu dash dash greater traffic colon construction work on main road to date colon Monday 03 September 2007. Sunny 23 degrees see traffic colon construction work on main road to date colon Monday 03 September 2007.
Sunny 23 degrees see link graphic pics slash nav underline mouse over. Link graphic pics slash NAV underline news on mouse over link graphic pics slash NAV underline fax on those over link graphic pics slash NAV underline survey on mouse over welcome to city lights. City lights is the new portal for visitors and residents. Find out what's on book tickets. Tell us what's good and what's not. Get the latest news. Link heat wave link the temperatures. Link NAV gets nine months in violin case. Link lack of brains hinders research.
After three years of efforts, city scientists now agree that the primary cause of the 2003 heat wave was hot air from our link graphic pics slash on mouse over mayor colon these kinds of crimes need more creative effective punishments. For example, we could require compulsory link graphic pics slash on mouse over brain. >> (End Screenreader). I've stopped the screen reader from finishing to the end of the page now that you've had a chance to hear it. Let's now look at the same version of this page that is more accessible and listen for the differences in how the screen reader reads it.
I scroll to the top. There's a link to the accessible version of this same page, Accessible Homepage. >> Accessible homepage link. Welcome to city lights. Traffic colon construction work on main road to date colon Friday 27 January 2006. Sunny spells 23 degrees. See navigation menu colon. List of four items home link news. Link tickets. Link survey list and ten in level one. Welcome to city lights. City lights is the new portal for visitors and residents. Find out what's on book tickets.
Tell us what's good and what's not. Get the latest news. Head in level two link heat wave link to temperatures graphic man with giant head after three years of efforts, city scientists now agree that the primary cause of the 2003 heat wave was hot air from dot dot dot link heat wave dash. Link full story head in level two. Link man gets nine months in violin case. Traffic A violin case open for inspection complete with violin mayor colon these kinds of crimes need more creative effective punishments. For example, we could require dot dot dot link violin case dash.
Link full story head in level two. Link lack of brains hinders research traffic A brain. >> So as you can see on this web page, it looks almost exactly as it did before, but you heard a number of changes in how the screen reader read the page. First of all, when it read the navigation bar on the left side, it didn't read extra information about each of the images. But instead, said link home link news link tickets link survey. It also announced how many links were about to be read before it began reading them.
Another change that you probably noticed was that it read each of the three headings, then read the caption below the picture. These small changes made the information on the page clearer. And it also took less time for the screen reader to get to the important information. It had less unnecessary characters and images to read through before it could tell the user what the names of the links were, what the names of the stories were and how to get more information on the site. So this is just one example of how small changes on a website can make a big difference in the experience of browsing a website and using it to get information.
Hopefully this shows you the great benefits that can come from accessibility to your users. There's also great benefits from accessibility for you and for your clients. We'll talk about those benefits 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.