5 Ways to Improve your Website's Accessibility by Trevor Johnson-Steigelman

WEBSITE ACCESSIBILITY
5 WAYS TO IMPROVE ACCESSIBILITY
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
y
This presentation by H. Trevor Johnson-Steigelman is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Access
SizeFontsColorsContrast
and Color
TagsTags
LinksImages ImagesLinks
WEB CONTENT ACCESSIBILITY GUIDELINES
WCAG 2.0
• Perceivable
• Operable
• Understandable
• Robust
H. Trevor Johnson-Steigelman

ACCESSIBILITY ISN’T EXPENSIVE OR HARD. RETROFITTING IT IS.

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.
http://www.interactiveaccessibility.com/accessibility-statistics
http://www.practicalecommerce.com/Accessibility-How-Many-Disabled-Web-Users-Are-There

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

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

DETAILS

TAG: YOU’RE IT.
oHeading Tags aren’t just for formatting.
• THESE GIVE STRUCTURE TO THE PAGE.
• Context and priority
• Tagging is useful for…
COGNITIVELY IMPAIRED
 Visually impaired
• Screen Readers
• Keyboard movement
https://www.w3.org/WAI/tutorials/page-structure/

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

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

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

<h1>Accessibility</h1>
SEMANTIC MEANING – THINK ABOUT AN OUTLINE
I. Accessibility
https://www.w3schools.com/html/html_formatting.asp
<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

USING TAGS APPROPRIATELY
• Use CSS in your child theme
• This gives consistency.
• Use header tags <h1>, <h2>
• Don’t skip tags.
• Phrase tags give semantic meaning.
• <em> - emphasized text
• <strong> - important text
• <code> - computer code
• <samp> - computer output
• <kbd> - keyboard input
• <var> - variable
• Use List tags <ul>, <ol>, and <dl> for lists.

CHROMEVOX SCREEN READER EXAMPLE

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

Color
can
enhance
your
Website.
https://www.reddit.com/r/mildlyinfuriating/comments/6chdqg/this_unintentional_demotivating_yoga_mat/

COLOR IMPAIRMENT
http://enchroma.com/test/
https://www.reddit.com/user/luccyVeins
https://i.redd.it/c1c5u0dhret01.jpg

CONTRAST TIPS
• 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

WEB ACCESSIBILITY CHECKER http://webaim.org/resources/contrastchecker

HTTPS://WEBAIM.ORG/RESOURCES/CONTRASTCHECKER
Level AA
4.5 : 1 for normal text
3.0 : 1 for large text
Level AAA
7.0 : 1 for normal text
4.5 : 1 for large text.
WCAG 2.0 - Web Content Accessibility Guidelines (WCAG) 2.0

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

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>

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”

WHY USE ALTERNATIVE TEXT
Alternative Text is
• a description
• and/or context
http://webaim.org/techniques/alttext/
http://www.wpbeginner.com/beginners-guide/image-alt-text-vs-image-title-in-wordpress-whats-the-difference/
<img
src="http://www.publicdomainpictures.net/pictures
/230000/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

WORDPRESS ATTACHMENT DETAILS PAGE

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

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.
http://webaim.org/techniques/alttext/

VIDEOS AND SOUND
osdot.blog.hu
http://www.goegol.nl/images/ssite.jpg
http://imgur.com/gallery/ohLQG
User: sehnaoui
http://media.gettyimages.com/photos/president-
donald-trump-holds-up-an-executive-order-
withdrawing-the-us-picture-id632486644?s=612x612

YOUTUBE CAPTIONING
• Videos Hosted on
YouTube are
automatically
closed-captioned
within a few
hours of posting.

CAPTION FAILS…

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.
• SEO boost from transcript.
• SEO boost from accessibility.
• You can adapt transcript for blog posts.

PICKING GOOD FONTS
Old School:
Screens
Sans Serif Fonts
Helvetica
Tahoma
Verdana
Print
Serif Fonts
Times New Roman
Georgia
Book Antiqua
Modern:
You can use either
Serif or Sans Serif fonts.

THESE FONTS ARE ALL SIZED AT 38PT.
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

REVIEW
Improving your site’s
accessibility helps everyone. Use <h1>,<h2>, etc.
• Format tags using CSS
Use a
color
checker.
Access
SizeFontsColorsContrast
and Color
TagsTags
LinksImages ImagesLinks
Use
alt=“description”
Attributes
Use
friendly
fonts.
Use
meaningful
links.

Accessibility Checkers
https://wave.webaim.org
https://fae.disability.illinois.edu
https://achecker.ca/checker/index.php
Color / Contrast Checker Tool
http://webaim.org/resources/contrastchecker/
Color Pickers
http://www.color-hex.com/color/e68a00
https://www.w3schools.com/colors/colors_picker.asp
Screen Readers
https://www.nvaccess.org/ Free screen reader
Skipping Navigation Links
http://webaim.org/techniques/skipnav/
ACCESSIBILITY RESOURCES

5 Ways to Improve your Website's Accessibility by Trevor Johnson-Steigelman

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (6)

Semelhante a 5 Ways to Improve your Website's Accessibility by Trevor Johnson-Steigelman

Semelhante a 5 Ways to Improve your Website's Accessibility by Trevor Johnson-Steigelman (20)

Último

Último (20)

5 Ways to Improve your Website's Accessibility by Trevor Johnson-Steigelman

Notas do Editor