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.

Access by Default

3,822 views

Published on

Making your website accessible for users with disabilities isn’t flashy, but it’s necessary. Websites built for universal access benefit all users, not just users with a disability. They’re also more SEO friendly, and are generally built to be more user friendly. From generating increased revenue, to providing better access to services, the benefits of developing accessible websites are real and measurable.

The State of Georgia recently completed an Accessible Platform initiative, reviewing the templates and themes for our enterprise Drupal platform for accessibility gaps, and launching rolling improvements to the platform over several months to meet WCAG 2.0 (Level AA) compliance levels.

Accessibility doesn’t have to be an additional step in the web development process. Out of this initiative came a number of lessons learned on how code can be written to be accessible from the beginning, to mitigate the need for such cleanup efforts in the future. Building websites with accessibility in mind from the start saves time and money in the long haul. By following best practices for front end development, accessibility can be a seamless, invisible step in the build process.

Published in: Internet
  • Be the first to comment

Access by Default

  1. 1. Access By Default Accessible code is better for everyone
  2. 2. Kendra Skeene @kskeene Director of Product GeorgiaGov Interactive @GeorgiaGovTeam
  3. 3. Why universal access matters What we did at GeorgiaGov Easy wins for accessible HTML Access by Default #GWO2016 @kskeene
  4. 4. Disabilities come in many Forms Visual Auditory Motor Skills Cognitive Seizure
  5. 5. Why? Access by Default #GWO2016 @kskeene
  6. 6. 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
  7. 7. 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 “ ”
  8. 8. Accessible websites are User Friendly websites Access by Default #GWO2016 @kskeene
  9. 9. Users with disabilities are a large audience Access by Default #GWO2016 @kskeene
  10. 10. 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
  11. 11. 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.
  12. 12. 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%
  13. 13. Access by Default #GWO2016 @kskeene
  14. 14. 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.
  15. 15. Accessibility is the Law
  16. 16. Department of Justice basing settlements on conformance to WCAG 2.0 (Level AA) guidelines Access by Default #GWO2016 @kskeene
  17. 17. Department of Justice Rulings ● edX ● Carnival Cruiselines ● SAM.gov ● Seattle Public Schools … and so many more
  18. 18. What We Did Access by Default #GWO2016 @kskeene
  19. 19. 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
  20. 20. Enterprise Web Platform - Managing over 75 state websites - more than 400 content managers maintain content Georgia.gov (different codebase) - managing code AND content
  21. 21. Government has a responsibility to be accessible Access by Default #GWO2016 @kskeene
  22. 22. 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
  23. 23. But we weren’t there yet
  24. 24. But we weren’t there yet
  25. 25. Accessible Platform Initiative WCAG 2.0 (Level AA) compliant code and design
  26. 26. Accessible Platform Initiative Partnership with AMAC to find the gaps AMAC provided 13 reports across ●13 themes ●33 page types
  27. 27. Review Research Improve 1 2 3
  28. 28. Accessible Platform Code: Result 24 code improvements ● link text ● tabbing visibility ● structural HTML and heading order 76 sites improved
  29. 29. Now for the really tedious part... Access by Default #GWO2016 @kskeene
  30. 30. We reviewed every element of every theme for color contrast and font legibility Access by Default #GWO2016 @kskeene
  31. 31. Accessible Platform Themes Using Common Tools: ● Google Chrome ○ FontFace Ninja ○ ColorZilla ● WebAIM Color Contrast Checker ● Google Spreadsheet Access by Default #GWO2016 @kskeene
  32. 32. Accessible Platform Themes
  33. 33. Before
  34. 34. After
  35. 35. Accessible Platform Themes: Result 13 themes updated ● color contrast ● text legibility 76 sites improved
  36. 36. WCAG 2.0 (Level AA)!
  37. 37. That’s great, but...
  38. 38. Why didn’t we do all that in the first place? Access by Default #GWO2016 @kskeene
  39. 39. Access by Default #GWO2016 @kskeene We didn’t know.
  40. 40. Access by Default #GWO2016 @kskeene
  41. 41. What You Can Do Access by Default #GWO2016 @kskeene
  42. 42. 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
  43. 43. Quick Wins - Checklist A11Y Project Checklist http://a11yproject.com/checklist.html Access by Default #GWO2016 @kskeene
  44. 44. 1. Color me accessible Access by Default #GWO2016 @kskeene
  45. 45. 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
  46. 46. Color Testing Test usability against color loss NoCoffee Vision Simulator for Chrome Access by Default #GWO2016 @kskeene
  47. 47. Color Testing
  48. 48. Build in color contrasts checkers for tools that allow users to select their own colors Building the Tools: Access by Default #GWO2016 @kskeene
  49. 49. 2. Type - Size Matters Access by Default #GWO2016 @kskeene
  50. 50. 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
  51. 51. 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
  52. 52. Touch Targets - Bigger is Better ●make touch targets as large as is reasonable ●at least 9mm high x 9mm wide ●surrounded by inactive space
  53. 53. 3. Image Descriptions Access by Default #GWO2016 @kskeene
  54. 54. 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="" … >
  55. 55. To Alt, or Not to Alt? Decision Tree: https://www.w3.org/WAI/ tutorials/images/decision-tree/ Access by Default #GWO2016 @kskeene
  56. 56. ● 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:
  57. 57. Text Representation for Glyphs Provide hidden text for glyphs and icons that aren’t images (e.g. Font Awesome icons)
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. 4. A Matter of Semantics (markup, that is) Access by Default #GWO2016 @kskeene
  62. 62. 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
  63. 63. 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>
  64. 64. 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
  65. 65. 5. Links Connect Us Access by Default #GWO2016 @kskeene
  66. 66. 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>
  67. 67. Links Just Say No to target="_blank"
  68. 68. Links Don’t remove :focus outlines ● ally.js can help you :focus http://allyjs.io/
  69. 69. Useful Link Text Read More Apply For Child Support ✗ ✓
  70. 70. Useful Link Text ●Provide relevant link text ●WAI-ARIA attributes can add helpful text ○ aria-label ○ aria-labelledby
  71. 71. ARIA Labels for Useful Link Text <a href="/underwater-datacenter"> Read More</a>
  72. 72. ARIA Labels for Useful Link Text <a href="/underwater-datacenter" aria-label="Read more about Underwater Datacenters"> Read More</a>
  73. 73. 6. ARIA fills in gaps Access by Default #GWO2016 @kskeene
  74. 74. ARIA Landmark roles HTML attributes that provide “landmarks” for screen readers navigating a page ●<header role=“banner”> ●<div role=“search”>
  75. 75. 7. Form and Function Access by Default #GWO2016 @kskeene
  76. 76. Forms ● Each form field needs a <label> ● Place any help text between the <label> and <input> fields ● Use <fieldset> to group related fields
  77. 77. 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)
  78. 78. 8. Table it Access by Default #GWO2016 @kskeene
  79. 79. 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
  80. 80. 9. Javascript (I’ve got nothing witty for this one, sorry.) Access by Default #GWO2016 @kskeene
  81. 81. 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
  82. 82. Accessify all the things!
  83. 83. Accessify all the things?
  84. 84. Resources http://idreaminblue.com/accessible-resources/ ● Checklists & Guides ● Color Contrast Testers ● Drupal Resources ● Vision Simulators ● Open Source Accessibility Testing Access by Default #GWO2016 @kskeene
  85. 85. Access By Default Accessible code is better for everyone
  86. 86. We’re hiring! Drupal Solutions Analyst contact me: @kskeene

×