This site describes our support for the AngularJS (1.x) framework. Visit developer.blackbaud.com/skyux for information on our latest version.

Code review checklist for accessibility

Text equivalents for non-text elements

  1. Ensure that alt attributes on <img> elements accurately reflect the content and/or function of the image in the context that the image is used.
  2. Ensure that button text values accurately describe the purpose of buttons.
  3. Ensure that any decorative images have the role="presentation" attribute.

Order

Ensure that the visual order of elements matches the DOM order of elements.

Ensure that link text describes the target and purpose and that it can be distinguished from other links on the page. Review the methods to indicate the purpose of a link and the WCAG 2.0 technique to provide link text. If the link text is not descriptive, ensure that one of the following conditions is true:

  • The surrounding context conveys the link's purpose. For example, the sentence, table cell, or heading immediately preceding the link can provide context.
  • A programmatic solution such as off-screen text or aria-describedby augments the link text.

Semantic markup

Ensure that proper semantic HTML elements are used to describe the content of the page or component. For example, <ul> unordered lists are used for lists, <h1>-<h6> are used in order for headings, <nav> is used for navigation.

See Getting to know HTML and Extending Semantics and Accessibility for details of semantic markup.

Custom controls

For custom interactive controls that are used in ways that are not part of the HTML standard, ensure that the elements have the necessary ARIA roles, states, and properties. For information about how to make components and behaviors accessible with ARIA roles, states, and properties, see WAI-ARIA Authoring Practices 1.1.