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

HoP - Web Accessibility

danielwang
February 01, 2019
49

HoP - Web Accessibility

danielwang

February 01, 2019
Tweet

Transcript

  1. Agenda Why accessibility matters? Accessibility Guidelines & Standards Accessibility layers

    • Coding for a11y Testing Tools • Video A11y project - Careers and Apply case study (Manila) PageUp A11y Maturity
  2. PageUp main users groups Keyboard users Use keyboard rather than

    mouse Have full sight Low vision users Color blindness Magnify content by zoom Screen reader users Use screen reader software Have no sight
  3. WCAG 2.1 Web Content Accessibility Guidelines 78 total criteria organized

    as 13 guidelines under 4 principles Perceivable Users must be able to perceive the information being presented Operable Users must be able to operate the interface Understandable Users must be able to understand the information on the interface Robust Users must be able to access the content as technologies advance
  4. A11y Layers Code HTML, CSS, JS, ARIA Visual Design Color

    contrast, icons, typography, layout, responsive, touch targets Focus states, active indicator Content Information architecture, images, videos, captions, simple language
  5. Coding for A11y - HTML Native HTML5 = Semantic markup

    = Accessibility <a> <button> <input type=”phone” required /> <select> Native HTML tag <nav> <header> <main> <section> <figure> <h1> <table> Semantic <div> <span> <p> <b> <i> Non semantic
  6. Coding for A11y - ARIA tags Web Accessibility Initiative (WAI)

    Accessible Rich Internet Applications (ARIA) ARIA is a specification from the W3C and created to improve accessibility of applications by providing extra information to assistive technologies, such as screen readers, via attributes which could be added to HTML. Roles States and Properties
  7. Coding for A11y - ARIA tags Disabled Hidden Selected Checked

    Drag and drop Live regions Modal States and Properties Button Checkbox Link Radio Scrollbar Searchbox Slider Switch Tab Tabpanel Option Progressbar Textbox Treeitem Widgets Banner Complementary Contentinfo Form Main Navigation Search Application Landmarks
  8. <body> <a href="#gel-main" class="sr-only sr-only-focusable" >Skip to main content </a>

    <nav id="gel-navbar" class="navbar navbar-expand-sm navbar-dark bg-navy" role="navigation"> </nav> <aside id="gel-menu" role="sidebar"> <a href="#" class="nav-toggle close" aria-label="Close menu" aria-expanded= "false"> <i aria-hidden= "true" class="gel-icon-close gel-icon-lg" ></i> </a> <a href="../" class="logo"> <img alt="brand logo" src="../site-images/pu-logo.png" width="100" /></a> <article class= "user-menu"> </article> <menu class="scroll" role="menu"> </menu> </aside> <header id="gel-header" role="banner"> </header> <main id="gel-main" role="main"> <section class= "container"> </section> </main> • Accessible • Semantic
  9. Coding for A11y - CSS Don’ts :before, :after { content:

    “previous page” } :hover {} px DO’s :focus {} :active{} rem
  10. Coding for A11y - CSS .sr-only { position: absolute; width:

    1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <i class="gel-icon-help gel-icon-lg" aria-hidden="true"></i> <span class="sr-only">Help</span> </a>
  11. Coding for A11y - JavaScript function toggleMenu() { menuIcon.addEventListener('click', function

    () { sideBar.classList.toggle('open'); if (sideBar.classList == "") { setAriaExpanded('false'); } else { setAriaExpanded('true'); } }); } // screen reader accessibility function setAriaExpanded(val) { for (var i = 0; i < menuIcons.length; i++) { menuIcons[i].setAttribute('aria-expanded', val); } }
  12. A11Y - Assistive Technology - Screen Readers VoiceOver + Safari

    JAWS + Internet Explorer NVDA + Firefox
  13. Be wary of browser differences Internet Explorer Chrome 12 key

    presses to navigate 6 items 6 key presses to navigate 6 items IE defines SVG elements as focus-able. The first keypress puts focus on the anchor and second moves the focus to the SVG.
  14. ARIA and when not to use it <div class=”heading1”>header</div> <div

    class=”paragraph”>I’m a cute butterfly<div> vs <h1>header</h1> <p>I’m a cute butterfly</p> <h1 role=”tab”>header<h1> vs <div role=”tab”> <h1>header<h1> </div> If you an use a native HTML element or attribute with the semantics of behavior you require already built into it, then do so Do not change the native semantics
  15. Optimizing Quantitatively Managed Defined (Standard) Managed (Repeatable) Continually optimizing accessibility

    processes Actively managing, controlling standard accessibility processes Using standard, documented processes for accessibility across the organization Encouraging discipline and increasing the repeatability of accessibility processes Performing accessibility activities in an ad hoc, uncontrolled and reactive manner Initial (Chaotic) We are here A11y Maturity Model
  16. accessibility chapter-frontend So what now? Join some channels Empathize with

    our users Use your software with the keyboard only Install a screen reader like NVDA to read out your software Check your web pages by using Wave
  17. Useful Links • Web Content Accessibility Guidelines (WCAG) 2.0 -

    W3C • https://www.w3.org/WAI/WCAG21/Understanding/ • https://github.com/filipelinhares/WAI-ARIA-cheatsheet • https://webaim.org/standards/wcag/checklist • https://knowledgeportal.pageuppeople.com/building-a-site-with-accessibility-in-mind/ • https://www.nvaccess.org/ • http://www.freedomscientific.com/Products/Blindness/JAWS • https://webaim.org/resources/contrastchecker/ • https://www.w3.org/TR/WCAG20/https://www.w3schools.com/html/html5_semantic_elements.asp • http://w3c.github.io/html/dom.html#allowed-aria-roles-states-and-properties • https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh • http://accessibility.voxmedia.com/