Accessible Web Design Principles

Accessible Web Design Principles

Provide appropriate alternative text

Alternative text provides a textual alternative to non-text content in web pages. It is essential for users who are blind and use a screen reader to access content.

Provide appropriate document structure

Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page. Do not skip heading levels.

Provide headers for data tables

Tables are used online for layout and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the ‹th› element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.

Use appropriate list styles

Use different types of lists (unordered, ordered, or descriptions) to group information according to its nature to provide orientation for users. Individual list items can contain a variety of HMTL elements, including paragraphs, headings, form elements, and other (nested) lists.

Ensure links make sense out of context

Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like “click here” and “more” must be avoided.

Caption and/or provide transcripts for media

Videos and live audio must have captions/transcript. YouTube’s automatic captions MUST be edited, but the editing process is a simple one.

Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content

In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible.

Ensure users can complete and submit all forms

Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the ‹label› element. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.

Allow users to skip repetitive elements on the page

You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a “Skip to Main Content,” or “Skip Navigation” link at the top of the page which jumps to the main content of the page.

Use Color Appropriately

The use of color can enhance comprehension, but do not use color alone to convey information (e.g., “Items in red are due this week”). Make sure that color contrast is strong, especially between text and background. This is true for images that include text as well.

Make JavaScript accessible

Ensure that JavaScript event handlers are device independent (e.g., they do not require the use of a mouse) and make sure that your page does not rely on JavaScript to function.

Resources

  1. ComprehensiveSiteonWebAccessibilityincludingtraining,tips,andextensive explanations: https://webaim.org
  2. WebAccessibilityStandards2.0(verytechnical):https://www.w3.org/
  3. Tota11y(http://khan.github.io/tota11y/)isanaccessibilityvisualizationtoolkit.It adds a button to the bottom of the page that can be clicked to see accessibility features mapped out on the screen. Works on Chrome, Safari, and Firefox.
  4. WAVEbyWebAIM (wave.webaim.org) isextensioninChromeandFirefoxthat runs and generates an accessibility report on any web page.