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.
>> Lists are another element in HTML that add structure to your text and provide information on how pieces of information relate to each other. They can be incredibly important to screen reader users. When a list is marked up correctly, many screen readers will announce when it comes to the list and say how many items are in the list. The user can then decide whether to skip over the list or not. If text is only given the appearance of being in a list, but not actually marked up as one in the HTML, the user will not be told when the list starts and will have no idea how much longer they have to sit through the reading of the list.
If you're following along with the exercise files, open visitors.html in Dreamweaver. It's located in the 04_10 folder of the chapter four exercise files. In design view, scroll down the page to the events section. There's currently a block of text that is made to look like a list but has not actually been marked up as one. The three items under the sentence Wardscott's Annual Events include, just have dashes written in the text to make it look like a list and line breaks at the end of each line.
This text should be changed to an unordered list. An unordered list is used to markup a series of information where the order of the items in the list is not important. It's rendered by default with bullets. You create an unordered list in Dreamweaver in the properties inspector. The button showing three bulleted lines turns selected text into an unordered list. The button to its right shows number list items. This is used to make an ordered list, which marks up a series of information where the order of items is important.
It usually shows a progression or sequence and by default it's rendered with numbers or other sequential markers such as letters. Before we click the unordered list button to change the selected text into a list, we need to make some changes to it. Place your cursor before the text Wardscott Heritage Festival. Use the backspace key to remove the dash at the beginning of that line as well as the line break between the sentence that precedes it then hit enter or return to create a new paragraph. Repeat this process for the next two lines.
Remove the dash, remove the line break and then hit enter to create a new paragraph. This is the ideal starting point to create a list in Dreamweaver. Highlight over these three new paragraphs. Now you can click the bulleted icon on the properties inspector to create an unordered list. Dreamweaver changes each paragraph into a list item within the unordered list. Let's see how screen reader may handle this list. Click on the globe icon in the document toolbar at the top of the window.
Select preview in Firefox from the menu. You'll be asked to save the page, so click yes. You can scroll down the page and see our bulleted list. Now let's launch JAWS and see how it handles the list. If you're on a MAC, you can use the voice over screen reader to read this page, but keep in mind that it doesn't currently announce when you're coming to a list or how many items are in the list. To launch JAWS, go to your Start menu and click on JAWS in your programs list.
>> Digital Voice: JAWS 40 minute mode. Desktop. To move between items press the arrow keys. Page has 8 settings and no links. Visitors vertical bar Town of Wardscott heading level two section navigation. >> I just pressed the control key to stop JAWS from reading the entire page. What we're interested in at this point is how it reads the list. To jump directly to the list press the L key on your keyboard. I'm going to do that now. >> Digital Voice: List of three items. >> As you heard, JAWS announces that it is a list and how many items are in it.
If we are interested in hearing this list, we should press insert and the down arrow to make JAWS read from this point on the page onward. If the list was very long and we didn't want to read it, we should press the D key on the keyboard to move to the next different type element. In other words, the next element on the page that is not a list. So we've just created a basic unordered list and seen how it can be used by a screen reader. Next we'll change the visual style of the list using CSS.
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.