dev-resources.site
for different kinds of informations.
Applying the four principles of accessibility
Web Content Accessibility Guidelinesāor WCAGālooks very daunting. Itās a lot to take in. Itās kind of overwhelming. Itās hard to know where to start.
I recommend taking a deep breath and focusing on the four principles of accessibility. Together they spell out the cutesy acronym POUR:
- Perceivable
- Operable
- Understandable
- Robust
A lot of work has gone into distilling WCAG down to these four guidelines. Hereās how I apply them in my workā¦
Perceivable
I interpret this as:
Content will be legible, regardless of how it is accessed.
For example:
- The contrast between background and foreground colours will meet the ratios defined in WCAG 2.
- Content will be grouped into semantically-sensible HTML regions such as navigation, main, footer, etc.
Operable
I interpret this as:
Core functionality will be available, regardless of how it is accessed.
For example:
- I will ensure that interactive controls such as links and form inputs will be navigable with a keyboard.
- Every form control will be labelled, ideally with a visible label.
Understandable
I interpret this as:
Content will make sense, regardless of how it is accessed.
For example:
- Images will have meaningful alternative text.
- I will make sensible use of heading levels.
This is where it starts to get quite collaboritive. Working at an agency, there will some parts of website creation and maintenance that will require ongoing accessibility knowledge even when our work is finished.
For example:
- Images uploaded through a content management system will need sensible alternative text.
- Articles uploaded through a content management system will need sensible heading levels.
Robust
I interpret this as:
Content and core functionality will still work, regardless of how it is accessed.
For example:
- Drop-down controls will use the HTML select element rather than a more fragile imitation.
- I will only use JavaScript to provide functionality that isnāt possible with HTML and CSS alone.
If youāre applying a mindset of progressive enhancement, this part comes for you. If you take a different approach, youāre going to have a bad time.
Taken together, these four guidelines will get you very far without having to dive too deeply into the rest of WCAG.
Featured ones: