Upgrade to Pro — share decks privately, control downloads, hide ads and more …

P.S. I Love You – A Story About Web Accessibility

Ab1837782bc07b80199a2290c6372643?s=47 Emanuel Blagonic
September 24, 2016

P.S. I Love You – A Story About Web Accessibility

Yes. We say I love you all too often, and yes – web *IS* the most transparent platform in the world. But, do we really think of all the users in the world that will access our website? We are not all the same. Every one of us uses the web differently. Some use it on their mobile phones, some on their tablets, some on their desktops and some on their televisions.

When building websites we don't think about *all* the users out there, aren't we? And the reason is often – money. We don't get enough of a budget to think of them. But let's be honest – we should do more. Is there something we should and can do? Is there a way to create a better website for *all the people out there* and not only the lucky ones?

In this talk I will explore how people with disabilities use the web and will give you some guidelines that will help you create better user experiences for everyone.

Ab1837782bc07b80199a2290c6372643?s=128

Emanuel Blagonic

September 24, 2016
Tweet

Transcript

  1. A story about web accessibility P.S. I LOVE YOU EMANUEL

    BLAGONIĆ WORDCAMP KYIV 2016
  2. None
  3. None
  4. None
  5. None
  6. None
  7. But, what a blind person 
 sees in the morning?

  8. ? And, what a deaf person hears in the morning?

  9. Nothing.

  10. People are emphatic in their nature.

  11. It is our obligation to think of every person in

    the world.
  12. None
  13. Think functional. Not visual.

  14. And what about the web?

  15. “ Web users ultimately want to get 
 at data

    quickly and easily. They 
 don't care as much about 
 attractive sites and pretty design. Sir Tim Berners–Lee, inventor of World Wide Web
  16. Meet the bad guy.

  17. None
  18. We are all bad guys.

  19. Web should be 
 open to everyone.

  20. Let’s ask ourselves a question – are we doing all

    we can?
  21. If you’re blind you don’t see that beautiful parallax effect.

  22. Information is important. Visuals are not.

  23. And, what about WordPress?

  24. To democratize publishing through Open Source, GPL software. WORDPRESS MISSION

  25. WordPress powers 
 26% of the web.

  26. WordPress is accessible.

  27. “ Technology is best when it 
 brings people together.

    Matt Mullenweg, co-founder of WordPress
  28. You don’t want to compromise on accessibility. REMEMBER THIS

  29. WCAG ARIA roles THE BASICS

  30. There are 3 levels of WCAG. We usually aim for

    the AA. THE BASICS
  31. “ All content should be perceivable, operable, understandable and robust.

    https://www.w3.org/WAI/WCAG20/glance/
  32. Provide text alternatives and captions, and make it accessible by

    assistive technologies. PERCEIVABLE
  33. Make everything accessible with a keyboard and easier to navigate.

    OPERABLE
  34. Make text readable and let it behave in predictable ways.

    Avoid using dark UX patterns. UNDERSTANDABLE
  35. Maximize compatibility with future versions. ROBUST

  36. “ A road to accessible web starts with us, caring

    about our users.
  37. Semantics STEP 1

  38. “ Support for accessibility leads to 
 well-crafted HTML. Lyza

    Gardner, co-author of Head First Mobile Web
  39. <div id=“header”>…</div> <div id=“main”>…</div> <div id=“footer”>…</div> ELEMENTS OF A WEB

    PAGE
  40. <div id=“page-header”> <ul id=“header-navigation”>…</ul> </div> <div id=“main”>…</div> <div id=“page-footer”> <ul

    id=“footer-navigation”>…</ul> </div> ELEMENTS OF A WEB PAGE
  41. <header id=“page-header”> <nav id=“header-navigation”>…</nav> </header> <div id=“main”>…</div> <footer id=“page-footer> <nav

    id=“footer-navigation”>…</nav> </footer> LET’S USE HTML5 TAGS
  42. But, something is missing. ARIA roles to the rescue! SEMANTICS

  43. <header role=“banner”> <nav id=“header-navigation”>…</nav> </header> <div id=“main” role=“main”>…</div> <footer role=“contentinfo”>

    <nav id=“footer-navigation”>…</nav> </footer> LET’S USE HTML5 TAGS
  44. <!-- Add aria-label if there is more than one navigation

    --> <nav id=“header-nav” aria-label=“Primary navigation”>…</nav> <nav id=“footer-nav” aria-label=“Secondary navigation”>…</nav> <!-- No need to use role=“main” if you use <main> and are not supporting older browsers like IE7 --> <main>…</main> THINGS TO NOTE, THOUGH
  45. <form> <!-- wait, no role? --> </form> WHAT ABOUT FORMS?

  46. <div role=“search”> <form> <!-- copy & paste your form here

    :) --> </form> </div> CREATING A SEARCH FORM
  47. “ ARIA isn't for making HTML 
 accessible. It's for

    making 
 inaccessible HTML accessible. Heydon Pickering, freelance web accessibility consultant, interface designer and writer
  48. — role="banner" for header — role="main" for main content —

    role="complementary" for sidebars — role="contentinfo" for footer — role="search" for search form — role="navigation" for navigation menus ARIA ROLES TO USE
  49. Headings STEP 2

  50. — Don’t use H1’s only
 HEADINGS

  51. <section><h1>…</h1> <section><h1>…</h1> <section><h1>…</h1> </section> </section> </section> BAD PRACTICE

  52. <section><h1>…</h1> <section><h2>…</h2> <section><h3>…</h3> </section> </section> </section> GOOD PRACTICE

  53. Don’t use H1’s only — Use proper heading structure (H1

    > H2 > H3…)
 HEADINGS
  54. <h1>WordPress.org</h1> <h4>WordPres Swag</h4> <h4>News From Our Blog</h4> <h5>WordPress 4.6.1 Security

    and Maintenance Release</h5> <h4>It’s Easy As…</h4> <h4>WordPress Users</h4> <h6>Code is Poetry</h6> A UNICORN DIED ON WORDPRESS.ORG
  55. <!-- Use H1 for showing Site Title on homepage only

    --> <div class=“site-branding”> <h1>Site Title</h1> <p>Site tagline</h1> </div> HOW TO USE H1
  56. <!-- On subpages you should use H1 for a Page

    Title --> <div class=“site-branding”> <p>Site Title</p> <p>Site tagline</h1> </div> SITE BRANDING ON SUBPAGES
  57. <h1>Page Title</h1> <h2>Primary Navigation</h2> <h2>Language Switcher</h2> <h2>Secondary Content</h2> <h3>Search</h3> HEADING

    STRUCTURE
  58. Don’t use H1’s only Use proper heading structure (H1 >

    H2 > H3…) — Make headings descriptive
 HEADINGS
  59. <h1>How to get to Kyiv?</h1> <h2>Arriving by airplane</h2> <h2>Arriving by

    car</h2> <h2>Arriving by train</h2> DESCRIPTIVE HEADINGS https://yoast.com/headings-use/
  60. Labels, links and text alternatives STEP 3

  61. — Provide meaningful alternate text
 LABELS, LINKS, AND TEXT ALTERNATIVES

  62. <img src=“birds.jpg” alt=“Image of birds in migration”> MEANINGFUL ALT TEXT

  63. Provide meaningful alternate text — Make links descriptive
 LABELS, LINKS,

    AND TEXT ALTERNATIVES
  64. <!-- Bad -->
 <a href=“#”>Click here</a> to learn more about

    our company <!-- Good -->
 Learn more about our company on our <a href=“#”>About us</a> page DESCRIPTIVE LINKS
  65. Provide meaningful alternate text Make links descriptive — Use ARIA

    labels to name objects
 LABELS, LINKS, AND TEXT ALTERNATIVES
  66. <header> <nav aria-label=“Primary Navigation”> <nav aria-label=“Secondary Navigation”> <nav aria-label=“Language Switcher”>

    </header> LABELS FOR OBJECTS
  67. <nav class=“pagination”> <ul> <li class=“prev”><a href=“#”>Previous</a></li> <li class=“active” aria-label=“Current Page”>

    <a href=“#”> <span class=“screen-reader-text”>Page </span>2 </a> </li> <li class=“prev”><a href=“#”>Next</a></li> </ul> </nav> LABELS FOR OBJECTS
  68. Provide meaningful alternate text Make links descriptive Use ARIA labels

    to name objects — Provide text alternative for non-text content LABELS, LINKS, AND TEXT ALTERNATIVES
  69. <div role="img" aria-labelledby="star_id"> <img src="fullstar.png" alt=""/> <img src="fullstar.png" alt=""/> <img

    src="fullstar.png" alt=""/> <img src="fullstar.png" alt=""/> <img src="emptystar.png" alt=""/> </div> <div id="star_id">4 of 5</div> TEXT ALTERNATIVE FOR NON-TEXT CONTENT
  70. Menu switchers STEP 4

  71. — Use buttons instead of a <div> to create switchers


    MENU SWITCHERS
  72. Use buttons instead of a <div> to create switchers —

    Use “aria-expanded” property to show if menu is open or closed MENU SWITCHERS
  73. <!-- When menu is not visible -->
 <button aria-expanded=“false” aria-controls=“menu”>Menu</button>

    <nav id=“menu” aria-expanded=“false”>…</nav> <!-- When menu is visible -->
 <button aria-expanded=“true” aria-controls=“menu”>Menu</button> <nav id=“menu” aria-expanded=“true”>…</nav> DESCRIPTIVE LINKS
  74. Screen reader text and keyboard access. STEP 5

  75. .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0;

    margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } SCREEN READER ONLY CSS
  76. <aside role=“complementary”> <h2 class=“screen-reader-text”>Additional Information</h2> </aside> SCREEN READER FRIENDLY HEADING

  77. <a href=“#content” class=“skip-link screen-reader-only”> Skip to content </a> <a href=“#footer”

    class=“skip-link screen-reader-only”> Skip to footer </a> SKIP LINKS
  78. :focus STEP 6

  79. — Make “skip links” first focusable element on your page


    :FOCUS
  80. Make “skip links” first focusable element on your page —

    Don’t remove :focus styles, rather improve them
 :FOCUS
  81. Make “skip links” first focusable element on your page Don’t

    remove :focus styles, rather improve them — Add an indication that something is focused (subtle background color, border or text decoration) :FOCUS
  82. Forms STEP 7

  83. <form> <ol> <li> <label for=“firstname”>First Name</label> <input type=“text” name=“firstname” id=“firstname”>

    </li> </ol> </form> FORMS
  84. <form> <ol> <li> <label for=“firstname” class=“screen-reader-only”>
 First Name</label> <input type=“text”

    name=“firstname” id=“firstname” placeholder=“First Name”> </li> </ol> </form> HIDING LABELS IN FORMS
  85. Text sizes and contrast STEP 8

  86. — Make text readable
 TEXT SIZES AND CONTRAST

  87. Make text readable — Allow users to change text size


    TEXT SIZES AND CONTRAST
  88. Make text readable Allow users to change text size —

    Use fonts of appropriate weights
 TEXT SIZES AND CONTRAST
  89. Make text readable Allow users to change text size Use

    fonts of appropriate weights — Contrast ratio should be 4,5:1 for AA 
 and 7:1 for AAA TEXT SIZES AND CONTRAST
  90. Foreground: #333 Background: #fff Ratio 12,63:1 / AAA Foreground: #666

    Background: #fff Ratio 5,74:1 / AA Foreground: #999 Background: #fff Ratio 2,85:1 / Fail Foreground: #fff Background: #000 Ratio 21:1 / AAA
  91. Bad Visibility

  92. Better Visibility

  93. Best Visibility

  94. ? So, what is the current 
 status of web

    accessibility?
  95. “ One teacher, one book, and one pen can change

    the world. Malala Yousafzai
  96. ? What’s the current status of
 WordPress accessibility?

  97. Joe Dolson, Andrea Fercia, Rian Rietveld, Graham Armfield, Mike Little,

    and Morten Rand-Hendriksen
  98. They are our heroes. And we can help them! https://make.wordpress.org/accessibility/

  99. If we want to have a truly open web –

    every person matters.
  100. Because the person we’re missing out, could one day become

    a person who will change the world.
  101. Thank you. Have a question? Ask me on Twitter —

    @eblagonic
  102. AInspector Sidebar (Accessibility Evaluator)
 http://firefox.cita.illinois.edu/ Web Accessibility Checker
 http://achecker.ca/checker/index.php Inclusive

    Design Patterns (Book)
 https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/
  103. Practical ARIA examples
 http://heydonworks.com/practical_aria_examples/ Color Contrast Checker
 http://webaim.org/resources/contrastchecker/ WordPress Theme

    Review Accessibility guidelines
 https://make.wordpress.org/themes/handbook/review/accessibility/required/