SlideShare a Scribd company logo

Website Accessibility Workshop

•
•
Devin Olson
Devin Olson

Website Accessibility Workshop by Roy Rumaner and Bob Kadrie, with support from Devin S. Olson at Collabsphere 2018

Related slideshows

Do you have a website? Do you want to get sued?
Do you have a website? Do you want to get sued?Do you have a website? Do you want to get sued?
Do you have a website? Do you want to get sued?
 
How to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility SummitHow to create accessible websites - Web Accessibility Summit
How to create accessible websites - Web Accessibility Summit
 
EVOLVE"13 | Maximize & Enhance | Accessibility | Kiran Kaja
EVOLVE"13 | Maximize & Enhance | Accessibility | Kiran KajaEVOLVE"13 | Maximize & Enhance | Accessibility | Kiran Kaja
EVOLVE"13 | Maximize & Enhance | Accessibility | Kiran Kaja
 
1 of 54
Download to read offline
First, Thank You! What Do I Need to Ensure My Website is Accessible to the Visually Challenged?
CollabSphere 2018 Sponsors
Roy Rumaner • Christian Brothers Services • Bank of America • Canal Barge Company • PNC Bank • ABN-AMRO • Teledyne • Sierra Nevada Corp • Morey Corp • 4C Technologies • Kimball Hill Homes • TeamSpace • Uline • Abbott Labs • Tenneco • YMCA • McDonald’s Owner, Rumaner Consulting
• 3Com • AT&T • Apple • Delta Air Lines • Expedia • The Center for Civil and Human Rights • Emory University • General Motors • The Woodruff Center • The Poynter Institute • J.M. Huber • Rinnai Corporation • Worldspan/Travelport/CitiGroup • The Salvation Army • Designed the first, fully ADA compliant website for The Center for the Visually Impaired Chief Creative Officer, Red Pill Now Bob Kadrie
• MicroAge, Inc • MicroTech • Sierra Nevada Corporation • Honeywell • Allied Signal • Red Bull • US Air • The Salvation Army • Bureau of Land Management • US Fish & Wildlife Service Master Solutioneer, Red Pill Now Devin Olson
Grab These Files bit.ly/collabsphere
A Word About Design Thinking The concept of matching people's needs with a viable business case and technology solution – assuring customer value AND market opportunity.
Accessibility Matters Unplug your mouse for a day.
Accessibility Matters
Accessibility Matters Contrast
Accessibility Matters 28% of all images on the web have no meaningful <alt> attribute.
Accessibility Matters 81% of buttons have no useful attribute.
Accessibility Matters ARIA “role” attributes, when used, are likely to be used wrong.
Accessibility Matters BEYOND THE NUMBERS This is a civil rights issue that’s actually easy to solve!
Accessibility Matters
Accessibility Matters LEADERSHIP POLICY IMPLEMENTATION
Accessibility Matters
Remember This: Inclusive design is better for business – and it’s the right thing to do.
Five Simple Concepts for Screen Readers One Describe images in the <alt> tag, provide transcripts for video.
Five Simple Concepts for Screen Readers
Five Simple Concepts for Screen Readers TWO Follow a logical, linear layout.
Five Simple Concepts for Screen Readers THREE Structure content using HTML5
Five Simple Concepts for Screen Readers FOUR Build for keyboard use.
Five Simple Concepts for Screen Readers FIVE Add descriptions to links and headings.
Five Simple Concepts for Screen Readers
Five Simple Concepts for Low Vision Visitors ONE Add controls for contrast and font size.
Five Simple Concepts for Low Vision Visitors
Five Simple Concepts for Low Vision Visitors TWO Publish all information on Web pages.
Five Simple Concepts for Low Vision Visitors THREE Use a combination of “safe” colors, shapes, and text.
Five Simple Concepts for Low Vision Visitors FOUR Follow a logical, linear layout.
Five Simple Concepts for Low Vision Visitors FIVE Put buttons and notifications in context.
Color Matters COLOR BLINDNESS Red-Green Blue-Yellow Monochromacy
Color Matters
Color Matters https://coolors.co
Color Matters https://coolors.co
Color Matters https://coolors.co
Remember This: UNIVERSITY OF WASHINGTON “If you can develop a website, you can develop an accessible one.”
WCAG Guidelines The Web Content Accessibility Guidelines are a set of technical standards, not legal ones. • The WCAG has 4 Principles (P-O-U-R) that are broken down into 12 Guidelines • Those 12 Guidelines are further broken down into Success Criteria • For each Success Criteria there are 3 levels of Conformance Each of the guidelines in WCAG have measurable success criteria divided into the levels of A (lowest), AA and AAA (highest). More A’s equals more demands, but better accessibility when met. A, AA, AAA
POUR: Four Principles of Accessibility 1. Content must be Perceivable 2. Interface components in the content must be Operable 3. Content and controls must be Understandable 4. Content should be Robust enough to work with current and future assistive technologies (AT)
POUR: Four Principles of Accessibility • 1. Perceivable • 1.1 Provide text alternatives for non-text content like images • 1.2 Offer captions or text summaries for audio and video • 1.3 Structure content to be programmatically identified and write it to be presented in different ways • 1.4 Design content to be easy to read and listened to (good contrast, volume control) • 2. Operable • 2.1 All functionality should be available just using a keyboard • 2.2 There should be enough time to read content and perform wanted tasks • 2.3 Avoid designing content that might cause seizures • 2.4 Help users navigate and find content as much as possible • 3. Understandable • 3.1Write easy-to-read text with assistive technologies in mind • 3.2 Design content and the interface to behave in predictable ways • 3.3 Help users to avoid and correct mistakes when entering input • 4. Robust • 4.1 Provide maximum compatibility with as many web browsers as possible
Levels of Conformance Level A We must satisfy these requirements, otherwise it will be impossible for one or more groups to access the web content Level AA We should satisfy these requirements, otherwise some groups will find it difficult to access the web content Level AAA We may satisfy these requirements, in order to make it easier for some groups to access the web content
Website Accessibility Workshop
Website Accessibility Workshop
What’s New for WCAG 2.1 In the Summer of 2018, WCAG 2.1 is set to be released with seventeen new guidelines that focus on improving accessibility for users with cognitive disabilities and for users who browse websites on mobile devices like tablets and smartphones.
What’s New for WCAG 2.1 Before explaining the new guidelines in WCAG 2.1, you should know that WCAG 2.1 is backward compatible with WCAG 2.0. This means that: • The previous categories and guidelines still apply • The numbering still applies • The basic principles still apply • The three levels of success criteria (A, AA, AAA) still apply
What’s New for WCAG 2.1 1.3.4 Identify Common Purpose (AA) For the following this guideline, the meaning of each input field must be able to be determined programmatically. In other words, a piece of code must be able to tell what is expected to be entered by a user or what’s the meaning of a piece of entered information. Doing this correctly will make it possible for a user’s browser to autofill input fields based on data previously entered by the user. Great! Having to enter less input is always nice. Technically, this has to be true if: • The implementation is done using technologies for identifying expected meaning of input data. • The input field uses the Autofill markup like in the following code snippet <form> <label for="input-email">Email address</label> <input id="input-email" autocomplete="email" type="email"> <label for="input-password">Password</label> <input id="input-password" autocomplete="current-password" type="password"> <button name="button-sign-in">Sign in</button> </form>
What’s New for WCAG 2.1 1.3.5 Identify Purpose (AAA) This guideline says that the purpose of interface components, icons and certain sections must be able to be identified programmatically. For example: The user should not just understand that a button is a button. He or she should understand what the button does, what its purpose is. HTML should always be written correctly, so that assistive technologies like screen readers can do things like: • Identify sections like header, navigation, main content area and so on for easier navigation. • Provide text alternatives to icons, which otherwise can sound weird when being read to users. • Differentiate between different subheadings like H2, H3 and H3 subheadings for finding wanted content faster. Following this guideline will improve accessibility for users of assistive technologies like screen readers.
What’s New for WCAG 2.1 1.3.5 Identify Purpose (AAA) This guideline says that the purpose of interface components, icons and certain sections must be able to be identified programmatically. For example: The user should not just understand that a button is a button. He or she should understand what the button does, what its purpose is. HTML should always be written correctly, so that assistive technologies like screen readers can do things like: •Identify sections like header, navigation, main content area and so on for easier navigation. •Provide text alternatives to icons, which otherwise can sound weird when being read to users. •Differentiate between different subheadings like H2, H3 and H3 subheadings for finding wanted content faster. Following this guideline will improve accessibility for users of assistive technologies like screen readers.
What’s New for WCAG 2.1 1.4.10 Reflow (AA) This guideline states that users must be able to browse a website using a 320 pixel wide screen without having to scroll horizontally. In other words, your website must be responsive. Why a width of 320 pixels? Probably because this is the smallest device width of a lot of popular smartphones. Following this guideline will improve accessibility for all users visiting your website on a smartphone. It will also benefit users with visual impairment who definitely will zoom in (up to 400 % ) on desktop browsers. Note: It’s acceptable to allow horizontal scrolling for content that often requires it like maps, data tables with many columns and wide diagrams.
What’s New for WCAG 2.1 1.4.11 Non-text contrast (AA) Having high contrast between pieces of text and their backgrounds is one of the best and most important things you can do to ensure great accessibility on your website. In this guideline the requirement for high contrast extends from regular page text, to text on interface components (buttons) as well as for colors used in non-text content (infographics and diagrams). Tip: For measuring contrast, I recommend Lea Verou’s excellent tool at: leaverou.github.io/contrast-ratio Following this guideline will improve accessibility for all users with different kinds of visual impairment.
Get These Files 10 MINUTE BREAK bit.ly/collabsphere
Workshop Let’s look at a few examples.
Workshop Dummy Website Files bit.ly/collabsphere
Questions How may we help you?

More Related Content

Website Accessibility Workshop

  • 1. First, Thank You! What Do I Need to Ensure My Website is Accessible to the Visually Challenged?
  • 3. Roy Rumaner • Christian Brothers Services • Bank of America • Canal Barge Company • PNC Bank • ABN-AMRO • Teledyne • Sierra Nevada Corp • Morey Corp • 4C Technologies • Kimball Hill Homes • TeamSpace • Uline • Abbott Labs • Tenneco • YMCA • McDonald’s Owner, Rumaner Consulting
  • 4. • 3Com • AT&T • Apple • Delta Air Lines • Expedia • The Center for Civil and Human Rights • Emory University • General Motors • The Woodruff Center • The Poynter Institute • J.M. Huber • Rinnai Corporation • Worldspan/Travelport/CitiGroup • The Salvation Army • Designed the first, fully ADA compliant website for The Center for the Visually Impaired Chief Creative Officer, Red Pill Now Bob Kadrie
  • 5. • MicroAge, Inc • MicroTech • Sierra Nevada Corporation • Honeywell • Allied Signal • Red Bull • US Air • The Salvation Army • Bureau of Land Management • US Fish & Wildlife Service Master Solutioneer, Red Pill Now Devin Olson
  • 7. A Word About Design Thinking The concept of matching people's needs with a viable business case and technology solution – assuring customer value AND market opportunity.
  • 11. Accessibility Matters 28% of all images on the web have no meaningful <alt> attribute.
  • 12. Accessibility Matters 81% of buttons have no useful attribute.
  • 13. Accessibility Matters ARIA “role” attributes, when used, are likely to be used wrong.
  • 14. Accessibility Matters BEYOND THE NUMBERS This is a civil rights issue that’s actually easy to solve!
  • 18. Remember This: Inclusive design is better for business – and it’s the right thing to do.
  • 19. Five Simple Concepts for Screen Readers One Describe images in the <alt> tag, provide transcripts for video.
  • 20. Five Simple Concepts for Screen Readers
  • 21. Five Simple Concepts for Screen Readers TWO Follow a logical, linear layout.
  • 22. Five Simple Concepts for Screen Readers THREE Structure content using HTML5
  • 23. Five Simple Concepts for Screen Readers FOUR Build for keyboard use.
  • 24. Five Simple Concepts for Screen Readers FIVE Add descriptions to links and headings.
  • 25. Five Simple Concepts for Screen Readers
  • 26. Five Simple Concepts for Low Vision Visitors ONE Add controls for contrast and font size.
  • 27. Five Simple Concepts for Low Vision Visitors
  • 28. Five Simple Concepts for Low Vision Visitors TWO Publish all information on Web pages.
  • 29. Five Simple Concepts for Low Vision Visitors THREE Use a combination of “safe” colors, shapes, and text.
  • 30. Five Simple Concepts for Low Vision Visitors FOUR Follow a logical, linear layout.
  • 31. Five Simple Concepts for Low Vision Visitors FIVE Put buttons and notifications in context.
  • 32. Color Matters COLOR BLINDNESS Red-Green Blue-Yellow Monochromacy
  • 37. Remember This: UNIVERSITY OF WASHINGTON “If you can develop a website, you can develop an accessible one.”
  • 38. WCAG Guidelines The Web Content Accessibility Guidelines are a set of technical standards, not legal ones. • The WCAG has 4 Principles (P-O-U-R) that are broken down into 12 Guidelines • Those 12 Guidelines are further broken down into Success Criteria • For each Success Criteria there are 3 levels of Conformance Each of the guidelines in WCAG have measurable success criteria divided into the levels of A (lowest), AA and AAA (highest). More A’s equals more demands, but better accessibility when met. A, AA, AAA
  • 39. POUR: Four Principles of Accessibility 1. Content must be Perceivable 2. Interface components in the content must be Operable 3. Content and controls must be Understandable 4. Content should be Robust enough to work with current and future assistive technologies (AT)
  • 40. POUR: Four Principles of Accessibility • 1. Perceivable • 1.1 Provide text alternatives for non-text content like images • 1.2 Offer captions or text summaries for audio and video • 1.3 Structure content to be programmatically identified and write it to be presented in different ways • 1.4 Design content to be easy to read and listened to (good contrast, volume control) • 2. Operable • 2.1 All functionality should be available just using a keyboard • 2.2 There should be enough time to read content and perform wanted tasks • 2.3 Avoid designing content that might cause seizures • 2.4 Help users navigate and find content as much as possible • 3. Understandable • 3.1Write easy-to-read text with assistive technologies in mind • 3.2 Design content and the interface to behave in predictable ways • 3.3 Help users to avoid and correct mistakes when entering input • 4. Robust • 4.1 Provide maximum compatibility with as many web browsers as possible
  • 41. Levels of Conformance Level A We must satisfy these requirements, otherwise it will be impossible for one or more groups to access the web content Level AA We should satisfy these requirements, otherwise some groups will find it difficult to access the web content Level AAA We may satisfy these requirements, in order to make it easier for some groups to access the web content
  • 44. What’s New for WCAG 2.1 In the Summer of 2018, WCAG 2.1 is set to be released with seventeen new guidelines that focus on improving accessibility for users with cognitive disabilities and for users who browse websites on mobile devices like tablets and smartphones.
  • 45. What’s New for WCAG 2.1 Before explaining the new guidelines in WCAG 2.1, you should know that WCAG 2.1 is backward compatible with WCAG 2.0. This means that: • The previous categories and guidelines still apply • The numbering still applies • The basic principles still apply • The three levels of success criteria (A, AA, AAA) still apply
  • 46. What’s New for WCAG 2.1 1.3.4 Identify Common Purpose (AA) For the following this guideline, the meaning of each input field must be able to be determined programmatically. In other words, a piece of code must be able to tell what is expected to be entered by a user or what’s the meaning of a piece of entered information. Doing this correctly will make it possible for a user’s browser to autofill input fields based on data previously entered by the user. Great! Having to enter less input is always nice. Technically, this has to be true if: • The implementation is done using technologies for identifying expected meaning of input data. • The input field uses the Autofill markup like in the following code snippet <form> <label for="input-email">Email address</label> <input id="input-email" autocomplete="email" type="email"> <label for="input-password">Password</label> <input id="input-password" autocomplete="current-password" type="password"> <button name="button-sign-in">Sign in</button> </form>
  • 47. What’s New for WCAG 2.1 1.3.5 Identify Purpose (AAA) This guideline says that the purpose of interface components, icons and certain sections must be able to be identified programmatically. For example: The user should not just understand that a button is a button. He or she should understand what the button does, what its purpose is. HTML should always be written correctly, so that assistive technologies like screen readers can do things like: • Identify sections like header, navigation, main content area and so on for easier navigation. • Provide text alternatives to icons, which otherwise can sound weird when being read to users. • Differentiate between different subheadings like H2, H3 and H3 subheadings for finding wanted content faster. Following this guideline will improve accessibility for users of assistive technologies like screen readers.
  • 48. What’s New for WCAG 2.1 1.3.5 Identify Purpose (AAA) This guideline says that the purpose of interface components, icons and certain sections must be able to be identified programmatically. For example: The user should not just understand that a button is a button. He or she should understand what the button does, what its purpose is. HTML should always be written correctly, so that assistive technologies like screen readers can do things like: •Identify sections like header, navigation, main content area and so on for easier navigation. •Provide text alternatives to icons, which otherwise can sound weird when being read to users. •Differentiate between different subheadings like H2, H3 and H3 subheadings for finding wanted content faster. Following this guideline will improve accessibility for users of assistive technologies like screen readers.
  • 49. What’s New for WCAG 2.1 1.4.10 Reflow (AA) This guideline states that users must be able to browse a website using a 320 pixel wide screen without having to scroll horizontally. In other words, your website must be responsive. Why a width of 320 pixels? Probably because this is the smallest device width of a lot of popular smartphones. Following this guideline will improve accessibility for all users visiting your website on a smartphone. It will also benefit users with visual impairment who definitely will zoom in (up to 400 % ) on desktop browsers. Note: It’s acceptable to allow horizontal scrolling for content that often requires it like maps, data tables with many columns and wide diagrams.
  • 50. What’s New for WCAG 2.1 1.4.11 Non-text contrast (AA) Having high contrast between pieces of text and their backgrounds is one of the best and most important things you can do to ensure great accessibility on your website. In this guideline the requirement for high contrast extends from regular page text, to text on interface components (buttons) as well as for colors used in non-text content (infographics and diagrams). Tip: For measuring contrast, I recommend Lea Verou’s excellent tool at: leaverou.github.io/contrast-ratio Following this guideline will improve accessibility for all users with different kinds of visual impairment.
  • 51. Get These Files 10 MINUTE BREAK bit.ly/collabsphere
  • 52. Workshop Let’s look at a few examples.
  • 54. Questions How may we help you?