Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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.

  • Be the first to comment

  • Be the first to like this

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

  1. 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.
  2. 2. Access SizeFontsColorsContrast and Color TagsTags LinksImages ImagesLinks WEB CONTENT ACCESSIBILITY GUIDELINES WCAG 2.0 • Perceivable • Operable • Understandable • Robust H. Trevor Johnson-Steigelman
  3. 3. ACCESSIBILITY ISN’T EXPENSIVE OR HARD. RETROFITTING IT IS. H. Trevor Johnson-Steigelman
  4. 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. 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
  6. 6. CHECKING YOUR ACCESSIBILITY: http://wave.webaim.org H. Trevor Johnson-Steigelman
  7. 7. DETAILS H. Trevor Johnson-Steigelman
  8. 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. 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. 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. 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. 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. 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
  14. 14. H. Trevor Johnson-Steigelman
  15. 15. CHROMEVOX SCREEN READER EXAMPLE
  16. 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
  17. 17. Color can enhance your Website. https://www.reddit.com/r/mildlyinfuriating/comments/6chdqg/this_unintentional_demotivating_yoga_mat/ H. Trevor Johnson-Steigelman
  18. 18. COLOR IMPAIRMENT http://enchroma.com/test/ https://www.reddit.com/user/luccyVeins https://i.redd.it/c1c5u0dhret01.jpg H. Trevor Johnson-Steigelman
  19. 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
  20. 20. WEB ACCESSIBILITY CHECKER http://webaim.org/resources/contrastchecker H. Trevor Johnson-Steigelman
  21. 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. 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. 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. 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. 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
  26. 26. WORDPRESS ATTACHMENT DETAILS PAGE H. Trevor Johnson-Steigelman
  27. 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. 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
  29. 29. 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 H. Trevor Johnson-Steigelman
  30. 30. YOUTUBE CAPTIONING • Videos Hosted on YouTube are automatically closed-captioned within a few hours of posting. H. Trevor Johnson-Steigelman
  31. 31. CAPTION FAILS… H. Trevor Johnson-Steigelman
  32. 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. 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. 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. 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
  36. 36. 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 H. Trevor Johnson-Steigelman

    Be the first to comment

    Login to see the comments

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.

Views

Total views

667

On Slideshare

0

From embeds

0

Number of embeds

556

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×