# How accessible is my help center? _Category: Design and templates_ 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](https://self.helpcenter.io/content/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](https://self.helpcenter.io/content/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](https://self.helpcenter.io/content/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](https://self.helpcenter.io/content/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](https://self.helpcenter.io/content/colors-and-fonts). - **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. ## Related articles - [Write accessible help content](https://self.helpcenter.io/content/accessible-help-content) - [Change colors, fonts and spacing](https://self.helpcenter.io/content/colors-and-fonts) - [Resize images and add alt text](https://self.helpcenter.io/content/resize-images-and-add-alt-text) - [Contact HelpCenter.io support](https://self.helpcenter.io/content/contact-support)