Backing yourself into an Accessible Corner
Download as PPTX, PDF•1 like•197 views
The document provides an overview of web accessibility, emphasizing its importance for people with disabilities and the legal requirements under the ADA. It details various web development practices, resources, and Drupal modules aimed at enhancing accessibility. The content targets developers looking to improve their websites to ensure equal access for all users.
![Form Example 2
<label for=”creditcard”>Credit Card Number</label>
<input name="CreditCard" id="creditcard" pattern=”[0-9]{13,16}”
title=”A credit card number is 13 or 16 digits.” />](https://image.slidesharecdn.com/backend-accessible-sandcamp-170217173314/85/Backing-yourself-into-an-Accessible-Corner-28-320.jpg)
Backing yourself into an Accessible Corner
- 1. Backing Yourself into an Accessible Corner
- 2. @teampoop http://www.abqwebgeeks.or g slideshare.net/teampoop Mark brings a fifteen year programming background and eight years of Drupal experience to his role as Senior Drupal Developer at Mediacurrent. Highly involved in his local web community, Mark runs the ABQ Webgeeks Group and started the Albuquerque Drupal Users group. Senior Drupal Developer - Mediacurrent Shameless Self Promotion 1
- 4. Mediacurrent Friday 5 5 things 5 ways 5 minutes on various topics. Video (sorry) https://www.mediacurrent.com/frida y5 Shameless Self Promotion 3
- 5. She’s my pal This is Dru Last thing about me.
- 6. Found out on Monday I was giving this talk…
- 9. What is website accessibility anyway? Credit: http://netdna.webdesignerdepot.com Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality. - Wikipedia
- 10. Who is website accessibility for? Credit: http://www.northfloridaahec.org EVERYONE!!! 57 million Americans (~20%) have some type of DISABILITY • Visual impairments • Hearing impairments • Cognitive impairments • Mobility impairments • Temporary Disabilities • Seizure Disorders • Aging population • Search engine bots
- 11. US Population = 282,000,000 (2000 census data) Credit: https://openclipart.org
- 12. Total Disabled Population = 57,000,000 (2000 census data) Credit: https://openclipart.org ~20%
- 13. Severely Disabled Population = 28,000,000 (2000 census data) Credit: https://openclipart.org ~10%
- 14. Why should I care about website accessibility? Credit: https://ironyisapoormaster.files.wordpress.com Karma Points - Everyone should have full access to cat videos & ridiculous internet memes…as well as all the useful information Smart Thing to Do - Opens your site to a wider audience, good for SEO/search bots/Google ranking, etc It is the Law* - Federal/state agencies, airlines, Section 504 & 508, Americans with Disabilities Act (ADA) 2018
- 16. Myth The First Step to Accessibility: Good Design
- 17. She’s my pal This is Dru Colors
- 18. She’s my pal This is Dru Better Colors
- 19. She’s my pal This is Dru Seriously Don’t let me design your site.
- 26. Images • Use ALT Text • ALT Text gives full meaning of the image in relationship to the page • <figure> and <figcaption> tags • USE ALT TEXT!
- 27. Forms • Use <label> Elements • <fieldset> and <legend> elements • use the aria-required=“true" property for required fields • Specify data types. • Input Patterns
- 28. Form Example 2 <label for=”creditcard”>Credit Card Number</label> <input name="CreditCard" id="creditcard" pattern=”[0-9]{13,16}” title=”A credit card number is 13 or 16 digits.” />
- 29. Document Structure <fieldset> <legend>Your Favorite Color</legend> <input type=”radio” name=”favoritecolor” value=”blue” id=”blue”> <label for=”blue”>Blue</label> <input type=”radio” name=”favoritecolor” value=”green” id=”green”> <label for=”green”>Green</label> <input type=”radio” name=”favoritecolor” value=”purple” id=”purple”> <label for=”purple”>Purple</label> </fieldset>
- 30. Testing • http://wave.webaim.org/ • http://pa11y.org/ • Apple built in VoiceOver • Pretty sure there’s something for Windows
- 31. Testing Seriously.. try navigating your site without a mouse. I double dog dare you
- 32. Testing
- 33. Modules
- 34. Modules Accessible Forms (D7) https://www.drupal.org/project/accessible_forms This is a simple Drupal 7 module for adding form attributes for improved accessibility. Includes: required attribute to required fields, required label to required fields (instead of asterix *), aria-invalid to form fields with errors Not needed in D8
- 35. Modules Accessible Mega Menu (D7) https://www.drupal.org/project/accessible_mega_m enu This module provides integration with the Accessible Mega Menu jQuery plugin. An Accessible Mega Menu block is created for each menu. Accessible Mega Menu is an open source jQuery plugin provided by Adobe Accessibility (https://github.com/adobe- accessibility). Port to D8 issue: https://www.drupal.org/node/2635052
- 36. Modules Add to Any (D7 & D8) https://www.drupal.org/project/addtoany Share buttons for Drupal including the AddToAny universal share button, Facebook, Twitter, Google+, Pinterest, WhatsApp and many more.
- 37. Modules Block ARIA Landmark Roles (D7 & D8) https://www.drupal.org/project/block_aria_landmark _roles Inspired by Block Class, this module adds additional elements to the block configuration forms that allow users to assign a ARIA landmark role to a block.
- 38. Modules High contrast (D7 & D8 pending) https://www.drupal.org/project/high_contrast Provides a quick solution to allow the user to switch between the active theme and a high contrast version of it.
- 39. Modules HTML Tidy (D7) https://www.drupal.org/project/htmltidy This module tidies Drupal's HTML output with HTML Tidy by optionally sanitizing it when it is saved or when it is displayed, like a traditional input formatter. Missing and mis-ordered tag components are replaced and reordered automatically so that user input doesn't break site structure with open tags and the like. Port to D8 issue: https://www.drupal.org/node/2635180
- 40. Modules Readability Analyzer (D7) https://www.drupal.org/project/readability This module is designed to help copywriters and editors develop more consistently readable content across a Drupal site. It performs five popular automated readability tests that provide a grade level equivalency of the difficulty of a page's readability. It enables you to set a target grade range for your site's content. Port to D8 issue: https://www.drupal.org/node/2635184
- 41. Modules Switch Theme (D7) https://www.drupal.org/project/switchtheme Adds a block to allow users to switch between enabled themes. Themes can be given 'user friendly' names and access can be controlled by user role. Switchtheme provides optional support for Browscap module to switch themes based on the browser of a visitor. Port to D8 issue: https://www.drupal.org/node/1601192
- 42. Modules Text Resize (D7 & D8) https://www.drupal.org/project/text_resize The Text Resize module provides your end-users with a block that can be used to quickly change the font size of text on your Drupal site. This module is primarily focused on increasing the accessibility of your pages, by helping visually- impaired users to adjust the text size so that it is most comfortable for their eyesight.
- 43. Resources
- 44. Resources Types of Disabilities - https://www.w3.org/WAI/intro/people-use- web/diversity Accessibility Law - http://webaim.org/articles/laws/usa Understanding Web Accessibility - http://uiaccess.com/understanding.html User Stories - https://www.w3.org/WAI/intro/people-use-web/stories Design/Theme Specific - http://alistapart.com/topic/accessibility
- 45. Resources WCAG 2.0 - https://www.w3.org/TR/WCAG20/#guidelines WCAG 2.0 Checklist - http://webaim.org/standards/wcag/checklist Section 508 - http://www.section508.gov Section 508 Checklist - http://webaim.org/standards/508/checklist ATAG - https://www.w3.org/WAI/intro/atag.php UAAG - https://www.w3.org/WAI/intro/uaag.php General checklist - http://a11yproject.com/checklist.html
- 46. Resources Overview of Tools - http://webaim.org/articles/tools General Tool - http://pa11y.org Visualization Toolkit - http://khan.github.io/tota11y Color Blindness Simulator - http://www.color-blindness.com/coblis-color- blindness-simulator Color Safe - http://colorsafe.co VoiceOver - http://webaim.org/articles/voiceover Wave - http://wave.webaim.org
- 47. Resources • Accessibility Statement - https://www.drupal.org/about/features/accessibility • Accessibility in D8 - https://www.drupal.org/node/2004876 • Front-end accessibility - https://www.drupal.org/node/464472 • Back-end accessibility - https://www.drupal.org/node/1637990 • Site builder accessibility - https://www.drupal.org/node/394094 • Accessibile modules - https://www.drupal.org/node/394252 • Clarissa Patterson’s awesome post I promised to be in the resources part:
- 48. Thank you!
Editor's Notes
- #10: What is website accessibility anyway? Wikipedia says that “Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.” So basically, make your site available to as many people as possible.
- #11: Who is website accessibility for? If you look at this stock photo of perfect people with their perfect teeth you may think that none of them has a disability, but just because a disability is not visually obvious does not mean that it doesn’t exist. In fact, 57 million Americans (over 18%) have some type of DISABILITY Examples of disabilities include: Visual impairments, Hearing impairments, Cognitive impairments, Mobility impairments, Temporary Disabilities, Seizure Disorders, Aging population. Also good to consider that search engine bots benefit from accessible websites as well. Website accessibility is for *everyone* and benefits *everyone*
- #12: Who is website accessibility for? If you look at this stock photo of perfect people with their perfect teeth you may think that none of them has a disability, but just because a disability is not visually obvious does not mean that it doesn’t exist. In fact, 57 million Americans (over 18%) have some type of DISABILITY Examples of disabilities include: Visual impairments, Hearing impairments, Cognitive impairments, Mobility impairments, Temporary Disabilities, Seizure Disorders, Aging population. Also good to consider that search engine bots benefit from accessible websites as well. Website accessibility is for *everyone* and benefits *everyone*
- #13: Who is website accessibility for? If you look at this stock photo of perfect people with their perfect teeth you may think that none of them has a disability, but just because a disability is not visually obvious does not mean that it doesn’t exist. In fact, 57 million Americans (over 18%) have some type of DISABILITY Examples of disabilities include: Visual impairments, Hearing impairments, Cognitive impairments, Mobility impairments, Temporary Disabilities, Seizure Disorders, Aging population. Also good to consider that search engine bots benefit from accessible websites as well. Website accessibility is for *everyone* and benefits *everyone*
- #14: Who is website accessibility for? If you look at this stock photo of perfect people with their perfect teeth you may think that none of them has a disability, but just because a disability is not visually obvious does not mean that it doesn’t exist. In fact, 57 million Americans (over 18%) have some type of DISABILITY Examples of disabilities include: Visual impairments, Hearing impairments, Cognitive impairments, Mobility impairments, Temporary Disabilities, Seizure Disorders, Aging population. Also good to consider that search engine bots benefit from accessible websites as well. Website accessibility is for *everyone* and benefits *everyone*
- #15: Why should I care about website accessibility? It might sound like a bunch of “hippy dippy bologna” but there are a lot of reasons to care about website accessibility, including: Karma Points - Everyone should have full access to cat videos & ridiculous internet memes…as well as all the useful information Smart Thing to Do - Opens your site to a wider audience, good for SEO/search bots/Google ranking, etc It is the Law* - Some Federal/state agencies, airlines are required to have accessible websites. In 2018, the Americans with Disabilities Act (ADA) is hopeful to have stronger regulations for ALL organizations/companies
- #17: so the first site.. lets face it, only site, I look at as research had this to say about accessibility (the site will be in the resources section)
- #27: Now we have <figure> and <figcaption> that can be used to associate captions with images. <figure> doesn’t replace the <img> tag, instead it’s a container that holds both the <img> and the related <figcaption> (which is optional). It’s not something that’s needed for all images, though. <figure> is used when the image is an essential part of the page content, but can be moved outside the main flow of the page content. For example, a photo that illustrates a newspaper article can be somewhere off on the side, but it’s essential to the article. You wouldn’t use <figure> for other types of images like the logo in the page header. But wait, there’s more! You can actually use <figure> for other types of content, like code samples, audio, video, charts, poems, etc. And even better: you aren’t limited to one image; perhaps you want to have three headshots with one caption (pictured, left to right are…). You can stick all those images inside one <figure> with one <figcaption>.
- #28: so the first site.. lets face it, only site, I look at as research had this to say about accessibility (the site will be in the resources section)
- #30: so the first site.. lets face it, only site, I look at as research had this to say about accessibility (the site will be in the resources section)
- #31: Seriously.. try navigating your site without a mouse. I double dog dare you
- #32: Seriously.. try navigating your site without a mouse. I double dog dare you
- #33: Seriously.. try navigating your site without a mouse. I double dog dare you