Accessibility 101

Essential for some, useful for all!

@PraeSongprasit

ANZ, Trademe, Momentum, WellingtonNZ, Aro Digital, NZ Trade and enterprise, Deloitte, Trust power, Xero, Z Energy, Aura, Integration works, Aviat Network, NZX, TTC, BNZ

Today’s flow

Why I’m here
What is a Accessbility
Who needs it
What are assistive tools
What can you do

About me

Ok, a little bit about me

I’m a UX engineer, who loves helping people create accessible web products.

And creator of Web Access Club, an accessibility podcast for web creators. Launching later this year.

I’ve been in the NZ tech industry for about 9 years now, specialising in UI front-end web development.

I have a lot of experience working with UX practitioners, including researchers and designers. So I have a deep appreciation for UX.

In my free time, I practice Japanese archery, watercolours, and eat around town. I am a little bit of a foodie.

In the last couple of years, I’ve started to dive into wonderful world of web accessibility. Afterall, my bread and butter, HTML, plays a crucial role.

That is why I’m here

Why am I here?

to learn, share, and recruit more a11y friends❣️

Screenshot of digital.govt.nz's Accessibility page

What is
web accessibility?

Inclusion and access to
information and services

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

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.

When talking about types of disablites, I love showing this image from Micrsoft Inclusive Design toolkit.

It highlight a spectrum in which someone could become disabled.

Along that spectrum, you may not be able to touch, see, hear, speak or think permanently, temporarily, and situationally

When I started learning about disability, I was so scared of referring to someone as “disabled”.

Is that an offensive way to refer to a group?

But after talking to advocates, reading user stories, and watching demos, I realised no, “disabled people” is exactly what we should be using.

There's nothing wrong with anyone in this chart.

It’s social model of disability, which is especially relevant when us creators create things for people to use.

A blind person can be disabled from using a site that isn’t well designed for screen readers.
A wheel chair rider post hip surgery can be disabled by narrow groceries self checkout.
A person cooking with dirty hands could be disabled from using recipe software if it doesn’t allow for voice dictation.
A person with severe ADHD was disabled from finding product information, because of heavy use of distracting looping animations in the marketing site.

In all of these usage of the term “disabled”, you’ll notice that it’s how the technologies have been designed that disabled and barred users with different access needs from helping themselves.

By not considering, or designing with these users, design stops these communities from becoming independent.

It is the creators saying: The problem is with you, not the tool.

Wow, what a way to create an inclusive world.

🪄 Assistive tech

How to create
an accessible experience?

Start with content and HTML, not visuals

How do most of these magical tools allow users to access web products?

Text content, HTML, CSS, and JS my friends. Plain and simple.

You may have been sick of the 'content is king' saying

There's no truer saying in the field of accessibility

What are the users actually on your web product for?

It's information and services. Visuals is a secondary way to deliver that information

When I work with a designer who starts imagining a flow in pure text experience first, 70-80% of the accessibility problems will be resolved at the design phase.

Then it is up to developers to drive the rest home, using the most semantic HTML code possible

Marking up what the page is about as <h1>, marking something users can interact with as <button>, marking links to different urls as <a>, and etc. all make your content accessible to these tools.

Linear experience

❤️ 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.

The best designers and designs I've ever worked with, start from a linear text experience, which can be easily understood what read out loud.

Multiple ways
to convey information

Text, video, audio, non-coloured visual treatments

Accessibility is a right

to equal access of your information and services

If you work for government services, you're legally required to make your product accessibile.

There's a standard call WCAG that's international, and is used to help guide creation of accessible web experiences.

I'm speaking to the future web creators, who will go out there and create useful experiences for lots of people.

I want us all to remember, that accessibility is a right

When us creators design things without ease of access in mind, we DISABLE people. We take away their rights.

People can be disabled in many ways, be it permanently, temporarily, and situationally.

We can help prevent that, by creating clear linear text experience, and provide multiple ways to access products and services.

By creating accessible product, your product will become more valuable and usable by more people.

Creators have power

to enable and disable people

Accessibility