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

Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns

Edd S
February 11, 2015

Accessibility and how to get the most from your screenreader - Pivotal Lunch & Learns

Building an interactive accessible website is often thought of as a black art. It is commonly believed that JavaScript powered sites can't be accessible. Covering some of the mistakes and pitfalls his team made building GOV.UK, including building a single page "app", Edd will explain how you can check to see how you are currently doing. He will show you how checking your accessibility isn't as scary as you first thought. Edd will cover real world accessibility and give you practical tips and tools you can use to improve your sites today.

Edd S

February 11, 2015
Tweet

More Decks by Edd S

Other Decks in Programming

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. GDS
    @edds
    12 million visitors every week
    Home to over 330 departments and
    organisations
    Saving more than £60 million a year

    View full-size slide

  8. *
    Relentlessly
    focused
    on user needs
    GDS
    @edds

    View full-size slide

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

    View full-size slide

  10. Colour contrast
    GDS
    @edds

    View full-size slide

  11. Colour contrast
    GDS
    @edds

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Services and
    information
    GDS
    @edds

    View full-size slide

  17. Quick prototype
    GDS
    @edds

    View full-size slide

  18. Start with HTML

    View full-size slide



  19. Benefits

    Benefits entitlement
    ...


    Births, deaths, marriages and care
    ...

    GDS
    @edds

    View full-size slide



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



    Benefits

    Certificates, register offices
    ...


    GDS
    @edds

    View full-size slide

  21. Listen to your
    website

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  25. Benefits

    Certificates, register offices
    ...




    Benefits
    Births, deaths, marriages and care
    ...


    GDS
    @edds

    View full-size slide

  26. We are happy with the markup. Next
    let’s look at adding some JavaScript
    GDS
    @edds

    View full-size slide

  27. ARIA
    Accessible Rich Internet Applications
    GDS
    @edds

    View full-size slide

  28. “[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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

  36. By using focus rather than aria-live
    we also helped keyboard only users
    GDS
    @edds

    View full-size slide

  37. Ship it!
    GDS
    @edds

    View full-size slide

  38. General accessibility learnings
    GDS
    @edds

    View full-size slide

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

    View full-size slide


  40. ...
    ...

    GDS
    @edds

    View full-size slide

  41. Benefits
    Includes tax credits, eligibility and appeals
    Births, deaths, marriages and care
    Parenting, civil partnerships, divorce and
    Lasting Power of Attorney
    Business and self-employed
    Tools and guidance for businesses
    Citizenship and living in the UK
    Voting, community participation, life in the
    UK, international projects
    Crime, justice and the law
    Legal processes, courts and the police
    Disabled people
    Includes carers, your rights, benefits and
    the Equality Act
    Driving and transport
    Includes vehicle tax, MOT and driving
    licences
    Education and learning
    Includes student loans and admissions
    Employing people
    Includes pay, contracts and hiring
    Environment and countryside
    Includes flooding, recycling and wildlife
    Housing and local services
    Owning or renting and council services
    Money and tax
    Includes debt and Self Assessment
    Passports, travel and living abroad
    Includes renewing passports and travel
    advice by country
    Visas and immigration
    Visas, asylum and sponsorship
    Working, jobs and pensions
    Includes holidays and finding a job
    Services and information
    Changes to vehicle tax
    From 1 October 2014, you won’t need a
    paper tax disc and you’ll be able to pay by
    GOV.UK blogs
    Search the list of GOV.UK blogs, and find
    one to match your interest.
    Keep warm this winter
    Find out how to save energy and keep warm
    this winter.
    24
    Ministerial departments
    331
    Other agencies and public bodies
    The websites of all government departments and many other
    agencies and public bodies are being merged into GOV.UK.
    Here you can see all policies, announcements, publications,
    statistics and consultations.
    GOV.UK
    Welcome to GOV.UK
    The best place to find government services and information
    Simpler, clearer, faster
    Popular on GOV.UK
    Universal Jobmatch job search
    Renew vehicle tax (tax disc)
    Log in to student finance
    Book your theory test
    Employment and Support Allowance
    Search GOV.UK
    GDS
    @edds

    View full-size slide

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

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

    View full-size slide

  44. Instead they can browse by headings
    and links to jump to content faster
    GDS
    @edds

    View full-size slide

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

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

    View full-size slide

  47. Too much markup
    GDS
    @edds

    View full-size slide



  48. Your name



    Your email



    GDS
    @edds

    View full-size slide

  49. !
    !
    Your name

    !
    !
    Your email

    !
    GDS
    @edds

    View full-size slide

  50. Listen to your
    website

    View full-size slide

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

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

    View full-size slide

  53. Edd Sowden

    Senior Developer 

    Government Digital Service

    @edds

    View full-size slide