Logo

dev-resources.site

for different kinds of informations.

Applying the four principles of accessibility

Published at
6/10/2024
Categories
a11y
wcag
principles
Author
adactio
Categories
3 categories in total
a11y
open
wcag
open
principles
open
Author
7 person written this
adactio
open
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:

  1. Perceivable
  2. Operable
  3. Understandable
  4. 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.

principles Article's
30 articles in total
Favicon
Tell Don't Ask principle explained
Favicon
THE M.O.I.S.T Principle
Favicon
Functional Programming (FP) Principles with examples
Favicon
SOLID Principles in Functional Programming (FP) with examples
Favicon
16 Principles for Tech-led Start-ups as a Software Engineer
Favicon
Applying the four principles of accessibility
Favicon
Mastering SOLID principles in Flutter
Favicon
We got 3 main principles for writing Technical Blog posts. Hereā€™s what we learned.
Favicon
Testing Without the Tears: How Mocking Boundaries Can Strengthen Your Tests
Favicon
Advantages of Modularity: Simplified Development Process
Favicon
SOLID Principles: It's That Easy! šŸ˜± STANDOUT šŸŒŸ with SOLID Principles! šŸ§™ā€ā™‚ļøāœØ
Favicon
10 principles of good web design.
Favicon
šŸ“œ Novu's Communication Manifest: Lighting the Path to our Future šŸ’”
Favicon
2023 Industry Trends in Mobile Application User Interface
Favicon
Web Design Principles: From Layout to Navigation, Master the Basics
Favicon
Agile Software Development: Principles, Practices, and Benefits
Favicon
Considering Agile Principles from a different angle
Favicon
SOLID Principles in Swift: A Practical Guide
Favicon
Development principles you should know
Favicon
One-page Software design cheat sheet
Favicon
Top 10 trending github repos for Java developers in this weekšŸ‘‰.
Favicon
What You Need To Know About Design Rules And Principles
Favicon
Security
Favicon
Monitoring/Observability
Favicon
Design to encapsulate volatility
Favicon
Testing
Favicon
Code Clean & Simple
Favicon
Automation
Favicon
Tech Principles @ Coolblue
Favicon
Recovery over perfection

Featured ones: