Skip to content

Instantly share code, notes, and snippets.

@thecristen
Last active March 12, 2016 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thecristen/b212bd7abe3d7a6790f5 to your computer and use it in GitHub Desktop.
Save thecristen/b212bd7abe3d7a6790f5 to your computer and use it in GitHub Desktop.
forked off IBM Web accessibility checklist - Version 5.2

IBM Web accessibility checklist - Version 5.2

http://www-03.ibm.com/able/guidelines/web/accessweb.html

  • 1.1 Text alternatives: Provide text alternatives for all non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols or simpler language.
  • 1.1a Text alternatives. All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
  • 1.1b Non-text content. A descriptive label is provided for time-based media, including live audio-only and live video-only content. Non-text content that is used to confirm that content is being accessed by a person rather than a computer is available in different forms to accommodate multiple disabilities.
  • 1.1c Image maps. Client-side image maps are used and alternative text is provided for image map hot spots. Equivalent text links are provided if a server-side image map is used.
  • 1.2 Time-based media: Provide alternatives for time-based media.
  • 1.2a Captions. Captions are provided for prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
  • 1.2b Audio and video (prerecorded). An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
  • 1.2c Live multimedia. Captions are provided for live multimedia.
  • AA1.2.4 Captions (Live). Captions are provided for all live audio content in synchronized media. (See WCAG 2.0 Success Criterion 1.2.4)
  • Note: The development and test requirements in Web checkpoint 1.2c: Live multimedia are sufficient to comply with this checkpoint.
  • AA1.2.5 Audio Description. Audio description is provided for all prerecorded video content in synchronized media.)
  • 1.3 Adaptable: Create content that can be presented in different ways without losing information or structure.
  • 1.3a Information and relationships. Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
  • 1.3b Removed: This checkpoint is now covered by Guideline 1.4a.
  • 1.3c Meaningful sequence. When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
  • 1.3d Forms. Form element labels can be programmatically determined.
  • 1.3e Tables. Table cells and relationships between cells can be programmatically determined.
  • 1.3f Cascading style sheets. Web pages are readable without requiring style sheets.
  • 1.3g Sensory characteristics. Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
  • 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
  • 1.4a Use of color. Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
  • 1.4b Audio control. If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
  • AA1.4.3 Contrast (Minimum). The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for large print and images of large print, which must have a contrast ratio of 3:1. Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. Text that is part of a logo or brand name has no minimum contrast requirement.
  • AA1.4.5 Images of Text. Use text to convey information rather than images. An image of text may be used if it is essential to the information being conveyed or if the image of text can be visually customized to the user's requirements.
  • 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
  • 2.1a Keyboard. All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
  • 2.1b Scripts. Scripts are keyboard accessible. If the content affected by scripting is not accessible, an alternative is provided.
  • 2.1c Applets, plug-ins, and non-HTML content. A link is provided to a directly accessible applet, plug-in or other application. Alternate content is provided for those applets, plug-ins or other applications that are not directly accessible.
  • 2.1d No keyboard trap. If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys, the user is advised of the method for moving focus away.
  • 2.2 Enough Time. Provide users enough time to read and use content.
  • 2.2a Adjust time response. The user is allowed to turn off, adjust or extend all time limits that are not a real-time, essential or 20 hour exception.
  • 2.2b Pause, stop, hide. The user is allowed to pause, stop, or hide moving, blinking, scrolling, or auto-updating information unless it is an essential part of an activity.
  • 2.3 Seizures: Do not design content in a way that is known to cause seizures.
  • 2.3a Flashing Content or below threshold. Web pages do not contain anything that flashes more than two times in any one second period, or the flash is below the general flash and red flash thresholds.
  • 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
  • 2.4a Navigational features. A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
  • 2.4b Navigate to main content. Methods are provided for skipping over navigation links to get to the main content of the page.
  • 2.4c Frames. A title and an accessible frame source are provided for each frame.
  • 2.4d Page titles. Web pages have titles that describe topic or purpose.
  • 2.4e Focus order. If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
  • 2.4f Link purpose. The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
  • AA2.4.5 Multiple Ways. More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.
  • AA2.4.6 Headings and Labels. Headings and labels describe topic or purpose.
  • AA2.4.7 Focus Visible. Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
  • 3.1 Readable: Make text content readable and understandable.
  • 3.1a Language of page. The default human language of each Web page can be programmatically determined.
  • AA3.1.2 Language of Parts. The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.
  • 3.2 Predictable. Make Web pages appear and operate in predictable ways.
  • 3.2a On focus. When any component receives focus, it does not initiate a change of context.
  • 3.2b On input. Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
  • AA3.2.3 Consistent Navigation. Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
  • AA3.2.4 Consistent Identification. Components that have the same functionality within a set of Web pages are identified consistently.
  • 3.3 Input Assistance: Help users avoid and correct mistakes.
  • 3.3a Error identification. If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
  • 3.3b Labels or instructions. Labels or instructions are provided when content requires user input.
  • AA3.3.3 Error Suggestion. If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.
  • AA3.3.4 Error Prevention (Legal, Financial, Data). Web pages used for legal commitments or financial transactions, that modify or delete user-controllable data in a data storage system, or submit user test responses must 1) allow the user to reverse the submission, OR 2) be checked for input errors and provide the user with the ability to correct input before submission, OR 3) allow the user to review, confirm and correct information before finalizing the submission.
  • 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.
  • 4.1a Parsing. In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
  • 4.1b Name, role, value. For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
  • 4.2 Ensure that content is accessible or provide an accessible alternative.
  • 4.2a Text-only page. If accessibility cannot be accomplished in any other way, a text-only page with equivalent information or functionality is provided.
  • 4.2b Accessibility-supported technologies only. Use accessibility supported technologies. Any information or functionality that is implemented in technologies that are not accessibility supported must also be available via technologies that are accessibility supported.

Words & Prose & Such

  • Use headings (<h1> through <h6> elements) for content structure.
  • The header structure should make sense semantically, not only with CSS styling.
  • Aim for between 50 and 120 characters per line for optimal reading experience. This applies to every viewport.
  • Write well. See this resource.
  • Use list elements semantically. Unordered lists <ul> should be used when there is no order of sequence or importance. Ordered lists <ol> suggest a progression or sequence. Definition lists <dl> should be used explicitly for presenting a structure for definitions.
  • Apply emphasis with <em> or <strong> rather than only using CSS.
  • Use <abbr> element on all abbreviations.
  • Links <a> must have a non-empty href attribute.
  • Users must be able to navigate and perform all actions on your site using the keyboard alone. See this resource
  • Links should make sense out of context. Phrases such as "click here," "more," "click for details," and so on are ambiguous when read out of context.
  • Add a "Skip Navigation" link. (background)
  • Dynamic and complex web apps that go beyond the capabilities of native UI elements introduce a number of issues that should be addressed using ARIA attributes.

Form elements

  • Forms should be clear and intuitive. They should be organized in a logical manner. Instructions, cues, required form fields, field formatting requirements, etc. should be clearly identified to users. Provide clear instructions about what information is desired. If any form elements are required, be sure to indicate so. Make sure that the order in which form elements are accessed is logical and easy. This can sometimes by problematic if tables are used to control layout of form items.
  • Many users can only use a keyboard to navigate and use the web. You must ensure that the forms on your web site can be completed using only the keyboard.
  • Label every form element (placeholders don't count). Preferred is label above input element, left aligned. There are several different ways you can label a form element.
  • Use <fieldset> to group thematically related controls and labels. Mainly relevant for radio buttons and checkboxes. Each <fieldset> must be labelled by a <legend>. More information on fieldsets and legends.

Tables

  • If a table has a descriptive caption, use the <caption> element.
  • Identify row and column headers using the scope attribute. <th scope="row">Heading Text</th>
  • For extremely complex tables, you can use the headers property on a <td> element to indicate the ids of associated headers. This usually isn't necessary.
  • Consider using <thead>, <tbody>, and <tfoot> to organize a table with a footer and/or header. These provide no accessibility benefit, but footers and headers provide extra opportunities for targeted styling and will be repeated on each page when printed.

Multimedia & Visualizations

  • Provide alternative text for images. This is what the alt attribute is for. If an image is purely decorative, you can add alt="" but consider using CSS to show the image.
  • Another way to add alternative text is by wrapping the image in a <figure> element and including a <figcaption>
  • Text in images should still be legible even when zoomed in.
  • Animations should be short in duration. Automatically moving, blinking, or scrolling content that lasts longer than 5 seconds should be able to be paused, stopped, or hidden by the user.
  • Any flashing elements (including that in video) should be small, not high-contrast, and flicker no more than twice a second.

Other Visual Features

Icons & Icon Fonts

  • Icons should be well designed, easy-to-understand, and used consistently.
  • Something about screen readers and icon fonts

Use of Color

  • All text should have sufficient color contrast with its background. This applies both to text and images containing text.
  • [ ]

Showing, hiding, and in between.

visibility: hidden - shows in DOM, but not visible and not seen by SR display: none - not in DOM, not visible, not seen by SR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment