The ultimate accessible content checklist for web professionals: Part 3

  • Author: Access iQ ®
  • Date: 3 Jun 2013
  • Access: Free

Quick facts

While accessibility should be factored into any project in the planning stages, content is usually the most frequently updated element of a website and the quickest way to make or break its accessibility.

This is a checklist of all checklists for content managers, editors, writers or communications specialists working in accessibility.

Taken from our premium guide to web accessibility for content authors, we've broken down the top 14 topic areas you need to consider, into a comprehensive list of checklist items to get you started.

This is the third and final installment of a three-part series — see part one and part two.

Part 3 covers:

Colour and colour contrast

People who are colour blind, vision impaired, or who have an age-related impairment often struggle to read text when there isn't enough contrast between the colour of the text and its background. There are two levels of requirements for colour contrast, depending on the level of conformance your website is aiming to achieve.

  • Ensure that information conveyed by colour differences is also communicated in text or via other visual cues.
  • Check that the contrast between text (or images of text) and background colour meets the colour contrast requirements that are applicable to your website's level of conformance (WCAG 2.0 Level AA or Level AAA). Logos, decorative text and incidental text are exempt.
  • Use a larger font size or higher contrast ratio for lightweight fonts or fancy fonts.

Minimum contrast requirements (Level AA):

  • For text (and images of text) that is less than 18 points or less than 14pt bold, check that the contrast ratio between text and its background is at least 4.5:1.
  • For text (and images of text) that is 18 points or 14pt bold or larger, check that the contrast ratio between text and its background is at least 3:1.

Enhanced contrast requirements (Level AAA):

  • For text (and images of text) that is less than 18 points or less than 14pt bold, check that the contrast ratio between text and its background is at least 7:1.
  • For text (and images of text) that is 18 points or 14pt bold or larger, check that the contrast ratio between text and its background is at least 4.5:1.

See the complete topic on colour for content authors and colour contrast for content authors.

Tables

Tables allow data to be displayed in a format that helps users clarify relationships visually. However, this formatting is lost on screen reader users, as they process content according to marked up instructions, not visually. Without specific markup, screen readers will read out the table content left to right, top to bottom, thereby defeating the purpose of using a table at all.

  • Only use tables for tabular information. If you must use tables to layout content:
    • Do not include any sematic markup (e.g. <th>, <caption> or summary)
    • Ensure content makes sense when linearised. Content will be read out by a screen reader row by row, staring at the cell in the top left and ending in the cell at the bottom right.
  • Identify row and/or column headers using the <th> element
  • Provide a caption that identifies and acts as a heading for the table using the <caption> element.
  • For complex tables which have merged cells or multiple row and/or column headers, manually associate cells with their correct row and/or column headers by:
    • giving each header cell a unique identifier using the id attribute
    • associating other cells (remembering these can be header cells or data cells) with their corresponding header or headers using the headers attribute.
  • For complex tables, provide a summary using the summary attribute. The summary is only available to screen reader users and can be used to describe the structure of the table, or to provide a summary of important information that the table is presenting.
  • Do not include the same content in the caption and in the summary.

See the complete topic on tables for content authors.

Sensory characteristics

People with some kinds of disabilities have limitations on their ability to distinguish or apply meaning to the characteristics of elements that rely on sensory perception. Because of this, it is necessary to pay attention to how reliant the communication of the content is on other visual cues, including size and shape, and to provide alternatives for conveying the meaning of images and ensuring that text can be properly conveyed by screen readers.

  • Ensure that information or instructions do not solely rely on the size, shape or position.
  • Use other methods in additional to size, shape or position such as text labels or direct links to a section of content rather than instructions to provide information in an accessible way.
  • References to ‘above’ and ‘below are acceptable.
  • If instructions or notifications rely on sound alone, ensure that there is another method of notification that is accessible to people with hearing impairment.

See the complete topic on sensory characteristics for content authors.

Information and relationships

Headings, lists, tables and emphasis help users read and understand your content by distinguishing one block of content from another and thereby establishing a structural relationship between them, however the visual nature of these elements mean they may be inaccessible to people who are blind or vision impaired.

Use HTML to ensure that the information about content relationships is presented in a way that can be perceived by assistive technology and effectively conveyed to the user.

  • Use appropriate semantic markup:
    • Heading tags (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) to identify headings.
    • <em> and <strong> to accentuate text.
    • <ul> for unordered lists, <ol> for ordered lists and <li> for list items.
    • Table tags, including table headers and captions.
    • <blockquote> for a long quotation in a paragraph and <q> for inline quotations.
    • <cite> to identify a reference to another source such a book or website.
    • <sup> and <sub> for superscript and subscript text.
    • <code> to identify a code snippet or code piece.
    • <kbd> for keystrokes that a user must press to perform an action.
    • <ins> and <del> to identify sections of text that have been inserted or deleted.
    • <dfn> the first time that a new term is used and explained.
  • If you use <code>, <ins>, <del>, <dfn>, <kbd>, <s>, <sub>, <sup> or <q> which are not well supported by assistive technology, ensure that the same meaning is conveyed in text.

See the complete topic on information and relationships for content authors.

 

Resources

Media Access Australia, as a leader in accessibility, has a wealth of resources for organisations looking to make their workplaces, systems and processes more accessible for people with disabilities.

These include expert guides such as the Service Providers' Accessibility Guide and Sociability: social media for people with a disability. We also have a dedicated web accessibility hub, Access iQ and provide professional accessibility services and practical advice. For those seeking professional development in web accessibility, we have partnered with the University of South Australia on the Professional Certificate in Web Accessibility