Skip to content

Accessibility guidance

Jump to bottom
gediminas-s edited this page Dec 10, 2014 · 1 revision

Accessibility guidance

Markup

  1. Specify page language with the lang attribute on the <html lang="en"> element.
  2. Give page meaningful and unique title using the <title> tag.
  3. For page sections and articles use headings (e.g. <h1>, <h2>, <h3>).
  4. Use proper markup. For example, list items should be enclosed in list tags (<ul>, <ol>, <dl>).
  5. Always indicate headers in data tables using <th> tags, and associate all data cells with their header.
  6. Use ARIA roles which provide screen reader with more information. The following ARIA roles should be included in every project:
    • banner - typically the header of page that includes the name of the site (<header role="banner">),
    • navigation - use on any navigation list, typically on the nav element (<nav role="navigation">),
    • main - main content in site (<main role="main">),
    • contentinfo - for footer of page (<footer role="contentinfo">),
    • search - for the search form (<form role="search">).

Images

  1. Be sure all images have a meaningful and descriptive alt attributes. (alt="Description of the image")

Forms

  1. Always label all form fields with the <label> tag. If a form field has no specific text label on the page, add one, and hide it with CSS or use the title attribute.
  2. All labels should have a for attribute which corresponds to an id of the input field it relates to. (e.g. <label for="name">Name:</label><input id="name" type="text">)
  3. Identify all input errors in text. Error should't be just image, icon or input with red border.

Visual appearance and content

  1. Ensure all links have :hover and :focus states and is recognizable.
  2. Never use maximum-scale=1.0 for responsive layouts. Content should be scalable.
  3. Make sure all links have a text. For example, if link should be just icon which don't have any text, you should add text and hide it.
  4. Be sure your page is still usable when images are turned off. (This may include making sure that contrast is still sufficient if you happen to be using a background image and that image is removed.)

Important

  1. Validate every HTML page with W3C validator.

Tips

  • Make all functionality and each element on the page is keyboard accessible.
  • Provide alternatives for users without JavaScript enabled.
  • Avoid CAPTCHAs, if you must use them, provide an audio CAPTCHA alternative.

Links

Clone this wiki locally