# Accessibility

When apps are accessible, the experience is better for everyone. Building accessible apps means people of all abilities can interact with, understand, and navigate them.

Tesserae components ship with built-in accessibility features, such as keyboard support and sensible ARIA usage. However, you still need to review your patterns, content, and interactions so your app is accessible end-to-end.

Follow these principles to build inclusive experiences:

• Build consistent experiences: Use design system components as the basis of every experience. They have inbuilt accessibility features and create consistency across apps.
• Keep experiences and language simple: Avoid complex processes and use concise, plain language.
• Be inclusive: Use inclusive language and don't make assumptions about people's abilities.
• Give people control: Enable reflow across all screen sizes and respect personal settings like reduced motion.
• Provide text alternatives: Use visible and accessible labels. Write clear alternative (alt) text for images and provide transcripts for media.
• Ensure color is accessible: Never rely on color alone to convey meaning. Ensure a color contrast ratio of at least 4.5:1 for regular text.
• Use semantic HTML: Use appropriate HTML elements (like header, nav, footer) to describe the meaning of elements to assistive technologies.

Tesserae provides a set of fluent extension methods in the IAccessibilityExtensions class to easily add ARIA attributes to any component.

You can set the role and labels for any component:

var myButton = Button("Click Me")
    .AriaRole("button")
    .AriaLabel("Submit the form");

• .AriaRole(string role): Sets the ARIA role for the component.
• .AriaLabel(string label): Sets the ARIA label.
• .AriaLabelledBy(string id): Sets the ID of the element that labels this component.
• .AriaDescribedBy(string id): Sets the ID of the element that describes this component.

Manage the state of components for assistive technologies:

var toggle = Button("Toggle")
    .AriaExpanded(true)
    .AriaControls("content-id");

• .AriaExpanded(bool expanded): Sets whether the component is expanded or collapsed.
• .AriaSelected(bool selected): Sets the selected state.
• .AriaChecked(bool isChecked): Sets the checked state.
• .AriaDisabled(bool disabled): Sets the disabled state for accessibility tools.
• .AriaBusy(bool busy): Sets whether the component is currently busy.
• .AriaCurrent(string current): Sets the current state (e.g., "page", "step", "location").

Control how components are perceived by screen readers:

var toast = MessageBar("Success!")
    .AriaLive("polite")
    .AriaAtomic(true);

• .AriaHidden(bool hidden): Sets whether the component is hidden from accessibility tools.
• .AriaLive(string live): Sets the ARIA live region policy ("polite", "assertive", or "off").
• .AriaAtomic(bool atomic): Sets whether the ARIA live region is atomic.

• .AriaHasPopup(string hasPopup): Sets whether the component has a popup (e.g., "menu", "listbox", "dialog").
• .AriaControls(string id): Sets the ID(s) of the element(s) controlled by this component.

Test with different tools and a diverse array of people. Use tools like Accessibility Insights to test your app and ensure it works across different levels of technical experience and assistive technologies.