Your help center is built so that everyone can use it, including people who navigate with a keyboard, use a screen reader, zoom in, or turn on high contrast or reduced motion. Here's what's built in, what depends on you, and how to get our accessibility documentation.
Applies to: the help center pages your readers visit · Plans: All plans, every theme
Our target: WCAG 2.2 Level AA
Our target for the help center pages your readers see is the Web Content Accessibility Guidelines (WCAG) 2.2 at Level AA.
Need documentation for a procurement or compliance review? Our VPAT (Voluntary Product Accessibility Template), the standard accessibility conformance report, is available on request: contact support. It goes through the WCAG criteria one by one and says which ones the help center supports fully and which only partly.
Built into every help center
These features are part of the pages themselves, so they work with every theme. You don't need to switch anything on.
Keyboard and focus
A Skip to content link is the first thing the Tab key reaches. It jumps past the header to the main content.
Every link, button and field shows a clear focus outline, and it stays visible in Windows high contrast mode.
Search, menus, FAQs and forms work from the keyboard. On small screens, a docked sidebar opens as a Browse drawer that keeps focus inside it while it's open.
Wide tables in articles scroll inside their own box, which keyboard users can focus and scroll with the arrow keys.
In Compass, Ctrl+K (⌘K on a Mac) jumps straight to search.
Screen readers
Each page declares its language, so screen readers can use the right pronunciation. Arabic, Persian and Hebrew pages read right to left.
The header, main content, sidebars, navigation and footer are marked as landmarks, so readers can jump between them.
Instant search suggestions work like a standard combobox: arrow keys move through the results, and the number of results is announced.
Your logo's text alternative is your Site name, set under Brand.
Menu links that open in a new tab say so to screen reader users.
On phones, long breadcrumb trails fold to save space, but screen readers still hear the full path.
FAQ questions use the browser's own expand and collapse control, which keyboards and screen readers already understand.
Rating buttons have names and announce which one is selected. Copying a link announces "Copied!".
Embedded videos and other frames in articles have titles. An article's audio player has a labeled play button and a timeline you can move with the arrow keys.
The language menu is a list of plain links, so it works even when JavaScript doesn't load.
Seeing and reading
Contrast is checked for you. Muted text is kept at a contrast ratio of at least 4.5:1 against your backgrounds, links in your brand color get a readable shade, and labels on buttons in your primary color are black or white, whichever reads better. Form field outlines keep at least 3:1, and the Hero's automatic text color is picked separately for light and dark mode.
Light and dark mode follow the reader's device setting. See Light and dark mode.
Pages reflow down to 320 pixels wide, the width WCAG uses for zoomed-in reading, so readers who zoom in don't have to scroll sideways.
Reduced motion is respected. When a reader's device asks for less motion, animations and transitions are switched off.
Forms
Every contact form field has a label, and required fields are marked.
Name, email and phone fields support the browser's autofill.
Errors appear next to the field they belong to and are announced to screen readers.
The comment form is labeled the same way and supports autofill for name and email.
What stays in your hands
Your content and your customizations matter as much as the built-in features:
Alt text. Describe every meaningful image. See Resize images and add alt text.
Structure and wording. Use headings in order, link text that says where the link goes, captions for videos, and plain language. See Write accessible help content.
Hero images. Contrast can't be measured on a photo. With a background image, set the Hero's Text color to Light text or Dark text, or darken the photo with Cover enabled, and check both modes.
Your colors. Text is adjusted automatically, but check anything you color yourself, such as backgrounds and custom CSS. See Change colors, fonts and spacing.
Custom CSS, Custom HTML and scripts. They can undo built-in features, for example by removing focus outlines. Keep a visible focus style, and test changes with a keyboard.
Compass's scripts. Its two script injections run the light and dark switch and the search shortcut. Don't delete them.
Third-party tools you add, such as chat widgets or cookie banners, bring their own accessibility.
Check it yourself
Put your mouse aside and use Tab, Shift+Tab and Enter to reach everything on a page. You should always see where you are.
Zoom your browser to 400% and check that nothing is cut off.
Try a screen reader: VoiceOver on a Mac or iPhone, or NVDA on Windows.
Use the template editor's preview to check Mobile and Dark before you publish.
Automated checkers such as axe or Lighthouse catch some problems. Manual checks catch the rest.
Comments
Be the first to comment.