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.
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.
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
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
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
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â