Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
350
CSS Architecture
danielwang
0
12
Choosing the right UI patterns
danielwang
0
10
GEL Doc
danielwang
0
53
HoP - WAI-ARIA
danielwang
0
37
Usability Overview
danielwang
0
53
Responsive Design
danielwang
0
69

Featured

See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Navigating Team Friction
lara
183
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building an army of robots
kneath
302
43k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
KATA
mclloyd
29
14k
For a Future-Friendly Web
brad_frost
175
9.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k

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