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

How to make your frontend accessible

How to make your frontend accessible

Frontend Conference Zürich 2013, Werner Hänggi & Thomas Jaggi.

- How to avoid some major barriers for disabled users.
- How to test for basic accessibility using VoiceOver.
- Where to find relevant information regarding technical solutions.

Thomas Jaggi

August 29, 2013
Tweet

More Decks by Thomas Jaggi

Other Decks in Programming

Transcript

  1. How to make your frontend accessible
    Frontend Conference Zurich, 30th August 2013
    Werner Hänggi & Thomas Jaggi

    View Slide

  2. © Unic & AdNovum -
    What you will learn today
    • How to avoid some major barriers for disabled users
    • How to test for basic accessibility
    • Where to find relevant information
    2

    View Slide

  3. © Unic & AdNovum -
    1. Why care about accessibility?
    2. How to test for screen reader accessibility
    Demo 1: Table markup
    Demo 2: Form markup and validation
    3. Use the WCAG 2.0 to guide you
    4. How to take care of keyboard accessibility
    Demo 3: Element focus
    Demo 4: Buttons and interaction
    5. Resources
    6. Q & A
    Agenda
    3

    View Slide

  4. © Unic & AdNovum -
    • Werner Hänggi
    • Software developer
    • Degree in computer science from the Swiss Federal Institute of
    technology
    About us
    4
    • Thomas Jaggi
    • Frontend Engineer
    • Degree in nutrition science from the Swiss Federal Institute of
    technology

    View Slide

  5. © Unic & AdNovum -
    About our employers
    • AdNovum – Swiss Engineering Quality
    • Core Competence: High-End Security & Software Engineering
    • Est. 1988 – privately owned joint-stock company
    • Zurich (HQ), Bern, Budapest (Hungary), Singapore
    • 350 employees, 70% graduate engineers
    • Job openings: http://www.adnovum.ch/unternehmen/karriere/stellenangebote.html
    • Unic – Successful in e-business since 1996
    • Founded in 1996 in Switzerland
    • We design, develop and maintain premium e-business solutions
    for e-commerce, digital communication and collaboration
    • We are an independent, owner-operated group with 220 employees
    • Offices in Bern, Karlsruhe, Munich, Vienna and Zurich
    • Job openings (frontend, IA, design etc.): http://www.unic.com/ch/de/about/career/jobs.html
    5

    View Slide

  6. © Unic & AdNovum -
    «The power of the Web is in its
    universality. Access by everyone
    regardless of disability is an essential
    aspect.»
    Tim Berners-Lee, W3C Director and inventor of the World Wide Web
    1. Why care about accessibility?
    6

    View Slide

  7. © Unic & AdNovum -
    http://www.bfs.admin.ch/bfs/portal/de/index/themen/20/06/blank/key/01.html
    That’s why
    1/6
    • Swiss Federal Statistical Office (2011): «According to various sources the number
    of people with disabilities can be estimated to be about 1.4 millions.»
    7

    View Slide

  8. • Example: VoiceOver
    • Apple’s built-in screen reader
    • Activate: System Preferences > Accessibility > VoiceOver
    • Toggle: Command-F5
    Further reading: http://www.apple.com/accessibility/osx/voiceover/
    © Unic & AdNovum -
    2. How to test for screen reader accessibility?
    8

    View Slide

  9. © Unic & AdNovum -
    • Windows:
    • Jaws (commercial):
    http://www.freedomscientific.com/products/fs/jaws-product-page.asp
    • Window-Eyes (commercial): http://www.gwmicro.com/Window-Eyes/
    • NVDA (open source): http://www.nvaccess.org/
    • Linux:
    • Orca (open source, bundled with GNOME): https://projects.gnome.org/orca/
    Further reading: http://webaim.org/techniques/screenreader/
    Screen reader alternatives to VoiceOver
    9

    View Slide

  10. © Unic & AdNovum -
    Demo 1: Tables
    • Take home messages:
    • Use for header cells (with scope attribute if indicated)
    • Use for description
    • Links:
    • http://unic.github.io/FrontendAccessibilityTalk/1-1_table-inaccessible.html
    • http://unic.github.io/FrontendAccessibilityTalk/1-2_table-accessible.html
    10

    View Slide

  11. © Unic & AdNovum - 11
    coresince84 / photocase.com

    View Slide

  12. © Unic & AdNovum -
    • Example: VoiceOver on iOS
    • Activate: Settings > General > Accessibility > VoiceOver
    • Quick toggle: Settings > General > Accessibility > Triple-click home > VoiceOver
    Mobile phones have screen readers, too
    12

    View Slide

  13. © Unic & AdNovum -
    3. Use the WCAG 2.0 to guide you
    • WCAG: Web Content Accessibility Guidelines
    • W3C Recommendation, http://www.w3.org/TR/WCAG/
    «Following these guidelines will make content accessible to
    a wider range of people with disabilities, including
    blindness and low vision, deafness and hearing loss, learning
    disabilities, cognitive limitations, limited movement, speech
    disabilities, photosensitivity and combinations of these.
    Following these guidelines will also often make your Web
    content more usable to users in general.»
    13

    View Slide

  14. © Unic & AdNovum -
    How the WCAG are structured
    • 4 principles
    • perceivable
    • operable
    • understandable
    • robust
    • 12 guidelines
    • Testable success criteria for each guideline
    • 3 conformance levels for success criteria: A (lowest), AA, AAA (highest)
    • Sufficient and advisory techniques to meet a criterion
    14

    View Slide

  15. © Unic & AdNovum -
    See http://www.w3.org/TR/WCAG20/#minimize-error
    • Example of success criterion regarding form elements:
    • Principle 3: Understandable: Information and the operation of user interface
    must be understandable.
    • Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.
    • 3.3.2 Labels or Instructions: Labels or instructions are provided when
    content requires user input. (Level A)
    • Sufficient Techniques for 3.3.2 - Labels or Instructions
    • G131: Providing descriptive labels
    • H90: Indicating required form controls using label or legend
    WCAG example: form labels
    15

    View Slide

  16. © Unic & AdNovum -
    Demo 2: Form markup and validation
    • Take home messages:
    • Use a for every field
    • Indicate required fields with text inside the label.
    Use required and aria-required attributes as progressive enhancement.
    • Tell the user if input is invalid by inserting an error message into the label and
    focusing the first invalid field.
    Use aria-invalid as progressive enhancement. In the future, aria-
    describedby might be sufficient to connect errors to the corresponding field.
    • Links:
    • http://unic.github.io/FrontendAccessibilityTalk/2-1_form-inaccessible.html
    • http://unic.github.io/FrontendAccessibilityTalk/2-2_form-accessible.html
    • http://unic.github.io/FrontendAccessibilityTalk/2-3_form-aria.html
    • http://unic.github.io/FrontendAccessibilityTalk/2-4_form-html5.html
    16

    View Slide

  17. © Unic & AdNovum - 17
    MANÜ! / photocase.com

    View Slide

  18. © Unic & AdNovum -
    4. How to take care of keyboard accessibility
    • Take home messages:
    • Do not remove focus outline
    • If you do anyway: apply new, obvious focus styles
    • Use natively accessible elements like or
    • If you do not: add role=”button” and tabindex=”0” and create
    keydown listeners for space and enter keys
    • Links:
    • http://unic.github.io/FrontendAccessibilityTalk/3-1_focus-inaccessible.html
    • http://unic.github.io/FrontendAccessibilityTalk/3-2_focus-accessible.html
    • http://unic.github.io/FrontendAccessibilityTalk/4-1_button-inaccessible.html
    • http://unic.github.io/FrontendAccessibilityTalk/4-2_button-accessible.html
    18

    View Slide

  19. © Unic & AdNovum - 19
    We can make a difference.

    View Slide

  20. © Unic & AdNovum -
    • Guidelines:
    • WCAG 2.0 (@w3c_wai): http://www.w3.org/TR/WCAG20/
    • P028: http://www.isb.admin.ch/themen/standards/alle/03237/
    • Consulting and certification:
    • Access for all (@Access4All): http://www.access-for-all.ch
    • Research, recommendations and news:
    • The Paciello Group by Steve Faulkner (@stevefaulkner) & Co.: http://www.paciellogroup.com/
    • WebAIM (@WebAIM) by Jared Smith (@jared_w_smith) & Co. : http://webaim.org/
    • Simply Accessible by Derek Featherstone (@feather): http://simplyaccessible.com/
    • Accessible Culture by Jason Kiss (@jkiss): http://accessibleculture.org/
    • Juicy Studio by Gez Lemon (@gezlemon): http://juicystudio.com/
    • Karl Groves (@karlgroves): http://www.karlgroves.com/
    • Marco’s accessibility blog (@MarcoZehe): http://www.marcozehe.de/
    • The Accessibility Project (@ A11YProject): http://a11yproject.com/
    5. Resources
    20

    View Slide

  21. © Unic & AdNovum -
    5. Resources: Solutions for interactive elements
    • Guidelines:
    • WAI-ARIA 1.0: http://www.w3.org/TR/wai-aria/
    • WAI-ARIA 1.0 Authoring Practices: http://www.w3.org/TR/wai-aria-practices/
    • Tabs:
    • «Accessible ARIA Tabs» by Jason Kiss (@jskiss): http://www.accessibleculture.org/research/aria-tabs/
    • «jQuery Accessible Tabs - How to make tabs REALLY accessible» by Dirk Ginader (@ginader):
    http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php
    • Dialogs:
    • «The Incredible Accessible Modal Window» by Greg Kraus (@gdkraus):
    http://accessibility.oit.ncsu.edu/training/aria/modal-window/
    • «BPOW: Modal window focus management» by Jeff Smith (@jeffsmith):
    http://simplyaccessible.com/bpow/modal-focus/
    • Menus:
    • «Accessible Mega Menu» by Adobe (@ AdobeAccess):
    http://adobe-accessibility.github.io/Accessible-Mega-Menu/
    • «Accessible Dropdown Menus» by Terrill Thompson (@terrillthompson): http://terrillthompson.com/blog/202
    21

    View Slide

  22. © Unic & AdNovum - 22
    Q & A

    View Slide

  23. © Unic & AdNovum - 23

    View Slide

  24. Röntgenstrasse 22
    8005 Zürich
    Telefon +41 44 272 61 11
    Fax +41 44 272 63 12
    [email protected]
    www.adnovum.ch
    AdNovum
    Informatik AG
    © Unic - Seite
    Unic AG
    Hohlstrasse 536
    8048 Zürich
    Schweiz
    Tel +41 44 560 12 12
    [email protected]
    Unic AG
    Thomas Jaggi
    [email protected]
    Werner Hänggi
    [email protected]

    View Slide