May 30th, 2024

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.

« Newer Older »

Responses

Related posts

Awareness

Turning accessibility awareness into action with HTML.

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.

Related links

Developing an alt text button for images on my website | James’ Coffee Blog

I like the idea of adding this to personal websites:

Mastodon shows an “Alt” button in the bottom right of images that have associated alt text. This button, when clicked, shows the alt text the author has written for the image.

Tuesday, August 26th, 2025 12:30pm

Tagged with alt text accessibility a11y alternative indieweb personal publishing interface ui interaction frontend development

Wednesday, May 28th, 2025 12:44pm

Tagged with funny satire humour frontend development nocode tools webbed briefs sites figma accessibility a11y divs divs divs divs divs

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.

Thursday, August 29th, 2024 8:25am

Tagged with accessibility a11y testing pareto principle frontend development issues

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.

Tuesday, May 28th, 2024 10:47am

Tagged with accessibility a11y book publishing frontend development

Home - Sa11y

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

Monday, May 20th, 2024 7:45am

Tagged with sa11y accessibility a11y testing tool bookmarklet frontend development

Previously on this day

3 years ago I wrote Five questions

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

4 years ago I wrote Re-evaluating technology

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

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

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

7 years ago I wrote Indie web events in Brighton

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

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

Republishing a forgotten piece of history.

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

Posting from Swarm to my own site.

10 years ago I wrote Regression toward being mean

I need to get better at balance.

11 years ago I wrote 100 words 069

Day sixty nine.

14 years ago I wrote dConstructickets

Get ‘em while they’re hot.

15 years ago I wrote Hashcloud

The web is agreement.

20 years ago I wrote Copenhagen

I’m off to Denmark for the Reboot conference.

23 years ago I wrote Laptop Land

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

23 years ago I wrote Switching lifestyles

Mark Frauenfelder is making another switch.

24 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.