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.

[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](https://ng-bootstrap.github.io/#/components/dropdown/api#NgbDropdownItem). Specify type=”button” on any button that should not submit its parent form when activated using the Spacebar or Enter key.

[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.

Use [HTML5 input types and autocomplete attributes](#forms) wherever possible. See [Build a Better Mobile Input](https://better-mobile-inputs.netlify.app/) for a demonstration of the benefits.

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.

Avoid using ARIA to emulate native HTML elements; just use the native tags. Do not override native HTML roles.

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.

[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.

[Add aria-describedby to buttons and links](#repetitive-link-or-button-names) that have identical text (e.g. the Edit links in grid rows).

Make sure text and background colors pass [level AA color contrast checks](https://webaim.org/resources/contrastchecker/). Link colors should pass the [link color contrast test](https://webaim.org/resources/linkcontrastchecker/), also at AA.

Images should have alt text unless they are purely decorative. See the [alt text decision tree](https://www.w3.org/WAI/tutorials/images/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>.