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
Technolog
ycoachesoftech.com
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
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
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
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
26.
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.
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 will not use Niagara Engraved font on my webpages.
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
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
41. 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
Notas do Editor
The “old school” rule about using sans serif on screens and serif in print is not really needed these days.
