Basic Example: Project Details
This project involves developing a new user interface for the customer portal. Key objectives include improving accessibility and performance.
Timeline: 6 months
Team: 3 front-end developers, 1 UX designer, 1 product manager.
All deliverables must conform to WCAG 2.2 Level AA standards.
Example with Multiple Paragraphs
This widget uses a button element to control the visibility of a content container. The button has an aria-expanded attribute that toggles between true and false to indicate the state to assistive technologies.
The content container has an id that is referenced by the button's aria-controls attribute, creating a programmatic relationship.
The content is shown or hidden using the hidden HTML attribute, which is toggled via JavaScript when the button is activated (by click, Enter, or Space key).
For keyboard users, the button is fully operable: it can be focused with the Tab key and activated with the Enter or Space key.
Example with a List
Ensure your expand/collapse widget meets these criteria:
- The interactive control is a
<button>element. - The button has a clear, descriptive label.
- The button has
aria-expandedto announce state. - The button has
aria-controlspointing to the content id. - The content area is focusable if needed (e.g., contains focusable elements).
- Keyboard support: Tab to focus, Enter/Space to activate.
- Visual focus indicator is clear and visible.
- Animation (if any) is optional and does not hinder usability.