1. Accessibility
and why it matters

2. What is accessibility?

3. Accessibility is the word used to describe whether
a product (for example, a website, mobile site,
digital TV interface or application) can be used by
people of all abilities and disabilities.
Accessibility and why it matters

4. Who are we talking about?
People that with disabilities that need accessible products are people that suffer from:
Accessibility and why it matters
- Blindness or partial blindness
- Colour blindness
- Low vision
- Hand tremors
- Mild short-term memory loss
- Attention deficit hyperactivity disorder (ADHD)
- Dislexia
- Age-related impairments
- Hard hearing
- Down syndrome
- Deaf-blindness
… and so many others that I bet exist and we are not aware of!

5. Who are we talking about?
People that suffer from blindness in the UK
Accessibility and why it matters
- 2 million people in the UK are living with sight loss.
These figures are expected to rise to over 2,250,000 in
2020 and nearly four million in 2050.
- There are 360,000 people registered as blind or partially
sighted in the UK who have irreversible sight loss.
- An estimated 25,000 children in the UK are blind or
partially sighted.
- Someone in the world goes blind every 5 seconds.
- 50% of sight loss cases cannot be avoided.

6. Other people that need accessible products are also people that:
Accessibility and why it matters
- Don’t have or are unable to use a keyboard or mouse.
- Have temporary disabilities due to accident or illness.
- Are old
- Are new users
- Have a very bad internet connection speed
- Are in a noisy environment
- Have "screen glare”
- Are driving
- Have low literacy level
- Have different learning styles
- Are not fluent in English
How many of us have been on a website and had to get subtitles?
Who are also talking about

7. Why should we care?
Accessibility and why it matters
“The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.”
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

8. Why should we care?
Accessibility and why it matters
It is essential that the Web be accessible in
order to provide equal access and equal
opportunity to people with diverse abilities.
The UN Convention on the Rights of Persons
with Disabilities recognises access to
information and communications
technologies, including the Web, as a basic
human right.
There is also a strong business case for
accessibility. Accessibility overlaps with other
best practices such as mobile web design,
device independence, multi-modal
interaction, usability, design for older users,
and search engine optimisation (SEO). Case
studies show that accessible websites have
better search results, reduced maintenance
costs, and increased audience reach, among
other benefits.

9. How do these people
use the web?

10. How do these people use the web
Accessibility and why it matters
• Using screen readers - speech recognition software, operating system speech packages, etc
• Using screen magnifiers or zooming the pages
• Increasing the size of the text in the browser settings
• Changing background colours and fonts with plugins
All the people that we talked before navigate on the web by:

11. So… how can we help them
to have a better experience?

12. General steps in accessibility

13. Know where to look at
• Since 1999 the World Wide Web Consortium
(W3C) (the organisation that creates the
standards for the Web) has been working on its
"Web Accessibility Initiative" or WAI. The result
of this initiative so far has been three sets of
guidelines:
1. Web Content Accessibility Guidelines 1.0
(WCAG) - shows how to make their sites
accessible
2. Authoring Tool Accessibility Guidelines 1.0 -
For people who write programs that can be
used to create Websites.
3. User Agent Accessibility Guidelines 1.0 -
aimed at those who create Web browsers
• Be aware of WAI-ARIA - Accessible Rich
Internet Applications. Defines ways to make
Web content and Web applications (especially
those developed with Ajax and JavaScript)
more accessible to people with disabilities. For
example, ARIA enables accessible navigation
landmarks, JavaScript widgets, form hints and
error messages, live content updates, and
more.
• Ask users with disabilities to join our user
research activities, usability tests and scope
the product taking their problems into mind.
Accessibility and why it matters

14. Design

15. Design
• This helps users who are unable to, or have
difficulty with, distinguishing one color from
another. This includes people who are color
blind (1 in 12 men, 1 in 200 women), have low
vision (1 in 30 people), or are blind (1 in 188
people).
• Use colour to highlight or complement what is
already visible.
Accessibility and why it matters
Don’t use colour as the only visual means of conveying information

16. Design
Accessibility and why it matters
In this example shown in grayscale, how many
fields would you say are in an error state?

17. Design
What about now?
With color the answer becomes, “all four”.
There are many acceptable ways to make this
form visually accessible. We could put the red
triangle icon in all of the error fields. We could
use text to indicate and explain why a given field
is in error. We could use tooltips, thick borders,
bold text, underlines, italics, etc.
The choices are infinite, but the only rule is to
use more than color alone.
Accessibility and why it matters

18. Design
• According to the WCAG, the contrast ratio
between text and a text’s background should
be at least 4.5 to 1. If your font is at least 24 px
or 19 px bold, the minimum drops to 3 to 1.
This guideline helps users with low vision,
colour blindness, or worsening vision see and
read the text on your screen.
• We can now text these contrast levels more
precisely and easier with tools like:
http://webaim.org/resources/contrastchecker/
http://colorsafe.co/
Accessibility and why it matters
Ensure sufficient contrast between text and its background

19. Design
Accessibility and why it matters
Examples
https://news.ycombinator.com/item?id=2222522
http://www.goldbrecht-systems.com/
http://www.breckgear.com/
http://squarespace.com/
Contrasted text can also be slick
http://alistapart.com/
http://www.area17.com/
http://www.vogue.co.uk/
http://www.itsnicethat.com/
http://www.vanschneider.com/
http://liftinteractive.com/

20. Design
• Short equivalents for images, including icons,
buttons, and graphics
• Description of data represented on charts,
diagrams, and illustrations
• Brief descriptions of non-text content such as
audio and video files
• Labels for form controls, input, and other user
interface components
Text alternatives convey the purpose of an image
or function to provide an equivalent user
experience. For instance, an appropriate text
alternative for a search button would be "search"
rather than "magnifying lens".
Text alternatives can be presented in a variety of
ways. For instance, they can be read aloud for
people who cannot see the screen and for
people with reading difficulties, enlarged to
custom text-sizes, or displayed on
braille devices.
Text alternatives serve as labels for controls and
functionality to aid keyboard navigation and
navigation by voice recognition (speech input).
They also serve as labels to identify audio, video,
and files in other formats, as well as applications
that are embedded as part of a website.
Accessibility and why it matters
Designing text alternatives for non-text content would help many users

21. Accessibility and why it matters
Design
Many people rely on predictable user interfaces
and are disoriented or distracted by inconsistent
appearance or behaviour. Examples of making
content more predictable include:
• Navigation mechanisms that are repeated on
multiple pages appear in the same place each
time
• User interface components that are repeated
on web pages have the same labelling each
time
• Significant changes on a web page do not
happen without the consent of the user
Meeting this requirement helps people to quickly
learn the functionality and navigation
mechanisms provided on a website, and to
operate them according to their specific needs
and preferences. For instance, some people
assign personalised shortcut keys to functions
they frequently use to enhance keyboard
navigation. Others memorize the steps to reach
certain pages or to complete processes on a
website. Both rely on predictable and consistent
functionality.
Content appears and operates in predictable ways - consistency

22. Development

23. Accessibility and why it matters
General points
• WAI-ARIA - Accessible Rich Internet
Applications.
ARIA (WAI-ARIA if you want to be formal) is a
set of attributes that you can add to HTML
elements. These attributes communicate role,
state and property semantics to assistive
technologies via the accessibility APIs
implemented in browsers.
• Progressive enhancement
Some browsers default to navigate the web
without JavaScript, and a few users opt to turn
JavaScript off for security reasons. Either way,
excessive dependance on scripting can degrade
the ability of your site to function for some
users.
Although it’s by no means necessary to
completely avoid JavaScript, accessible web
design should always provide a solid fallback
for tasks which use JavaScript. The concept is
called ‘progressive enhancement’, and
essentially means that your web site should
first be set up to work without scripting, then
additional functionality can be added which
uses scripting. One common area for JavaScript
to come into play is site navigation – and the
last thing you want is for your visitors to be
unable to navigate your site.
• Enable keyboard navigation
This will allow users that user the keyboard to
navigate on your website to go wherever they
want without major problems

24. HTML5 introduced several new elements to
improve the structure of our pages. Not that long
ago we could see something like:
Any semantic meaning in these attributes is
largely implicit and they aren’t machine-readable
so, in practice, user agents will treat
“content__main” no differently than they would
“you-silly-sausage”.
Adding id’s and class attributes simply to build a
visual layout dilutes any tenuous meaning even
further.
Accessibility and why it matters
Development - HTML
Semantics and Structure

25. We can replace some of our divisions with more
semantically precise structural elements to help
reduce our reliance on divisions and
presentational id and class attributes.
HTML5 structural elements include:
section
article
aside
header
footer
nav
Using these elements not only allows our html to
be cleaner and more structured as well as it gives
more context to browsers where to find and how
to display information.
As a consequence, users that navigate with a
screen reader for instance, will also find
information quicker, once the screen readers read
what the browser tells them.
Do not change native semantics, unless you really
have to.
Accessibility and why it matters
Development - HTML
Semantics and Structure

26. Buttons and links are elements that we use on a
daily basis on the web. Both are simple to
understand and don’t need to be reinvented.
So, when writing your html, ensure controls with
button-type behaviour (interaction, affects the
current page) use the <button> tag, and regular
text links (go to an external page, anchor on page,
or external document) use the <a> tag like text
links (eg. blue underlined text).
That will help users on:
• Accessibility and usability
• A more robust website (support older user
agents, non-JS, etc.)
• lighter and less complex code
• more consistent implementation so easier to
maintain
Accessibility and why it matters
Development - HTML Semantics
Don’t confuse links with buttons

27. This is a common problem with e-commerce and
marketing campaigns once many times they rely
on amazing animations, interactions and/or
technology.
When we use plugins that are not available on
some browsers or versions, we are preventing this
experience to some users, that could convert and
find the website or app amazing.
Accessibility and why it matters
Development - HTML
Avoid tags, features, and plug-ins that are available to only one brand
or version of a browser.

28. What is "alt text"?
Alt text is a text alternative defined for images.
The typical image is coded in HTML in the
following form:
<img alt="text alternative”>
Not all users can see the images. So as common
practice an alternative text is included in the
image tag.
The Rules:
1. Every <img> must have an alt= attribute
2. Describe the information, not the picture
Let’s see an example
3. Active images require descriptive alt text.
Active image should describe the action the
image performs. So if you have a link image
then the alt text should tell the user what the
link does. If it's a link to another page then it
could be the name of that page
4. Images that contain information require
descriptive alt text like charts and graphs.
5. Decorative images should have empty alt text.
The alt text should be the empty (null) string.
<img alt=“”>
Accessibility and why it matters
Development - HTML
Give alt descriptions to images

29. In recent years we have experienced a de-
evolution in form fields. Modern designs have
foregone traditional identifying attributes and
interactive affordances in favor of a more
minimalist approach.
Today’s forms lack two specific items that are vital
for accessibility:
• clearly defined boundaries
• visible labels
• field-sets
• Legends
Example of accessible code
Accessibility and why it matters
Development - HTML
Be careful with forms

30. Fieldset and Legend tags
HTML provides another set of tags that can
significantly improve the user experience for
people accessing the form. These tags are the
<fieldset> and <legend> tags. These are used to
group and describe the purpose of related form
fields, effectively providing a context from which
the following fields can be understood.
Fieldset tags are used as a mechanism for
grouping related sections of forms. This can be
extremely beneficial for people with cognitive
disabilities as it effectively breaks the form into
smaller subsections, making the form easier to
interpret in the first instance.
The <legend> tag should be used to provide
descriptions of the form groupings on the page.
For any given <fieldset> there should always be
one associated <legend> tag.
Accessibility and why it matters
Development - HTML
Be careful with forms

31. Reset style sheet has been a big life saviour to
designers and developers allowing them to create
a consistent style and experience across many
different devices and browsers. However, it plays a
role in one of the most widespread accessibility
blunders on the Internet.
This single line of CSS makes it nearly impossible
for a sighted user to use a website with just a
keyboard. Fortunately, since the initial CSS resets
were released, many popular ones including Eric
Meyer’s have been updated to remove un-styling
of the :focus pseudo-class.
The problem is, most websites do not create their
own focus styles. These focus indicators, which
are fundamental to the success of keyboard users,
are largely absent on the web.
Accessibility and why it matters
Development - CSS
Provide visual focus indication for keyboard focus.

32. To take full advantage of the Internet, users with
partial or poor sight need to be able to enlarge the
text on web pages for the information to be
accessible to them. Usually this is set up on
browser preferences.
As such, you need to specify the font size in terms
of %, em or a relative value (small, medium etc.).
This practice is quite common already due to
responsive web design and typography as
consequence, but many people argue about this
once many users just zoom the web page instead
of changing their browser settings.
Accessibility and why it matters
Development - CSS
Allow users to resize their text
font size
font size

33. • Enabling a screen reader and going through
your design and forms will help you to
understand how a visually impaired user might
experience your design.
These tools exist in most operative systems:
• OS X or iOS - VoiceOver.
• Windows 10, Windows 10 Mobile - Narrator
• Android - TalkBack.
• Navigating your design using only your
keyboard can give you a better sense of how
someone with mobility issues may
experience it.
Accessibility and why it matters
Development - testing
Testing with VoiceOver and navigate with the keyboard

34. Well, this seems like a bit
(or a lot) to do…

35. “The single most important thing to understand is that
people use web sites in very different ways. This doesn’t
just mean disabled people using special equipment but
everyone – regardless of whether you might think of them
as having a “special need”.”
MEL PEDLEY, Owner of Black Widow Web Design Company and
Team member of accessites.org

36. Some further reading
https://www.w3.org/standards/webdesign/accessibility
W3C Guidelines:
Web Content Accessibility Guidelines 1.0
Authoring Tool Accessibility Guidelines 1.0
User Agent Accessibility Guidelines 1.0
http://www.who.int/mediacentre/factsheets/fs282/en/
https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-
accessibility-64f105f0881b#.ilkb3iy4u
https://medium.com/@jonbmetz/accessibility-is-a-process-not-a-project-ce1c1cdc3aa7#.n1jiq3qg0
http://formidable.com/blog/2014/05/08/anchors-buttons-and-accessibility/
https://www.abilitynet.org.uk/blog/five-golden-rules-compliant-alt-text
http://html5doctor.com/using-aria-in-html/
http://studioscience.github.io/accessibility-standards/
http://contrastrebellion.com/
http://www.sitepoint.com/how-to-use-aria-effectively-with-html5/
http://12devsofxmas.co.uk/2016/01/day-8-testing-using-a-screen-reader/
http://tink.uk/
Accessibility and why it matters

37. Thank you all
Margarida Sousa