Keyboard Navigation
Keyboard navigation support is a fundamental aspect of website accessibility. It ensures that users who cannot use a mouse, such as those with motor disabilities, visual impairments, or temporary injuries, can still navigate and interact with a website.
Every interactive element, including links, buttons, and form fields, should be reachable using the Tab key, with a logical tab order and visible focus indicators to show which element is currently selected.
Websites built with the latest version of Blocs, support the following keyboard navigation controls when viewed in a web browser.
Escape Key
- Closes Dropdown.
- Closes Modal.
- Closes Light Box.
- Closes Full Screen Menu.
Left and Right Arrow Keys
- Navigate Light Box (forward & backwards).
- Navigate Tabs (forward & backwards).
Return Key
- Click selected button or link.
- Open selected menu / dropdown.
Space Key
- Click selected button.
- Open selected menu / dropdown.
- Toggle checkbox selection (checked/unchecked).
- Toggle radio selection (selecting an option).
Tab Key
- Move selection forward.
Shift + Tab Key
- Move selection backwards.
In Safari, tab navigation support needs to be enabled manually. You can turn it on by going to Settings > Advanced > Accessibility.
Focus Indicators
When navigating a website using a keyboard, it’s essential that focus indicators are clearly visible, allowing users to easily see which element is currently selected. Blocs includes a built-in Accessibility Enhancement feature that, when enabled, improves the visibility of link and button focus states. This enhancement makes it easier for keyboard users to navigate your site efficiently and ensures a more accessible experience for those who rely on keyboard input.
Accessibility Labels
Using accessibility labels on a website is crucial for meeting WCAG (Web Content Accessibility Guidelines) and ensuring your content is accessible to all users, including those relying on assistive technologies like screen readers. One key element is the use of descriptive alt tags on images, which provide meaningful context for users who can’t see visual content. In Blocs, setting the alt text of an image is simple, just use the relevant text field in the sidebar inspector, when an image is selected on the design canvas.
If you leave the alt field blank, Blocs will automatically generate a clean, readable version based on the image file name to help maintain accessibility standards when you export or publish your site.
Additionally, aria-label and aria-labelledby attributes help label elements that do not have visible text, such as icons or buttons, enabling screen readers to communicate their function clearly.
When building a website with Blocs, you can manually add these accessibility attributes using Custom Data Attributes, giving you full control over how assistive technologies interpret and announce your content.
Colour Contrast
When building a web page, it’s important to consider colour contrast and colour blindness to ensure your content is accessible to all users. Adequate contrast between text and background colours is essential for readability, especially for those with low vision or colour vision deficiencies. Blocs includes built-in visual impairment simulation filters that let you preview your site through the lens of various visual conditions. This makes it easy to identify and adjust problematic colour combinations, helping you design a more inclusive and accessible website.
Structure
Using semantic HTML tags, such as header, main, section, nav, and footer, is an important consideration when building accessible websites. These tags give structure and meaning to your content, allowing assistive technologies like screen readers to interpret the page layout and navigate it more effectively.
In Blocs, you can assign semantic container tags to each section of your site using the container tag options. This not only improves accessibility but also helps keep your website well-organised and can improve SEO.