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

Accessibility and how to get the most from your screenreader - Front End North

Edd S
November 15, 2014

Accessibility and how to get the most from your screenreader - Front End North

Building an interactive accessible website is often thought of as a black art. A look at the learnings from building the Government's website, GOV.UK. I will talk about real world accessibility and practical tips and tools you can use today. Covering the mistakes and pitfalls we made building GOV.UK I will explain how to check to see how you are currently doing, and how accessibility isn't,as scary as you first thought.

Edd S

November 15, 2014
Tweet

More Decks by Edd S

Other Decks in Technology

Transcript

  1. Edd Sowden

    Senior Developer 

    Government Digital Service

    @edds

    View full-size slide

  2. Accessibility and how to get the
    most from your screenreader
    GDS
    @edds

    View full-size slide

  3. *
    I’m from the
    Government
    Digital Service
    GDS
    @edds

    View full-size slide

  4. We’re a team at the heart of
    government building digital
    public services
    GDS
    @edds

    View full-size slide

  5. *
    We started by
    building GOV.UK
    GDS
    @edds

    View full-size slide

  6. *
    The best place to
    find government
    services and
    information
    GDS
    @edds

    View full-size slide

  7. 9.5 million visitors every week
    GDS
    @edds

    View full-size slide

  8. 9.5 million visitors every week
    Home to over 220 departments and
    organisations
    GDS
    @edds

    View full-size slide

  9. GDS
    @edds
    9.5 million visitors every week
    Home to over 220 departments and
    organisations
    Saved more than £62 million

    View full-size slide

  10. *
    Relentlessly
    focused
    on user needs
    GDS
    @edds

    View full-size slide

  11. GOV.UK should work for everyone
    GDS
    @edds

    View full-size slide

  12. Colour contrast
    GDS
    @edds

    View full-size slide

  13. Colour contrast
    GDS
    @edds

    View full-size slide

  14. How many of you use Apple
    products regularly?
    GDS
    @edds

    View full-size slide

  15. How many of you test your
    websites in a screenreader?
    GDS
    @edds

    View full-size slide

  16. Voiceover comes with OS X and iOS
    !
    Windows and Gnome have Orca
    and NVDA that can be downloaded
    GDS
    @edds

    View full-size slide

  17. 1. Developing a feature on GOV.UK
    2. General learnings
    GDS
    @edds

    View full-size slide

  18. Services and
    information
    GDS
    @edds

    View full-size slide

  19. Quick prototype
    GDS
    @edds

    View full-size slide

  20. Start with HTML
    GDS
    @edds

    View full-size slide



  21. Benefits

    Benefits entitlement
    ...


    Births, deaths, marriages and care
    ...

    GDS
    @edds

    View full-size slide



  22. Benefits
    Births, deaths, marriages and care
    ...



    Benefits

    Certificates, register offices
    ...


    GDS
    @edds

    View full-size slide

  23. Listen to your website
    GDS
    @edds

    View full-size slide

  24. Let’s listen to how it sounds if we
    had just navigated to ‘Child benefits’
    GDS
    @edds

    View full-size slide

  25. Voiceover Keyboard shortcuts:
    !
    Voiceover on/off: [⌘] + [F5]
    GDS
    @edds

    View full-size slide

  26. The first thing in your markup
    should be the main part of the page
    GDS
    @edds

    View full-size slide


  27. Benefits

    Certificates, register offices
    ...




    Benefits
    Births, deaths, marriages and care
    ...


    GDS
    @edds

    View full-size slide

  28. We are happy with the markup. Next
    lets look at adding some JavaScript
    GDS
    @edds

    View full-size slide

  29. ARIA
    Accessible Rich Internet Applications
    GDS
    @edds

    View full-size slide

  30. “[ARIA] specifies how to increase the
    accessibility of web pages, in particular,
    dynamic content and user interface
    components developed with Ajax,
    HTML, JavaScript and related
    technologies”
    http://en.wikipedia.org/wiki/WAI-ARIA
    GDS
    @edds

    View full-size slide

  31. aria-busy=“true|false”>
    GDS
    @edds

    View full-size slide

  32. https://gdstechnology.blog.gov.uk/2014/08/14/
    improving-accessibility-on-gov-uk-search/
    GDS
    @edds

    View full-size slide

  33. aria-live is best used for status
    messages and notifications
    GDS
    @edds

    View full-size slide

  34. We removed aria-live and instead
    move the currently focused element
    GDS
    @edds

    View full-size slide

  35. $(‘h1’).focus();
    GDS
    @edds

    View full-size slide

  36. GDS
    @edds
    Voiceover Keyboard shortcuts:
    !
    Voiceover on/off: [⌘] + [F5]
    Voiceover key (VO): [ctrl] + [⌥]
    Continue reading: ! ! [VO] + [a]!

    View full-size slide

  37. GDS
    @edds
    Voiceover Keyboard shortcuts:
    !
    Voiceover on/off: [⌘] + [F5]
    Voiceover key (VO): [ctrl] + [⌥]
    Continue reading: [VO] + [a]
    Previous/next item:! ! [VO] + [right] or [left]!

    View full-size slide

  38. Using focus rather than aria-live we
    also helped keyboard only users
    GDS
    @edds

    View full-size slide

  39. Ship it!
    GDS
    @edds

    View full-size slide

  40. General accessibility learnings
    GDS
    @edds

    View full-size slide

  41. HTML5 enables you group items
    using semantic tags
    GDS
    @edds

    View full-size slide


  42. ...
    ...

    GDS
    @edds

    View full-size slide

  43. Voiceover Keyboard shortcuts:
    !
    Voiceover on/off: [⌘] + [F5]
    Voiceover key (VO): [ctrl] + [⌥]
    Continue reading: [VO] + [a]
    Previous/next item: [VO] + [right] or [left]
    Enter region: ! ! ! [VO] + [⇧] + [down] !
    Leave region: ! ! ! [VO] + [⇧] + [up] !
    GDS
    @edds

    View full-size slide

  44. Reading entire pages isn’t how
    people use their screen readers
    GDS
    @edds

    View full-size slide

  45. Instead they can browse by headings
    to jump to content faster
    GDS
    @edds

    View full-size slide

  46. Voiceover Keyboard shortcuts:
    !
    Voiceover on/off: [⌘] + [F5]
    Voiceover key (VO): [ctrl] + [⌥]
    Continue reading: [VO] + [a]
    Previous/next item: [VO] + [right] or [left]
    Enter region: [VO] + [⇧] + [down]
    Leave region: [VO] + [⇧] + [up]
    Rotor window:! ! ! [VO] + [u]
    GDS
    @edds

    View full-size slide

  47. Some ARIA properties need to exist
    at page load
    GDS
    @edds

    View full-size slide

  48. To much markup
    GDS
    @edds

    View full-size slide



  49. Your name



    Your email



    GDS
    @edds

    View full-size slide

  50. !
    !
    Your name

    !
    !
    Your email

    !
    GDS
    @edds

    View full-size slide

  51. Listen to your website
    GDS
    @edds

    View full-size slide

  52. Voiceover Keyboard shortcuts:
    !
    Voiceover on/off: [⌘] + [F5]
    Voiceover key (VO): [ctrl] + [⌥]
    Continue reading: [VO] + [a]
    Previous/next item: [VO] + [right] or [left]
    Enter region: [VO] + [⇧] + [down]
    Leave region: [VO] + [⇧] + [up]
    Rotor window: [VO] + [u]
    GDS
    @edds

    View full-size slide

  53. http://speakerdeck.com/edds
    GDS
    @edds

    View full-size slide

  54. Edd Sowden

    Senior Developer 

    Government Digital Service

    @edds

    View full-size slide