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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. @edds
    

    View Slide

11. @edds
    

    View Slide

12. @edds
    

    View Slide

13. @edds
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

19. Quick
    prototype
    @edds
    

    View Slide

20. View Slide

21. Let’s build it…
    @edds
    

    View Slide

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

    View Slide

23. @edds
    

    View Slide

24. @edds
    

    View Slide

25. 
    
    Benefits
    
    Benefits entitlement
    ...
    
    
    Births, deaths, marriages and care
    ...
    
    @edds
    

    View Slide

26. @edds
    

    View Slide

27. 
    
    Benefits
    Births, deaths, marriages and care
    ...
    
    
    
    Benefits
    
    Certificates, register offices
    ...
    
    
    @edds
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. View Slide

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

    View Slide

35. 
    Benefits
    
    Certificates, register offices
    ...
    
    
    
    
    Benefits
    Births, deaths, marriages and care
    ...
    
    
    @edds
    

    View Slide

36. @edds
    

    View Slide

37. View Slide

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

    View Slide

39. ARIA
    Accessible Rich Internet Applications
    @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
    @edds
    

    View Slide

41. @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 Slide

42. 
    @edds
    

    View Slide

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

    View Slide

44. @edds
    

    View Slide

45. @edds
    GDS
    @edds
    

    View Slide

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

    View Slide

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

    View Slide

48. @edds
    

    View Slide

49. @edds
    

    View Slide

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

    View Slide

51. @edds
    

    View Slide

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

    View Slide

53. ...
    @edds
    

    View Slide

54. ...
    @edds
    

    View Slide

55. View Slide

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

    View Slide

57. View Slide

58. @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
    @edds
    

    View Slide

61. View Slide

62. Ship it!
    @edds
    

    View Slide

63. *
    General
    accessibility
    learnings
    

    View Slide

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

    View Slide

65. 
    ...
    ...
    
    @edds
    

    View Slide

66. @edds
    

    View Slide

67. View Slide

68. @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 Slide

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

    View Slide

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

    View Slide

71. @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 Slide

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

73. View Slide

74. *
    

    View Slide

75. View Slide

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

    View Slide

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

    View Slide

78. @edds
    

    View Slide

79. @edds
    
    Start now
    
    

    View Slide

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

    View Slide

81. 
    Start now
    
    @edds
    

    View Slide

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

    View Slide

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

    View Slide

84. 
    
    Your name
    
    
    
    Your email
    
    
    
    @edds
    

    View Slide

85. @edds
    !
    !
    Your name
    
    !
    !
    Your email
    
    !
    

    View Slide

86. In summary…
    @edds
    

    View Slide

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

    View Slide

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

    View Slide

89. *
    Edd Sowden

    @edds
    Thank you!
    

    View Slide