Accessibility : How to have the most impact with the less effort.
Nice to meet you 👋🏻
Principal Engineer @ AVIV
Accessibility Advocate
Accessibility quick intro
/əksɛsɪˈbɪlɪti/It is the practice of ensuring that we create products that can be used by anyone regardless of their capabilities, visual, auditory, motor or cognitive
WCAG kezako ?
The WCAG (Web Content Accessibility Guidelines) is the W3C standards listing criterias with the P.O.U.R. principles
78 criterias
spread through 3 levels A, AA and AAA.
50 criterias are required to meet the AA levels.
It seems a lot right ?
What if I tell you that you can almost reach the AA level (quite) easily ?
Contrast Minimum - WCAG SC 1.4.3
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Name, Role Value - WCAG SC 4.1.2
For all user interface components, the name and role can be programmatically determined
info and relationships - WCAG SC 1.3.1
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Parsing - WCAG SC 4.1.1
In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique
Non-text content - WCAG SC 1.1.1
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for situations like decoration or captcha.
Focus order - WCAG SC 2.4.3
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
Keyboard - WCAG SC 2.1.1
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
Focus visible - WCAG SC 2.4.7
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Non-text contrast - WCAG SC 1.4.11
The visual presentation of 'User Interface Components' and 'Graphical Objects' have a contrast ratio of at least 3:1 against adjacent color(s)
Use of color - WCAG SC 1.4.1
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Meaningful sequence - WCAG SC 1.3.2
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
labels or instructions - WCAG SC 3.3.2
Labels or instructions are provided when content requires user input.
Bypass blocks - WCAG SC 2.4.1
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Page titled - WCAG SC 2.4.2
Web pages have titles that describe topic or purpose.
Language of page - WCAG SC 3.1.1
The default human language of each Web page can be programmatically determined.
How to ?
- Tooling : Axe devtool, WCAG contrast checker plugin, A11y Color blindness empathy test
- Get yourself educated Deque University, Access42
- Read the entire WCAG spec: gl;hf;