Paste your markup into a validator a fix any reported issues. As well as reporting markup issues, the W3C Markup Validation Service will also report incorrect use of ARIA attributes.
Think about the structure of tags used, are elements like header
and section
used appropriately? Are headings structured in a logical order according to level of importance? Correct type of lists used? i.e. ordered / unordered.
Turn off CSS and read page from top to bottom, is it possible to read the document? Does it make sense?
Use heading order to show importance.
Ensure semantics are conveyed with tags or roles (if necessary), not with style, e.g. em
not class="italic"
and button
or role="button"
not div
.
Controls and images are labelled.
Form elements have an associated label
, even those with placeholder
, the label must always be visible. Alternatively they may make use of ARIA attributes such as aria-described-by
or aria-label
.
Images must have an alt
attribute, even if it's empty. Think about the context of the image; is it followed by descriptive text? Is it contained within a link? Is it a decorative image?
Run an in-browser audit and fix any issues.
Paste your markup into a validator such as the Web Accessibility Checker and fix any reported issues. The W3C Markup Validation Service will also report some accessibility related issues.
Using only the keyboard; you can action links and buttons with Space or Enter; dialogues may be dismissed and menus closed with Escape; composite components (such as dropdown menus) support arrow keys. Follow the conventions in native web components.
Use only the keyboard. You should be able to navigate to every interactive element (and only interactive elements) with the Tab key. Use tabindex="0"
on interactive elements that aren't natively focusable.
Using only the keyboard, interact with any scripted components and ensure focus is never 'dropped'. For example opening a dialogue (Space or Enter) focusses a button within that dialogue, dismissing the dialogue (Escape) hands focus back to the element which opened it.
Examine the live DOM (devtools) and manipulate the site (open, close, expand elements). Any states, such as aria-valuenow
and aria-expanded
, update accordingly.
Use a class helper to hide text visually:
<button>Add <span class="is-visuallyHidden">burger to basket</span></button>
When you have an element which uses a graphic to indicate its purpose, make sure you label it as w=such
<button aria-label="Add burger to basket">Add</button>
Only the aria-label
value will be used