The document discusses the differences between accessibility and inclusive design. Accessibility focuses on outcomes and aims to create products usable by people with disabilities by looking at established laws and standards. Inclusive design is a process that focuses on making products user-friendly for everyone by addressing any cases of exclusion and understanding that exclusion can happen to anyone depending on context. The document provides examples of making Instagram posts, games, and AI plugins more accessible and inclusive. It emphasizes that accessibility is about creating usable experiences for all users, not just meeting technical guidelines.

1. Is accessibility the new black?
<Unlabelled button double tap to activate>

2. The bigger picture
Accessibility and/versus inclusive design
Both are often grouped together since they are
each focused on making products or services
available to a wider range of people, but let’s
see some differences:

3. Being inclusive starts with
changing our perception.
1980 Today
Disability as personal attribute
“In the context of health experience, a
disability is any restriction or lack of
ability (resulting from an impairment) to
perform an activity in the manner or
within the range considered normal for a
human being.” World Health
Organization
Disability as context dependent
“Disability is not just a health problem. It
is a complex phenomenon, reflecting the
interaction between features of a
person’s body and features of the
society in which he or she lives.” World
Health Organization
● recognize exclusion
● learn from diversity
● solve for one, extend to many

4. Accessible design
Accessibility focuses on outcomes
-based qualities or attributes
Accessibility aims to create products
usable by people with disabilities.
Accessibility looks at “typical” vs
disabled customers.
Accessibility looks to established laws
and standards for guidance.
Accessibility focuses on specific
physical or cognitive disabilities
Accessibility aims to understand the
most common disabilities
Inclusive design
Inclusivity is a process-based
methodology
Inclusivity focuses on making products
user-friendly for everyone.
Inclusivity asserts that there is
no”typical” customer.
Inclusivity looks for cases of exclusion
to address.
Inclusivity focuses on exclusion for any
reason and connections between
people.
Inclusivity understands that exclusion
can happen to anyone depending on
context.

5. Accessibility is a key component of inclusive design
Alternative text can be for example, useful to users who are
blind and can’t see the screen as it describe the imagery
and the visual icons. Alternative text can also be useful to
users who might be with low bandwidth or using old
technology.
Not just technically accessible products
Accessibility is not just about meeting certain criteria, not
only to complete a checklist of guidelines to ensure that
your product is accessible, because that can lead to a
product that’s technically accessible, but not necessarily
usable and not a great experience for all users. For
example, the use of a semantics that does not help the user
in navigation using assisted technology.
Example: Screen Reader Demo for Digital Accessibility
https://www.youtube.com/watch?v=dEbl5jvLKGQ&ab_
channel=UCSFDocuments%26MediaPhotography

6. Case studies
Instagram / EA sports / AI plugins

7. Adding alt text to Instagram posts.
Alternative text serves several functions:
It is read by screen readers in place of images allowing
the content and function of the image to be accessible to
those with visual or certain cognitive disabilities.
It is displayed in place of the image in browsers if the
image file is not loaded or when the user has chosen not
to view images.
It provides a semantic meaning and description to images
which can be read by search engines or be used to later
determine the content of the image from page context
alone.

8. Gaming and accessibility
Accessibility Features.
The game supports many visual assistive settings such as Colour Blindness,
Brightness and Contrast, and Large Player Indicators. Additionally, you can
choose a variety of communication settings such as Menu Narration,
Speech-to-Text, and Text-to-Speech. These accessibility settings are available
in-game and on most selection menus.
https://www.ea.com/able/news/fifa-21-accessibility-features
Building on accessibility features.
SpecialEffect are an award-winning charity that enable people with physical disabilities to
benefit from the fun, inclusion and therapy of video games. They support people of all
ages through personalised assessments, equipment loans and equipment modifications.
George Dowell was a typical teenager spending most of his time playing sports
and video games. When he was just 17, George was involved in a car accident
that left him paralysed from the chest down.
For the next 10 months, George rehabilitated in a hospital and sought ways to
play his favourite video games, but due to his accident, George was left with
limited arm and hand movement.
Using a standard controller wasn’t a reality as he no longer had the control, grip
or the hand function to use it, so he stopped and tried other things to pass
time. After being discharged from hospital, he was introduced to SpecialEffect.
Who through a custom-built setup, have enabled George to play his favourite
videogames again.
https://www.ea.com/news/special-effect-making-gaming-possible
https://www.youtube.com/c/specialeffectcharity

9. The future of accessibility
What’s next for WCAG
The next edition of WCAG guidance
will not be called WCAG 3.0, as you
might expect. Currently, the project's
code name is "Silver," but there is a
chance that will change before it is
released. You might be wondering why
it won't be called "WCAG 3.0" and
follow the current standard. There's an
excellent reason for that. As the "W"
in WCAG stands for the word "web,"
it is no longer appropriate.
https://userway.org
https://www.w3.org/WAI/GL/task-forces/silver
/wiki/Main_Page
Will the future of accessibility be a plugin made with the help of artificial intelligence? Similarto userway or accessibe.
https://accessibe.com

10. Accessibility in practice
Design / Working with the development team

11. Ok George, but where do I start?

12. You can start with WCAG Guidelines
https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=121%2C131%2C111&currentsidebar=%23col_customize&levels=aaa&techniques=sufficient%
2Cadvisory%2Cfailures&technologies=smil%2Cpdf%2Cflash%2Csl#text-alternatives

13. Oryou can start with GOV.UK or Vox Media guidelines
http://accessibility.voxmedia.com/#designers
https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-a
ccessibility/ or
https://github.com/UKHomeOffice/posters/tree/master/accessibility/dos-donts
/posters_en-UK/svg

14. Although they all speak of the
same principles like:
Perceivable Information
Operable UI and Navigation
Understandable Information and UI
Robust Content and Reliable Interpretation
this will not be an easy ride…
instead...

15. ...instead you can start with Pablo's article to get an overview of what
needs to be done
https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
And focus on:
Add enough color contrast (4.5:1 for normal text AA)
Don’t use color alone to make critical information
understandable
Design usable focus states
Use labels or instructions with form fields and inputs
Write useful alternative text for your images and other
non-text content
Use correct markup on your content
Support keyboard navigation

16. Next step: what tools I need?
Color Oracle
Color Oracle is a free color blindness
simulator for Windows, Mac and Linux.
axe-coconut
Web Accessibility Testing - Chrome
Extension:
NoCoffee
Web Accessibility Testing - Chrome
Extension:
Siteimprove
Siteimprove Accessibility Checker
Chrome Extension:.
Depends on your workflow
There are a lot of tools that can be used in the design process, from Figma, XD, Sketch plugins or Chrome Extension to to online
solutions, some of them are focused on helping to establish a color palette that has a good contrast, simulating a disability or a
screen reader or make a global audit. Below are some of the most popular:

17. Working with the development team

18. Screen reader access
Affordances
Affordances are properties of objects which show users
the actions they can take. Users should be able to
perceive affordances without having to consider how
to use the items. For instance, a button can be
designed to look as if it needs to be turned or pushed.
Example: Door handle or a button (we try to make our website button to
look kind of like a three-dimensional button - you can click on it like any
button in real life we don’t give everybody an instruction manual for this)
Question
Question: For someone is non sighted how do we
convey the same visual affordances?
Use native elements with build in rich semantics or refer to Aria*
Authoring Practices foryour own semantics.
https://www.w3.org/TR/wai-aria-practices-1.1
*The Web Accessibility Initiative - Accessible Rich Internet Applications
(ARIA) specification adds the ability to modify and enhance the
semantic meaning of elements in the DOM

19. How it works under the hood - Google Chrome case
DOM: The Document Object Model is an application programming
interface (API) for HTML and XML documents. It defines the logical
structure of documents and the way a document is accessed and
manipulated.
GUI (Graphical User Interface): a form of user interface that allows users to
interact with electronic devices.

20. It is not only one solution to
solve accessibility problems
with screen readers
https://www.oomphinc.com/insights/images-alt-tags-out-loud-experience-oomph-inc/

21. It is not only one solution to
solve accessibility problems
with screen readers
https://www.sarasoueidan.com/blog/accessible-icon-buttons/
Accessible Visually Hidden Text with
hidden and aria-labelledby
Using aria-label
Different strategies
to make an icon
button accessible
“While the seemingly popular aria-label is a
perfectly valid way to add an accessible name
to a button (and/or other components), it is
certainly not the only way, let alone the best.”

22. Wrapping it all up
Learn more about assistive technology and how it is implemented under the hood
and how to make products that are usable not only technically accessible.
Check for common issues with Siteimprove or other apps.
Advocate for the use of native components with built in rich semantics.
Designing for accessibility is not hard, but make an accessibility product it is, so try to
design a great keyboard navigation interaction model, in addition to the visual design.
Inclusivity focuses on making products user-friendly for everyone, but designing for
everyone is designing for no one.