Our in-house ecentricarts Accessibility Team (known as EAT) has compiled a ton of resources to help you understand the ins and outs of web accessibility. This includes: why it matters, who it impacts, common misconceptions, a beginner's guide to WCAG 2.0 and accessibility legislation, and how you can test, design, develop, and create more accessible websites. This presentation also includes examples of before/after screenreader demos, and our 2017 company video made with described audio.

1. Web accessibility 101
The why, who, what, and how of “a11y”
September 2017

2. Brought to you by EAT, the ecentricarts accessibility team.

3. What we’ll cover:
➜ Why accessibility? An introduction
● Why we care
➜ Common a11y misconceptions
➜ Understanding accessibility guidelines
● What is WCAG?
● Legal requirements
➜ Making accessible content
➜ Coding accessible websites
● Accessible CMS customizations
➜ Accessibility tools & testing
FYI:
“a11y” is Twitter shorthand for accessibility
(there are 11 letters between the a and y).
Use #a11y on social media to find the latest
articles and discussions.

4. Why accessibility?
The why’s, who’s, and how’s

5. The internet is one of the best things that has
ever happened to people with disabilities.
WebAIM, a world leader in web accessibility

6. Accessibility by the numbers
Americans have difficulty
performing functional or
participatory activities
(US Census)
1 in 5
of the global population
report challenges in
dealing with basic daily
tasks and interactions
(WHO)
15%
Of us will have some form
of disability by the time
we retire
(StatsCan)
>30%

7. https://twitter.com/estellevw/status/877642246258016258
http://gs.statcounter.com/
https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html

8. Accessibility helps:
The deaf and
hard of hearing
The blind and
partially sighted
Those with
limited dexterity
or mobility
Those with cognitive
and/or vestibular
disorders
Remember, these may be permanent or temporary conditions

9. Accessibility helps:
A person holding
a phone in one
hand
A person with
concussion
symptoms
A person with a
broken arm
A person outside in
bright sunlight
These circumstances are also known as situational disabilities

10. Accessibility helps... everyone!
➜ We all benefit from clear, logical, and user-friendly content
and experiences
➜ Remember, over 30% of Canadians will have some form of
disability by the time we retire
BONUS:
Accessible websites use semantic HTML and
can help increase organic search traffic by as
much as 50%

11. Assistive Technologies
Assistive technologies help users with disabilities increase, maintain, or
improve their functional capabilities.
➜ Screen readers
➜ Eye tracking software
➜ Keyboard shortcuts
➜ Braille displays

12. Why we care
A (very) brief statement

13. We think everyone deserves to learn and
access information online, and it’s our
responsibility [as designers, developers,
and content creators] to help bridge the
usability gap.
- ecentricarts accessibility team

14. Common web
accessibility
misconceptions

15. Common misconceptions
“Web accessibility only helps a fraction of my users/the population.”
➜ 3.8 million Canadians over 15 years old (14%) live with disabilities
➜ 7.2% of Canadians have mobility issues, yet all new buildings in
Ontario must be barrier-free - why not the internet, too?
● Barrier-free buildings help people with permanent and temporary motor disabilities,
plus situational disabilities (e.g. a parent pushing a stroller)
➜ The big picture: There are significant overlaps between accessibility
and usability that can benefit everyone

16. Common misconceptions
“Web accessibility is expensive and time consuming.”
➜ More research is required to create accessible sites, but designers and
developers experienced in accessibility require less research time and
bake these “extra features” in from the get-go
● Retrofitting inaccessible sites is a lot more time consuming (A.K.A. more $$$) than
building an accessible site from scratch
➜ See W3C’s Financial Factors of web accessibility for more details

17. Common misconceptions
“We don’t need to be compliant.”
➜ Legislation (like the Canadians with Disabilities Act) is still evolving
➜ Web accessibility lawsuits are steadily increasing in the U.S.
● The precedent has been set: a blind plaintiff unable to purchase products online has
successfully sued Winn-Dixie, a major American grocery chain
● Five Guys website currently fighting ADA non-compliance lawsuit
➜ You can avoid future “uh-oh” moments by getting to know the
standards and staying ahead of the web accessibility curve

18. Understanding
Accessibility Standards
What are they and how does that affect your organization?

19. The basics of WCAG 2.0
The de facto standard of web accessibility

20. WCAG 2.0
The Web Content Accessibility Guidelines are a series of
internationally recognized guidelines that are intended
to help solve many problems that web users with
disabilities face.

21. Core Principles: Perceivable
Make it easier for users to see and hear content.
Think about:
➜ Alt text
➜ Captions

22. Core Principles: Operable
Help users navigate to and find content.
Think about:
➜ Focus states
➜ Keyboard navigation
➜ Form labels
➜ Avoid flashes or fast animations
Don’t use content
that can cause
seizures.

23. Core Principles: Understandable
Make content appear and operate in predictable ways.
Think about:
➜ Link text
➜ Form errors
✔
Consistency and
clarity is crucial

24. Core Principles: Robust
Maximize compatibility with current and future user tools.
Think about:
➜ Semantics
➜ Valid HTML

25. Conformance Levels
All guidelines are assigned one of three levels of conformance (A, AA, AAA)
based on a number of factors including, whether:
➜ The task is essential and/or no workarounds can be provided
➜ It is possible to achieve for all websites/types of content
➜ The skills required to achieve it are reasonable to learn in a week’s time or
less
➜ The standard would limit the look and feel of the site

26. Conformance Levels
➜ Level A
● High user impact
● Low impact on presentation/functionality
● Easy to implement
1.2.2
Captions are provided for all
pre-recorded videos with audio

27. Conformance Levels
➜ Level AA
● High user impact
● Some impact on presentation/functionality
1.2.5
An audio description is provided for all
pre-recorded videos with audio (see next
slide for example)

28. Demo: Described audio
The 2017 ecentricarts company video with described audio

29. Conformance Levels
➜ Level AAA
● Specific user impact
● Some impact on presentation/functionality
● Increased level of difficulty to implement
1.2.6
Sign language interpretation is provided
for all pre-recorded videos with audio

30. Legal Requirements
What are the rules and who needs to comply?

31. Currently, Canada only mandates government websites.
Legislation in progress: the Canadians with Disabilities Act
In Ontario? Follow AODA, the Accessibility for Ontarians with Disabilities Act:
➜ Ontario is the first province to enact legislation for accessibility
➜ Government of Ontario sites must meet WCAG Level AA
➜ Websites for public sector and organizations with 50+ employees must meet WCAG Level A -
WCAG Level AA as of January 1, 2021
In Canada

32. In the United States
➜ Government institutions & ICT fall under Section 508; refreshed this year
➜ Educational & Federally Funded Institutions: Section 504 -> 508
➜ Non-profits: “Public accommodation” falls under ADA
➜ Private sector: “Public accommodation” falls under the ADA

33. Section 508
Government & Government-funded* institutions have 16 requirements:
➜ Must provide a text equivalent (i.e. transcript, captions) for non-text
materials
➜ Tables must be appropriately labeled with headers
➜ AT users must be able to fully complete & access info in forms
➜ 508 Refresh: Everything new built after January 18th, 2018 must
comply to Level AA standard
*grey area

34. ADA Updates
➜ DOJ declining to amend current ADA rules under current administration
● Experts predict this will cause increase in privately brought lawsuits under ADA Title III
➜ Winn-Dixie: June 13th, 2017
● Judge sided with plaintiff, a screen-reader user
● Injunction requires Winn-Dixie to update website based off of WCAG Level AA
➜ ADA Title III lawsuits steadily increasing year-over-year

35. In the European Union
Public Sector:
➜ Requirements map to WCAG Level A
➜ Everything new after September 18, 2018 must comply by
September 18, 2019

36. Worldwide
➜ WCAG 2.0 is the de facto standard worldwide
➜ Countries whose gov’t sites must comply with at least WCAG 2.0 Level A:
● Japan
● New Zealand
● All of the EU
➜ Countries with broad accessibility laws that have been applied to the web
● USA (ADA) (Lawsuits interpreting this as meeting WCAG 2.0 Level A/AA)
● Australia (DDA) (Gov’t interpreting this as meeting WCAG 2.0 Level A)
● UK (EQA) (Discrimination lawsuits settled out of court; Gov’t interpreting this as WCAG 2.0)

37. Making Accessible
Content
Best practices and quick wins

38. Writing accessible content
➜ Use appropriate page titles
➜ Use logical headings and proper structure
➜ Provide captions or a written transcript
for video content
➜ Remember: what may feel ambiguous or
confusing to you will be equally (if not,
more confusing) for other users

39. Writing accessible content
➜ Make sure link text describes the
purpose of the link
● Use “Read more about our recent work”
instead of simply “Read more”
➜ Use meaningful, descriptive alt text on
images
● WebAIM’s guide to writing alt text
Painting of George
Washington crossing the
Delaware River

40. Coding accessible content
➜ Use semantic markup
● Buttons as buttons, lists as lists,
tables as tables, select for dropdown,
header, main, aside and footer to
identify your content
➜ Mark up your headings
semantically & in a logical order
➜ Use empty alt attributes if the
image is decorative only

41. ➜ Provide control
options on videos,
gifs and carousels
Designing accessible content

42. ➜ Ensure links are easily
identified with a distinct
design treatment
➜ Reserve underlines for
links only
Designing accessible content

43. ➜ Design clear hover and focus
states for interactive elements
➜ If the default focus ring is
disabled, provide an alternative
visible focus
Designing accessible content

44. Designing accessible content
➜ “It’s estimated that 91% of the top 100 popular sites home
pages fail color contrast” - Rethinking Colour and Contrast
➜ Ensure text meets accessible colour contrast ratios
● Be mindful of colour contrast when overlaying live text onto photos
● Check with the WebAIM contrast checker tool
➜ Use legible fonts
➜ Avoid images with embedded text

46. Coding Accessible
Websites
The basics

47. Bypass blocks give users of assistive technology direct access to the
primary content of your page.
Add a “Skip to” link to all page
templates that jumps passed
repeated navigation into the
main content container.
Skip Links (Bypass blocks)
Check out Foundation’s show-on-focus class

48. Form Labels
➜ Ensure all form controls have an appropriate labels associated with them.
Using ID’s and the for attribute
➜ Don’t use placeholder text as a replacement for labels.
Use CSS & JS to position semantic labels over top of form fields to
achieve specific design treatments
➜ Indicate required fields programmatically and visually.
Use aria-required and an asterisk attached to the label

49. Form Errors
➜ Write helpful error text for each form control.
Don’t rely on colour alone - like a red border - to indicate errors
➜ Programmatically associate error text and tooltips with form inputs.
Use aria-describedby on inputs that points to the ID of the message
➜ List all form errors in a list on invalid submission.
Link errors directly to respective inputs for easy access

50. Demo: Forms (before)
Here, the screen reader software can’t communicate the red error message to the user

51. Demo: Forms (after)
Here, the screen reader software reads a global error message first, properly informing the user

52. ARIA landmark roles
ARIA (Accessible Rich Internet Applications) is a set of accessibility attributes that
can be added to HTML markup.
Adding appropriate landmark roles
to common HTML tags allows users
of assistive technology a way to
quickly get around a page.

53. Demo: ARIA Landmark Roles
ARIA roles allow assistive tech users to easily navigate through different sections of the page

54. Language
Indicating the language of content using the lang attribute on multilingual
sites ensures assistive technology will read content with correct
pronunciation.
➜ Add a global language on the <html> tag.
➜ Add a lang attribute to any
in page content that differs
in language.

55. Demo: lang
lang tags drastically change how a screen reader will read/pronounce the words on screen

56. Make sure the code you’re writing is valid by running it through the
W3C markup validator.
Common issues to look out for:
➜ Duplicate ID’s
➜ Incorrect element nesting
➜ Missing headings
Valid HTML

57. CMS Optimizations
Empower content editors to create accessible websites by providing options
and information right in the CMS.
➜ Add instructions with accessibility tips right inside your CMS editor
Learn more about improving content entry for Wordpress here
➜ Make it easy for editors to add alt text, transcripts or alternate video
When creating embedded media widgets, always provide additional fields to include
alternates

58. Tools & Testing
How do you know if your site is truly accessible?

59. Automated tools
Accessibility Evaluation Tools (WAVE and aXe) analyze website markup
against various WCAG criteria and run right in your browser.
These tools help to detect:
➜ Missed heading levels
➜ Empty links and alt text
➜ Colour contrast issues

60. Vision simulators
See what users see by running vision
simulators in the browser.
These programs (Color Contrast Analyzer,
NoCoffee) help identify areas that may be
failing WCAG contrast ratios or are generally
problematic.

61. Don’t rely on automated tools
Accessibility is all about context, and sometimes bots have a hard time
understanding context.
➜ Can result in false positives or false negatives
➜ Use automated programs as a “first pass” only
➜ Ensure manual testing is done on all key areas of functionality

62. Quick wins with a keyboard
➜ Navigate and submit forms with just a keyboard
➜ Using tab, look for clearly visible focus states
➜ Ensure hover events are replicated on focus where appropriate
➜ Dismiss disruptive content (like modals)
with the escape key
➜ Check for keyboard traps
➜ Look for Skip Links as the first
focusable element

63. Try a screenreader
Understand how users navigate websites with a screen reader using one of
the following screen reader/browser combinations:
➜ NVDA with Firefox on Windows
➜ VoiceOver with Safari on Mac OS
➜ JAWS with either IE or Firefox on Windows
Use the arrow keys and the tab key while listening to the screen reader output
Screen Reader Basics: NVDA -- A11ycasts

64. Resources
➜ WebAIM WCAG Checklist
➜ WebAIM 508 Standards Checklist
➜ OATMEAL: eBay Core Accessibility Tests
➜ A11y Dev Tools
➜ Inclusive Design Principles
➜ WAVE
➜ aXe
➜ Color Contrast Analyzer
➜ NoCoffee
➜ “Web accessibility according to actual people
with disabilities”
➜ MDN Accessibility
➜ Search #a11y on Twitter

65. Thanks for joining us
Any questions or comments? We’d love to hear from you!
EAT@ecentricarts.com