> Digital Accessibility 2: HOW
Tags: a11y, wcag, learningarchives
Published: 2023-10-20 15:31:49

Digital accessibility (abbreviated as a11y) is about:

- designing and building digital products...
- so that they can be used in a meaningful and equal way...
- by as many people as possible — including those with disabilities.

---

## HOW: How can you measure and improve it?

Using accessibility standards, such as:
- local and international laws, policies and industry standards
- Web Content Accessibility Guidelines ([link](https://www.w3.org/WAI/standards-guidelines/wcag/))

---

### Web Content Accessibility Guidelines (WCAG)

#### Facts:

- **Gold standard for digital accessibility.**
- **Created for**: app designers and developers.
- **Created by**: the creators of the World Wide Web, in association with international organizations and governments.

#### Three levels ([read more](https://ialabs.ie/what-is-the-difference-between-wcag-a-aa-and-aaa/)):

- **Level A**: Basic (30 rules)
- **Level AA**: Strong (Level A + 20 rules)
- **Level AAA**: Excellent (Level AA + 28 rules)


---

### POUR Principles:

#### Facts:

- **First step towards accessibility**, based on WCAG.
- **Human centric**: Instead of hard-and-fast rules, it helps you understand the diverse needs of your users (including people with disabilities), and facilitating those needs.
- **Four aspects**: Perceivable, Operable, Understandable, and Robust.


### 1. Perceivable 👀

**Consider**: 
Can all users perceive all essential information on the screen?

**Tips**: 
Some ways to make your product more perceivable:
- Offer alternative ways to access information. 
  - text content: screen-reader friendly (mark-up for headings, lists, tables etc), translations, simplified language.
  - non-text content (images, videos, charts): descriptions, captions, transcripts.
- Make content easier to see and hear. 
  - provide sufficient contrast between the background and foreground elements (text, graphics, buttons etc)
  - ensure color is not the only method of conveying meaning.
  - ensure users can pause, stop, and adjust the volume of audio and video content.
  - ensure no information is lost when users resize text up to 400%

### 2. Operable 🖱️

**Consider**:
Can all users interact with all interactive elements of your product?

**Tips**:
Some ways to make your product more operable:

- Ensure that all functionality that is available by mouse is also available by keyboard and touch-screen (click, scroll, navigate)
- Provide necessary controls for page-navigation (Go back, breadcrumb), slideshows and videos.
- Give users enough time to fill out a form or a method to extend the time.

### 3. Understandable 🧠

**Consider**:
Can all users understand the operation of the UI and the information presented on it?

**Tips**:
Some ways to make your product more understandable:

- Write clear and simply:
   - avoid complex words wherever possible, and provide interpretation for any unusual words, abbreviations, symbols.

- Ensure predictability and consistency:
  - provide predictable navigation mechanisms
  - make sure repeated components look and behave the same way
- Ensure error messages are clear and easy to resolve.

### 4. Robust 🔌

**Consider**:
Is your app compatible with different devices, browsers, assistive technologies, and other user agents?

**Tips**:
Some ways to make your product more compatible:

- Ensure content is consistently accessible:
  - with different screen reader technologies
  - regardless of screen size and orientation


---

**Note:** This post is part of a series on digital accessibility. The content of this series is based on various resources, including the [Learn Accessibility course](https://web.dev/learn/accessibility).