Accessibility

Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.

-- W3C

DoCS is committed to making our web pages accessible. Below you will find guidelines, checklists, and tools for proofing your web site. Standards are set by the W3C and the US Government.

Who is Accessibility for?

Accessibility standards are most commonly designed to meet the needs of people with visual impairments, or physical limitations such as the inability to use a standard mouse.

Screen readers are used by people with visual impairments. These browsers are adapted to read aloud the text found on web pages. It is crucial that thought is given to how that text is organized, to make navigation easier for people using screen readers.

Other physical limitations impact how people move around the page. Tab navigation may be used to jump from link to link. When using a mobile device, all buttons should be at least 40px x 40px to make them large enough for most users to tap on them.

There are more standards that ITaCS has built into the standard theme (such as foreground/background contrast). Other standards must be built into the content of each individual page.

Headings: Your Master Outline

Headings are part of basic HTML. They were created to make it easy to sort information, into a hierarchy that mimics an outline. Content pages use Headings 2-6. Heading 1 is always the title of the page.

A screenshot of a heading outline.

Screen readers make use of headings to help users navigate pages. The headings are the first items read off the page, and the user then selects which section to read. It is crucial that these headings make sense.

To choose a heading, select the text you want to turn into a heading and look in the WYSIWYG editor in the text styles drop-down. This dropdown usually reads "Normal", for ordinary body text. Select the heading you want.

A screenshot of the text styles dropdown.

Proofing your outline

Numerous tools exist that will display the page's outline. We recommend HTML5 Outliner for Chrome. After installing the plugin, refresh the page you want to test. A small icon will appear on the right-hand side of your address bar. Click on it and a window will appear with the outline for the entire page, including the header and footer.

A screenshot of the HTML5 Outliner

Images shouldn't be required for understanding

Because images are difficult to communicate to someone with visual impairments, they should be used to enhance the information given on a page, not crucial to the understanding of it. Images that illustrate a point are good. Images that contain text with an explanation are not.

Images & Alt Text

Computers cannot 'read' the content of image files, so text must be provided. Alt text (short for 'alternative') is an HTML parameter that links the text to the image. This text should describe a) the content, and/or b) the function of the image. The text is visible to users with screen readers, users who have turned images off, or when an image fails to load. Alt text is a crucial part of making web pages accessible.

A thorough explanation and examples are provided at WebAIM.

Adding Alt Text

Alt text is added through the standard image dialog in the WYSIWYG, or fields available when uploading an image directly to a page or block.

Screenshot of the WYSIWYG image properties window. Screenshot of the Iconoblock icon uploader.

Checking for Alt Text

To check that you have not missed any images, you can run the page URL through Durham University's Alt Text Checker. This will display a list of all the images on the page, and their associated alt text.