Digital Accessibility: The 20% You're Ignoring (and It Could Cost You Big)

People are talking more and more about accessibility. But… do you actually know what it means?

Many think it's just about "making the website look good everywhere" or "adding a magic button on the side of the screen." And while that might be part of it, accessibility goes much deeper than that: it means creating digital experiences that can be used by everyone — including people with disabilities.

1 in 5 people has some form of disability. That’s 20% of your audience.

2 out of 10
20 out of 100
200 out of 1,000
2,000 out of 10,000
20,000 out of 100,000
200,000 out of 1,000,000

If your product isn’t accessible, you’re excluding a lot of people. Literally.

And it’s not just about empathy or ethical design — it’s a legal and financial issue too.

Lawsuits Over Inaccessibility: A Real (and Expensive) Risk

Did you know that in the United States, there are over 4,000 digital accessibility lawsuits filed every year?

These lawsuits usually range between $10,000 and $100,000.

Yes, you read that right.

Often, entrepreneurs and designers don’t think about this until it’s too late. The result? Loss of money, time, reputation... and the bitter feeling of looking back at years of work that don’t meet basic accessibility standards.

Update: No, adding a magic button doesn’t mean you’re compliant — and it won’t protect you in court.

So, where do you start?

The most widely used global standard is WCAG (Web Content Accessibility Guidelines). They’re organized into three levels:

• A – the bare minimum
• AA – the level required by law in the US and EU
• AAA – the most advanced level (and sometimes not necessary in all contexts)

To comply with WCAG 2.1 A and AA, you need to follow key principles grouped into 4 pillars:

Note: Yes, the following content was generated by AI so I don’t forget anything (I don’t remember all of them either), but most are intuitive and based on common sense.

Perceivable

Non-text Content: Provide text alternatives for all non-text content.

Audio-only and Video-only (Pre-recorded): Provide transcripts or alternatives.

Captions (Pre-recorded): Add captions to pre-recorded videos with audio.

Audio Description or Media Alternative: Provide audio descriptions or a text alternative for video-only content.

Info and Relationships: Use semantic HTML (headings, lists, etc.).

Meaningful Sequence: Ensure content is read in a logical order.

Sensory Characteristics: Don’t rely only on color, shape, or position for meaning.

Use of Color: Don’t use color alone to convey information.

Audio Control: Provide controls to pause or stop any auto-playing audio lasting more than 3 seconds.

Captions (Live): Provide captions for live audio content in synchronized media.

Audio Description: Provide audio descriptions for pre-recorded video.

Contrast (Minimum): Minimum 4.5:1 contrast ratio for normal text.

Resize Text: Allow text to be resized up to 200% without loss of content.

Images of Text: Avoid using images of text unless essential.

Reflow: Content should be usable at 320px width without horizontal scrolling.

Non-text Contrast: UI components must have at least 3:1 contrast ratio.

Text Spacing: Ensure text remains readable when spacing is adjusted.

Content on Hover or Focus: Tooltips must be dismissible, hoverable, and persistent.

Operable

Keyboard: All functionality must be available from a keyboard.

No Keyboard Trap: Keyboard focus should not get trapped.

Character Key Shortcuts: Provide a way to turn off or remap single-key shortcuts.

Timing Adjustable: Give users control over time limits.

Pause, Stop, Hide: Let users pause or stop moving, blinking, or scrolling content.

Three Flashes or Below Threshold: No content should flash more than 3 times per second.

Bypass Blocks: Provide a way to skip repetitive content.

Page Titled: Use descriptive and meaningful page titles.

Focus Order: Ensure navigation order is logical.

Link Purpose (In Context): The purpose of links must be clear from context.

Multiple Ways: Provide more than one way to locate a web page.

Headings and Labels: Use clear and descriptive headings and labels.

Focus Visible: Make sure focus indicators are visible.

Pointer Gestures: Avoid gestures that require path-based movement.

Pointer Cancellation: Ensure users can cancel actions triggered by pointer input.

Label in Name: The visual label should be part of the accessible name.

Motion Actuation: Provide alternatives to motion-based actions.

Understandable

Language of Page: Specify the default language of the page.

On Focus: Focus should not cause unexpected changes.

On Input: Changing input should not trigger unexpected actions.

Error Identification: Clearly identify input errors.

Labels or Instructions: Provide labels and instructions for input fields.

Language of Parts: Mark changes in language within content.

Consistent Navigation: Use consistent navigation across pages.

Consistent Identification: Use consistent labels for identical elements.

Error Suggestion: Suggest fixes for input errors.

Error Prevention (Legal, Financial, Data): Provide review or confirmation steps for critical actions.

Robust

Parsing: Code must be properly structured and free of major HTML errors.

Name, Role, Value: UI elements must expose their role, name, and state to assistive tech.

Status Messages: Status updates must be conveyed to assistive technologies without focus changes.

If you're a designer, don't wait until you have 100 portfolio projects. Because when you look at accessibility, you'll realize none of your work meets the standards. Start implementing it now.

Don't wait for a lawsuit to do things right. Design accessibly from the start.