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

A11Y workshop

danielwang
March 11, 2020
0
22

A11Y workshop

danielwang

March 11, 2020
Tweet

More Decks by danielwang

See All by danielwang
Design System General Knowledge
danielwang
0
61
Design Thinking
danielwang
0
58
Design Tokens
danielwang
1
340
CSS Architecture
danielwang
0
10
Choosing the right UI patterns
danielwang
0
10
GEL Doc
danielwang
0
51
HoP - WAI-ARIA
danielwang
0
36
Usability Overview
danielwang
0
53
Responsive Design
danielwang
0
69

Featured

See All Featured
Unsuck your backbone
ammeep
668
57k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
What's in a price? How to price your products and services
michaelherold
243
12k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
BBQ
matthewcrist
85
9.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
How STYLIGHT went responsive
nonsquared
95
5.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Speed Design
sergeychernyshev
24
570

Transcript

  1. Accessibility Web Accessibility Workshop

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

    • Visual design for A11y • Coding for A11y Testing Tools Next actions

  3. Inclusive Design

  4. None

  5. Inclusive Design Accessibility Usability Human Centred Design

  6. Disability Types

  7. 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

  8. Guidelines & Standards

  9. 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
  10. None

  11. A11y Layers

  12. 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

  13. Visual and Interaction Layer

  14. Design - Accessibility

  15. Accessibility Responsive Desktop Minimum touchable area on responsive: 42x42px

  16. None
  17. None

  18. Code Layer

  19. None

  20. 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

  21. 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

  22. Coding for A11y - ARIA tags - Roles - Landmarks

  23. 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

  24. <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

  25. Coding for A11y - CSS Don’ts :before, :after { content:

    “previous page” } :hover {} px DO’s :focus {} :active{} rem

  26. 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>
  27. None

  28. 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); } }

  29. Testing Tools

  30. A11Y - Tools

  31. None
  32. None

  33. A11Y - Assistive Technology - Screen Readers VoiceOver + Safari

    NVDA + Internet Explorer JAWS + Firefox

  34. Video

  35. None

  36. What is next? Phase 1 • Run the evaluation tools

    • Start from visual accessibility • Focus on keyboard navigation Phase 2 • Content accessibility • Screen reader