Successfully reported this slideshow.

Writing for web accessibility - May 2021

0

Share

Upcoming SlideShare
Writing for the web 2010
Writing for the web 2010
Loading in …3
×
1 of 95
1 of 95

Writing for web accessibility - May 2021

0

Share

Download to read offline

Learn how to write web content that lowers barriers for people with disabilities, and in the process, benefits everyone.

Presented at Vancouver Experience Meetup Group (VanUE) in May 2021 by Farah Hirani.

Learn how to write web content that lowers barriers for people with disabilities, and in the process, benefits everyone.

Presented at Vancouver Experience Meetup Group (VanUE) in May 2021 by Farah Hirani.

More Related Content

More from Content Strategy Inc.

Related Books

Free with a 14 day trial from Scribd

See all

Writing for web accessibility - May 2021

  1. 1. Presented by: Farah Hirani Writing for web accessibility How to create understandable content
  2. 2. 1 4 2 3 5 6 Background Benefits Writing for accessibility How-to: Organization How-to: Writing Next steps & wrap-up Overview
  3. 3. 1. How much do you know about designing for digital accessibility? 2. Are you actively involved in the implementation of digital accessibility at your organization in your current role? 3. How far along is your organization to having an accessible website? Quick poll
  4. 4. 1 2 3 4 5 6 Background Definitions and context Background Benefits Writing for accessibility How-to: Organization How-to: Writing Next steps & wrap-up 1
  5. 5. “Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can: • perceive, understand, navigate, and interact with the Web • contribute to the Web”
  6. 6. “Accessibility is the practice of making your websites usable by as many people as possible. • You might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances.”
  7. 7. • Auditory • Cognitive, learning, and neurological • Physical • Speech • Visual Really great resource from W3C https://www.w3.org/WAI/people-use-web/abilities- barriers/ Diverse abilities and barriers
  8. 8. 1 2 3 4 5 6 Background Benefits Writing for accessibility How-to: Organization How-to: Writing Next steps & wrap-up Benefits Why make your content accessible? 2
  9. 9. In Canada, 22% of adults have a disability. 22%
  10. 10. In the US, 26% of adults have a disability. 26%
  11. 11. • Be visible or invisible • Be permanent, temporary, episodic • Exist in varying degrees • Change over time • Be recognized or not Disabilities can…
  12. 12. Ability barriers
  13. 13. Designing for accessibility helps everyone Solutions Transcripts for audio & video Closed captioning for video
  14. 14. Designing for accessibility helps everyone !! Content that’s: Clearly structured Well-organized Solutions
  15. 15. Legal compliance Lowered call centre costs Positive brand image Competitive advantage Improved SEO Additional benefits Really great resource from W3C https://www.w3.org/WAI/business-case/
  16. 16. 1 2 3 4 5 6 Background Benefits Writing for accessibility How-to: Organization How-to: Writing Next steps & wrap-up Writing for accessibility Techniques for writing understandable content 3
  17. 17. Content writing practices that cause accessibility barriers Organization Writing Link text Links on this page: introduced significant improvements automatically communicate the car’s location silent epidemic click here Learn more More information
  18. 18. Content writing practices that cause accessibility barriers Organization Writing Link text Links on this page: introduced significant improvements automatically communicate the car’s location silent epidemic click here Learn more More information
  19. 19. Poor on-page organization • Unclear title • No sections
  20. 20. Poor on-page organization • Title and headings are there • But they aren’t descriptive or informative • Are confusing
  21. 21. • People using screenreader’s must tediously read every word. • Users with cognitive or learning disabilities may not find and understand content. • Users with limited short-term memory may need descriptive headings. Impact of poor content organization
  22. 22. Content writing practices that cause accessibility barriers Organization Writing Link text Links on this page: introduced significant improvements automatically communicate the car’s location silent epidemic click here Learn more More information
  23. 23. Content writing practices that cause accessibility barriers
  24. 24. Content writing practices that cause accessibility barriers Organization Writing Link text Links on this page: introduced significant improvements automatically communicate the car’s location silent epidemic click here Learn more More information
  25. 25. • This is 2 sentences • Both “very hard to read” • Post-graduate readability level Complex, difficult writing
  26. 26. Complex, difficult writing • 50% of sentences “hard to read” • Grade 12 readability level
  27. 27. • Users with cognitive or learning disabilities may not understand content and context. • Complex language can be a source of frustration, wasted time, and energy for these users. • Some won’t be able to overcome these barriers. Impact of complex writing
  28. 28. Content writing practices that cause accessibility barriers Organization Writing Link text Links on this page: introduced significant improvements automatically communicate the car’s location silent epidemic click here Learn more More information
  29. 29. Poor link text • Not helpful out of context • Don’t demonstrate purpose or destination • Don’t warn that will open in new page • Inconsistent phrases for same purpose
  30. 30. • Links can’t be easily “clicked” using speech input. • Links can’t be scanned effectively by screenreader and keyboard-only users. • Screenreaders also read entire link. Impact of unclear link text
  31. 31. 1 2 3 4 5 6 Background Benefits Writing for accessibility How-to: Organization How-to: Writing Next steps & wrap-up How to write for accessibility Working through examples 4 5
  32. 32. Two Examples 1. On-page structure 2. Understandable writing
  33. 33. Create clear, on-page structure 1
  34. 34. • Assess properties in BC • Sends annual notice • Tells owner property value Example 1: BC Assessment
  35. 35. 3 1 2 4 2 3 2 3 4 5 3 6 3 ? 6 1 2 3 4 5 6 ? Review and compare for accuracy Contact us to discuss File first level appeal Review FAQ Visit Ministry of Finance File second level appeal Use different appeal process Example 1: BC Assessment
  36. 36. 3 1 2 4 2 3 2 3 4 5 3 6 3 ? 6 1 2 3 4 5 6 ? Review and compare for accuracy Contact us to discuss File first level appeal Review FAQ Visit Ministry of Finance File second level appeal Use different appeal process Example 1: BC Assessment
  37. 37. 3 1 2 4 2 3 2 3 4 5 3 6 3 ? 6 1 2 3 4 5 6 ? Review and compare for accuracy Contact us to discuss File first level appeal Review FAQ Visit Ministry of Finance File second level appeal Use different appeal process Example 1: BC Assessment
  38. 38. 3 1 2 4 2 3 2 3 4 5 3 6 3 ? 6 1 2 3 4 5 6 ? Review and compare for accuracy Contact us to discuss File first level appeal Review FAQ Visit Ministry of Finance File second level appeal Use different appeal process Example 1: BC Assessment
  39. 39. 3 1 2 4 2 3 2 3 4 5 3 6 3 ? 6 1 2 3 4 5 6 ? Review and compare for accuracy Contact us to discuss File first level appeal Review FAQ Visit Ministry of Finance File second level appeal Use different appeal process Example 1: BC Assessment
  40. 40. 3 1 2 4 2 3 2 3 4 5 3 6 3 ? 6 1 2 3 4 5 6 ? Review and compare for accuracy Contact us to discuss File first level appeal Review FAQ Visit Ministry of Finance File second level appeal Use different appeal process Example 1: BC Assessment
  41. 41. 3 1 2 4 2 3 2 3 4 5 3 6 3 ? 6 1 2 3 4 5 6 ? Review and compare for accuracy Contact us to discuss File first level appeal Review FAQ Visit Ministry of Finance File second level appeal Use different appeal process Example 1: BC Assessment
  42. 42. 2.4.2 Page titles Web pages have titles that describe topic or purpose. 2.4.10 Section headings Section headings are used to organize the content. 2.4.6 Headings & labels Headings and labels describe topic or purpose.
  43. 43. • Technically already meets this standard • “Appeals” is topic, but isn’t meaningful to users • Could be better 2.4.2 Page titles Web pages have titles that describe topic or purpose. Example 1: BC Assessment
  44. 44. • Must represent page’s topic accurately • Most unique/relevant info first • Accurate, brief, unique • For task-based pages, start with action verb ending in “ing” • Use SEO keywords if/when appropriate • 60-70 characters max Tips for creating effective titles
  45. 45. New title Disagreeing with your assessed property value • Must represent page’s topic accurately • Most unique/relevant info first • Accurate, brief, unique • For task-based pages, start with action verb ending in “ing” • 60-70 characters max (it’s 45 characters) • Use SEO keywords if/when appropriate ?
  46. 46. Example 1: BC Assessment • No headings • Does not meet this standard 2.4.10 Section headings 2.4.6 Headings & labels
  47. 47. Tips for creating effective section headings • One topic per heading or subheading • Descriptive, indicates what’s below • Most important words first • Avoid generic or clever headings • Use H1-H6 tags • Use parallel structure • Keep it concise
  48. 48. New structure Disagreeing with your assessed property value H1 Step 1: Review your property information for accuracy H2 Step 2: Contact us to discuss your concerns H2 Step 3: File a formal appeal (due: February 1, 2021) H2 Step 4: Prepare for your appeal hearing H2 Step 5: File a second level appeal (due: April 30, 2021) H2
  49. 49. Example 1: BC Assessment • Bullets aren’t mentioned in WCAG • Used correctly, they improve user experience WCAG standard None
  50. 50. • Bullet lists instead of inline lists • Bullet lists for related items • Numbered list when number matters • Parallel structure for list items • Different bullet type for nested lists • Separate longer lists Tips for using bullet lists
  51. 51. Before Prior to filing a complaint (appeal), use Assessment Search to review your assessment and sales of similar properties to ensure your assessment is accurate. If you still have concerns, we encourage you to contact us before submitting an official Notice of Complaint (Appeal).  After Step 1: Review your property assessment information for accuracy Log in to Assessment Search to learn more about your property assessment, including: • How we assessed your property. • What information we have on file. • How your property value compares to similar properties in your area.
  52. 52. before after
  53. 53. Write in a way that’s easy to understand 2
  54. 54. Example 2: McGill University • For grad & postdoc students • Provides resources • Great page structure
  55. 55. Example 2: McGill University • For grad & postdoc students • Provides resources • Great page structure
  56. 56. Example 2: McGill University • For grad & postdoc students • Provides resources • Great page structure
  57. 57. Example 2: McGill University • For grad & postdoc students • Provides resources • Great page structure
  58. 58. • Page title • Section heading ? Example 2: McGill University
  59. 59. • Page title • Section heading ? Example 2: McGill University
  60. 60. • Page title • Section heading ? Example 2: McGill University
  61. 61. ? • Page title • Section heading • Writing is unclear Example 2: McGill University
  62. 62. ? • Page title • Section heading • Writing is unclear Example 2: McGill University
  63. 63. ? • Page title • Section heading • Writing is unclear • Readability level: grade 11 Example 2: McGill University
  64. 64. ? • Page title • Section heading • Writing is unclear • Readability level: grade 11 • Writing: “them”-centric Example 2: McGill University
  65. 65. 2.4.2 Page titles Web pages have titles that describe topic or purpose. 2.4.6 Headings & labels Headings and labels describe topic or purpose. 2.4.4/2.4.9 Link purpose Purpose of link is clear from the link text alone.
  66. 66. 3.1.3 Unusual words Define words/phrases used in an unusual or restricted way, including idioms and jargon. 3.1.4 Abbreviations Define abbreviations. 3.1.5 Reading level Text should require reading ability at or below grade 8, or have supplemental content.
  67. 67. • Page title • Sections headings are unclear 2.4.2 Page titles 2.4.6 Headings & labels Example 2: McGill University
  68. 68. before after
  69. 69. before after
  70. 70. before after
  71. 71. • Links should make sense out of context • Could be more descriptive 2.4.4/2.4.9 Link purpose Example 2: McGill University
  72. 72. • Links should make sense out of context • Could be more descriptive 2.4.4/2.4.9 Link purpose Example 2: McGill University
  73. 73. • Use sparingly to minimize distraction • Concise and descriptive language • As short as possible • Should make sense out of context • Be consistent • No URLs or “link to” Tips for descriptive link text
  74. 74. workshops semi-annual conference Leading Effective Discussions: Facilitation Skills for Graduate Students send an email Build leadership skills through a suite of 90-minute workshops Free Emerging Leaders Mini- Conference Learn facilitation skills through a one- day workshop leadership.training@mcgill.ca before after
  75. 75. workshops semi-annual conference Leading Effective Discussions: Facilitation Skills for Graduate Students send an email Build leadership skills through a suite of 90-minute workshops Free Emerging Leaders Mini- Conference Learn facilitation skills through a one- day workshop leadership.training@mcgill.ca before after
  76. 76. workshops semi-annual conference Leading Effective Discussions: Facilitation Skills for Graduate Students send an email Build leadership skills through a suite of 90-minute workshops Free Emerging Leaders Mini- Conference Learn facilitation skills through a one- day workshop leadership.training@mcgill.ca before after
  77. 77. workshops semi-annual conference Leading Effective Discussions: Facilitation Skills for Graduate Students send an email Build leadership skills through a suite of 90-minute workshops Free Emerging Leaders Mini- Conference Learn facilitation skills through a one- day workshop leadership.training@mcgill.ca before after
  78. 78. workshops semi-annual conference Leading Effective Discussions: Facilitation Skills for Graduate Students send an email Build leadership skills through a suite of 90-minute workshops Free Emerging Leaders Mini- Conference Learn facilitation skills through a one- day workshop leadership.training@mcgill.ca before after
  79. 79. • No unusual words 3.1.3 Unusual words 3.1.5 Reading level 3.1.4 Abbreviations Example 2: McGill University
  80. 80. • No unusual words • Abbreviations handled correctly 3.1.3 Unusual words 3.1.5 Reading level 3.1.4 Abbreviations Example 2: McGill University
  81. 81. • No unusual words • Abbreviations handled correctly • Readability level: Grade 11 3.1.3 Unusual words 3.1.5 Reading level 3.1.4 Abbreviations Example 2: McGill University
  82. 82. • Shorter words and simple sentences • 6-8 grade reading level • Active voice instead of passive voice • User-focused approach • Research is your friend • Most important information first Tips for user- focused, plain language
  83. 83. before after
  84. 84. before after
  85. 85. before after
  86. 86. before after
  87. 87. before after
  88. 88. before after
  89. 89. 1 2 3 4 5 6 Background Benefits Writing for accessibility How-to: Organization How-to: Writing Next steps & wrap-up Next steps & wrap-up Where to go from here 6
  90. 90. Getting started with accessibility: Next steps Web accessibility first aid Sustain Implement Plan Initiate Really great resource from W3C https://www.w3.org/WAI/planning-and-managing/
  91. 91. • Designing for accessibility is about designing content to be flexible. • Lowers barriers for the 1 in 5 people with disabilities. • Also allows access for people experiencing ability barriers. Re-cap
  92. 92. Make your content easier to understand by: • Organizing it with effective titles, headings, and bullet lists. • Writing it using user-focused plain language. • Making sure link text is descriptive and makes sense out of context. Re-cap
  93. 93. 3 1 2 4 2 3 2 3 4 5 3 6 3 ? 6
  94. 94. “The one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives. How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?” ― Steve Krug Author of Don’t Make Me Think: A Common Sense Approach to Web Usability
  95. 95. Get in touch. farah@contentstrategyinc.com content-strategy-incorporated team_cs_inc

×