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.
>> Marking up your text as headings and paragraphs is one of the simplest changes you can make to a webpage that has one of the greatest impacts on accessibility. Headings are the primary way that you can add structure to your text. They divide up the text into related pieces and provide information on the hierarchy of that information. Just as a sighted user can scan up and down the page to look for text that sticks out visually and get a sense of what topics are covered on the page. Screen readers can do the same sort of things if there are headings in the markup as we saw earlier with JAWS you can bring up a list of headings for a page and jump to each one of those.
Another advantage to using headings is that it easier to keep them looking consistent through out the site using CSS. Finally headings are looked at by search engines as an indication of what words on the page are more important than others. By putting the important topics of your page into headings your making it easier for search engines to find your page for those words as well as making the page more accessible to both sided and screen reader users who can scan through the page and quickly get a sense of the content. If you are following along with the exercise files open the files visitors.doc from the chapter four folder.
The text in this document does not have any formatting applied to it, this is ideal for pasting into Dreamweaver because it insures that no excess formatting will be carried over into our webpage. Remember we are trying to keep all the visual formatting in the CSS not in the HTML. Hit control A or command A to select all the text on the page then control C or command C to copy it. Go back to Dreamweaver highlight over all of the context in the main content DIV then hit control V or command V to paste in the text.
By default Dreamweaver paste text from Word as paragraphs. You can verify this by clicking in any of the paragraphs of text that we just pasted in. If you look at the tag selector at the bottom of the document window you can see that the current tag is a P tag meaning this text is marked up as a paragraph. You can also verify this in the property's inspector by looking at the format menu, again its set to paragraphs so we know that this text is correctly set. What you do want to check however is that the text hasn't been pasted in as one big paragraph but that each chunk of text on the page is a distinct paragraph with its own opening and closing tag.
An easy way to do that in design view is to try to place your cursor in the blank spaces in each line, if you are able to do so then that means the chunks of text are being separated with break elements not with the margins on each individual paragraph. Let's check this page, scroll up to the top try to place your cursor underneath the word visitors on the blank line. We're not able to click there because visitors is a separate paragraph from the text below. That space is not actually a blank line but simply a margin gap, we'll try to do this after the first paragraph as well and again we can't click there, that's what we want to happen.
Scroll through the rest of the page and try to click between each of the paragraphs, you'll see that you can't place your cursor in those gaps because Dreamweaver has correctly preserved the paragraphs in the Word document. If you also have headings set up in your Word document Dreamweaver will also paste in those same headings. This is really useful if your content providers are using headings correctly, but if there not using them correctly in the source document you may not want Dreamweaver to preserve them so you can change how it paste in text by going edit and then clicking on paste special, you'll see that you have that you have four options listed under paste as, the default option is text with structure this is why Dreamweaver pasted in the text with paragraphs intact and if we have any headings in our Word document those would have also been preserved when we pasted in the text.
If a word document has a lot of excess formatting that you need to get rid of an easy way is to simply paste it in as text only, click cancel. Now we need to change some of the pieces of text on this page from paragraphs into headings. We'll use this doing the format menu on the properties inspector. First let's scroll up to the top of the document. Most pages have only one main topic so you will usually only have one heading one or H1 tag, all others will be sub headings of this.
Usually you will set your H1 to be the title of your page, on this page our title is visitors. Highlight over that text then go down to the property inspector and click on the arrow of the format window, select the option heading one, the appearance of the text changes to reflect the default settings of the H1 tag, we'll customize that later. We now need to set the sub headings. Scroll down and select the words Lake Wordscott, this is a sub heading of our titles visitors, so go down to the format menu on the property inspector, click on the menu and select heading two from the list.
Again the text changes because of default formatting, we need to decide if the next piece of text on the page is a sub heading of that H2 Lake Wordscott or if it is a subheading for the title of the page visitors. Basically when you are deciding what headings to set on your page you are going to be thinking about your page as an outline document. If this is an outline downtown Wordscott would come underneath the heading of visitors, so this should also be a heading to. Highlight over downtown Wordscott click on the format menu in the properties inspector and choose heading two.
Scroll further down the page and highlight over events, click on the format menu and choose heading two for this text as well. If we read the text underneath events you can see that there are basically two sections annual events and upcoming events, both of these are sub sections of the events header so these should be H3 elements. If we highlight over annual events and choose heading three from the format menu, you will see that the entire paragraph changes its appearance. This is because that entire chunk of text was marked up as a single paragraph.
Annual events was not a separate paragraph from the text below so before we set it as a heading we need to make sure that it's a completely separate paragraph. Go up to edit and select undo text format to remove the formatting that we just applied. Next place your cursor at the start of the line below the annual events text and hit backspace to remove the line break between annual events and the next sentence then hit enter or return. This creates a new paragraph and keeps the annual events text separate.
Now we can highlight over annual events and go to the format menu on the properties inspector and select heading three and only that piece of text is affected. We need to do the same thing for the up coming events heading. Place your cursor on the start of the line below the upcoming events text, hit backspace to remove the line break and then enter a return to create a new paragraph. Highlight over up coming events, go to the format menu and select heading three. If we scroll down the page we'll see that we've now formatted all of our headings.
Scrolling back up the page we can see that the font sizes of each of the headings differs based on there level. This is default formatting that we'll talk about how to change in a later movie but first we are going to set a couple more headings on this page. You can also use headings as labels for the main sections of your pages. This allows screen readers users to quickly jump to a particular section. It may also help sighted users make better sense out of the page if the interface is complicated or different from standard visual conventions that most are use to.
We are going to use the sidebar of this page for our section navigation. So we can add a header to this DIV that provides that information. Highlight over the sidebar one content text that is already there and type in section navigation. With your cursor still in that text if you look down at the properties inspector at the format setting you will see that it is currently set to a heading three. We are going to set it as a heading two since it's one of the major sections of the site just under the main topic if the entire page.
So highlight over the text section navigation then go back down to the format menu in properties inspector and choose heading two. We can also delete the paragraph text in this section. We'll add the content for the actual section navigation in a later chapter. Highlight over the paragraph text and hit delete the other section of the page we may want to label is the footer. Scroll down to the bottom of the page and place you cursor in front of the copyright notice, hit enter or return to create a new paragraph above that existing text.
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.