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.

Have you published a response to this? :

Responses

Alan Dalton

@adactio I like how you interpret the Web Content Accessibility Guidelines’ principles, Jeremy!

To explain those principles in my 24ways article, I tried to convey what users will think when developers don’t apply them:• Perceivable: “What the **** is this thing here supposed to be?”• Operable: “How the **** does this thing work?”• ⁠Understandable: “What the **** does this mean?”• ⁠Robust: “Why the **** doesn’t this work on my device?”

Yours is more elegant prose!

https://24ways.org/2017/wcag-for-people-who-havent-read-them/

Web Content Accessibility Guidelines—for People Who Haven’t Read Them

Gwenn

@ambrwlsn “I will only use JavaScript to provide functionality that isn’t possible with HTML and CSS alone.”I see you, open-in-new-tab-with-middle-click breakers!

# Posted by Gwenn on Monday, June 10th, 2024 at 3:59pm

5 Shares

# Shared by FINOkoye on Thursday, May 30th, 2024 at 3:12pm

# Shared by Eric on Thursday, May 30th, 2024 at 3:13pm

# Shared by David O'Brien on Thursday, May 30th, 2024 at 4:05pm

# Shared by Alan Dalton on Thursday, May 30th, 2024 at 5:57pm

# Shared by Sarah E Bourne on Thursday, May 30th, 2024 at 6:27pm

9 Likes

# Liked by FINOkoye on Thursday, May 30th, 2024 at 3:11pm

# Liked by Kit on Thursday, May 30th, 2024 at 3:11pm

# Liked by Eric on Thursday, May 30th, 2024 at 3:12pm

# Liked by Chad Kohalyk on Thursday, May 30th, 2024 at 3:12pm

# Liked by Carlton Gibson 🇪🇺 on Thursday, May 30th, 2024 at 3:12pm

# Liked by Matthias Ernst Ring on Thursday, May 30th, 2024 at 3:43pm

# Liked by christianoliff :-) on Thursday, May 30th, 2024 at 4:05pm

# Liked by Marty McGuire on Thursday, May 30th, 2024 at 5:21pm

# Liked by Alan Dalton on Thursday, May 30th, 2024 at 5:56pm

Related posts

Performative performance

When it comes to sustainable web design, the hard work is invisible.

The intersectionality of web performance

Business, sustainability, and inclusivity.

Assumption

Separate your concerns.

Alt writing

Aiming for originality and creativity in alt text.

Lists

Do websites need to sound the same in every screen reader?

Related links

80 / 20 accessibility · marcus.io

So my observation is that 80% of the subject of accessibility consists of fairly simple basics that can probably be learnt in 20% of the time available. The remaining 20% are the difficult situations, edge cases, assistive technology support gaps and corners of specialised knowledge, but these are extrapolated to 100% of the subject, giving it a bad, anxiety-inducing and difficult reputation overall.

Tagged with

The Web Accessibility Cookbook

Manu’s book is available to pre-order now. I’ve had a sneak peek and I highly recommend it!

You’ll learn how to build common patterns written accessibly in HTML, CSS, and JavaScript. You’ll also start to understand how good and bad practices affect people, especially those with disabilities.

Tagged with

Home - Sa11y

Another handy accessibility testing tool that can be used as a bookmarklet.

Tagged with

Write Alt Text Like You’re Talking To A Friend – Cloud Four

This is good advice:

Write alternative text as if you’re describing the image to a friend.

Tagged with

The Folly of Chasing Demographics - YouTube

I just attended this talk from Heydon at axe-con and it was great! Of course it was highly amusing, but he also makes a profound and fundamental point about how we should be going about working on the web.

Tagged with

Previously on this day

1 year ago I wrote Five questions

I gave five answers to Oliver, who’s organising the Pixel Pioneers event in Bristol.

2 years ago I wrote Re-evaluating technology

The importance of revisiting past decisions. Especially when it comes to the web.

4 years ago I wrote Programming CSS to perform Sass colour functions

Combining custom properties, hsl(), and calc() to get cascading button styles.

5 years ago I wrote Indie web events in Brighton

Homebrew Website Club every Thursday, and Indie Web Camp on October 19th and 20th.

6 years ago I wrote The Gęsiówka Story

Republishing a forgotten piece of history.

7 years ago I wrote Checking in at Indie Web Camp Nuremberg

Posting from Swarm to my own site.

8 years ago I wrote Regression toward being mean

I need to get better at balance.

9 years ago I wrote 100 words 069

Day sixty nine.

12 years ago I wrote dConstructickets

Get ‘em while they’re hot.

13 years ago I wrote Hashcloud

The web is agreement.

18 years ago I wrote Copenhagen

I’m off to Denmark for the Reboot conference.

21 years ago I wrote Laptop Land

As promised, I’m blogging wirelessly from Riki Tik’s in the North Laine, Brighton.

21 years ago I wrote Switching lifestyles

Mark Frauenfelder is making another switch.

22 years ago I wrote Too busy to blog

I’m afraid updates are going to be scarce over the next few days. My mother is here in Brighton for a visit so Jessica and I are showing her the sights.