Element Template
This is an empty template, intended to be used as a starting point for adding UI elements to the library. Try to keep it consistent with other elements and fill out all relevant sections; sections marked "optional" can be removed if not relevant.
Overview
Definition / explanation of what this component is/how it works.
- Front End Screenshot
- Back End Screenshot
Put front end/Cassiopeia screenshot here, if applicable. Don't forget alt text!
Put back end/Atum screenshot here, if applicable. Don't forget alt text!
Usage
Requirements (optional)
If this code only works in certain contexts or environments, add that here. For example:
- PHP 8.0+
- No IE Support
Code Snippets
- Front End Usage
- Back End Usage
Add notes about using this snippet in the front end, if applicable.
<!-- HTML Code Snippet Here -->
Add notes about using this snippet in the back end, if applicable.
<!-- HTML Code Snippet Here -->
Best Practices
- Add best practices here. For example, "Make sure you only use button elements when it will do an action, instead of navigating to a different page."
- etc
Common Mistakes
- Add common errors here.
Who is affected?
People using screen readers need ....
People with cognitive disabilities need ... etc.
Who is impacted most by the accessibility of this element?
Testing for accessibility
- With a screenreader
- With web inspector
How does someone test that this is accessible with a screenreader?
- Use the screen reader to navigate to ...
- Make sure ...
- Make sure ...
- If ... then it passes. ✅
- If ... then it fails. ❌
How does someone test that this is accessible with web inspector?
- Right Click > Inspect ... on the page.
- Make sure ...
- Make sure ...
- If ... then it passes. ✅
- If ... then it fails. ❌
- If ... then it passes. ✅
- If ... then it fails. ❌
Relevant WCAG Success Criteria
- Link to the WCAG Success Criteria here. For example:
- WCAG criteria 1.3.1 - Info and Relationships
Relevant ATAG Guidelines (optional)
- Link to the ATAG Guideline(s) here. For example:
- Guideline A.3.2: (For the authoring tool user interface) Provide authors with enough time.