Accessibility Conventions
Calcite Components leverages the W3C Accessibility Standards to ensure the applications and experiences are usable by a wide range of audiences. There also pages for accessibility-design-conventions and accessibility-developer-conventions. Additional considerations in designing for individuals include:
| Designing for Individuals | Do | Don't |
|---|---|---|
| On the Autistic Spectrum |
Use simple sentences and bullets. 
|
Create a wall of text. 
|
| Who use Screen Readers |
Write descriptive links & headings. 
|
Write vague links & headings. 
|
Who have low vision |
Use a combination of color, shapes & text. 
|
Use only color to convey meaning or status. 
|
With physical or motor difficulties |
Make large clickable actions. 
|
Demand precision. 
|
Who are deaf or hard of hearing |
Use subtitles or provide transcripts for video. 
|
Put content in audio or video formats only. 
|
With Dyslexia |
Provide reminders & prompts. 
|
Force people to remember things from previous places. 
|
- Information should not depend on color, sound, shape, size, or visual location - design
- Text and background color should have sufficient contrast - design
- Links should be descriptive and provide intent - design
- Links should be visually identifiable - design
- Use descriptive section headings - design
- Content should use semantic HTML elements - development
- HTML should be valid and error-free - development
- Forms have descriptive labels - design
- Forms have helpful and accessible error and verification messages - design
- Labels and help text should be programmatically associated with form fields - development
- Use correct HTML5 input types - development
- Content does not loose context when zoomed/enlarged - development
- Site should not time out unexpectedly - design, development
- Pages are understandable with no styles enabled - development
- Web page size should not exceed 500k - development
- Users should be able to navigate content using a screen reader - design, development
- Avoid mouse only interactions - design, development
- Support keyboard navigation - development
- Focus states should be visible for keyboard users - design, development
- Allow keyboard users to skip navigation - development
- Offer multiple ways to find pages on your website - design
- Use ARIA landmarks where applicable - development
- Set focus on modals, popovers, alerts, etc. - development
- Images should have meaningful alternative text or intentionally marked decorative - design, development
- Decorative images should not be visible to screen readers - development
- Content that moves automatically has the ability to be paused - design, development
- Limit or remove any flashing elements - design
- Ensure audio and video is not played automatically unless that is the expected behavior - development
- Multimedia should have alternative ways to be consumed - design, development
- Make data available for graphs, charts, maps, SVGs, etc. through assistive technology - design, development
- Table data is accessible to non-sighted users - development
SVGs are visual elements. When rendering them in a component, assess if the SVG has semantic meaning that needs to be described.
If the SVG has no semantic meaning or the semantic meaning is described elsewhere, make sure to set aria-hidden="true" on it so that screen readers can ignore it.
If the SVG has some semantic meaning that needs to be described to an end user, set the role to img and ensure that it has an aria-label or aria-lablledby.
More information can be found here: https://www.deque.com/blog/creating-accessible-svgs/