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

A11Y workshop

danielwang
March 11, 2020
0
19

A11Y workshop

danielwang

March 11, 2020
Tweet

More Decks by danielwang

See All by danielwang
Design System General Knowledge
danielwang
0
47
Design Thinking
danielwang
0
41
Design Tokens
danielwang
1
270
CSS Architecture
danielwang
0
9
Choosing the right UI patterns
danielwang
0
8
GEL Doc
danielwang
0
43
HoP - WAI-ARIA
danielwang
0
30
Usability Overview
danielwang
0
42
Responsive Design
danielwang
0
56

Featured

See All Featured
A better future with KSS
kneath
231
16k
For a Future-Friendly Web
brad_frost
172
9k
How STYLIGHT went responsive
nonsquared
92
4.8k
How GitHub (no longer) Works
holman
305
140k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Infographics Made Easy
chrislema
238
18k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Designing the Hi-DPI Web
ddemaree
276
33k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k

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