a11y and UX Junaid Masoodi Accessibility enables people with - - PowerPoint PPT Presentation

▶

Jul 01, 2023 801 likes •1.14k views

a11y and UX Junaid Masoodi Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web* Digital accessibility refers to the practice of building digital content and applications

SLIDE 1

SLIDE 2

a11y and UX

Junaid Masoodi

SLIDE 3

SLIDE 4

Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web* Digital accessibility refers to the practice of building digital content and applications that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech, or cognitive disabilities.

* because we are talking about web accessibility only

SLIDE 5

myth

gossip

SLIDE 6

SLIDE 7

SLIDE 8

achieved….

Focusable via the keyboard or screen reader
Clickable by Mouse, Enter Key and space bar
Accessible name and state provided to assistive tech
An interaction is expected when clicked

SLIDE 9

SLIDE 10

Change in markup..

SLIDE 11

Costs extra work

SLIDE 12

Costs more extra work

SLIDE 13

Costs more and more extra work

SLIDE 14

Web is for everyone, it doesn’t have to be hard! ^well it isn’t hard

SLIDE 15

How do I get started with a11y

SLIDE 16

https://www.w3.org/TR/WCAG21/

SLIDE 17

User experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users.

SLIDE 18

a11y + UX = ?

SLIDE 19

Why designing for accessibility?

Better experience irrespective of context or situation
It is important
Have bigger out reach
SEO Friendly
Faster than ordinary (normal in informal) websites
Best practises

SLIDE 20

Add enough colour contrast 🖎

SLIDE 21

Don’t use colour alone to make critical information understandable 💉

SLIDE 22

Design usable focus states

SLIDE 23

Default visual focus states for Chrome and Firefox

SLIDE 24

Use labels or instructions with form fields and inputs

sacrificing usability in favour of simplicity

SLIDE 25

Write useful alternative text for your images and

ther non-text content
Within the <alt> attribute of the image element.
Within context or surroundings of the image itself.

SLIDE 26

SLIDE 27

Use correct markup on your content

SLIDE 28

Support keyboard navigation

SLIDE 29

Avoid component identity crises.

Q: When is a menu no longer a menu?    A: When it’s a non-modal dialog.

SLIDE 30

Design responsibly

SLIDE 31

Thank you

https://junaidmasoodi.com   iam@junaidmasoodi.com @junaidmasudi