Accesibility

in Design
Framework and best practices
 Understanding
Accessibility

Accesibility accesibility standards

TOPICS COVERED

Accessibility
Incorporating

checklist accessibility
 Go Back to Agenda Page

Understanding accessibility
What is digital

accessibility?
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.
 As at 2020, there are
reportedly over 27 million
Nigerians living with some
form of disability.
— World Report on Disability (WRD)
 Temporary disability
For example, an injured arm

Not all disabilities

are permanent

Situational disability
Holding a baby in one arm or being in a crowded bus stop
 Go Back to Agenda Page

Accessibility standards
 Types of disability

Visual Motor Hearing Cognitive

Color blindness Difficulty or inability to use hands Deafness Memory
Low vision Limited fine motor control Hard of hearing Attention
Blindness Slow response time Developmental issues
Tremors
Accessible design is inclusive
Assistive technology helps increase, maintain, or improve the functional capabilities of individuals
with disabilities, through devices like screen readers, magnification tools, and hearing aids.
Accessible design always takes into account the use cases of various assistive technologies.
 Perceivable
Information and user interface components must be
presented to users in ways they can perceive.
Information cannot be invisible in certain user scenarios.

Operable

Principles of

Users must be able to operate the interface. It cannot

require interactions that the users cannot perform.

accessibility Understandable
All the content should be clear and consistent and
should allow users to discover it at their own pace.

Robust
Content should be flexible and adaptable to a variety of
mediums and input methods, including assistive
technology
Web Content
Accessibility Guidelines
The Web Content accessibility Guidelines (WCAG) published by W3C are a set

of rules defining the accessibility of a website: mandatory for the public sector

and adopted by the private sector as well. As a result, digital creators around

the world rely on these rules. For each guideline, there are testable success

criteria at three levels for A, AA, and AAA standards.

 Go Back to Agenda Page

Accessibility checklist
 Don't just rely on colour
Avoid expressing meaning strictly through colour. Combine

text, graphic objects, and patterns to add additional layers

of meaning

Colour and contrast

Colour blindness affects approximately 1 in 12

men (8%) and 1 in 200 women in the world

Have good text contrast

Check the contrast of your design for accessibility using the

Web Content Accessibility Standards (WCAG)

 Always support Dynamic Type
Many users require larger text so always support

Dynamic Type and plan how your site or app will look

accounting for these users

Keep consistent type hierarchy

It allows users to navigate fast through information and

Typography

users with screen readers can understand it better.

Be clear and consider readability

and readability Use descriptive and informative page titles. Avoid large

blocks of text which are hard to focus on, read, and are

tiring to consume.
"No one has ever complained that something

was too easy to read"

Line heights and text lines
Line height (line spacing) should be at least 1.5 times the
font size. Keep text lines short (users should he able to
able to zoom at least 200% without having to scroll
horizontally)
Does it sound like something you would say?

Would you say? Or? Would you say? Or?

Assistance Help Failed delivery Missed delivery

Bag identifier Bag information Further More

Commence Start In order to To

Couriers Porters Options Choices

Ensure Make sure Package Parcel

 Always use alt text
Provide alternative text for images to help the screen

reader users. Avoid using images of text

Images

Alt text should be relevant

Alternative text should describe what is happening in the
image and why it's important to the story
 The reading order is the order of all the

elements (interactive and non interactive). It

usually follows the sequence of the visual

layout: left to right and top to bottom.

The focus order is in the order in which the user

Reading order, interacts with the elements. Grouping objects

is essential for screen readers. Grouped

interface elements must be represented as a

focus and single accessible component.

grouping
 Captions
Provide captions for videos

Accents
Media Consider different accents and speech difficulties when
making videos
86% of Facebook videos is watched without

sound

Flashing content
No content should flash more than three times per

second unless it is small and low contrast and does not

contain too much red

 Use proper labels
Avoid hidden labels. Common or related elements should

be grouped correctly

Forms

Be explicit
Add instructions and help text, if necessary, and don't base

error messages on colour alone

Most common types of

WCAG 2 failures
In 2021, 97.4% of home pages detected WCAG 2 failures!
86.4%
Low contrast text

60.6%
Missing alternative text for images

54.4%
Missing form input labels
 Go Back to Agenda Page

Incorporating accessibility
 Accesible touch targets
Ensure that touch targets are al least 9mm high or 9mm
wide independent of the screen size, device or
resolution. 9mm is about 34px.

Some rules for

Don't restrict orientation

Don't restrict your design to only portrait or landscape,
unless a specific orientation is necessary

mobile design
Alternative ways for operations

accessibility If you use device motion (shaking or moving) or complex

gestures, provide alternative ways to make the same
operations

Components and patterns

Use system components and patterns as much as

possible
Accessibility user research
Cover accessibility and inclusive design issues
Consider potential visual, hearing, motor, and cognitive disabilities
Incorporate accessibility considerations in your personas, or user stories
When possible, include users with different, abilities in user research
Accessibility user testing
Test using assistive technology tools like a screen reader
Learn now to navigate a web page using only your keyboard
Adopt comprehensive user testing that includes users with different abilities
while allowing them to use their assistive equipment
Thank you!
That's all folks. Next up, questions.