Access by Default
0 likes343 views
The document emphasizes the importance of universal web accessibility, particularly for individuals with disabilities, as a substantial portion of the population benefits from accessible design. It outlines the actions taken by GeorgiaGov to improve the accessibility of its websites and offers guidelines for best practices in creating accessible content. Additionally, it touches on legal requirements like WCAG 2.0 compliance and provides practical tips for enhancing web accessibility through design and coding strategies.
Access by Default
- 1. Access By Default Accessible code is better for everyone
- 2. Kendra Skeene @kskeene Director of Product GeorgiaGov Interactive @GeorgiaGovTeam
- 4. Why universal access matters What we did at GeorgiaGov Easy wins for accessible HTML Access by Default #GWO2016 @kskeene
- 5. Disabilities come in many Forms Visual Auditory Motor Skills Cognitive Seizure
- 6. Why? Access by Default #GWO2016 @kskeene
- 7. Accessible websites are Search Engine Friendly websites Search Engines : Can’t “see” images Can’t “hear” audio Can’t interpret audio or video from a movie Can’t interpret color-coding or graphic representations
- 8. Use a text browser, such as Lynx, to examine your site. Most spiders see your site much as Lynx would. If features such as JavaScript, cookies, session IDs, frames, DHTML, or … Flash keep you from seeing your entire site in a text browser, then spiders may have trouble crawling it. Google Says: https://support.google.com/webmasters/answer/40349 “ ”
- 9. Accessible websites are User Friendly websites Access by Default #GWO2016 @kskeene
- 10. Users with disabilities are a large audience Access by Default #GWO2016 @kskeene
- 11. How Large? ● 15% of the population has some form of disability ● 7 to 10% of men have some form of color blindness ● 4% of the population have low vision Access by Default #GWO2016 @kskeene
- 12. Low Vision Conditions increase with Age ● 1/2 of people over 50 have a low-vision condition ● Most people over 40 need reading glasses to clearly see small objects or text The fastest-growing population in the US is over 65 years of age.
- 13. Our Population is Aging 15% of US population is over the age of 65 source:www.pewglobal.org/2014/01/30/global-population 2015 projection 65 and older: 14.7% 15-64: 65.9% Under 15: 19.4% Total: 100%
- 14. Access by Default #GWO2016 @kskeene
- 15. We’re all Temporarily Able-Bodied Access by Default #GWO2016 @kskeene Coding for universal access to technology benefits all of us in the long term.
- 17. Department of Justice basing settlements on conformance to WCAG 2.0 (Level AA) guidelines Access by Default #GWO2016 @kskeene
- 18. Department of Justice Rulings ● edX ● Carnival Cruiselines ● SAM.gov ● Seattle Public Schools … and so many more
- 19. What We Did Access by Default #GWO2016 @kskeene
- 20. Community Health Veterans Service Governor’s Office Attorney General Public Safety Dept. of Labor Technology Authority Dept. of Revenue Human Services Environmental Protection Planning and Budget Inspector General Access by Default #GWO2016 @kskeene
- 21. Enterprise Web Platform - Managing over 75 state websites - more than 400 content managers maintain content Georgia.gov (different codebase) - managing code AND content
- 22. Government has a responsibility to be accessible Access by Default #GWO2016 @kskeene
- 23. Section 508 Accessible Websites ● Drupal 7 Platform ● Omega Base theme ● Child themes tested for accessibility ● No frames ● No flash ● Fields for image alt text ● Fields to label tabular data ● Webform labels
- 24. But we weren’t there yet
- 25. But we weren’t there yet
- 26. Accessible Platform Initiative WCAG 2.0 (Level AA) compliant code and design
- 27. Accessible Platform Initiative Partnership with AMAC to find the gaps AMAC provided 13 reports across ● 13 themes ● 33 page types
- 29. Accessible Platform Code: Result 24 code improvements ● link text ● tabbing visibility ● structural HTML and heading order 76 sites improved
- 30. Now for the really tedious part... Access by Default #GWO2016 @kskeene
- 31. We reviewed every element of every theme for color contrast and font legibility Access by Default #GWO2016 @kskeene
- 32. Accessible Platform Themes Using Common Tools: ● Google Chrome ○ FontFace Ninja ○ ColorZilla ● WebAIM Color Contrast Checker ● Google Spreadsheet Access by Default #GWO2016 @kskeene
- 35. Before
- 36. After
- 37. Accessible Platform Themes: Result 13 themes updated ● color contrast ● text legibility 76 sites improved
- 38. WCAG 2.0 (Level AA)!
- 40. Why didn’t we do all that in the first place? Access by Default #GWO2016 @kskeene
- 41. Access by Default #GWO2016 @kskeene We didn’t know.
- 42. Access by Default #GWO2016 @kskeene
- 43. What You Can Do Access by Default #GWO2016 @kskeene
- 44. Quick Wins - Think About: 1. Color 2. Type 3. Images 4. Semantics 5. Links Access by Default #GWO2016 @kskeene 6. ARIA tags 7. Forms 8. Tables 9. Javascript
- 45. Quick Wins - Checklist A11Y Project Checklist http://a11yproject.com/checklist.html Access by Default #GWO2016 @kskeene
- 46. 1. Color me accessible Access by Default #GWO2016 @kskeene
- 47. Color Contrast 4.5 : 1 color contrast ratio http://contrast-finder.tanaguru.com/ http://leaverou.github.io/contrast-ratio/ http://webaim.org/resources/contrastchecker/ Access by Default #GWO2016 @kskeene
- 48. Color Testing Test usability against color loss NoCoffee Vision Simulator for Chrome Access by Default #GWO2016 @kskeene
- 49. Color Testing
- 50. Build in color contrasts checkers for tools that allow users to select their own colors Building the Tools: Access by Default #GWO2016 @kskeene
- 51. 2. Type - Size Matters Access by Default #GWO2016 @kskeene
- 52. Typography - Size Matters ● Text should be 1em or larger ● Use relative units instead of pixels ● Increase line height - 1.2em - 1.6em ● Increasing text size by 200% should not break your layout
- 53. DON’T USE ALL CAPS. SCREEN READERS WON’T READ THE WORDS CORRECTLY. ALSO, IT’S HARDER TO READ FOR SIGHTED VIEWERS, BECAUSE THERE’S NOT ENOUGH VARIATION IN THE LETTERS. Access by Default #GWO2016 @kskeene
- 54. Touch Targets - Bigger is Better ● make touch targets as large as is reasonable ● at least 9mm high x 9mm wide ● surrounded by inactive space
- 55. 3. Image Descriptions Access by Default #GWO2016 @kskeene
- 56. Alt Attributes for All Images Alt text for images that provide value or context to the information Null alt text for decorative images <img alt="" … >
- 57. To Alt, or Not to Alt? Decision Tree: https://www.w3.org/WAI/ tutorials/images/decision-tree/ Access by Default #GWO2016 @kskeene
- 58. ● Provide a field for alt text ● Use help text to guide content managers ● Don’t make alt text required ● Default to alt="" if no alt text is entered Access by Default #GWO2016 @kskeene Building the Tools:
- 59. Text Representation for Glyphs Provide hidden text for glyphs and icons that aren’t images (e.g. Font Awesome icons)
- 60. Speaking of Hiding Elements... DON’T use: ● visibility: hidden; ● display:none; ● width:0px, height:0px ● text-indent: -10000px; Hides text from screen readers, too (whoops!) focus box issue when tab focus is on the link
- 61. Speaking of Hiding Elements... DO use (when hiding entire element) position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; remove from the page flow and position off-screen backup in case positioning is disabled prevents left from being ignored
- 62. Speaking of Hiding Elements... DO use (when hiding text but keeping other elements) text-indent: -10000px; overflow-y:hidden; Moves just the text off-screen fixes the Firefox focus box issue when tab focus is on the link
- 63. 4. A Matter of Semantics (markup, that is) Access by Default #GWO2016 @kskeene
- 64. A Tag for Everything, and Everything in its Tag Use tags for their specified purpose ● don’t use a <div> for a <button> ● <blockquote> is for quotes, not indenting text
- 65. Heading Tags - Right Place, Right Time ● Use H1-H6 tags for headings only ● <h1> for the main heading of the page ● Sequence Matters: <h6> should only come after <h5>, which is after you use an <h4>, which is nested under <h3>, which should follow <h2>, which is nested under <h1>
- 66. Provide users with an option to choose the heading level for module headings for blocks that can be placed in different locations on a site. Building the Tools: Access by Default #GWO2016 @kskeene
- 67. 5. Links Connect Us Access by Default #GWO2016 @kskeene
- 68. Links Use a “Skip to Main Content” link that’s hidden until tab focus is on it <a href="#main-content" class="skip">Skip to Main Content</a>
- 69. Links Just Say No to target="_blank"
- 70. Links Don’t remove :focus outlines ● ally.js can help you :focus http://allyjs.io/
- 71. Useful Link Text Read More Apply For Child Support ✗ ✓
- 72. Useful Link Text ● Provide relevant link text ● WAI-ARIA attributes can add helpful text ○ aria-label ○ aria-labelledby
- 73. ARIA Labels for Useful Link Text <a href="/underwater-datacenter"> Read More</a>
- 74. ARIA Labels for Useful Link Text <a href="/underwater-datacenter" aria-label="Read more about Underwater Datacenters"> Read More</a>
- 75. 6. ARIA fills in gaps Access by Default #GWO2016 @kskeene
- 76. ARIA Landmark roles HTML attributes that provide “landmarks” for screen readers navigating a page ● <header role="banner"> ● <div role="search">
- 77. 7. Form and Function Access by Default #GWO2016 @kskeene
- 78. Forms ● Each form field needs a <label> ● Place any help text between the <label> and <input> fields ● Use <fieldset> to group related fields
- 79. Forms ● Indicate required fields with * (not just color) ● Clearly mark fields with input errors (not just using color) ● Check tab order (fix with tabindex if needed)
- 80. 8. Table it Access by Default #GWO2016 @kskeene
- 81. Tables for Tabular Data ● use <thead> to mark the table header row ● mark header cells <th> instead of <td> ● <caption> describes the data - like a title
- 82. 9. Javascript (I’ve got nothing witty for this one, sorry.) Access by Default #GWO2016 @kskeene
- 83. Javascript is not Evil ● JS should enhance the experience - but not be the only path to content. ● Don’t use inline Javascript ● Provide fallbacks ● tools like ally.js can help
- 84. Accessify all the things!
- 85. Accessify all the things?
- 86. Resources http://idreaminblue.com/accessible-resources/ ● Checklists & Guides ● Color Contrast Testers ● Drupal Resources ● Vision Simulators ● Open Source Accessibility Testing Access by Default #GWO2016 @kskeene
- 88. Access By Default Accessible code is better for everyone
- 89. We’re hiring! Drupal Solutions Analyst contact me: @kskeene