Accessibility is important for anyone with a presence on the web. Here are five simple things you can do to make your web pages more accessible.
These are the slides from a talk given at WordCamp Buffalo on May 5, 2018.
Nagercoil Escorts Service Girl ^ 9332606886, WhatsApp Anytime Nagercoil
5 Ways to Improve your Website's Accessibility by Trevor Johnson-Steigelman
1. 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.
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.
http://www.interactiveaccessibility.com/accessibility-statistics
http://www.practicalecommerce.com/Accessibility-How-Many-Disabled-Web-Users-Are-There
H. Trevor Johnson-Steigelman
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
H. Trevor Johnson-Steigelman
8. 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/
H. Trevor Johnson-Steigelman
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>
https://www.w3.org/WAI/tutorials/page-structure/
H. Trevor Johnson-Steigelman
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>
• <h2>Tagging is useful for… </h3>
• <h3>Cognitively impaired </h3>
• <h3>Visually impaired </h3>
• <h3>Screen Readers </h3>
• <h3>Keyboard movement </h3>
https://www.w3.org/WAI/tutorials/page-structure/
H. Trevor Johnson-Steigelman
11. 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
https://www.w3.org/WAI/tutorials/page-structure/
H. Trevor Johnson-Steigelman
12. <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
H. Trevor Johnson-Steigelman
13. 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.
H. Trevor Johnson-Steigelman
16. ARIA – ACCESSIBLE RICH INTERNET APPLICATIONS
• Tags for
common
parts of
web pages.
https://www.w3.org/TR/wai-aria-practices/examples/landmarks/banner.html
H. Trevor Johnson-Steigelman
19. 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
H. Trevor Johnson-Steigelman
21. 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
H. Trevor Johnson-Steigelman
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
H. Trevor Johnson-Steigelman
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>
H. Trevor Johnson-Steigelman
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”
H. Trevor Johnson-Steigelman
25. 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
H. Trevor Johnson-Steigelman
27. 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
H. Trevor Johnson-Steigelman
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.
http://webaim.org/techniques/alttext/
H. Trevor Johnson-Steigelman
32. 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.
H. Trevor Johnson-Steigelman
33. 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.
H. Trevor Johnson-Steigelman
34. 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
H. Trevor Johnson-Steigelman
35. 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.
H. Trevor Johnson-Steigelman
