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.
>> If you can it is best to leave your skip NAV links visible. Remember that sighed keyboard users rely on them as well and hidden skip NAV link does them little good because although it will be the first thing that they tab to they will not know that they tabbed to anything because the link will be invisible. However I know that some clients may refuse to let you put a visible skip NAV link at the top of there site or you may be working on accessibility features to an existing page and don't have a good place to put the skip NAV link that fits with your existing design.
Hiding the link or links is one way you can improve the accessibility at least part way and not disturb the design. If you are following along with the exercise files, open visitors.html in Dreamweaver, its located in the 0505 folder of the chapter five exercise files. We can use the same off left positioning technique that we are currently using on the main navigation, section navigation and footer headers. To pull the skip NAV links off the left side of the page and out of view. In the CSS styles panel scroll through the alt rules listings to the bottom and select the skip LINKS A rule.
Click on the add property link in the properties pane type position and then in the menu adjacent to that click the arrow and chose absolute. Click on add property again and type margin-left in the field to the right type -9000, leave pixels selected as your unit of measurement, hit enter or return to accept the rule. To see if this has worked we need to preview it 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. As you can see the skip NAV links are no longer visible. There's a compromise approach that we could take to hiding the skip NAV links. We could hide it from visual users but make it visible when it is tabbed to. This would help keyboard users who are left out when we moved the skip NAV link off of the screen. Close Firefox and return to Dreamweaver. When you tab to a link it receives focus so we need to add CSS rules that move the A element back on screen when it receives focus, click on the new CSS rule button on the bottom of the CSS styles panel, leave advance selected as the selector type and clear out the default text in the selector field, type #skiplinks A:focus, #skiplinks A:active.
Leave this document only selected for the define in option and click OK. We first need o change he left margin value back to a positive number to get the links to appear on screen when they receive focus. Click on the box category, uncheck the same for all box under margin and in the left field type 50 and leave pixels as the unit of measurement.
Next we need o make the A elements block elements and give them a width because absolute positioning makes every word with in the link wrap to a new line. We want them all to be on a single line for each link. So in the width field enter 11 and in the unit of measurement beside it choose M's. This will let the width adjust to the font size of the user, then click on the block category select the display menu and choose block, click OK.
When the skip LINKS are tabbed to and appear back on the screen we can no longer have them appear on the right side of the screen because we have no way of knowing the correct margin value to make them appear there, so we need to remove the absolute positioning rules from the skip LINKS DIV that we used in the previous movie. In the CSS styles panel choose the skip LINKS rule from the listing of all rules. Click on the bottom property and click on the trash can to delete it, then the position absolute property and the trash can to delete it, and finally click on the on the right property and the trash can icon to delete it.
Next we'll modify the style for the skip LINKS list item rule. Click on the skip LINKS LI rule in the all rules listings of the CSS styles panel. Click on the add property link type position and then in he menu next to it choose absolute as the value. This will make it so that as each link displays on he page one by one they each take up the same spot. Next click on the display in line deceleration then the trashcan icon at the bottom of he panel to delete it, it's no longer needed with our new styles.
We also can delete the padding left property. So click on that and then the trash can icon. This should be all the changes we need. So let's preview in Firefox. Click on the globe icon in the document toolbar and choose preview in Firefox. Click yes to save changes to the page. As we saw before the links are not visible however let's try tabbing to them, hit the tab key on your keyboard, the first link skip to main content immediately appears with the focus dotted outline around it.
Hit the tab key again, now the skip to section navigation link takes its place, since we no longer have focus on the skip to main content link it has again disappeared so we only see on skip link on the page at a time. Just as before we can hit enter or return on the keyboard to active that link and jump down the page. While this is not an ideal scenario hidden skip navigation links at least keep the links present in the HTML for screen readers to access.
And using the CSS from this movie you've seen that you can make the hidden links available to keyboard users as well.
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.