Short answer
Mostly: the form, the chat, the agenda, and the buttons around the demo work from the keyboard, and screen readers hear new chat messages and errors. The live demo is a video of a browser, so a screen reader can't read the product inside it. The guide speaks as it goes, and its answers appear in the chat.
Keyboard
- The work email form, the chat, the agenda, and the controls around the screen are standard buttons and fields, and the fields have labels.
- In a live demo, Try it yourself moves focus to a field named Keyboard. Typing, Enter, Tab, Backspace, Escape, the arrow keys, Page Up, Page Down, Home, and End then go to your product; shortcuts with Ctrl, Cmd, or Alt don't.
- Clicking a spot on the screen, and Point, need a mouse or touch. Point is hidden on narrow screens.
- On smaller screens, the Keyboard button brings up the on-screen keyboard while they drive.
While a visitor drives, Tab goes to the product too, so it doesn't move focus out of the screen. To give the screen back, they press Hand it back with a mouse or touch, or stop: the guide takes the screen back after two idle minutes, or ten minutes in total.
Screen readers
- The live screen is announced as Live demo of [your product].
- New chat messages, notices, and errors are announced.
- In a live demo the guide speaks as it goes, and its answers appear in the chat and are spoken too. Mute the guide turns the voice off, Turn on the guide's voice turns it back on, and Tap for sound appears when the browser holds back audio.
- Presentations are text, one slide at a time, with Previous slide and Next slide.
- Recordings play in the browser's own video player and have no captions.
- Visitors can also ask out loud in some languages; see Can visitors ask questions out loud?
Seeing and motion
- In a live demo, a caption at the bottom of the screen says which page the guide is on.
- With reduce motion turned on, the moving background, the pulsing live dot, and the loading shimmer stay still, and the screen doesn't zoom in on what the guide points at. A few small effects, like the typing dots, still move.
- The demo page, the narration, and the answers come in 17 languages, and the chat reads right to left in Urdu.
On your website
- The demo opens in a dialog named Live demo, and focus moves to its Close the demo button.
- Closing it returns focus to where it was, such as the button that opened it.
- Escape closes it while focus is on Close the demo or your page. Once focus is inside the demo, use Close the demo instead.
WCAG checks and the accessibility statement
Every page template, and the demo page's start screen, is checked with automated WCAG 2.2 A and AA rules at desktop and phone sizes. Automated checks catch only part of the problems, there hasn't been a manual audit by an outside firm yet, and the product you demo keeps its own accessibility. Read the accessibility statement.
Related questions
Didn't answer your question?
Talk to us with your demo link and the email you signed up with, or write to hello@demopage.io. We'll answer, and add it to the Help Center.