smhigley

Fluent v9 Component accessibility docs structure

Fluent component a11y information is split across three sections, depending on relevance to the user:

1. Component Best Practices section on overview page
2. Component Accessibility section on overview page
3. Component Accessibility details page

The reason for splitting the information into different areas is to present the most concise and relevant information possible in each area of our docs. The component overview page should contain only information that authors need to know in order to implement an accessible version of our components (e.g. "provide a label), while the full accessibility details page provides a thorough description of all accessibility behaviors and choices made on the component.

Detailed breakdown of information

smhigley

Testing Expandable Group behavior

A list of results from testing accordions, but with tabbable, clickable container elements with a group role in addition to the expand/collapse button. The semantics are as follows:

<div role="group" tabindex="0" aria-expanded={expandedState} aria-labelledby="citationId titleId">
  <a href="#" id="citationId">1</a> <!-- This is conditionally a in-page citation link, depending on authoring -->
  <a href="#" id="titleId">Title of accordion</a> <!-- This is conditionally an external link, depending on authoring -->
  <button aria-expanded={expandedState} aria-label="show details">+</button>
 

smhigley

aria-maxlength discussion

This is a short overview of the background and decisions that need to be made to map the maxlength HTML attribute and create an aria-maxlength ARIA attribute.

Background

Although the HTML maxlength prop can be used to limit characters in native inputs, it has no accessibility mappings and is not communicated to screen reader users (either up front or when the character limit is reached).

This becomes a pain point when authoring text inputs that have character limits in several ways:

• It necessitates a custom live region announcement when the character limit is approaching and exceeded, despite there often being no visual text equivalent.