There is always a way

to fix Accessibility

@GlafiraZhur for the EpicHey! Conference

November 2023

Glafira Zhur

Twitter: @glafirazhur

Accessibility Lead

GDE for Web

Accessibility Club Minsk

Accessibility Unity

https://accessibilityunity.com/

@a11yminsk

@MinskCSS, @MinskJS, @peredelanoConf

PC Member

Name

(label)

Role

(semantics)

Value

(properties and states)

dialog

label

modality

WAI-ARIA 1.2

aria

People With Disabilities

WHO World Disability Statistics

WebAIM Million 2023

WebAIM Screen Readers Survey

15% of population

1,211,238,211

Earth population

8,074,921,408

15%

@glafirazhur

Temporary disabilities and external conditions are NOT INCLUDED

@glafirazhur

Legislation

USA: Section 508, ADA (now)
EU: European Accessibility Act (2025)
Canada: AODA (2021)

Report on Digital Accessibility Lawsuits 2023

@glafirazhur

Statistics (US)

UsableNet ADA Lawsuit Tracker (september)

@glafirazhur

Think about a11y closely if you are...

🤔

@glafirazhur

... a Frontend Developer

😸 who is a Junior

😸 who've never heard of A11Y

@glafirazhur

Do not remove the aria-attributes

from the UI components

@glafirazhur

ARIA-attributes

do not change

visual appearance (CSS)

or behavior (JS)

⚠️

@glafirazhur

There is no AREA attributes, only ARIA

@glafirazhur

Do not use properties which do not exist

... a Full Stack Developer

😸 who don't mind HTML

😸 who uses ready-to-use libraries

@glafirazhur

😸 who creates custom components

<input placeholder="Birth surname">

@glafirazhur

👽 In a <form>, button triggers a submit.

<button type="button">EpicHey!</button>

@glafirazhur

👽 the disabled attribute disables tabbing and cannot be enabled

<button disabled>EpicHey!</button>

@glafirazhur

👽 It contains default styling that is up to the browser

button.epic {
	all: unset;
}

@glafirazhur

<header>
	<nav> 
      <!-- List of links -->      
  	</nav>
</header>

<article class="product-card">
  <button>Add to cart</button>
</article>

Use proper semantics

@glafirazhur

@glafirazhur

✅1st rule of ARIA:

Don’t use ARIA

(if you can use HTML instead)

@glafirazhur

Do not override the native semantics

@glafirazhur

✅2nd rule of ARIA:

Don’t change the native semantics

@glafirazhur

And it doesn't matter who you are...

🦑

👾

👻

🦄

😸

🦝

🤖

👽

@glafirazhur

Name: " "

@glafirazhur

@glafirazhur

Do not forget to give an accessible name

for interactive elements

@glafirazhur

@glafirazhur

@glafirazhur

✅5th rule of ARIA:

All interactive elements

must have an accessible name

@glafirazhur

Where are the 3rd and the 4th rules of ARIA?

🤔

@glafirazhur

✅3rd rule of ARIA:

Don’t use role=“presentation”
or aria-hidden=“true”
on visible focusable elements

@glafirazhur

@glafirazhur

aria-hidden=“true”

@glafirazhur

✅4th rule of ARIA:

All interactive ARIA roles need to be operable by keyboard

@glafirazhur

Check the keyboard navigation

✅

Check the accessible name for the interactive elements

✅

Use semantics but don't overdo it

✅

Read the WAI-ARIA spec 😅