Accessibility

The editor gives names, roles, and keyboard support to its controls. The page around the editor is yours. This page tells you what to add to the page, and what the editor provides.

Prepare the host page

The editor renders inside your page. It adds one landmark, the region "Presentation editor" around its viewport. It adds no other page-level structure. Give the page these items:

• A lang attribute on <html>.
• A <title> that names the page.
• One <main> landmark that contains the editor.
• A page heading (<h1>). The heading can be visually hidden.
• A label for each control of your own, such as the file input that opens a deck.
• A title and allow="fullscreen" on an <iframe> that holds the editor. The slide show asks for full screen (see Installation).

Use this host page structure:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Quarterly review | Deck editor</title>
  </head>
  <body>
    <main>
      <h1>Quarterly review</h1>
      <label>Open a .pptx file <input type="file" accept=".pptx" /></label>
      <div id="editor" style="height: 80vh"></div>
    </main>
  </body>
</html>

If your own <header> or <main> is inside the viewport, set label={false} on PptxEditor.Viewport (:label="false" in Vue). The viewport then adds no region, and your landmarks stay at the top level. To change the region name, give label a text or a translation key.

The demos in examples/ follow these rules. The quickstart shows the <main> landmark and the file input label.

If you build your own controls, keep them accessible. A disabled control stays focusable with aria-disabled and tells the user why it is off. See Customization.

Use the keyboard

The editor follows the WAI-ARIA authoring practices. Each composite part, such as the slide, the toolbar, or the slide list, is one Tab stop. The arrow keys move inside it. The chrome shows a focus ring on keyboard focus.

On the slide

The slide is one Tab stop (role group). When the slide has focus, these keys apply:

Inside a group, Tab and Shift+Tab cycle through the shapes of the group.

While you edit text, Tab and Shift+Tab change the list level at the start of a list item or across paragraphs. Elsewhere, both keys insert a tab. Enter starts a new item at the same level, also on an empty item. Backspace at the start of a list item removes its bullet or number and keeps its level. The next Backspace joins it to the previous paragraph. Press Escape first to move with Tab again. In a table cell, Tab and Shift+Tab move to the next or the previous cell. See Tables.

While you edit text

In right-to-left and mixed-direction text, Left and Right move the caret one place on screen, not in reading order. Alt/Ctrl+Left and Alt/Ctrl+Right move past one word on screen. Cmd+Left and Cmd+Right move to the left or the right edge of the line. Home and End move to the start and the end of the line in reading order, wherever they show on screen. A selection holds the text between its two ends in reading order, so on a mixed-direction line it can show as several highlighted parts.

The editor makes no automatic capitals, curly quotes, dashes, or spelling corrections of its own. Mobile keyboards, and systems and browsers that offer such changes, apply them. The editor replaces the text that each change targets. Undo removes the change, together with any text you type right after it. Browser spelling tools and browser extensions that write to the text input change the document in the same way as typing. Many desktop browsers offer no such changes. In those browsers, the editor adds no curly quotes or capitals while you type.

AutoCorrect still makes these changes:

• (c), (r), and (tm) become ©, ®, and ™.
• ... becomes …, and 1/2, 1/4, and 3/4 become fractions.
• 1., 1), *, or - and a space at the start of a paragraph start a numbered or bulleted list. Press Backspace or Ctrl/Cmd+Z right after to keep the typed text.

To turn AutoCorrect off, pass autoCorrect: false to createPptxEditor, set autoCorrect={false} on the React editor, or set :auto-correct="false" on the Vue editor. This option does not change the system replacements.

In the speaker notes field, Ctrl/Cmd+B, I, and U format the text. The other keys in this table and AutoCorrect apply on the slide only.

Toolbar, menus, and dialogs

• The toolbar is one Tab stop. The Left and Right arrow keys, Home, and End move through its controls. In a right-to-left interface, Left and Right change places.
• The ribbon tabs are a tablist. The Left and Right arrow keys, Home, and End move between tabs.
• The menu bar is one Tab stop. Escape closes a menu and keeps focus on its menu bar item.
• A popover, such as a color or font picker, returns focus to its trigger on Escape.
• A context menu returns focus to where it was on Escape. Shift+F10 and the context menu key open it from the keyboard.
• A dialog keeps Tab inside it. Escape closes it, and focus goes back to the control that opened it.

Slide list and slide sorter

The slide list in the rail is one Tab stop. The focused slide is the current slide.

In the viewing mode, the slide list keys that change the deck do nothing, and the editor tells why. With sections, the list is a tree: the arrow keys also stop on each section header. Home and End go to the first and the last row, which can be a section header.

The slide sorter is one Tab stop. The arrow keys move through the grid of slides. Home and End go to the start and the end of the grid. Enter opens the focused slide. Shift+arrow, Ctrl/Cmd+arrow, Delete, Ctrl/Cmd+D, Ctrl+M, and Shift+F10 work as in the slide list.

Slide show

F5 starts the show from the first slide that is not hidden. Shift+F5 starts it from the current slide.

Tab moves through the buttons of the slide show control bar.

Hear the editor with a screen reader

The editor takes its accessible names from the locale catalog, so they change with the language. With the English catalog, a screen reader hears these items:

Color modes and motion

• Color modes. Set colorMode to light, dark, or system. system follows the operating system and updates when it changes. Only the chrome changes. The slide always shows the colors of the file. See Appearance.
• Reduced motion. When the operating system asks for reduced motion, the editor stops the loading spinner, the tooltip animation, the press effect of buttons, the slide-in of notices, and the transition of the slide show control bar.
• Forced colors. In a forced colors (high contrast) mode, the chrome uses the system colors. Selection, pressed and checked controls, focus rings, and disabled controls stay visible. The slide keeps the colors of the file. See Appearance.
• Slide show motion. The slide show does not play the animations and transitions of the file. They stay in the file on save. The Animations tab of the side panel lists the effects of a slide as text, in play order.

Known limits

These limits apply:

• Alt text of other objects. Only pictures give their alt text to a screen reader on the slide. Charts, groups, and shapes do not. A picture with a title but no alt text is hidden.
• Text input value. While you edit text, the text input holds only the paragraph text up to the caret, at most about 200 characters. A screen reader does not read the text after the caret from the input.
• Slide content structure. The slide is drawn as SVG. A screen reader gets the slide text only as flat text, in z-order. It gets no headings, lists, or reading order. It gets the shape name only when a shape is selected. When more than one shape is selected, it hears no announcement.

Next steps

• Installation: requirements, styles, and how to embed the editor.
• Customization: build controls that keep labels and keyboard support.
• Language: translate the interface and its accessible names.