Styleguide accesibility

Brienne Wong
Brienne Wong
  • Updated

You can improve the accessibility of your styleguide with these accessibility features. These will enable viewers with impairments to navigate your design system information easily.

Skip to content

You can navigate the webpage more easily using your keyboard with the skip to content link.

You will need to be in view-only mode to access the link.

1) Click on the browser URL, then click tab on your keyboard to display the Skip to content link

2) Select Skip to content by clicking enter/return on your keyboard

3) Click tab to navigate through each section of the page

Gif showing how to enable Skip to content feature

Enable tab navigation

You may need to complete extra steps to enable tab navigation for Safari and Firefox.

For Safari

1) Open the Safari browser and click Safari, then Settings

2) In the Advanced section, select Press tab to highlight each item on a web page

Safari Advanced page

For Firefox

1) Open Firefox and click the hamburger icon and go to Settings

Arrow showing hamburger icon in Firefox

2) In the General page under the Browsing section, select Always use the cursor keys to navigate within pages

Browsing section in the General page

For Mac systems

1) Open System Preferences and click the section Keyboard

2) Toggle on Keyboard navigation

Keyboard page in System Preferences in Mac

3) Now you can use the tab key to navigate forwards, shift + tab to navigate backwards, enter to select.

Alt text

You can add alt text to images, rules blocks, and images in tables.

👉 Note: If you don’t enter alt text into the alt text field, zeroheight will use the caption text as alt text.

1) Hover over an image and click Alt text

Alt text feature available for image

2) Add your alt text

empty Alt text field

3) Click Update

Filled in Alt text field

4) Your image has alt text by showing the ALT icon in the lower left corner

Image with alt text in it

5) Hover over the image again and click Alt text to edit it

Was this article helpful?