Accessibility Support
Add HTML Semantic Elements and WAI-ARIA to your apps.
Last updated
Add HTML Semantic Elements and WAI-ARIA to your apps.
Last updated
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." -Tim Berners- Lee
When building web pages developers must ensure equal access and equal opportunities to all people regardless of disabilities. Quest provides the ability to generate accessible code by adding support for HTML Semantic Elements & WAI-ARIA.
Building semantically correct HTML is one of the essential steps to support accessibility. Screen readers depend on the semantic structure and meaning of web pages to provide information to their users. It is important to provide a correct semantic tag for accessibility. Therefore, Quest introduces semantic tag binding for selecting layers in your app which are exported as React elements.
Quest users have the ability to override the default div tag to build meaningful HTML elements like header, section, article etc.
Without WAI-ARIA certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining ways for functionality to be provided to assistive technology.
Quest provides binding support for aria-label, aria-labelledby and aria-describedby attributes for components where these attributes should apply.
Most MUI components support the aria-label binding.
The accessibility attributes are supported on any group (frame in Figma) elements. Nested or children components should have accessibility attributes applied directly in their own scope.
The alt attribute specifies an alternative text for the image element. Alt attribute is supported by Image & Avatar MUI components.
To add alt-text, select any image element in your component editor
Then select "alt" from the Bindings list on the right and enter either a string or a variable - for example, "picture of a woman", or data.altText.
When designing your component in Figma add frames for each logical section in your future HTML document.
Once you have completed your design, export to Quest using the Quest plugin for Figma. Select the layer you want to export as a semantic element and add a "semantic tag" binding to it in the right-side panel bindings section. Same applies to setting an aria attribute - select relevant to your element aria attribute: aria-label, aria-labelledby or aria-describedby. The rest is handled by Quest. For best practices on accessibility aria attributes refer to Techniques for WCAG 2.2 .
