The following guide outlines accessibility principles for the creating content on the web. The Web Content Accessibility Guidelines is developed through the W3C (World Wide Web Consortium) as part of an initiative to develop a standard of recommended practices to make web content as accessible as possible. In learning to adopt these practices in the content you produce, having a grounding in the basic guiding principles of what makes web content accessible will make adopting these practices more intuitive. Below are the four principles of accessibility:
Four Principles of Accessibility
- Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
- This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)
- Operable - User interface components and navigation must be operable.
- This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
- Understandable - Information and the operation of user interface must be understandable.
- This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
- Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
- This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
It is recommended to use the W3C page on Accessibility as a resource for evaluating the accessibility of content or resources published on the web.
Refer to these main resources for creating accessible content in Microsoft Word and Blackboard.
To make the body text of your content visibly accessible, style the text with the following features:
- Avoid going below a 12 pt. font size.
- Make sure text has high-contrast. For example, use black on white, not grey on white.
- Use sans-serif font families, like Arial, Helvetica, or Calibri. Sans-serif fonts are more legible on screens, while serif has better legibility in print.
If extra space is needed between lines of text, paragraphs, or other content elements, avoid using multiple paragraph or line breaks to create spacing. This will read as a series of “blank”s by a screen reader, and may signal to a listener as the end of the document. Instead adjust the style settings for spacing between these elements if available. In most programs, this can be found under a ‘Format’ menu item.
Using headings provides crucial document structure by delineating sections of content and communicating how they relate to each other hierarchically. The presence of headings allows for a person to visually, and using assistive software, audibly, understand the structure of the content, and use keyboard shortcuts to navigate the document by headings.
As a guiding principle, content should not be exclusively communicated visually, this means avoiding the use of styling like color, bold, and text-size alone to visually delineate sections, as this does not markup the content in a meaningful way. This also means that heading tags should follow a logical progression and avoid gaps or skips in the hierarchy. A document should only use Heading 1 once to title the document.
- Heading 1
- Heading 2
- Heading 3
- Heading 3
- Heading 4
- Heading 2
- Heading 3
- Heading 2
- Heading 2
- Utilizing unordered and ordered lists is a great strategy to communicate content in a structured way, clearly communicate sequence, and breakup information visually.
- Listed content must be appropriately marked so it is apparent in the document structure, which will also allow for assistive software to interpret this content as such. Most content editors have a list tool that will help you create a list structure to accomplish this.
- Paragraphs with a bullet character, numeral, letter, and so on at the start of the paragraph are not adequate substitutes.
If a content editor has an option to designate content as a blockquote it should be utilized if available, and when appropriate. Not only does this help visually offset quoted content, but also allows assistive software to communicate a distinction between authored and quoted content.
Accessible document navigation includes the ability to jump between content and hyperlinks.
Hyperlinks must have clear, non-context dependent titles, which means the target content of the hyperlink should be clearly communicated in the hyperlinked text.
The content communicated in an image cannot be the exclusive source of the information it contains, and must also have an alternative textual source provided.
Features of an accessible image:
- In HTML the ‘alt’ attribute must be used in the image tag. This provides a textual explanation or summary of the image for assistive software. Alt-text should be concise and not exceed one or two sentences or exceed 80 characters. For images that are purely decorative a null value should be used for the alt attribute. Most content editors should provide an option to define the alt-text of an image.
- The information communicated in an image sometimes serves as a compliment, or as a supplementary representation of information that already exists in the textual content of the page, in which case the alt-text alone should be sufficient.
- When textual content refers to an image, avoid references through spatial relation. For example, “Refer to the image above…”. Instead images need to be accompanied by an identifying title so that it can be identified and referred to in the content, such as: ‘Figure 1’, and so on.
- Images that diagram complex information that cannot be summed up briefly in alt-text, and does not already exist in the textual content of the page should be supplemented with an alternative text document that explains the content.
- Sections of content should not be delineated solely with the presence of certain images or icons. Appropriate titles should accompany any icon usage.
Tables should primarily be used to show relationships of data. Avoid using tables for content layout. Using tables to divide content areas often makes the document structure difficult to hear and comprehend.
Features of an accessible table:
- Similar to the ‘alt’ text attribute for images, tables use a ‘summary’ attribute in HTML. Most content editors should provide an option to define the summary of a table. This orientates the person to what data relationships in the columns and rows are going to be represented in the table.
- Also like images, tables should have an identifying title, this is usually referred to as the table 'caption'. A brief summary of the data can be included in this as well.
- If the option is available, designating header rows and columns assists in defining the role these items are serving in distinction from the rest of the table data.
Video, Audio, and Interactive Media
- All video and audio resources need to provide subtitles and captions or a supplemental transcript of the content.
Hosting media to YouTube and using the automatic subtitles and captions tool is a good method for quickly doing the bulk work of creating subtitles and captions provided that you review and edit the transcript it generates. Note that the automatic subtitles and captions that YouTube generates will have several errors and requires editing. Not editing the transcript for accuracy does not represent a good faith effort.
Documentation on using the YouTube subtitles & closed captions tool
- All interactive media should not require high hand motor skills, or a mouse to interact with or navigate the media. Successful interaction and navigability should be achievable with a keyboard.
- Time based media should have pause and time navigation functionality.
- Media should be provided in widely used formats that demonstrate cross-platform and browser accessibility and support.
Suggested current format standards:
- Video: MPEG-4 or MP4 (.mp4)
- Audio: MP3 (.mp3), WAV (.wav), MP4 (.mp4).