Making Your Website Accessible - ⴰⵔⵔⴰⵜⵏ

When I first started learning about web accessibility, I found the whole topic really confusing! 😬

If you don't know what accessibility actually does or what benefits it brings to your website, you're not alone. Many developers feel the same way at first. In this blog post, I'll explain the basics in simple terms so you can start making your websites more accessible for everyone.

What is accessibility ?

Accessibility means making your website easy to use for as many people as possible. we must think about different group of people :

People who have trouble seeing
People who have trouble hearing
People who have trouble moving

You can learn more about these groups on What is Accessibility (MDN).

What is WCAG ?

WCAG stands fro Web Content Accessibility Guidelines. which is a list of rules that help make websites better for everyone.

WCAG says your website should be:

Perceivable : Can users perceive it? (alt text for images, captions for videos)
Operable : Can users navigate it? (keyboard navigation, focus states)
Understandable : Is it clear and predictable? (simple language, consistent UI)
Robust : Does it work with assistive tech? (semantic HTML, ARIA where necessary)

When you implement these things, try not to not annoy your users, And when using JavaScript remember people who use screen readers

Common Screen Readers

Mac OS: VoiceOver
Windows: JAWS, NVDA
Android: TalkBack

How screen reader users surf the web ?

The video is about 1 hour long, but it's super helpful!.

What is ARIA ?

ARIA stands for Accessible Rich Internet Applications. It is a set of attributes that can be added to HTML elements to make your website easier to use for people with disabilities who uses screen readers.

ARIA Roles

Roles : tell the screen reader what the element is (like button, menu).

ARIA Properties

Properties : tell the screen reader about the element's state or value (like whether the element is checked, disabeld or hidden).

Using ARIA Roles

There are two main ways to declare a role for an element:

Use an HTML element that already has a role (like <button> or <nav>).
Use the role attribute to declare a role for an element that doesn't have one (like <div> or <span>).

Be careful when overriding roles! If you add a role to an element that already has one, you'll override its native role. For example,

<button role="heading">Click me</button>

This will be announced as a heading, not a button. This will confuse users and break the expected behavior. Only override roles when absolutely necessary, and make sure you restore all the functionality users expect.

Elements with Implicit Roles

Some HTML elements already have roles built in. This means that screen readers will automatically know what they are without you having to add a role attribute manually.

Element	Role
`<a>`	link
`<button>`	button
`<form>`	form
`<h1>` to `<h6>`	heading
`<img>`	img
`<input>`	input
`<li>`	listitem
`<main>`	main
`<nav>`	navigation
`<ol>`	list
`<section>`	region
`<table>`	table

<button>Click me</button>

if you navigate to this button with a screen reader (NVDA), you'll hear "button, click me".

Using the role Attribute

if you need to make a custom element accessbile, you can use the role attribute to tell the screen reader what it is.

<div role="button">This is a fake button </div>
<!-- This is a fake button don't ever do this -->

Keep Learning

Want to learn more about accessibility? Here are some great topcis to check out: