5 Ways to Improve Your WordPress Website Accessibility a talk at WordCamp Rochester 2017 by Trevor Johnson-Steigelman

1. coachesoftechnology.com
WEBSITE ACCESSIBILITY
5 WAYS TO IMPROVE ACCESSIBILITY
TREVOR JOHNSON-STEIGELMAN
Over 15 million U.S. Internet users have some form of impairment that affects their
ability to use the Internet.
In this talk, we will share some simple ways to improve your site’s accessibility.
These changes help everyone. As an extra bonus, accessibility improves your search
engine optimization (SEO).
By the end of this talk, you will be able…
1. To understand why accessibility is helpful for everyone.
2. To help make your website better for the visually impaired.
3. To help make your website better for the hearing impaired.
4. To help make your website better for the mobility impaired.
5. To improve your website SEO.
Coaches of
Technology
coachesoftech.com

2. Access
SizeFontsColors
Contrast
and
Color
TagsTags
LinksImages ImagesLinks
WEB CONTENT ACCESSIBILITY GUIDELINES
WCAG 2.0
• Perceivable
• Operable
• Understandable
• Robust

4. WHY WORRY ABOUT ACCESSIBILITY?
There are lots of us who have some
type of disability…
• 8.2% - hand mobility
• 3.3% - vision impairment
• 3.1% - hearing impairment
About 15.5 million users
This doesn’t count the temporarily
impaired.
Those who don’t have impairments
still use mobile devices.

5. WHY WORRY ABOUT ACCESSIBILITY?
Unselfish Reasons
Make things a bit easier
for everyone.
Be nice to people.
Selfish Reasons
Sell more Stuff
• More customers
Avoid Legal Issues (ADA)
Search Engine Optimization

6. CHECKING YOUR ACCESSIBILITY: http://wave.webaim.org

7. DETAILS

8. TAG: YOU’RE IT.
• Heading Tags aren’t just for formatting.
• THESE GIVE STRUCTURE TO THE PAGE.
Context and priority Semantic MEANING
• Tagging is useful for…
COGNITIVELY IMPAIRED
• Visually impaired
• Screen Readers
• Keyboard movement

9. <H1>TAG: YOU’RE IT.</H1>
<h2> Heading Tags aren’t just for formatting. </h2>
<h2>These give structure to the page. </h2>
<h3>Context and priority </h3>
<h2>Tagging is useful for… </h3>
<h3>Cognitively impaired </h3>
<h3>Visually impaired </h3>
<h3>Screen Readers </h3>
<h3>Keyboard movement </h3>

10. <H1>TAG: YOU’RE IT.</H1>
<h2> Heading Tags aren’t just for formatting. </h2>
<h2>These give structure to the page. </h2>
• <h3>Context and priority </h3>
• <h3>Semantic Meaning </h3>
<h2>Tagging is useful for… </h3>
• <h3>Cognitively impaired </h3>
• <h3>Visually impaired </h3>
• <h3>Screen Readers </h3>
• <h3>Keyboard movement </h3>

11. TAG: YOU’RE IT.
Heading Tags aren’t just for formatting.
These give structure to the page.
• Context and priority
• Semantic Meaning
Tagging is useful for…
• Cognitively impaired
• Visually impaired
• Screen Readers
• Keyboard movement

12. <h1>Accessibility</h1>
SEMANTIC MEANING – THINK ABOUT AN OUTLINE
I. Accessibility
<h2>Tags </h2>
<h3>Heading Tags </h3>
<h3>Styles</h3>
<h4><em></h4>
<h4><strong></h4>
<h2>Colors </h2>
<h3>Color Impairment </h3>
<h3>Contrast </h3>
<h3>Color and Meaning</h3>
A. Tags
1. Heading Tags
2. Styles
a) <em>
b) <strong>
B. Colors
1. Color Impairment
2. Contrast
3. Color and Meaning

13. USING TAGS APPROPRIATELY
Use CSS in your child theme
• This gives consistency across the site.
Use header tags <h1>, <h2>, etc. for structure.
• Don’t skip tags.
Use phrase tags for semantic meaning.
• <em> - emphasized text
• <strong> - important text
• <code> - computer code
• <samp> - computer output
• <kbd> - keyboard input
• <var> - variable

15. CHROMEVOX SCREEN READER EXAMPLE

16. GET ON THE GRID
Tracy Rotton
Session at 11:30 today
Taupecat.com
Allows contextual meaning while giving flexibility as to where it is on the page.

17. Color
can
enhance
your
Website.

18. COLOR IMPAIRMENT

19. Provide sufficient contrast.
Specify both foreground
and background.
Be careful of background
gradients and color
combinations.
Be careful of background
images.
Contrast
Contrast
Contrast
Contrast

21. HTTPS://WEBAIM.ORG/RESOURCES/CONTRASTCHECKER
Level AA
4.5 : 1 Normal
3.0 : 1 Large
Level AAA
7.0 : 1 Normal
4.5 : 1 Large
WCAG 2.0

22. TIPS:
• Make sure that color isn’t the only
way to give meaning.
• Errors, selections, etc.
-2.0
-1.0
0.0
1.0
2.0
0 1 2 3
Disp.(cm)
Time (s)
-2.0
-1.0
0.0
1.0
2.0
0 1 2 3
Disp.(cm)
Time (s)
https://www.webaccessibility.com/best_practices.php
Expressive Traffic Lights
by Pascal Terjan

23. LINKS
Avoid using Long URLS directly as links
• https://www.physicsthisweek.com/topic/magnitude-and-direction/
Use informative link structure in your pages.
Color and Underline
• Underline so that links are visible to all.
• Use blue for unfollowed links.
• Use purple for followed links.
Use Anchor Text.
<a href = “https://www.physicsthisweek.com/topic/magnitude”>Magnitude<a>

24. LINKS AND SCREEN READERS
Most browsers use Tab to move between links.
Screen readers say “Link” before each link.
Links out of context – use Anchor Text.
Here is an article about using links properly.
For more information about links, click here.
For more information about links, click here.
List Main point first, extra info later
• Products (opens in new window)
• Link opens in new window: Products
Be careful and concise in your wording
• “Contact Us” vs. “In order to Contact us”
• “About” vs. “To learn more about our company”

25. WHY USE ALTERNATIVE TEXT
Alternative Text is
• a description
• and/or context
http://www.wpbeginner.com/beginners-guide/image-alt-text-vs-image-title-in-wordpress-whats-the-difference/
<img
src=http://www.publicdomainpictures.net/pictures/230
000/velka/albert-einstein-oil-painting-
1505932842nN3.jpg
alt="Albert Einstein, Oil Painting" id="image"
itemprop="image">
Alternative text can be
• part of the alt= attribute
• or present elsewhere in the text.
Albert Einstein, Oil Painting

27. ALT TEXT
Sometimes referred to as “alt tag”
alt attribute in <img> tag
Read by screen readers
Appears on mouse-over.
Replaces missing image.
CAPTIONS
Displayed for Everyone
DESCRIPTION
Shows up on attachment page
SEO related, not accessibility

28. ALT TAG TIPS
Avoid redundancy
Don’t re-copy text that is already there.
Don’t include “Image of…”
Sometimes alt =“” is okay.
• All info is there.
Links
Image-only links must have an alt attribute.

29. VIDEOS AND SOUND
osdot.blog.hu
http://www.goegol.nl/images/ssite.jpg

30. VIDEOS AND SOUND
http://imgur.com/gallery/ohLQG
User: sehnaoui

31. YOUTUBE AUTOMATICALLY CAPTIONS VIDEOS WITHIN A FEW HOURS OF POSTING

32. CAPTION FAILS…

33. BENEFITS
Benefits for Everyone
• Confusing words are spelled out.
• Video can be watched while other noise is present.
• Video can be watched without bothering others.
Benefits for Your Website
• Posted transcript contains keywords for search.
• You can adapt transcript for blog posts.

34. PICKING GOOD FONTS: THE OLD SCHOOL METHOD
Screens
Sans Serif Fonts
Helvetica
Tahoma
Verdana
Print
Serif Fonts
Times New Roman
Georgia
Book Antiqua

35. THESE FONTS ARE ALL SIZED AT 36PT.
I will not use Curlz MT font on my webpages.
I will not use Forte font on my webpages.
I will not use Gigi font on my webpages.
I will not use Jokerman font on my webpages.
I willnot useNiagaraEngravedfont on mywebpages.
I will not use Palace Script font on my webpages.
I will not use Vivaldi font on my webpages. Blackboard Chalk
by raindart is licensed
under CC BY-SA

36. CHECKING ACCESSIBILITY
https://wave.webaim.org
https://fae.disability.illinois.edu
http://webaim.org/resources/contrastchecker/
http://www.color-hex.com/color/e68a00
Accessibility Checkers
Color / Contrast Checker Tool
Color Pickers
https://www.w3schools.com/colors/colors_picker.asp
https://achecker.ca/checker/index.php

37. ADVANCED TOPICS
Screen Readers
Skipping Navigation Links
• http://webaim.org/techniques/skipnav/
JAWS
NVDA –windows

38. ARIA – ACCESSIBLE RICH INTERNET APPLICATIONS
Tags common parts of a web page.
https://www.w3.org/TR/wai-aria-practices/examples/landmarks/banner.html

39. https://creativecommons.org/licenses/by-sa/2.0/

40. CHECKING YOUR ACCESSIBILITY
https://fae.disability.illinois.edu

42. C Complete 100
R Requires Manual Checks
AC Almost Complete 95 - 99
PI Partial Implementation 50 - 94
NI Not Implemented 0 - 50
na Not applicable

45. https://www.elegantthemes.com/blog/resources/bad-web-
design-a-look-at-the-most-hilariously-terrible-websites-from-
around-the-web
• https://www.lingscars.com/
• http://www.pennyjuice.com/htmlversion/home.htm

46. CONTRAST ON SCREENS

47. Contrast
Contrast
Contrast
Contrast

49. Displacement
Velocity
Acceleration
Coordinate System
Electric Field
Magnetic Field
Force
Standard Font - Cambria
Σ =

50. POSSIBLE CITATIONS (NOT ALL CITATIONS USED IN EVERY LECTURE)
H. E. White and D. H. White, Physics and Music: The Science of Musical Sound
(Dover Publications, Mineola, NY, 2014) (Original work published 1980) pp. XXX
OpenStax, College Physics. OpenStax CNX. Sep 27, 2017
http://cnx.org/contents/031da8d3-b525-429c-80cf-6c8ed997733a@9.95
OpenStax University Physics, University Physics Volume 1. OpenStax CNX. Sep 29, 2017
http://cnx.org/contents/d50f6e32-0fda-46ef-a362-9bd36ca7c97d@6.1
OpenStax University Physics, University Physics Volume 2. OpenStax CNX. Sep 29, 2017
http://cnx.org/contents/7a0f9770-1c44-4acd-9920-1cd9a99f2a1e@4.1
OpenStax University Physics, University Physics Volume 3. OpenStax CNX. Sep 29, 2017
http://cnx.org/contents/af275420-6050-4707-995c-57b9cc13c358@5.1