Tweet
Tweet

Slide 1

Slide 1 text

Edd Sowden
 Senior Developer 
 Government Digital Service
 @edds

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

* We started by building GOV.UK GDS @edds

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

9.5 million visitors every week GDS @edds

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

* Relentlessly focused on user needs GDS @edds

Slide 11

Slide 11 text

GDS @edds

Slide 12

Slide 12 text

GDS @edds

Slide 13

Slide 13 text

GDS @edds

Slide 14

Slide 14 text

GDS @edds

Slide 15

Slide 15 text

GDS @edds

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

GOV.UK should work for everyone GDS @edds

Slide 18

Slide 18 text

Colour contrast GDS @edds

Slide 19

Slide 19 text

Colour contrast GDS @edds

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Services and information GDS @edds

Slide 25

Slide 25 text

Quick prototype GDS @edds

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Start with HTML GDS @edds

Slide 28

Slide 28 text

GDS @edds

Slide 29

Slide 29 text

  • Benefits

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

Slide 30

Slide 30 text

GDS @edds

Slide 31

Slide 31 text

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

Benefits

  • Certificates, register offices
    • ...
GDS @edds

Slide 32

Slide 32 text

Listen to your website GDS @edds

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Benefits

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

Slide 38

Slide 38 text

GDS @edds

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

ARIA Accessible Rich Internet Applications GDS @edds

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

GDS @edds

Slide 44

Slide 44 text

GDS @edds

Slide 45

Slide 45 text

GDS @edds

Slide 46

Slide 46 text

GDS @edds

Slide 47

Slide 47 text

GDS @edds

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

GDS @edds

Slide 51

Slide 51 text

GDS @edds

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

GDS @edds

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

...

GDS @edds

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

GDS @edds Voiceover Keyboard shortcuts: ! Voiceover on/off: [⌘] + [F5] Voiceover key (VO): [ctrl] + [⌥] Continue reading: [VO] + [a] Previous/next item:! ! [VO] + [right] or [left]!

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Ship it! GDS @edds

Slide 64

Slide 64 text

General accessibility learnings GDS @edds

Slide 65

Slide 65 text

HTML5 enables you group items using semantic tags GDS @edds

Slide 66

Slide 66 text

...

... GDS @edds

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

To much markup GDS @edds

Slide 75

Slide 75 text

  • Your name
  • Your email
GDS @edds

Slide 76

Slide 76 text

! ! Your name ! ! Your email ! GDS @edds

Slide 77

Slide 77 text

Listen to your website GDS @edds

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Edd Sowden
 Senior Developer 
 Government Digital Service
 @edds