To check the accessibility of your content, it's important to use both automated tools and non-technical tests. Automated checkers such as Siteimprove, WAVE, and Axe provide efficient and thorough review of the content and underlying code, but they can't find every accessibility issue. So you'll need to do a manual review for a complete assessment. To manually test your site, review the content, test with a keyboard, and use a screen reader to make sure your website is accessible and inclusive to everyone.
- Confirm that page titles are unique and descriptive, marked as <h1>. There should only be one <h1> per page.
- Ensure visual headings are useful and descriptive, and marked up with an <h> element and in hierarchical order (<h1>, <h2>, etc.). Look for skipped heading levels (<h2> to <h4>).
- Look for generic link text like “read more” or "click here."
- Check that plain language is used instead of jargon, and all acronyms are spelled out on first reference.
- Check that the text and background color has a contrast ratio of at least 4.5:1.
- Ensure color is not used as the only way of conveying meaning or information.
- Make sure form controls have descriptive labels.
- If a label is not visible, check for a hidden <label>, aria-label, or title attribute.
- Ensure alternative "alt" text conveys the content and function for all non-decorative images. It should be succinct, accurate, and useful.
- Look for images of text or text embedded on images, and confirm that the text is represented either in the body text or in the alt text. Check this by trying to highlight text with your cursor.
- Confirm that tables are only used for tabular data, not for layout.
- If data tables are present, ensure table caption and row and/or column headers are present.
Zoom in to 200%
Control + for PCs, Command + for Mac
- Is all the content still present on the page and is it still in an order that makes sense?
- Does any of the content overlap or become far apart?
- Do navigation bars or menus get replaced with mobile-style menus, and can you navigate and close the menus?
- Do you have to scroll horizontally to read everything, and is anything cut off?
- Do links, buttons, forms, and menus still function with the content zoomed?
How to test with a keyboard
- Tab: Navigate to links and form controls.
- Shift + Tab: Navigate backwards.
- Spacebar: Activate checkboxes and buttons.
- Enter: Activate links and buttons.
- Arrow keys: Radio buttons, select/drop-down menus, sliders, tab panels, auto-complete, tree menus, etc.
- Escape: Dismisses browser dialog or menu.
What to check for
- Is anything mouse-only, such as rollover menus?
- Is a "skip navigation" link available? Activate the skip link and hit Tab again to ensure it functions correctly.
- Is the navigation order logical and intuitive?
- Is a visible keyboard focus indicator present?
- Test dialogs that 'pop' open. Can you navigate and close the dialog? Does focus return to a logical place?
- Esc should also close all dialogs.
Test with a screen reader to uncover issues with reading order, spelling, dynamic content, and interactive elements.
Free screen readers:
Open the menu or rotor
(NVDA: Insert + F7 ; VoiceOver: Command + Option + U)
- Headings: Are all of the headings on the page listed and do they reflect the page structure?
- Form Controls: Are all of the form controls present with accessible names that make their purpose clear?
- Links: Does the link text make it clear where clicking the link will take you?
- Landmarks: Are all of the landmarks unique and being used correctly?
Listen to how the page content is being announced
- Is any of the page content being missed or not announced?
- Is any content being announced which does not need to be (such as decorative images)?
- Are items marked-up accurately? Are headings announced as headings, links as links, buttons as buttons, lists as lists, etc.?
Test interactive elements
- Can you select all links on the page with the screen reader?
- Check any forms on the page. Are you able to fill out the form, and are the fields labeled to make it clear what they are for?
- If there are interactive elements, can you operate them with the screen reader? Are they labeled clearly?
- If there is a search box, can you use it with the screen reader?
Check dynamic content and pop-up dialogs
- If there is any dynamic content on the page, is the new content is announced to the screen reader?
- When you navigate away, does the focus move to a logical place?
- If there are dialog boxes, are they announced by the screen reader, and can you close them with the keyboard?