Accessibility

An introduction to a11y

Prae Songprasit

About me

UX Engineer
Coded bits of Xero, ANZ, TNZ
Focus on accessibility &
design systems
Kyudoka

Screenshot of digital.govt.nz's Accessibility page

What is
web accessibility?

Inclusion and access to
information and services

Who is web accessibility for?

❤️ Everyone

Types of disabilities

Micrsoft inclusive design personal spectrum, showing how different types of physical disabilities can be caused permanently, temporarily, and situationally.

The curb cut effect

A sketch of stick figers using wheel chair curb cuts in different ways, like someone with a stroller, bycicle, and wheeling a fork lift.

What could access needs look like?

Lets hit some examples!

Accessible sites

Examples of different types in the wild

Develop an accessible experience

Where to start?

Try keyboard only

Can you navigate your website with only keyboard?

Test with styles turned off

❤️ by keyboard only users,
screen readers,
people with different cognitive abilities

When you start with visuals, it's easy to focus on the layout, the colours, the typography, the imagery, and other visual cues to hint at actions users can take. It's fun!

But often, it's very hard to translate the 'feel' of colours and typography to access needs users, using assitive tools.

As a sighted user, I can quickly scan the visuals to understand what your product and services is about.

Screen reader users and keyboard users cannot take so much information all at once. Their tool only let them interact with your product one text or input at a time. So think about your user flow, and make sure to design that order explicitly and clearly. Don't make people jump around your page.

Try turning all the styles off. Does your app still make sense if you read it? If the order is weird, it'll be weird for assistive tech users

Use keyboard to tab through

Add meaningful alt text!

Bitten off delicious looking ring donuts, sprinkled with hundred and thousands held up in-front of Sixes and Sevens sign

Example alt text

						
							<img
							  src="donuts133.png"
							  alt="Bitten off delicious looking ring donuts,
								sprinkled with hundred and thousands
								held up in-front of Sixes and Sevens sign"
							/>

Follow best practices

Use linter to help enforce
HTML and framework recommendations!

Accessibility is a right

to equal access of your information and services