Many people prefer using keyboard navigation because it’s easy to use, works well on different devices, and makes browsing the web smoother. It’s especially helpful for those with disabilities or trouble moving their hands.
It’s Time to Revisit Your Keyboard
Keyboard-accessible content allows people to navigate the internet without a mouse using alternative keyboards and inputs. Imagine quickly navigating through a website’s menus, completing forms, and activating links without relying on a pointer but rather by tapping and combining a sequence of keys.
Here are some commonly used keyboard keys (shortcuts) for navigating the web:
- Activate Focused Item i.e. link, button, etc. (Enter or Spacebar)
- Scroll Through Content (Arrow Keys)
- Move Backward Through Tabs (Ctrl + Shift + Tab or Cmd + Option + Left Arrow on Mac)
- Move Focus Forward and Backward (Tab, Shift + Tab)
- Navigate Back (Alt + Left Arrow or Backspace)
- Navigate Forward (Alt + Right Arrow)
- Open Find Feature (Ctrl + F or Cmd + F on Mac)
- Open New Tab (Ctrl + T or Cmd + T on Mac)
- Reopen Closed Tab (Ctrl + Shift + T or Cmd + Shift + T on Mac)
- Refresh Webpage (F5 or Ctrl + R or Cmd + R on Mac)
- Switch Between Tabs (Ctrl + Tab or Cmd + Option + Right Arrow on Mac)
- Navigate to Address Bar (Ctrl + L or Cmd + L on Mac)
How you build your pages and content should guarantee that everyone, no matter their abilities or preferences, can easily access and use your website.
Building Your Content for Keyboard Accessibility
The Web Content Accessibility Guidelines (WCAG) define keyboard-accessible content as a Level A success criterion (Keyboard 2.1.1). This means that all functionality on a website can be operated solely through a keyboard interface.
The following list outlines the basic steps you can take to make your website content navigable by keyboard:
Show visitors where they are on the page
When users click any key on the keyboard, clearly show which element currently has keyboard focus with a styled focus indicator. This helps users understand their location on the page and which element is active. Common focus indicators include outlines, borders, or changes in colour. Use the tabindex attribute in HTML and the: focus pseudo-class in CSS.
Make interactions accessible
Users should be able to interact with dropdown menus, checkboxes, radio buttons, and other form controls using keyboard shortcuts. Use semantic HTML elements like <button>, <a>, <input>, and <select>, which are natively accessible and operable by keyboard.
Let visitors skip content
Use skip links at the beginning of your pages to allow users to bypass repetitive navigation links and go directly to the main content. This is particularly useful for users who navigate using screen readers or keyboard-only input.
Help visitors fill forms
Ensure users can easily navigate through form fields using the Tab key and submit the form using the keyboard alone. Use semantic HTML elements like <form>, <input>, <label>, <select>, and <textarea> to structure your form as well as descriptive labels, especially for users of screen readers.
Test everything with your keyboard
The tab, arrow, and enter are the keys commonly used on your keyboard to navigate your website. Test your website using these keys and observe if you can see an indicator showing you which link is active or if you can play a video or fill out a form. Refer to the Web Content Accessibility Guidelines (WCAG) to understand accessibility standards and how to implement them in your website.
Let’s Check Your Site Together.
An accessible website is designed and built with clean, flexible code that adapts well to new technologies.
Resources
Operable Content as defined by WCAG 2.0
- Make it possible to perform all tasks with a keyboard instead of a mouse.
- Give users enough time to perform tasks.
- Avoid information that flashes or flickers, as it may trigger seizures.
- Make it possible for users to navigate, find content, and figure out where they are.
