LogoLogo
Quest HomeSign Up
  • 😀Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • 🔍Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • 💡Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page

Was this helpful?

  1. Features

Accessibility Support

Add HTML Semantic Elements and WAI-ARIA to your apps.

PreviousHow-to use a Theme in your ApplicationNextDesign Tips and Tricks

Last updated 2 years ago

Was this helpful?

"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

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.

WAI-ARIA

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.

Alt accessibility attribute

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.

Adding Accessibility attributes and Semantic Tags

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 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 .

Screenshot: Adding binding for HTML Semantic Elements
Screenshot: Adding binding for WAI-ARIA
Quest plugin
Techniques for WCAG 2.2
HTML Semantic Elements
WAI-ARIA
Screenshot of bindings for HTML Semantic Elements
Screenshot of bindings for WAI-ARIA