An introduction to accessibility session was delivered by Intopia's Accessibility Engagement Manager Chris Pycroft as a part of 'Miles of Love' in Hong Kong in November 2018.

1. MILES OF
ACCESSIBILITY
CHRIS PYCROFT /// @chrispytweets @Intopia
#MilesOfLove #Accessibility

2. What is accessibility? ///
Why is it important? ///
Do I have to do it? ///
Where can I start? ///

3. What is web
accessibility?

4. Web accessibility is…
Web accessibility allows any person, regardless of their ability,
to interact, understand and navigate around the Internet
If the web is accessible, it provides new and unique
opportunities to engage and inform all of its users

5. Web accessibility is…
The good news? Everybody is already partially doing it!
Are you:
• A web developer?
• A designer?
• A writer or content producer?
The Internet was designed to be accessible, we need to keep it that way.

7. Why is web accessibility
important?

8. Accessibility is a human right!
Accessibility is a civil human rights issue
Anything that is isn’t accessible denies the right to equal access and equal
opportunity

9. There’s a benefit to doing it
right…
Making your work accessible means that more people will actually be able to use it
If you’re the first one in your sector to do it right, people will come back to you
It’s also great for SEO – free search ranking increases for the win!

10. It’s also likely the law.
UN – Convention of the Rights of Persons with Disabilities (CRPD) - 2009
Many governments already have accessibility policies mandated
Does the country you live in have laws about the rights of people with a disability?
Not being accessible means you’re likely not meeting those laws

11. This is a slide that has a video
on it!
Hopefully you won’t be looking at it too much, and you’ll get to look at the video
instead.
https://youtu.be/WL1GMBbz9OM

12. MORE THAN 1 BILLION PEOPLE HAVE A
DISABILITY
That’s 15% of the world’s population

13. The principles of web
accessibility

14. Let’s ‘pour’ over the principles
The guidelines and criteria used to determine if a website or web content is accessible
rely upon four key principles:
• Perceivable
• Operable
• Understandable
• Robust

15. Principle #1: Perceivable
Users should be able to perceive the information being presented (it can't be invisible
to all of their senses)
This includes making sure:
• People can understand all of your content, including videos and images
• Users can navigate your website in the right way
• That your device doesn’t shout at you unless you want it to!
• That if you’re providing helpful information, people understand why

16. How many lines of text can
you see?
Can you see this text?
Can you see this text?
Can you see this text?
Can you see this text?
Can you see this text?

17. Principle #2: Operable
Users should be able to interact with all components and navigate through all content
within a website or web content
This includes making sure:
• People who navigate by keyboard can actually reach all of your content
• People don’t have to navigate through the same content on every page
• Every webpage you create has a title, and your content has headings
• Users can easily understand where they have navigated to on a page
• You don’t flash people!

18. How annoying would this be if you
had someone say it to you?
"Read more. Read more. Click here. Read more. Read more. Read more. Read more. Read more.
Read more. Read more. Read more.”
(Yep, this happens, and it happens more often than you think it does!)
Imagine having this said to you on every website you visited? Not cool.

19. Principle #3: Understandable
Users should be able to understand all information that is published, and that
navigation should make sense to them
This includes making sure:
• You tell people what language your content is in
• That your website doesn’t break or do something unexpected when you click on or
look at something
• Everything that should be the same across every page actually is the same
(sneaky surprises aren’t cool!)
• If someone does something wrong on your website, you tell them, and you tell
them in the right way.

20. Principle #4: Robust
Users should still be able to access content when they change the technology that they
use
This includes making sure:
• If you’re designing something to give a certain impression, make sure the coding
matches
• If you’re going to start coding something, finish it, or take it out. Don’t leave
something that’s incomplete, or something that’s empty

21. What do I need to know?

23. The 101 on WCAG
The Web Content Accessibility Guidelines (WCAG) were created by the World Wide
Web Consortium’s (W3C) Web Accessibility Initiative
The most common standard or benchmark used worldwide is WCAG 2.0 Level AA
Find the guidelines at http://www.w3.org/TR/WCAG20/
WCAG 2.1 formally recommended in June 2018, and focused on:
• Cognitive disabilities
• Learning disabilities
• Mobile and tablet devices

24. … but have I done it right?
The Website Accessibility Conformance Evaluation Methodology (WCAG-EM) will tell
you if you’re on the right track
Do some web accessibility testing yourself, or get some outside help
Have users who have a disability try and use your website – their insight may surprise
you!
Some automated tools can also provide some initial helpful advice, but don’t rely on
them exclusively

25. Case study: Australia
Not that I mean to show off, but Australia has:
• A Digital Design Standard created by federal government
• A Disability Discrimination Act, with accompanying advisory notes on the level of
accessibility required
• Technology procurement policies for Australian government
They also had a strategy, the National Transition Strategy, to help make government
websites accessible

26. What does it mean for
Australia?
If an eligible major government agency develops a new website, it’s not allowed to launch
until it’s accessible
If an essential service has been created by a non-government organisation and it’s not
accessible, they could face legal consequences
The government is making more attempts to ensure the technology it buys is accessible

27. 7 quick wins for the win!

28. Win #1: Use of images
If you’re including any images in your content, make sure they have a text alternative.
This can often be done through your own website when you upload an image.
If it can’t be done automatically, do it manually! It’s easy. Just describe the image in the
<alt> tags.
If your image has a lot of detail to it, then provide a full description of the image directly
underneath it.

29. Win #2: No more “read more”
links!
(Yes, it’s back again)
Make sure that your link text is meaningful, and describes what the user is about to
visit.
Correct version: <a href=” http://google.com ”> Google Home Page</a>
Incorrect version: <a href=” http://google.com ”> Click here</a>

30. Win #3: Don’t use just colour
to convey information
You can still use colour to convey information, but don’t do that exclusively.
Give some explanatory text as well, otherwise people who are colour blind might miss
it!

31. Win #4: Don’t make your text
hard to read
No one can read really tiny text, so don’t use it! A minimum 14 point font size is best
Don’t make your colour choices difficult for people to see either
The Colour Contrast Analyser (developed by the Paciello Group) will give you the
answers you need

32. Win #5: Keep the ‘click to
view’ newsletter link up top
Many platforms that allow you to send newsletters will have a ‘Click to view’ link up top
for when images don’t load correctly for someone
Keep it there, because it may direct users to a more accessible version
Double win! Combine this and win #2 by giving the link meaningful link text

33. Win #6: Use headings in your
web content
Put the title or main heading of your page in a Heading 1 <h1> tag
Use headings throughout the page, and avoid skipping heading levels

34. Win #7: Caption your videos
Captioning your videos means that anyone who is Deaf or hearing impaired can
understand what’s in your videos too
Been in a really noisy location and not been able to hear your phone? Captions means
you can understand what’s going on
For people where the language of your video is a second language, it can also help
them learn the language better
Three wins in one. Microphone drop.

35. Need help navigating? Here’s a map!
Go to http://intopia.digital/
Search for “WCAG 2.1 Map”

36. THANK YOU!
chris@intopia.digital
@chrispytweets
@Intopia