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

Accessibility and how to get the most from your screenreader - EpicFEL

Edd S
September 26, 2015

Accessibility and how to get the most from your screenreader - EpicFEL

Building an interactive accessible website is often thought of as a black art. Covering some of the mistakes and pitfalls we made building GOV.UK, including building a single page "app", I will explain how you can check to see how accessible your websites are. You should come away armed with the ability to start checking and improving your sites today.

Edd S

September 26, 2015
Tweet

More Decks by Edd S

Other Decks in Technology

Transcript

  1. *
    Accessibility and
    how to get the
    most from your
    screenreader

    View full-size slide

  2. 1. Background
    !
    2. Developing a single page
    JavaScript thing on GOV.UK
    !
    3. General accessibility
    learnings
    @edds

    View full-size slide

  3. Up until a week ago I was a
    Senior Developer at the
    Government Digital Service
    @edds

    View full-size slide

  4. Building the Government’s
    award winning GOV.UK
    @edds

    View full-size slide

  5. However, let’s just clear
    something up quite quickly…
    @edds

    View full-size slide

  6. …just because I’m a former
    Government employee…
    @edds

    View full-size slide

  7. …and I know what you’re
    all thinking…
    @edds

    View full-size slide

  8. @edds
    …it’s:
    Edd Sowden
    not
    Ed Snowden

    View full-size slide

  9. GOV.UK is the best place to
    find government information
    and services
    @edds

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Voiceover comes with OS X
    and iOS, you already have it.
    @edds

    View full-size slide

  13. *
    Developing a single
    page JavaScript
    thing on GOV.UK

    View full-size slide

  14. 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
    Childcare and parenting
    Includes giving birth, fostering, adopting,
    benefits for children, childcare and schools
    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, admissions and
    apprenticeships
    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
    24
    Ministerial departments
    331
    Other agencies and public bodies
    The websites of all government departments and many other
    agencies and public bodies have been merged into GOV.UK.
    Here you can see all policies, announcements, publications,
    statistics and consultations.
    Find out how government services are performing and how
    satisfied users are.
    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
    Log in to student finance
    Book your theory test
    Employment and Support Allowance
    Search GOV.UK
    Browse
    @edds

    View full-size slide

  15. Quick
    prototype
    @edds

    View full-size slide

  16. Let’s build it…
    @edds

    View full-size slide

  17. *
    By starting with
    HTML you’re forced
    to think about what
    you want to say to
    your users

    View full-size slide



  18. Benefits

    Benefits entitlement
    ...


    Births, deaths, marriages and care
    ...

    @edds

    View full-size slide



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



    Benefits

    Certificates, register offices
    ...


    @edds

    View full-size slide

  20. Let’s open that markup in our
    screen reader
    @edds

    View full-size slide

  21. *
    Listening to your
    website lets you
    find out if it’s
    saying what you
    intended it to say

    View full-size slide

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

    View full-size slide

  23. By default VoiceOver will
    read the entire page when
    you navigate to it
    @edds

    View full-size slide

  24. Let’s pretend we had just
    navigated to ‘Child benefits’
    @edds

    View full-size slide

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

    View full-size slide


  26. Benefits

    Certificates, register offices
    ...




    Benefits
    Births, deaths, marriages and care
    ...


    @edds

    View full-size slide

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

    View full-size slide

  28. ARIA
    Accessible Rich Internet Applications
    @edds

    View full-size slide

  29. “[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
    @edds

    View full-size slide

  30. @edds
    aria-atomic
    aria-busy (state)
    aria-controls
    aria-describedby
    aria-disabled (state)
    aria-dropeffect
    aria-flowto
    aria-grabbed (state)
    aria-haspopup
    aria-hidden (state)
    aria-invalid (state)
    aria-label
    aria-labelledby
    aria-live
    aria-owns
    aria-relevant

    View full-size slide

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

    View full-size slide

  32. @edds
    GDS
    @edds

    View full-size slide

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

    View full-size slide

  34. aria-live is best used for
    status messages or
    notifications not blocks of text
    @edds

    View full-size slide

  35. We removed aria-live and
    instead move focus to the
    newly added heading
    @edds

    View full-size slide

  36. $(‘h1’).focus();
    @edds

    View full-size slide

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

    View full-size slide

  38. @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

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

    View full-size slide

  40. Ship it!
    @edds

    View full-size slide

  41. *
    General
    accessibility
    learnings

    View full-size slide

  42. 1.
    !
    HTML5 enables you group
    items using semantic tags,
    aria lets you name them
    @edds

    View full-size slide

  43. @edds
    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] !

    View full-size slide

  44. 2.!
    !
    Reading entire pages from
    start to finish often isn’t how
    people use screen readers
    @edds

    View full-size slide

  45. Screen reader users can
    browse by headings and
    links to jump to content
    @edds

    View full-size slide

  46. @edds
    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]

    View full-size slide

  47. Departments Worldwide How government works Get involved
    Policies Publications Consultations Statistics Announcements
    GOV.UK
    Guidance
    Pet cemeteries: where you can build
    them and how to register
    From: Animal and Plant Health Agency and Department for Environment, Food
    & Rural Affairs
    First published: 5 September 2014
    Last updated: 13 October 2014 , see all updates
    Part of: Guidance for the animal by-product industry, Protecting animal health
    and preventing disease, including in trade, Food and farming and + others
    Applies to: England, Scotland and Wales
    The animal carcasses you bury at a pet cemetery are animal by-products (ABPs).
    Find out about the different categories of ABP.
    Building your pet cemetery
    Where you can build a pet cemetery, the animals you can bury there, how it must be built and
    how to register.
    Contents
    Building your pet cemetery
    Where you can build a pet
    cemetery
    How your pet cemetery
    must be built
    Search
    @edds

    View full-size slide

  48. 3.!
    !
    Some ARIA properties need to
    exist at page load to be picked
    up by Accessibility APIs
    @edds

    View full-size slide

  49. 4.!
    !
    Avoid recreating native
    elements
    @edds

    View full-size slide

  50. @edds

    Start now

    View full-size slide

  51. Dictation users say what
    they see, like “click button”
    @edds

    View full-size slide


  52. Start now

    @edds

    View full-size slide

  53. When attempting to recreate
    native elements it’s easy to
    forget to add accessibility
    hooks, like using space bar
    to click buttons.
    @edds

    View full-size slide

  54. 5.!
    !
    Don’t add too much extra
    “semantic” markup
    @edds

    View full-size slide



  55. Your name



    Your email



    @edds

    View full-size slide

  56. @edds
    !
    !
    Your name

    !
    !
    Your email

    !

    View full-size slide

  57. In summary…
    @edds

    View full-size slide

  58. *
    Start with HTML as!
    it forces you to
    think about what
    you want to say to
    your users

    View full-size slide

  59. *
    Listen to your
    website to see if
    your message is
    communicated to
    your users

    View full-size slide

  60. *
    Edd Sowden

    @edds
    Thank you!

    View full-size slide