User Tools

Site Tools


Quick Fixes (the TL;DR)

  1. Run Axe Dev Tools tests after making changes to a screen. [Enable keyboard navigation](#testing-keyboard-navigation) in your browser and tab through the page to make sure the order is sensible, you can always see [which element has focus](#visible-focus), and you can reach all the interactive controls.
  2. [Always use <button> instead of <a> to toggle events](#buttons-vs-links) that do not involve routing to another page. This is the single best thing we can do to improve keyboard accessibility. Most Angular and Bootstrap > 5.3 demos and tutorials incorrectly use <a> or <div> tags to toggle click events. In dropdowns, also make sure each item in the submenu has [the ngbDropdownItem directive]( Specify type=”button” on any button that should not submit its parent form when activated using the Spacebar or Enter key.
  3. [Label form fields.](#labels) Every form input must have a <label for=”domid”> (preferred) or an [ARIA label](#aria) (using either the aria-label or aria-labelledby attributes as appropriate). Do not use placeholders or title attributes instead of a label.
  4. Use [HTML5 input types and autocomplete attributes](#forms) wherever possible. See [Build a Better Mobile Input]( for a demonstration of the benefits.
  5. Make sure that [every element on the page is enclosed in a landmark](#headings-landmarks-and-structure) and that all the major sections other than navigation have headings (<h1> through <h6>). The headings can be hidden with the “visually-hidden” class if they aren’t useful to sighted users. If there are multiple landmarks with the same role (typical with navigation), label them with aria-label or aria-labelledby.
  6. Avoid using ARIA to emulate native HTML elements; just use the native tags. Do not override native HTML roles.
  7. Use <ul> or <ol> for lists; screen readers will announce the total number of items, which helps the user anticipate the length of the content.
  8. [Use <table> for data](#grids-and-tables) where both the row and the column contain essential information about the context of the data. Use <thead>, <tbody>, and <th> tags to distinguish headers from data cells. Use <caption> to summarize the table. Do not nest <table> tags.
  9. [Add aria-describedby to buttons and links](#repetitive-link-or-button-names) that have identical text (e.g. the Edit links in grid rows).
  10. Make sure text and background colors pass [level AA color contrast checks]( Link colors should pass the [link color contrast test](, also at AA.
  11. Images should have alt text unless they are purely decorative. See the [alt text decision tree]( to determine whether you need alt text. Use aria-hidden=”true” on decorative icons. Icon buttons without additional text should have aria-label attributes to replace the Material Icons keyword with a more descriptive name. You can also use the title attribute, with the same text as the aria-label, to provide a tooltip for icon buttons; this helps people figure out the meaning if the icon isn’t obvious. These attributes should go on the parent <button> element, since aria-label is not valid on <div> or <span>.
accessibility/quick_fixes.txt · Last modified: 2023/07/10 13:20 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.