Creating Accessible Web Content

Many different people could be adding content to a website. Sometimes content is added by the individuals who developed (i.e., coded) and/or designed the website. But many departments use a Content Management System (CMS), where multiple individuals, who may or may not have been a part of creating the website, are responsible for contributing and maintaining content.

It’s important that every person who adds content to the website understands how to make that content accessible. The following are key questions to ask, but if you’re not a developer, you may want to speak with your webmaster so you’re both on the same page. They'll be able to explain what expectations they have for content contributors, and teach you the functions of the CMS that will help make content accessible.

If you can answer “yes” to the question, it should pass compliance. If “no”, you may need to do additional work to make it compliant. You can skip the items that do not apply to the page you are developing.

Images

1.1 Do images that convey contextual content have equivalent alternative text specified in the alt attribute of the img element?
1.2 Do images that are purely decorative, and not contextual, have empty, or null, alternative text specified, e.g. alt=""?
1.3 Does the alternate text convey contextual relevance to the page it is on?
1.4 Do images that convey complex content use the longdesc attribute or provide equivalent text content elsewhere on the page?
1.5 If text is conveyed in an image, is that content present when images are disabled?
1.6 Do form non-text controls, e.g. input type image, provide a text alternative that identifies the purpose of the non-text control?
1.7 Do noframes elements have appropriate equivalent or alternative content for user agents that do not support frames?
1.8 Are links in server-side image maps repeated elsewhere in the page that are non-graphical, e.g. a normal list of links?
1.9 Are client-side image maps used instead of server-side image maps?
1.10 Do image map area elements have the link destination correctly titled? If the title attribute is used, it ought not to duplicate the alt text.

Recordings

2.1 Is a full text transcript provided for all prerecorded audio?
2.2 Is a full text transcript provided for all prerecorded video?
2.3 Are open or closed captions provided for all synchronized video?
2.4 Is fully synchronized text alternative or sound track provided for all video interaction that is not otherwise described?

Color

3.1 Is information conveyed by color also conveyed by context, markup, graphic coding, or other means?
3.2 Does a contrast ratio of at least 4.5:1 exist between text, and images of text, and background behind the text under 14 point?
3.3 Is a correct contrast ratio maintained when images are not available?
3.4 Is a correct contrast ratio maintained when CSS is disabled?
3.5 Are links distinguished from surrounding text with sufficient color contrast and is additional differentiation provided when the link receives focus, e.g. it becomes underlined?

Content

4.1 Has the spelling and grammar been checked for accuracy?
4.2 Is the most important information near the top of the page?
4.3 Does the page contain a page title and section headers nested properly?
4.4 Are all links given descriptive text to tell user where they will be going including verifying the link functions properly?
4.5 Has a language been assigned to the page and any needed sections?
4.6 Have all unusual words or phrases been defined and/or pronunciation made available?
4.7 Are all acronyms defined and expanded?
4.8 Is the reading level appropriate to the audience?
4.9 Has the order or sequence of the page been verified?

Style Sheets

5.1 With CSS disabled, is color and font information rendered in the browser's default CSS?
5.2 With CSS disabled, are headings, paragraphs, and lists obvious and sensible?
5.3 With CSS disabled, does the order of the page content make sense as read?
5.4 With CSS disabled, is most text, other than logos and banners, rendered in text rather than images?
5.5 With CSS disabled, does any content that was invisible before stay invisible?
5.6 With CSS disabled, is any content or functionality provided by the CSS through mouse action also provided through keyboard-triggered event handlers?

Functionality

6.1 Is the design responsive and can the page be resized up to 200% or more without loss of content or functionality?
6.2 When using keyboard access only, can all elements on the page be accessed and no keyboard traps are present?
6.3 Does the user have the same experience across multiple browsers and screen sizes?

Tables

7.1 For tables containing data, do th elements appropriately define every row and/or every column header?
7.2 For tables containing data, do th elements contain the scope attribute for row and/or column headers that are not logically placed, e.g. in the first row and first column as applicable?
7.3 For tables containing data, is the summary attribute used to explain the meaning of the table if it is not otherwise evident from context?
7.4 For tables that are used for layout, are th elements or summary, headers, scope, abbr, or axis attributes NOT used at all?
7.5 For complex tables, do th elements appropriately define row and/or column headers?
7.6 For complex tables, does any td element that is associated with more than one th element associate correctly?
7.7 Are the summary attribute and thead and tbody elements used to clarify the table meaning?

Blinking or Flashing

8.1 Do all page elements flicker less than three flashes per second?
8.2 Have you made sure all page do not contain the marquee and blink elements?

Documents

9.1 Does the document follow all the same principles for images, content, tables and structure as a webpage?
9.2 Is all the content able to be read by a screen-reader, e.g. not a scanned document, OCR?
9.3 If the document contains a form, are form fields available to fill in online?
9.4 Has the document been run through an accessibility checker and sequencing verified?

Using JavaScript

10.1 Is content provided by JavaScript through mouse action also provided through keyboard-triggered event handlers?
10.2 If content or functionality provided by JavaScript cannot be provided to assistive technology, is equivalent content or functionality provided without JavaScript?

Plug-Ins

11.1 Are links provided to any special readers or plug-ins that are required to interpret page content?
11.2 Do special readers or plug-ins comply with the requirements of Section 508?
11.3 Has all content or functionality provided by a third-party vendor been verified for accessibility, e.g. VPATs?

Forms

12.1 Does each appropriate input element or form control have an associated and visible label element or title attribute?
12.2 Are all cues for filling out the form available to users of assistive technology, e.g. mandatory fields, help boxes, error messages?
12.3 Is the tab order to reach the form and the tab order between form elements logical and consistent with the normal and visual order of entering form data?
12.4 Are logically-related groups of form elements identified with appropriate fieldset and legend elements?
12.5 Is placeholder text, if used, NOT redundant or distracting to users of assistive technology?
12.6 Do form error messages identify the error(s) to the user and describe them to the user in text in time with the action?

Skip Navigation

13.1 If repetitive navigation links are at the beginning of the source of the HTML page, can a user navigate via a link, the “skip link”, at the top of each page directly to the main content area?
13.2 If a “skip link” is provided, does the anchor element contain text content that is visible with CSS disabled?
13.3 If a “skip link” is provided and it is hidden with CSS, is it available to users of assistive technology, e.g. not using the display:none method?
13.4 Can a user navigate over groups of links, between multiple groups of links, and between sections of the page content by means of section headings or visible and audible local links?
13.5 Are heading elements used to convey logical hierarchy and denote the beginning of each section of content?

Timing for Interactions

14.1 Is enough time provided to allow users to read and interact with content?
14.2 Is the functionality of the content predictable, i.e. will a user experience contextual changes when unbeknownst to them?
14.3 Does the user have control over the timing of content changes?
14.4 If a page or application has a time limit, is the user given options to turn off, adjust, or extend that time limit?
14.5 Can automatically moving, blinking, or scrolling content that lasts longer than 3 seconds be paused, stopped, or hidden by the user?
14.6 Can automatically updating content be paused, stopped, or hidden by the user or the user can manually control the timing of the updates, e.g. automatically redirecting or refreshing a page, a news ticker, AJAX updated field, a notification alert, etcetera?
14.7 Can interruptions be postponed or suppressed by the user, e.g. alerts, page updates, etcetera?
14.8 If an authentication session expires, can the user re-authenticate and continue the activity without losing any data from the current page?

Office of Accessibility