EN

Keyboard test

Test your own website using only the keyboard. Ten short steps show what works and what does not, with a tip for each point.

Keyboard test

Keyboard test

E-powermentKeyboard test

Before you start

  • Open the website you want to test in another tab or window. Keep this page next to it, or switch back and forth.
  • Put your mouse away. Do not use your touchpad or touchscreen either: you do everything with the keys.
  • The focus is where your keyboard is right now: the link, button or field that responds when you press Enter. You usually see it as an outline.
  • Working on a Mac? Then in the Apple menu choose ‘System Settings’ and then ‘Keyboard’, and turn on ‘Keyboard navigation’. Otherwise Tab will not reach all the buttons.
  • Using Safari? Then in Safari also choose ‘Settings’ and then ‘Advanced’, and turn on ‘Press Tab to highlight each item on a webpage’. Otherwise Tab skips links.

For example the address or the name of your organisation. It goes above your result.

The test in ten steps

Answered: 0 of 10

  1. Skipping the menu

    Do this
    Open the page and press Tab once.
    This should happen
    A link appears, such as ‘Skip to content’. If you press Enter, you jump over the menu. If you then press Tab again, you get to the first link in the content.

    Watch out: A link like this is not the only way to meet the requirement: good headings and a clear page layout count too. But people who only use the keyboard benefit most from the link.

    WCAG 2.2: 2.4.1 Bypass Blocks (level A) 

    Does it work?
    Does it not work? Here is how to fix it

    Ask whoever builds your website to put a ‘Skip to content’ link at the top of every page, as the first link. It jumps to the start of the content, for example to <main id="inhoud">. The link can stay hidden until it gets focus.

  2. Everything can be reached, in a logical order

    Do this
    Keep pressing Tab until you reach the bottom of the page. Then go back up with Shift + Tab.
    This should happen
    You reach every link, button and form field that you can also use with the mouse. The order matches how you read the page: usually from top to bottom and from left to right. You do not suddenly jump back and forth.

    WCAG 2.2: 2.1.1 Keyboard (level A) , 2.4.3 Focus Order (level A) 

    Does it work?
    Does it not work? Here is how to fix it

    Use ordinary links (<a href>) and buttons (<button>): they work with the keyboard automatically. Put the code in the same order as what you see on the screen. Do not use a tabindex with a number higher than 0.

  3. You can see where you are

    Do this
    Press Tab a few more times. At each step, look at where you are now: in the menu, in the text and at the bottom of the page.
    This should happen
    The link or button that has focus has a clear outline around it. Or it changes in a way that is easy to see, for example in colour and with a line underneath. You never lose track of where you are.

    WCAG 2.2: 2.4.7 Focus Visible (level AA) 

    Does it work?
    Does it not work? Here is how to fix it

    Ask whoever builds your website never to remove the focus outline (outline: none) without putting something clear back in its place. An outline at least 2 pixels thick, in a colour that stands out well against the background, is easy to see.

  4. The focus is not hidden

    Do this
    Tab further down and then go back with Shift + Tab. Watch out for things that stay in place when you scroll: a fixed bar at the top, a cookie banner or a chat button.
    This should happen
    The link or button with focus can always be seen. A fixed bar or banner never covers it completely.

    Watch out: Did you open something yourself, such as a drop-down menu, and does it cover the focus? That does not count as an error if you can close it without the focus moving, for example with Esc. A cookie banner or fixed bar that covers the focus completely is an error. Half covered just about meets the requirement, but it does make your website harder to use.

    WCAG 2.2: 2.4.11 Focus Not Obscured (Minimum) (level AA) 

    Does it work?
    Does it not work? Here is how to fix it

    Ask whoever builds your website to leave room for fixed bars, for example with scroll-padding-top in the CSS. Make people answer a cookie banner before they can continue on the page, or place it so that it covers nothing.

  5. Buttons and links work with Enter and Space

    Do this
    Use Tab to go to a link and press Enter. Go to a button and press Enter. Try another button with Space.
    This should happen
    A link opens with Enter. A button works with Enter and with Space. When you press Space on a button, the page does not scroll down: the button does what it should do.

    Watch out: Does a button work with Enter but not with Space? Then you can still use it, and according to WCAG it is usually not an error. But it is what people expect, and often a sign that it is not a real button. In that case, choose ‘works’ and write it in your note.

    WCAG 2.2: 2.1.1 Keyboard (level A) , 4.1.2 Name, Role, Value (level A) 

    Does it work?
    Does it not work? Here is how to fix it

    Does something that looks like a button only work with the mouse? Then it is often not a real button. Ask whoever builds your website to use a <button> for an action, and a link (<a href>) for another page.

  6. The menu opens and closes

    Do this
    Use Tab to go to the menu. Does it have a button such as ‘Menu’, or an item that drops down? Open it with Enter or Space. Move through the items with Tab or the arrow keys. Close it with Esc or with the same button. Then make your browser window narrow, so that you see the phone version of the menu, and do it again.
    This should happen
    The menu opens without a mouse. You can reach all the items, including those in a drop-down menu. The menu also closes again, and the focus is then back on the button you used to open it.

    Watch out: Closing with Esc is not a strict WCAG requirement, but it is what people expect. If the menu closes with the same button, it works.

    WCAG 2.2: 2.1.1 Keyboard (level A) 

    Does it work?
    Does it not work? Here is how to fix it

    A drop-down menu that only opens when you hover over it with the mouse does not work with the keyboard. Ask whoever builds your website for a button that opens and closes the menu, and that tells a screen reader whether the menu is open (aria-expanded).

  7. Filling in a form

    Do this
    Find a form, for example to search, to get in touch or to sign up. Fill it in without a mouse. Type in the fields. Choose a radio button with the arrow keys. Tick a box with Space. Choose from a drop-down list with the arrow keys. You do not need to send it yet.
    This should happen
    You reach every field and can fill in and choose everything. Nothing unexpected happens while you choose: for example, the website does not go straight to another page as soon as you choose something from a drop-down list.

    WCAG 2.2: 2.1.1 Keyboard (level A) , 3.2.2 On Input (level A) 

    Does it work?
    Does it not work? Here is how to fix it

    Use ordinary input fields, radio buttons, checkboxes and drop-down lists from HTML: they work with the keyboard automatically. Never let a choice open another page straight away. Put a button next to it, such as ‘Show’.

  8. Error messages can be found

    Do this
    In the same form, leave a required field empty, or type something that is wrong, such as an email address without @. Send the form with Enter or with the button.
    This should happen
    You see a message that says in words what is wrong, and in which field. The focus goes to the message or to the field, or you can reach it with Tab. You can correct the error without a mouse.

    Watch out: Are you sending something that really arrives, such as a sign-up? Then do not test with real details.

    WCAG 2.2: 3.3.1 Error Identification (level A) 

    Does it work?
    Does it not work? Here is how to fix it

    Ask whoever builds your website to move the focus to the message, or to the first field with an error, when something goes wrong. Put the message in words next to the field, not only as a red border. Link the message to the field (aria-describedby), so that a screen reader reads it out.

  9. A window on the page works properly

    Do this
    Open something that appears as a window over the page: a pop-up, the settings of a cookie banner or a photo that opens large. Press Tab a few times. Then press Esc.
    This should happen
    When the window opens, the focus moves into it. With Tab you stay in the window and do not get to the page behind it. It closes with Esc or with a close button. After that, the focus is back on the button you used to open it.

    Watch out: Closing with Esc is not a strict WCAG requirement. But it is what people expect, and W3C recommends it. There must at least be a close button that you can reach with the keyboard.

    WCAG 2.2: 2.4.3 Focus Order (level A) , 2.1.2 No Keyboard Trap (level A) 

    Does it work?
    Does it not work? Here is how to fix it

    Ask whoever builds your website to use a real dialog, for example the HTML element <dialog> with showModal(). That keeps the focus in the window and closes with Esc. Then check that the focus returns to the button that opened the window.

  10. You never get stuck

    Do this
    Use Tab to go to everything on the page that comes from another party: a video, a map, a chat window or a form. Try to get out again with Tab and Shift + Tab.
    This should happen
    You can get out of everything with Tab or Shift + Tab. If another key is needed for that, it says which one.

    WCAG 2.2: 2.1.2 No Keyboard Trap (level A) 

    Does it work?
    Does it not work? Here is how to fix it

    If you get stuck, someone who only uses the keyboard cannot go any further on the page. That is a serious error. Ask whoever builds your website, or the maker of the video, map or chat, for a version that does work with the keyboard. Or put a link next to it to the same information, for example as plain text.

Result

  • 0works
  • 0does not work
  • 0not applicable
  • 10not tested yet

You have not answered any steps yet. Start at step 1.

Not tested yet

  • 1. Skipping the menu
  • 2. Everything can be reached, in a logical order
  • 3. You can see where you are
  • 4. The focus is not hidden
  • 5. Buttons and links work with Enter and Space
  • 6. The menu opens and closes
  • 7. Filling in a form
  • 8. Error messages can be found
  • 9. A window on the page works properly
  • 10. You never get stuck

This test is only about the keyboard. There is more that makes a website accessible. Also test:

Made with the Keyboard test from E-powerment: e-powerment.nl/en/tools/toetsenbordtest/

How it works

  1. Open the website you want to test in another tab. Put your mouse away.
  2. Do the ten steps. Each step says what you do and what should happen.
  3. At each step, choose: works, does not work or not applicable. Write down what you saw, if you like.
  4. After the ten steps comes the result: what does not work, and for each point what you can do about it.
  5. Choose Print or Copy the text, above the tool. For example to email the result to whoever builds your website.

Test a few different pages: the home page, a page with a form and a page with a video or a map. If a step does not fit the page, choose ‘not applicable’.

The keys

Tab
To the next link, button or field.
Shift + Tab
Back to the previous one.
Enter
Follow a link or use a button. On a Mac this key is sometimes called return.
Space
Use a button, or tick or untick a box.
The arrow keys
Choose between radio buttons or in a drop-down list, and sometimes move through a menu.
Esc
Close a menu, pop-up or window.

Good to know

  • This is a first check, not a full test against the rules. Does everything work? Then you know that the keyboard works well on the pages you tested. To find out whether your whole website meets the requirements, have it tested by someone who knows about this.
  • You need a keyboard. You cannot do this test on a phone or tablet without a keyboard.
  • Each step shows which WCAG 2.2 requirement it belongs to. WCAG is the international standard for accessible websites, and a requirement like this is called a success criterion. All steps belong to level A or AA. A is the minimum, AA is the usual standard. Read more in what is WCAG.
  • Why this matters: not everyone uses a mouse, for example people who are blind or whose hands shake. Read more in Operable: everything works, even without a mouse.
  • What should happen follows the explanation from W3C, the organisation behind WCAG. Sometimes something is not a strict requirement, but it is what people expect, such as closing a window with Esc. When that is the case, it says so.

More testing

Your answers

Everything stays in your browser. We do not store your answers and notes and we do not send anything. If you refresh or close the page, they are gone. Want to keep the result? Print it or copy it. If you choose a link to WCAG, you go to the W3C website.

Sources

The steps follow WCAG 2.2 and the explanation from W3C. Read on 30 September 2026.

More tools

See all tools 

  • GameSimulation

    Obstacle course

    Try for yourself what it is like to use a website when you cannot see well, your hand shakes, reading is hard or you only have a keyboard. Then you repair the website and try again.

    With your client

  • CheckWriting aid

    Alt text helper

    Write good alt text for an image. Answer a few questions and get advice and a draft you can copy.

    With your client

  • CheckText check

    Plain language check

    Check whether your Dutch text is easy to read. See long sentences and difficult words, with a simpler word next to them.

    With your client

Build something together?

Send us a message if you have an idea, are missing something or would like to try a tool with your team. Tell us in a few sentences what it is about. We read everything, and it commits you to nothing.

Send us a message [email protected]