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

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