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.
>> Web designers can designate whether they want a link to open in the same browser window that the user is currently in or whether they want the link to open in a new window. Setting links to open in new windows is common for linked pages that are not part of the current site. The idea is that by leaving your own site open before sending users off to another site you will make it easier for them to get back to your site when they've finished at the other one. The problem with this is that the main way that people get back to sites they were previously on, the browsers back button, does not work in the new window.
Opening new browser windows from links within a webpage is primarily a usability issue, as it affects all users, but it does have accessibility implications as well. New windows can be especially problematic for screen reader users, as the screen reader may not tell them that a new window has been opened. If the user then tries to use the keyboard command to go back to the previous page, he or she will be unable to do so. Unlike sighted users, they can't see they grayed out back button or the new window in their task bar for the additional clues that they're now in a new window.
This is another one of those areas unfortunately where you may have to make a trade off between the business or marketing concerns of the site and accessibility. If you must open links in new windows, try to keep it to a minimum and alert users to it beforehand. If you're following along with the exercise files, open the file index.html in Dreamweaver that's located in the 05_07 folder of the chapter five exercise files. Let's say that all of these links to new stories opened in new windows. One way that we can tell users about this beforehand would be to simply put a sentence stating that at the top of the news article listing.
Place your cursor at the end of the news heading and hit enter or return to start a new line, then type in all stories open in a new window. You could then style that text to make it a little smaller and less obvious, but at least it would still be on the page. Of course, a screen reader user who is using their links list to navigate the page and not reading all of the text would not be able to see this text. If you could include the notice about the new window within the link itself, that's even more helpful.
Scroll down the page in Dreamweaver. Let's say that this link to outdoor water restrictions opens in a new window. We can simply place our cursor at the end of the link and type in parenthesis and type link opens in new window. This way, the notice of the new window is tied directly to the link and will be included in the listing of links accessed by a screen reader. It's possible to hide this text from the view of sited users using the same off left positioning technique from earlier movies.
Highlight over the space before the parenthesis text all the way to its end. Then right click or control click on the selection and select the quick tag editor option. You can then wrap an additional tag around this text. We'll have used the span tag since it's a generic element that we can use whenever there isn't a better semantic element to use. Type in span then hit enter or return. When we now click in the area of the link that contains the notice about the new window, we can see in the tag selector that there is a span around this text.
Click on the span tag in the tag selector then go to the style menu in the properties inspector below, choose off left from the list of classes shown. Now click back in design view. The diagonal lines that you see is Dreamweaver's method of indicating margins. Remember that our off left class assigns a very large negative left margin to the chosen element. Let's see how this looks in a browser. Click on the globe icon in the document tool bar and choose preview in Firefox.
Click yes to save the page. Scroll down the page. You can see that the outdoor water restrictions link no longer has the parenthesis text showing. It's still there to be used by screen reader users. Ideally you'd keep this notice visual so that it could benefit sited users as well, but this is another compromise technique that you could use, so again, try to keep opening new windows to a minimum so that the user can decide whether they want to open a new window, tab or use the same window from before.
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.