Accessibility and how to get the most from your screenreader - Front End North

Building an interactive accessible website is often thought of as a black art. A look at the learnings from building the Government's website, GOV.UK. I will talk about real world accessibility and practical tips and tools you can use today. Covering the mistakes and pitfalls we made building GOV.UK I will explain how to check to see how you are currently doing, and how accessibility isn't,as scary as you first thought.

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. 9.5 million visitors every week
   GDS
   @edds
   

   View Slide

8. 9.5 million visitors every week
   Home to over 220 departments and
   organisations
   GDS
   @edds
   

   View Slide

9. GDS
   @edds
   9.5 million visitors every week
   Home to over 220 departments and
   organisations
   Saved more than £62 million
   

   View Slide

10. *
    Relentlessly
    focused
    on user needs
    GDS
    @edds
    

    View Slide

11. GDS
    @edds
    

    View Slide

12. GDS
    @edds
    

    View Slide

13. GDS
    @edds
    

    View Slide

14. GDS
    @edds
    

    View Slide

15. GDS
    @edds
    

    View Slide

16. View Slide

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

    View Slide

18. Colour contrast
    GDS
    @edds
    

    View Slide

19. Colour contrast
    GDS
    @edds
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. Services and
    information
    GDS
    @edds
    

    View Slide

25. Quick prototype
    GDS
    @edds
    

    View Slide

26. View Slide

27. Start with HTML
    GDS
    @edds
    

    View Slide

28. GDS
    @edds
    

    View Slide

29. 
    
    Benefits
    
    Benefits entitlement
    ...
    
    
    Births, deaths, marriages and care
    ...
    
    GDS
    @edds
    

    View Slide

30. GDS
    @edds
    

    View Slide

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

    View Slide

32. Listen to your website
    GDS
    @edds
    

    View Slide

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

    View Slide

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

    View Slide

35. View Slide

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

    View Slide

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

    View Slide

38. GDS
    @edds
    

    View Slide

39. View Slide

40. We are happy with the markup. Next
    lets look at adding some JavaScript
    GDS
    @edds
    

    View Slide

41. ARIA
    Accessible Rich Internet Applications
    GDS
    @edds
    

    View Slide

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

43. 
    GDS
    @edds
    

    View Slide

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

    View Slide

45. GDS
    @edds
    

    View Slide

46. GDS
    @edds
    

    View Slide

47. GDS
    @edds
    

    View Slide

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

    View Slide

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

    View Slide

50. GDS
    @edds
    

    View Slide

51. GDS
    @edds
    

    View Slide

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

    View Slide

53. GDS
    @edds
    

    View Slide

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

    View Slide

55. ...
    GDS
    @edds
    

    View Slide

56. View Slide

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

    View Slide

58. View Slide

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

60. View Slide

61. Using focus rather than aria-live we
    also helped keyboard only users
    GDS
    @edds
    

    View Slide

62. View Slide

63. Ship it!
    GDS
    @edds
    

    View Slide

64. General accessibility learnings
    GDS
    @edds
    

    View Slide

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

    View Slide

66. 
    ...
    ...
    
    GDS
    @edds
    

    View Slide

67. View Slide

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

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

    View Slide

70. Instead they can browse by headings
    to jump to content faster
    GDS
    @edds
    

    View Slide

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

72. View Slide

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

    View Slide

74. To much markup
    GDS
    @edds
    

    View Slide

75. 
    
    Your name
    
    
    
    Your email
    
    
    
    GDS
    @edds
    

    View Slide

76. !
    !
    Your name
    
    !
    !
    Your email
    
    !
    GDS
    @edds
    

    View Slide

77. Listen to your website
    GDS
    @edds
    

    View Slide

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

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

    View Slide

80. Edd Sowden

    Senior Developer 

    Government Digital Service

    @edds
    

    View Slide