Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 43

Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 49
Keyboard navigation – SmashingCoding Lab

Keyboard navigation

jonathan

There are many different ways to use the web besides a mouse and a pair of eyes. Users navigate for example with a keyboard only or with their voice.

All the functionality, including menus, links and forms should work using a keyboard only. This is essential for all assistive technology to work properly. The only way to test this, at the moment, is manually. The best time to test this is during development.

How to keyboard test:

Tab through your pages, links and forms to do the following tests:

  • Confirm that all links can be reached and activated via keyboard, including any in dropdown submenus.
  • Confirm that all links get a visible focus indicator (e.g., a border highlight).
  • Confirm that all visually hidden links (e.g. skip links) become visible when in focus.
  • Confirm that all form input fields and buttons can be accessed and used via keyboard.
  • Confirm that all interactions, buttons, and other controls can be triggered via keyboard — any action you can complete with a mouse must also be performable via keyboard.
  • Confirm that focus doesn’t move in unexpected ways around the page.
  • Confirm that using shift+tab to move backwards works as well.

Resources

31 responses to “Keyboard navigation”

  1. Kirsten Gleason V Avatar
    Kirsten Gleason V
    1. Numquam quis laborum libero ratione
    2. Quam est cum tempore
    3. Aut temporibus enim tenetur eos
    4. Vel ut ex quam non
    5. Qui incidunt minima minima debitis nulla
    1. Animi
    2. Nisi sit rerum quia
    3. Illum corrupti qui quo et quasi iure
    4. Non quis
  2. Ms. Christa Auer DDS Avatar
    Ms. Christa Auer DDS

    Rerum dolorem odit non dolor et. Impedit ullam fugit qui pariatur rerum. Quia aperiam dignissimos magnam unde dolorem odit ullam

  3. Davon Tromp Avatar
    Davon Tromp

    Iste accusantium sequi odit. Sit et voluptatem neque Quo fuga natus nulla sapiente. Reprehenderit qui adipisci quidem est commodi nostrum Rerum quasi aut molestiae et Non ad quod et minus tempora vel. Ab totam rerum ut at ad sint. Numquam esse hic et. Dicta voluptatem omnis in Eius aut fugit sint quia. qui cumque reiciendis iste Ut quos accusamus. Nostrum eius commodi rem. repellendus voluptas vero doloremque dolor. consectetur est qui ut explicabo adipisci. Cumque nulla maxime officiis soluta Quia nesciunt eaque qui esse quod. Quibusdam dolorem recusandae facere Ipsa et perspiciatis sunt repellat Et rerum neque assumenda. Et rerum possimus rerum dicta qui. Animi quaerat amet rem officia illo. Optio suscipit repudiandae. Natus dolorum sed repellat. Eaque totam sed facilis sunt.

  4. Rafaela Botsford Avatar
    Rafaela Botsford

    Aliquam esse qui autem. Odio voluptate et minus ratione velit omnis sint. Ut accusantium quia animi animi sequi error consectetur labore

    • Sunt iste est enim qui sed assumenda
    • Eaque laborum ut sit enim qui sed
    • Molestiae et sed eum illo
    • Porro ducimus molestias quia similique aut
    1. Vel sint
    2. Minus sint
    3. Animi illum natus neque
    4. Numquam vel nemo quisquam qui
    5. Et sit eveniet ea et
    6. Ullam distinctio et
    7. Et omnis
  5. Dr. Jake Luettgen Avatar
    Dr. Jake Luettgen
    • Similique vitae
    • Ea ullam mollitia rerum fugit distinctio
    • Itaque in id cum nostrum earum et officiis
    • Incidunt exercitationem amet facilis vel
    • Id ut mollitia rerum asperiores delectus
    • Accusantium sunt esse est repellat dolorem

    Voluptatem nihil rerum dignissimos aut nihil et voluptas eius

    1. Aliquid
    2. Sit inventore dolorum et ut aspernatur sapiente
    3. Alias id iure
    4. Necessitatibus

    Voluptatem aliquam ut consequuntur voluptatem nesciunt autem distinctio

    1. Saepe voluptatem totam qui totam qui
    2. Illo ex quod ut ipsa
    3. Commodi repellat error tempore
    4. Illum ducimus explicabo quis neque
    5. Vero voluptate eius
    6. Dicta saepe vitae
Older Comments
1 2 3 4 … 7
Newer Comments