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.
>> Even with improvements that CSS has made to the appearance to the headings on our page you may want to hide the section navigation and footer headings from view but still have them accessible to screen readers. You can make elements invisible using CSS in a way that will still cause the text of those elements to be read by screen readers. The most obvious CSS to use for this is setting the display property to a value of none, this makes the element invisible and leaves not empty space behind but many screen readers including JAWS won't read text that is styled with display none.
An alternative way to keep content on the page but out of sight is to move it off the screen. There are a variety of ways to move something off the screen and some work in more screen readers than others. A pretty reliable way is to use one of the methods called left positioning. This is where you use CSS properties to move the element all the way off the left side of the screen including absolute positioning margin text indent. We're going to use absolute positioning with a really big negative left margin as our off left positioning technique.
Click on the new CSS rule button in the CSS styles panel. Choose class as the selector type. We're going to make a class that can be reused on multiple elements on our page in this case the section navigation heading and the footer heading. Highlight over the text that is placed in the text field by default and delete it. Then type in .offleft this is the name of our class that will later apply to the section navigation and footer headers.
For the define in option keep this document only selected, click okay. This brings up the CSS rule definition dialog box. First go to the positioning category listed on the left side of the box. Click on the arrow in the type field and choose absolute. Absolute positioning is a way of taking an element and pinning it to a specific spot on the page. When you make something absolutely positioned it is no longer in the flow of the document that means that the other elements around it act as if it doesn't exist.
We use absolute positioning here so that the text that follows these headings will not leave room for the headings above them but instead act as those headings aren't even there. Next click on the box category, under the margin section on the right side of the screen, uncheck the same for all box. In the left field under margin type a hyphen for a negative sign, then 9000 leave pixels selected at the unit of measurement. Using a negative margin makes the element move in the opposite direction that it usually would.
In this case it will move 9000 pixels to the left edge of the screen. The exact number is not important, the point is to use a very large value so that even if someone has a really large font size and thus the text of section becomes very long it still will not show up on the screen. Click okay to accept these rules. The new off left rule is now listed under the all rules pane of the CSS styles panel and its properties are shown below.
We haven't yet applied this class to anything on the page so click on the section navigation heading on the left side of the page, highlight over the text and then go down to the properties inspector. Click on the Style menu, a list is shown with the name of classes that are currently in our CSS. The last one listed off left is the style that we just created, select that style. As soon as we select that class it is applied to H2 element and it's no longer visible onscreen.
Now let's apply it to the footer heading as well. Scroll down the page and select over the footer heading text. In the properties inspector open the Style menu and choose off left. Again the heading immediately disappears and the space that it once occupied is no longer there. To verify that this is going to work correctly lets preview the page. Click on the globe icon in the document toolbar to bring up the Preview and Browser menu.
Select preview and firefox and you will be asked if you want to save the changes to the page, click yes. The section navigation heading is now missing from the side bar area. Scroll down the page, the footer heading is also gone from the footer. What we really want to know though is whether the headings are still there to be read by a screen reader so let's open up JAWS and see how it handles the page. Go to your Start menu and choose JAWS from the list of programs.
>> Digital Voice: JAWS 40 minute mode visitors vertical bar town of Wordscott -Mozilla Firefox. >> After JAWS reads the title of the page it stops speaking and waits for us to tell it what is should read next to bring up a list of headings in the page us the keyboard shortcut insert an F6. I'm going to press those keys now. >> Digital Voice: Heading list dialog. Heading list new section navigation:2 one of eight. To move the items use the arrow keys. >> You can see that the first heading listed is section navigation, one that we have hidden.
So it is still there to be read by JAWS. The footer heading is also still listed at the bottom of this heading list, to just there quickly simply press the F key. >> Digital Voice: F footer:2 >> Pressing any letter will jump you to the next heading that starts with that letter. Now that we have the footer heading selected we can press the enter key to move directly to that heading in the page. >> Digital Voice: Enter footing heading level two. >> To get JAWS to read on from this point in the document hit the key combination insert and the down arrow.
>> Digital Voice: Heading level two footer copyright 2007 town of Wordscott all rights reserved. >> So as you can see the headings were still there to be used by screen reader's users to navigate around the page. So fare we've looked at how to style heading color, font size, margins and even how to make them hidden for sighted users. Next we'll talk about more general principals for making sure your text stays readable.
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.