Help centerUsing this site
Accessibility features
Use the site with a keyboard, a screen reader, zoom, or reduced motion, and know what to expect.
This guide describes how this demonstration site works.
Keyboard
Every link, button, and field can be reached with the keyboard, and the element in focus always shows an outline.
Press Tab once on any page to show Skip to main content, which takes you past the header to the page’s content.
- Tab
- Moves to the next link, button, or field.
- Shift+Tab
- Moves back to the previous one.
- Enter
- Follows a link or presses a button.
- Space
- Presses a button or ticks a checkbox.
- Arrow keys
- Moves between the options of a group, such as the agent’s example requests, a filter, or the language menu.
- Esc
- Closes a menu or a details panel.
Focus and navigation
The sticky header never covers the element in focus or the section you jump to.
After you follow a link to another page, focus moves to the start of its content, and screen readers announce the new page’s title.
Reduced motion
If your device is set to reduce motion, the site removes movement: sections appear in place instead of sliding in, in-page links jump straight to their target, and the agent demo shows its results without the preparation pause.
Zoom and text size
Pages reflow to fit the window, down to 320 pixels wide, so zooming in doesn’t make the page scroll sideways. On narrow screens, the product demo’s filter buttons sit in one row that scrolls sideways on its own. In a very short window, such as a page zoomed to 400%, the site’s header and the language suggestion scroll with the page instead of staying on screen.
Screen readers
Each page has one main heading with the headings below it in order, and landmarks for its main content and, on most pages, its header, navigation, and footer, so you can move around by heading or by region.
Icons that only decorate are hidden, and buttons that show only an icon have a name. Product views are described in a sentence instead of being read out piece by piece, and small examples that only illustrate the text beside them are skipped.
When something changes after you act, such as search results or the result of a simulated step, the change is announced.
Color and statuses
Statuses differ in wording, icon, and tag style (outlined, dashed, tinted, or solid), so none relies on color alone. In a request’s progress, each stage’s state has its own marker too.
Without JavaScript
Pages keep their content with JavaScript turned off, except the agent demo’s second and third examples. Controls that need JavaScript, such as search fields and the demo’s simulated steps, are left out or replaced by a short note.
About this site sums up how the site is built for accessibility.