Design Mode Accessibility Panel

• Accessibility Panel
  • Layer Accessibility Settings Section
  • Module Accessibility Settings

Accessibility Panel

The Design mode Accessibility panel is accessed by selecting a layer via the Canvas or Layers sidebar, and in the Right Sidebar clicking the Design icon ¹ to enter Design Mode. Then click the Accessibility tab icon ² to open the Accessibility panel.

Through the Accessibility panel you set how a single layer is presented to screen readers. It sets whether the layer is read at all, the role it is announced with, the name it is given, and whether it warns that it opens a popup.

Every layer starts hidden from screen readers with the role Presentation, because most layers are decorative. Use the panel on the layers that convey information, such as a heading, a button or a link, so a screen reader announces them.

The settings here apply to one layer. The settings for the module as a whole, including the switch that turns ARIA attributes on, are in the Settings Sidebar's Accessibility panel, which the button at the bottom of this panel opens.

Layer Accessibility Settings Section

In the Layer Accessibility Settings section set the ARIA attributes written onto the selected layer. The section heading collapses and expands the section with the arrow at its right.

The section is only shown while ARIA attributes are enabled for the module. With Enable ARIA Attributes off in the module's Accessibility panel, the section is hidden and only the Module Accessibility Settings button remains.

Hide from Screen Readers (Dropdown)

Set whether a screen reader skips the layer or reads it. Defaults to True, so a layer is not read until this is set to False.

Options:

• _True: The layer is hidden from screen readers with aria-hidden.
• _False: The layer is read by screen readers, with the role and name set below.

Semantic Role (Dropdown)

Set the ARIA role a screen reader announces for the layer, which tells a screen reader user what kind of element the layer is. Defaults to Presentation.

Options:

• _Unset: No role is written, and the screen reader uses the role of the layer's own HTML element.
• _Button: The layer is announced as a button.
• _Link: The layer is announced as a link.
• _Image: The layer is announced as an image.
• _Heading: The layer is announced as a heading.
• _Paragraph: The layer is announced as a paragraph of text.
• _Group: The layer is announced as a group of related content.
• _Presentation: The layer is treated as decorative and its own semantics are removed.
• _Article: The layer is announced as a self contained article.

ARIA Label (Text)

Enter the name a screen reader reads for the layer, written to the page as aria-label. Use it where the layer's own content does not describe it, such as an icon used as a button.

ARIA Labeled by (Text)

Enter the HTML id of another element whose text names this layer, written to the page as aria-labelledby. A screen reader then reads that element's text as the layer's name, so the name is defined once when the same text is already on the page.

Triggers any PopUp (Dropdown)

Set whether a screen reader announces that activating the layer opens a popup, written to the page as aria-haspopup. Set it to True on a layer that opens a modal, a menu or another module. Defaults to False.

Options:

• _True: The layer is announced as opening a popup.
• _False: No popup is announced.

Module Accessibility Settings (Button)

Open the Settings Sidebar at its Accessibility panel, which holds the module wide settings, including Enable ARIA Attributes and the labels for the navigation controls. The layer stays selected, so this panel is shown again when the sidebar is closed.