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.
>> Both section 508 and WCAG guidelines recommend providing a way for users to skip over groups of links. Sighted users can scan the page with their eyes to find the information that they want quickly. Users with screen readers and other assisted devices do not have this visual scanning ability they are going to have to hear the logo and navigation read out to the each time they access another page in our site. We've seen that grouping links into list can make it easier for screen reader users to jump pass an entire nav bar.
However not all screen readers maybe familiar with this function if it is even exist in there screen reader. The voice over screen reader on the MAC doesn't currently announce list or offer any special way to jump past them. The inability to skip repetitive links can also be a problem with mobility impairments who use the keyboard to navigate instead of a mouse. Imagine you have a form on your page that a user wants to fill out, a keyboard user can't just use his or her mouse over the first field click in it and start typing, instead the user has to tab trough all the links until he or she finally arrives at the first form field.
So this is where what is called a skip navigation link comes in. this is simply a normal link that is placed at the top of your page and is linked to the spot further down your page where the content starts. When a user encounters this link he or she can follow it directly to the content or ignore it if he or she wants to use the nave bar or the other content at the top of the page. If your following along with the exercise files open visitors.html in Dreamweaver from the 04 05 folder in the chapter 5 exercise files, we are going to add a DIV with skip navigation links in it at the top of our page.
Go to the insert toolbar and click on the layout tab, then click on the insert DIV tag button just to the right of the button labeled expanded. In the insert DIV tag dialog box click on the arrow of the insert menu and choose after start of tag and then in the adjacent menu select DIV ID header, this will place out new DIV immediately inside the top of the header DIV. In the ID box type skipLINKS then click the new CSS style button to bring up the new CSS rule dialog box, choose advanced as the selector type, leave the default text that Dreamweaver puts in the selector field a pound sign and then skipLINKS intact and also leave this document only selected for the define in option, click okay.
The only change we are going to make at this point is positioning the DIV. We're going to give it a value of absolute. As we talked about earlier with our off left positioning method absolute positioning pins an object to a particular point on the page and takes it out of the flow so that it doesn't interfere with any of the content around it. We don't want out skipLINKS to push our logo further down in the header DIV, so we want to get it out of the flow by using absolute positioning. Click on the positioning category in the CSS rule definition dialog box, in the type menu click the arrow and select absolute, now click okay.
We're back at the insert DIV tag dialog box. We've already chosen the settings for this DIV so click okay. The DIV is now added to the top of the page with placeholder content. It didn't move the logo down because it is absolutely positioned. We now need to add our links inside this DIV, if you are using the exercise files open document skipLINKS.doc in Word. There are actually two skip navigation links listed in this document. One is going to skip the user directly to the main content.
This is where the user might want to go most of the time. But they may also want to go straight to the section navigation if they are looking for a particular link. So we're also going to offer them a skip to section navigation link. Both of these links will let them bypass the main navigation bar. Highlight over all of the content in the document and hit control C or command C on your keyboard to copy it, go back to Dreamweaver. Highlight over the placeholder in the skipLINKS DIV and hit control V or command V on your keyboard to paste in the new content.
Now click on the code button in the document tool bar. We want to make sure that the content pasted in correctly. We do have a list and two list items as we wanted. But again we have an extra UL tag at the start, so delete this line of HTML. Now click on the design button in the document toolbar. We need to link each of these pieces of text to the appropriate spots furthers on the page that we want them to go to. We don't need to create new anchor elements on the page to do this. Instead we can link directly to any ID attribute on any page.
Our main content DIV has an ID of main content set on it. So in order to jump to that DIV all we need to do is link to that ID. Highlight over the text, skip to main content. In the link field of the properties inspector type #mainCONTENT this is just like creating a link to an anchor on the page but it saves us from having to add an additional HTML element to our source.
Now highlight over the skip to section text in the skipLINKS DIV. in the link field of the properties inspector type #sectionNAV this will jump us directly to the section DIV inside the side bar. Now we can begin styling these links. Click on the new CSS rule button at the bottom of the CSS styles panel, leave advance chosen as the selector type and delete the text in the selector field, type in #skipLINKS UL click okay.
In the CSS rule definition dialog box chose the box category. Leave the same for all boxes checked under both padding and margin and enter zero in the top fields for both of these. Now click ok. Next let's style the list items, click on the new CSS rule button on the bottom of the styles panel. Leave advanced selected at the selector type and clear out the default text in the selector field, type #skipLINKS LI leave this document only selected and click okay.
We want each of the list items to sit side by side instead of stacked on top of each other. To do this we can use the float property as we did before but this is going to interfere with some styles that we will add later. So another option is to set the display property to inline. As we talked about earlier, blocked display items stack on top of each other where as inline items sit on the same line as each other. So click on the block category on the CSS rule definition dialog box, in the display box click the arrow and scroll down to select inline.
Next go to the box category, leave the same for all box checked under margin and enter zero in the top field. For padding uncheck the same for all box. Now that the list items have a display value of inline, they will butt right up against each other so we need to add some padding between them, we'll add it on the left side of each list item. In the left box under padding type .5 and in the unit menu next to that field select em's, this will make sure that at largest text sizes the spacing between the items will also grow to be larger to make sure that it is still readable.
Finally click on the background category, we just need to remove the bullet flower image, so click in the image background field then click okay. Next let's style the links, click on the new CSS rule button on the bottom of the CSS styles panel. Leave advanced selected at the selector type and clear out the default text in the selector field, type #skipLINKS A leave this document only selected and click okay.
All we are going to do here is change the color from the default blue to white so click on the color picker next to the color field and chose white then click okay. The links will now work and are styled but we could position them in a better place in the heading to make them more readable. Right now there position is conflicting with the photo we have in the header. Let's position them on the right side of the screen at the bottom over the water area of the header photo which has a more solid background. In order to position the links relative to the header we first need to set a positioning value on the header itself.
In the CSS styles panel scroll up in the all rules pane select the header rule. Click on the add property link in the property pane, type in position and in the field next to it and select relative, this tells any elements that are within the header and that are absolutely positioned that they should base their positioning off of the header not off of the body tack.
Now we can edit the rule for the skipLINKS DIV to change its positioning. Scroll down in the CSS styles panel in the all rules pane and select the skipLINKS rule, click on the add property link, type right and in the field next to it type 10 and in the final field select pixels as the unit of measurement. When you hit enter to accept the style you will see the skip navigation links jump over to the right side of the screen.
To move them to the bottom, click on property type in bottom in the field next to it type in 10 and leave pixels selected as the unit of measurement. Now the links jump to the bottom to the header DIV, we may also what to make their text size a little smaller. Click on the add property link and type font-size and in the field next to it type in 80 and in the unit of measurement menu select percent.
Our skip navigation links are now at the bottom of our header where they are a little easier to read on top of the header photo. We haven't changed the HTML thought so there is still the first thing that a user will encounter when reading straight through the source of the page. Let's see how they work by previewing in a browser. Click on the globe icon in the document toolbar and choose preview in firefox. Click yes to save the changes to the page. Now click on the skip to main content link, you'll see that we jumped on the page just as we would any other in page link or anchor.
So these skip navigation links add yet another way for users to get around the page quickly without annoyance and frustration. Many people are hesitant to by them however because they don't like how they appear or they are retrofitting an existing page and don't have a good place to put them at the top of the page without drastically changing the design. It is possible to hide skip navigation links from sighted users view in certain conditions. So we'll talk about the implications of this as well as how to do it 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.