Keyboard Navigation: Making Your Squarespace Site Accessible for All

Table of Contents Show

Web Accessibility is important for EVERYONE.

And Keyboard Navigation is an important part of an accessible website. I was going to include this in my overall Squarespace website accessibility blog post, but the whole thing was just getting too long 😜 So here we go, a totally separate post about Keyboard Navigation! (Thrilling, I know...)

What is Keyboard Navigation?

Keyboard navigation is for people who are unable to or can’t use a mouse, like those with motor impairments. Here are some key ways to make sure your website can be navigated using a keyboard alone:

1. Tab Key Navigation

• Basic Navigation: The ‘Tab’ key allows people to jump from one interactive element (like links, buttons, and form fields) to the next. Shift + Tab moves them to the previous element.

• Focus Indicators: Focus indicators are things like borders or background color changes around links and buttons. These show which part of a web page is selected when using a keyboard.

2. Accessible Menus

• Dropdown Menus: Make sure dropdown menus can be opened and navigated using the keyboard. The arrow keys should move through menu items, and the Enter or Spacebar keys should activate them.

• Skip Navigation Links: Add a “Skip to Content” link at the top of your pages so keyboard users can skip past repetitive links (like navigation menus) and go straight to the main content.

3. Form Navigation

• Logical Order: Arrange form fields in a logical order (like name, email, etc.). Make sure  users can tab through them in a way that follows the natural reading order.

• Labels and Instructions: Provide clear labels and instructions for each form field so screen readers can tell users what each field is for.

4. Interactive Elements (like buttons and links)

• Buttons and Links: Make sure all clickable items can be used with the keyboard. This includes making sure that buttons and links can be “clicked” by pressing Enter or Spacebar.

• Avoiding JavaScript Issues: Avoid using scripts that mess up the natural order of tabbing. Make sure any new elements added by scripts can still be reached with the keyboard.

5. ARIA (Accessible Rich Internet Applications) Roles

• Role Attributes: Use ARIA (Accessible Rich Internet Applications) roles to help assistive technologies understand your website’s dynamic content. For example, using role="button" makes sure that something that looks like a button is treated like a button by screen readers and keyboards.

Example of How to Test Keyboard Navigation

1. Navigate to the public view your website.

2. Press the Tab key: Start navigating through the interactive elements.

3. Check for Focus Indicators: Ensure each element is highlighted as you navigate.

4. Activate Elements: Press Enter or Spacebar to activate links, buttons, and other controls.

5. Navigate Forms: Move through form fields using Tab and Shift + Tab.

6. Skip Links: Look for and use "Skip to Content" links if available.

TIP: This website has a  Keyboard Testing Table that includes many of the most common online interactions, the standard keystrokes for the interaction, and additional info on things to consider during testing. 

Keyboard navigation is an important part of making your website accessible to everyone.

By making sure that all interactive elements can be navigated and activated using a keyboard, you’ll create a more inclusive and user-friendly experience. Which is a win for everybody!