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.
>> In this chapter we are going to replace the placeholder content that Dreamweaver added to our pages by default with real text for our example site. We're going to focus on making that text accessible. Before we add any text to the page though we need to specify what language the text is going to be in. The page that we'll be working with is named visitors.html. If you are working along with the exercise files, it's located in the chapter four folder inside the starting sub folder. This is the same page that we worked on in the previous chapter but some additional styling has been added unrelated to accessibility to help the site start to take shape and keep us focused on changes made for accessibility not the minutiae of purely decorative styling.
We've also cleaned up the CSS as you've seen in the CSS files panel simply to make it easier to read and for us to make further changes to it as we develop our site. The site that we will be building is for a fictional town named Wordscott and this page is the visitor's page of the site. We're going to be setting the language of the page in the HTML doing so makes this information about the language available to be used by screen readers to provide the correct reading, other uses are for language specific searches and search engines, translation tools that people may run on your site, spell checking tools in people browsers, as well as how the browser might format the text.
Such as if it needs to choose a certain font to display special characters or choose particular types of quotation marks and other punctuation markings. To define the base language for the entire page we'll need to go into the code view. Click on the code button in the document toolbar in the top left corner of the page. We need to add an attribute to the opening HTML tag so scroll up to the top of the code, place your curser inside the HTML tag immediately before its closing bracket, then type LAN="EN-US".
This is the LANG attribute and we've set the language of this page to be US English. If you have multiple languages on the same page you can use this LANG attribute on whatever HTML element surrounds the different piece of text that you need to denote. For instance the placeholder text that is still in the sidebar has two different languages listed. Stay in code view and scroll down until we get to the sidebar. ( Pause in speaking ) >> The side bar appears immediately after the heading DIV on line 89 in the filevisitors.html.
The first paragraph shown in the side bar is in English, the second paragraph is in Latin. We can add LANG attributes to each of these paragraphs to denote the change. We've already set a base language of English for the page so we don't need to set a LANG attribute on the first paragraph. For the second paragraph, place your cursor inside its opening tag immediately before the closing bracket type a space and then LANG="LA" this tells the screen readers, search engines and other devices that the language of this part of the page is Latin.
For a list of possible language codes that you can add to your pages go to en.wikipedia.org/wiki/List_of_ISO_639-1_codes. Now that the language of the page is set we just need to set the page title before adding in our content. We'll look at the accessibility implications of page titles 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.
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.