Mosaic is built to support accessibility standards, but you need to use the given features, to get the best result.
Images
At Image elements always use their Alt field to describe the content of the image, so screen readers can interpret them.
Sliders
Slider elements follow the ARIA carousel pattern, so screen reader and keyboard users can recognize and control them.
What works automatically
- The slider container is announced as a carousel, and each slide as a slide, with its position (for example “2 of 5”) or its Slide title.
- While the slider auto-rotates, slide changes are not announced. When autoplay is paused or you change slides manually, the new slide is announced.
- Autoplay pauses while the slider has keyboard focus or the pointer is over it, and resumes when focus or the pointer leaves. It also stops once the autoplay limit is reached.
- The navigation bullets work as a button group: use Tab to move between them and Enter, Space, or click to jump to a slide. The current slide’s bullet is marked for screen readers.
- If a visitor’s system is set to reduce motion, autoplay is turned off and slides change instantly.
- When a navigation arrow hides on the first or last slide, keyboard focus moves to the still-visible arrow instead of being lost.
What you should set up for the best result
- Screen reader label: In the Slider’s settings, set a Screen reader label so the carousel has a clear name (for example “Customer testimonials”).
- Slide titles: Give every slide a descriptive title, since screen readers read it when announcing the slide.
- Stop/Play control: Add a visible Stop/Play control with Interactions so visitors can stop auto-rotation at any time, not only by focusing the slider.
- Element order: Keep the suggested order (Button – Arrow left, Button – Arrow right, Navigation, Slides) so Tab moves through the controls in a logical sequence.
Accordions
Accordion elements have aria-expanded attributes on the accordions by default, which are changing between true and false state, based on whether or not the given accordion is opened.
Enter or Space opens/closes the accordions, when they get focused on using Tab button.
The Plus and Minus icons are SVG icons. Check the lower ARIA attributes for a suggestion regarding them.
Also with the lower ARIA attributes, you can specify role=”button” for the Accordion Title element.
Tabs
Tabs elements have the following attributes, to ensure accessibility:
- The active tab’s button gets aria-selected=”true” attribute, to mark when it is selected.
- The tab panels have role=”tabpanel” attribute, to let people know about their role.
- The inactive tabs are getting aria-hidden=”true” attribute, to hide them from accessibility tools, as they are invisible.
Navbar
Navbar elements use the following attributes to ensure accessibility:
- The entire navigation container has role=”navigation”, so assistive technologies can identify it as a site navigation region.
Dropdown menus
- Dropdown toggle buttons have aria-haspopup=”true” to indicate that they control a submenu.
- When a dropdown is closed, the toggle button has aria-expanded=”false”.
- When a dropdown is opened, the toggle button’s aria-expanded attribute is updated to “true” to reflect its current state.
Mobile navigation toggle
- The mobile menu toggle icon includes aria-label=”Open menu” to provide a clear, descriptive label for screen reader users.
- The mobile menu behaves like a dropdown menu, therefore the same ARIA attributes and state changes apply as described above.
Forms
Mosaic forms are built from real form elements with the right semantics, so they work with keyboard navigation and screen readers out of the box. A few choices you make while building keep them that way.
What works automatically
- Every field’s label is tied to its control, and Mosaic keeps each control’s identifier unique on the page, even when a field is repeated, so a label always points to the right input.
- Radio and checkbox groups and field sets are grouped with a legend, so screen readers announce the question and know which options belong together.
- An Error message is linked to the field it describes and announced to screen readers, so people know which field needs attention.
- While the form is submitting, the submit button is marked as busy and the form announces its progress, so screen reader users know the submission is being processed.
- When a submission succeeds, focus moves to the Success screen and it is announced, so assistive technology users are told the submission worked.
What you should set up for the best result
- Hide a caption the accessible way: a Field’s Label and a group’s Legend can’t be deleted, so they always stay in place. If you don’t want a visible caption, add the screen-reader-only utility class to hide it on screen while keeping it for screen readers, rather than emptying its text. See the Class system.
- Add an error message element: without one, validation problems appear only in the browser’s default bubble. An Error message shows your own styled text and stays properly associated with the field or the whole form.
- Treat placeholders as hints, not labels: placeholder text disappears as the visitor types, so always give the field a real label as well.
ARIA attributes
At each element, in their Settings → Attributes, you can add any ARIA attributes needed for accessibility.
Examples:
- For a Button element, add role=”button” to specify its role.
- For a Section, add role=”section” for clearer structure.
- For an SVG icon, add aria-hidden=”true” if you don’t want screen readers to interpret it.