Accessibility
Framer prefabs adhere to the WAI-ARIA best practices and guidelines. They are tested across a wide range of modern browsers and commonly used assistive technologies.
We strive to manage implementation details related to accessibility that are challenging to implement within Framer. This includes aria and role attributes, focus management, and keyboard navigation. Consequently, users can typically use our prefabs as-is in most contexts, relying on functionality to adhere to expected accessibility design patterns. If you notice any issues or missing details, please inform us, and we'll do our best to resolve them. Keep in mind that we balance ease of adoption with best practices in Framer, which may occasionally require additional work from you or us. However, this greatly surpasses the current landscape of Framer projects concerning accessibility considerations.
W3C Authoring Pattern guides
WAI-ARIA, published and maintained by the W3C, outlines the semantics for many common UI patterns. These guidelines provide meaning for controls not constructed using browser-provided elements. For instance, if you use a div instead of a button element to create a button, certain attributes must be added to the div to convey to screen readers or voice recognition tools that it's a button.
Accessible Labels
The native HTML label element is designed to provide semantic meaning and context for corresponding input elements in many built-in form controls. For non-form control elements or custom controls, WAI-ARIA specifies how to provide accessible names and descriptions.
Where possible, Framer Prefabs incorporate abstractions to simplify control labeling. The Label primitive is designed to work with many of our prefabs, but it's up to you as the user to ensure proper labeling is incorporated and correctly linked to your components.
Keyboard Navigation
Framer prefabs offer basic keyboard support in line with the WAI-ARIA authoring practices. We aim to consistently manage focus, tab, and other keyboard inputs according to the outlined guidance.
Focus Management
Proper keyboard navigation and good labeling often coincide with focus management. When a user interacts with an element and something changes as a result, it's often beneficial to shift the focus with the interaction. This ensures that the next tab stop is logical based on the new app context. For screen reader users, the moving focus often results in an announcement to convey this new context, which relies on proper labeling.
In many Framer prefabs, we move focus based on the user's typical interactions with a given component. For example, in our text input prefab when nested, we chose to ensure focus occurs when the user clicks the parent container. We assume here that the parent container houses the input.