Updating content for accessiblity compliance
Recommended procedure for updating the content on the website for accessibility compliance:
- Review and update the home page and any other landing pages on the website for accessibility compliance. Landing pages are often the pages linked to from the first level of the navigation but may include other pages according to your judgment.
- Whenever you update a page for any reason, also check it for accessibility and correct any issues. It should become part of the routine of updating pages. Old pages that have not been updated for a long time are not required to be accessibility compliant. For example, the Faculty of Health Sciences website has over a thousand news story pages dating back to 1997. A news story page from 1997 is not required to be accessibility compliant unless it had to be updated to correct some other issue and then it would be required to be accessibility compliant. However, if a content editor or web developer comes across an old page, notices a problem with accessibility and has time to fix it, then it is recommended to correct it even though it is not required.
Accessibility compliance in website content
Note: As additional issues with regard to accessibility are found, this list will be updated.
WAVE — Web Accessibility Evaluation Tool is a web accessibility evaluation tool. It will find many but not all of the accessibility issues listed below. Enter the URL of the home page for your website. Then you can click on the links in your website to evaluate other pages.
- Headings must be structured in a hierachical fashion as if the page were an outline. The H1 tag is always the page title and should not be used elsewhere in the content. H2 tags must be first under the H1 tag. H3 tags must be contained within H2 tags. H4 tags must be contained within H3 tags. And so on. Tags should not be skipped. So what if you don't like how the tags look? Don't change the tags, change the CSS (styles) for the tags. CSS can be changed for the entire website in the css/site.css stylesheet file, or CSS can be changed for a single page only in the "head" editable region of a page, or CSS can be changed inline for each heading tag. While it is possible to override CSS in this way, it is recommended not to do too much of it because it will make the website more difficult to maintain and defeat the purpose of having stylesheets.
- Heading tags with no text should be removed. Accessibility readers will find them even if they are not visible and those visitors will wonder if there is a section missing. Sometimes Dreamweaver and Contribute will insert blank heading tags if you hit enter at the end of typing text under another heading tag.
- Avoid using text embedded in images for headings. Text that has been embedded in an image cannot be read by accessibility readers or search engines. Alternate text is not read as a heading and should not be used to substitute for text in a header tag. If special formatting or graphics are required for a heading, then stylesheets should be used to format the appearance of the heading. Alternate text assocaited with an image is not understood as a header but only as a description of the image.
- All images must have alternate text that describes the image. If the text is longer than 100 characters, then a long description should be used. However, 100 characters should be enough for most images. Descriptive text should be used and not something like "photo" or "x." Also, do do enter an alternate text attribute with no text in it. For example, alt=""should be replaced with alt="some descriptive text" In Contribute, your will be prompted for the alternate text when you insert an image. In Contribute, to update alternate text for images that are aleady inserted in a page, select the image, right click, select Image Properties, enter descriptive text in the description (ALT text) field, click Apply and OK. In Dreamweaver, select the image and enter descriptive text in the Alt box under Properties.
- Links must make sense out of context. When a visually impaired people visit the website, they will skip through links without reading the surrounding text. In most browsers this can be done by hitting the tab key multiple times. If the text of the link reads "click here," visitors will not know where "here" will take them. It is better to use the title of the page where the link will take the visitors. For example, a link could read "click here to view more information about the Faculty of Health Health Sciences" or simply "Information about the Faculty of Health Health Sciences." If there is a link after a sysnopsis that reads "More" and points to a complete version of the text on another page, then "More" should either be changed to more informative text or an alternative link above the "More" link can be added. Option 1 is to change the text of the "More" link to read something like "Read more about the Faculty of Health Sciences." Option 2 is to make the section heading "About the Faculty of Health Sciences" into a link in addition to the "More" link underneath. Visitors tabbing though the page will then encounter the link in the heading first and be provided with informative text at that point. See the Faculty of Health Sciences home page for an example of how to use links in heading tags with "more" links at the bottom of the section.Links within heading tags can be styled in the CSS to be underlined or not. It is recommended to have no underlines by default and have the underline and a colour change on hover.
- Images that are links must have both alternate text and layered text or they must have text captions that inform visitors where the link will take them. There are 3 methods that can be used. The first method is to layer text under the image so that the text is not visable but will be readable for accessibility. The McMaster logo in the header of all the McMaster pages now use this method in the latest version of the McMaster templates. CSS is used to layer the image over the text. This method is preferred when there is no text in the image. The second method is to add text in the HTML and add a style in the CSS to put the image in the background under the text. This method works well for buttons. The third method is to put a caption under the image with the text and put both the image and the text within the link. Technical assistance may be required to update image links using these methods.
- Blank links should be removed from pages. Dreamweaver and Contribute sometimes leave blank links when you update a link. You will not see the blank links visually but accessiblity readers will find them.
- The text for links should be readable and descriptive text and not a URL. A URL is not necessary descriptive of where the link will take visitors and it can sometime be long and have a lot of characters with no meaning. For example, a link that reads "http://graduate.mcmaster.ca/graduate-calendar" should be changed to read "Graduate Calendar" while the link itself points to the same place.
- Lists of items should be contained in either an unordered or an ordered list. Ordered lists should only be used if the order of the items in the list is significant. Keep in mind that if you don't want bullets, a style can be created to have no bullets and still be an unordered list in the code.
- Avoid using multiple unordered list tags to create an indent. Use a container with the "indent" class instead: <div class="indent"></div>
- Each page contains a <title> tag that should provide the title of the page in readable text. Do not enter the file name for the page in the <title> tag field. This <title> appears in the title bar of most browsers when the page is displayed. It is also the <title> used for bookmarks and for displaying the <title> of page in search results. The title from the <title> tag is often the same text as the page title in the content that is usually within an H1 tag, but the fields are separate and the text is not required to be the same. Sometimes the page title in the content will be a longer version of the title than in the <title> tag. In Contribute you are asked for <title> tag text immediately after you create a new page and may be updated by clicking the page properties button in the tool bar when editing a page. In Dreamweaver enter the text for the <title> tag in a text box in the tool bar.
- The marquee element should not be used. The marquee element creates a scrolling region that cannot be read with accessiblity readers.
- Try to avoid using tables for layout. Use containers instead because they are more flexible and make it easier for accessibility readers to process.
- Tables should usually be used only for tabular infomation and should have a heading row (<th> tags) that contain text that says what each column contains. The heading row can be styled any way you prefer and can even be made invisible except to accessibility readers, although that is not usually recommended.
- Avoid the use of underlining except for links. It is not recommended to use underlining for emphasis or for section heading tags because visitors will think there is a link present, try to click and when nothing happens, they may think there is a technical problem with the website. This is expecially problematic for visitors who are visually impaired but not completely blind. Bold should usually be used when emphasis is needed. Italics may also be used. Colours such as maroon or blue can be used sparingly along with bolding when extra emphasis is needed.