$30 off During Our Annual Pro Sale. View Details »

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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. GDS
    @edds
    12 million visitors every week
    Home to over 330 departments and
    organisations
    Saving more than £60 million a year

    View Slide

  8. *
    Relentlessly
    focused
    on user needs
    GDS
    @edds

    View Slide

  9. GDS
    @edds

    View Slide

  10. GDS
    @edds

    View Slide

  11. GDS
    @edds

    View Slide

  12. GDS
    @edds

    View Slide

  13. GDS
    @edds

    View Slide

  14. View Slide

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

    View Slide

  16. Colour contrast
    GDS
    @edds

    View Slide

  17. Colour contrast
    GDS
    @edds

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. Services and
    information
    GDS
    @edds

    View Slide

  23. Quick prototype
    GDS
    @edds

    View Slide

  24. View Slide

  25. Start with HTML

    View Slide

  26. GDS
    @edds

    View Slide



  27. Benefits

    Benefits entitlement
    ...


    Births, deaths, marriages and care
    ...

    GDS
    @edds

    View Slide

  28. GDS
    @edds

    View Slide



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



    Benefits

    Certificates, register offices
    ...


    GDS
    @edds

    View Slide

  30. Listen to your
    website

    View Slide

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

    View Slide

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

    View Slide

  33. View Slide

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

    View Slide


  35. Benefits

    Certificates, register offices
    ...




    Benefits
    Births, deaths, marriages and care
    ...


    GDS
    @edds

    View Slide

  36. GDS
    @edds

    View Slide

  37. View Slide

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

    View Slide

  39. ARIA
    Accessible Rich Internet Applications
    GDS
    @edds

    View Slide

  40. “[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 Slide


  41. GDS
    @edds

    View Slide

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

    View Slide

  43. GDS
    @edds

    View Slide

  44. GDS
    @edds

    View Slide

  45. GDS
    @edds

    View Slide

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

    View Slide

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

    View Slide

  48. GDS
    @edds

    View Slide

  49. GDS
    @edds

    View Slide

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

    View Slide

  51. GDS
    @edds

    View Slide

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

    View Slide

  53. ...
    GDS
    @edds

    View Slide

  54. ...
    GDS
    @edds

    View Slide

  55. View Slide

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

    View Slide

  57. View Slide

  58. 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 Slide

  59. View Slide

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

    View Slide

  61. View Slide

  62. Ship it!
    GDS
    @edds

    View Slide

  63. General accessibility learnings
    GDS
    @edds

    View Slide

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

    View Slide


  65. ...
    ...

    GDS
    @edds

    View Slide

  66. 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 Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. 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 Slide

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

    View Slide

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

    View Slide

  73. 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 Slide

  74. View Slide

  75. View Slide

  76. *

    View Slide

  77. View Slide

  78. View Slide

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

    View Slide

  80. Too much markup
    GDS
    @edds

    View Slide



  81. Your name



    Your email



    GDS
    @edds

    View Slide

  82. !
    !
    Your name

    !
    !
    Your email

    !
    GDS
    @edds

    View Slide

  83. Listen to your
    website

    View Slide

  84. 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 Slide

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

    View Slide

  86. Edd Sowden

    Senior Developer 

    Government Digital Service

    @edds

    View Slide