A page for accessibility testing

I'm so excited you're here and learning to do accessibility testing!

Navigating by keyboard

You can navigate this page using only a keyboard!

TAB key advances to next element
SHIFT + TAB goes to previous element
ENTER activates the element
Tips for forms below!

Using a Mac?

I recommend doing this test in Chrome, if possible.

Safari and Firefox both require updating a system and browser setting to properly support keyboard navigation. update a setting in your operating system and your browser.

Here's a form to try with your keyboard

Tips for using forms with a keyboard:

Use the arrow keys to navigate the round radio buttons.
Use your SPACE key to select checkboxes.
ENTER will submit the form at any time.

First Name (required)

How much did you know about web accessibility before today?

Almost nothing

Something in between

Almost everything

What things are you learning about web accessibility?

Keyboard navigation

Heading outlines

Color contrast

What is ONE thing you can commit to today to improve website accessibility?

Your data will not be saved.

Notable accessibility features on this page

This page demonstrates a number of web accessibility features that go beyond keyboard navigation and headings. Some require technical knowledge to fully understand.

Keyboard Navigation
- A "skip to content" link
- Keyboard-accessible drop-down navigation menu (navigation script on Github). Try ESC to close a submenu!
- Super-obvious keyboard focus styles (inspiration for focus styles)
Semantics
- Accessible heading structure
- header, main, and footer page landmarks
- Correctly labelled form elements with label and legend, including one with an associated description via aria-describedby
- Use of aria-labelledby and aria-current attribute in footer navigation
Color
- 4.5:1 or greater contrast for light colors and dark colors
- Borders on all elements with backgrounds to support Windows Forced Colors mode
- Support for dark mode browser/system preference

Note: All the links in the page's header go to the same page since this is a demo site. This is technically a WCAG failure. When writing links, use unique anchor text for each link except when linking to the same page. Use identical anchor text for links that go to the same page.

How this page has been tested

I've tried really hard to make this page extremely accessible, but I'm also a human! Let me know if you find any issues. The page is error free when testing with:

I've also evaluated it with:

Windows Forced Colors Mode
NVDA screen reader with Firefox
Accessible Brand Colors color palette testing tool
Zooming page to 500% with no loss of functionality or horizontal scrolling required.

A few other great tools for testing accessibility are: