Accessibility Now: Amsterdam 26 September 2017

Slide 1

Slide 1 text

@brucel Accessibility not just for mierenneukers! Web Accessibility Live 26 September 2017, Amsterdam 1

Slide 2

Slide 2 text

@brucel About me ?? • Consultant for Wix • Ex-Deputy CTO, Opera Software • BS8878 committee member • name in HTML5 spec! • Co-author “Introducing HTML5”, “Web Accessibility: Web Standards and Regulatory Compliance”

Slide 3

Slide 3 text

@brucel Mierenneuken literally: “ant fucking”

Slide 4

Slide 4 text

@brucel

Slide 5

Slide 5 text

@brucel Metaphorically .. •nit-picker •hair-splitter

Slide 6

Slide 6 text

@brucel

Slide 7

Slide 7 text

@brucel

Slide 8

Slide 8 text

@brucel Nit picking “Fussy or pedantic fault-ﬁnding”

Slide 9

Slide 9 text

@brucel

Slide 10

Slide 10 text

@brucel

Slide 11

Slide 11 text

@brucel

Slide 12

Slide 12 text

@brucel

Slide 13

Slide 13 text

What is the web?

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

@brucel • [image of a crowd of people - terrible stock photo?]

Slide 18

Slide 18 text

@brucel

Slide 19

Slide 19 text

@brucel

Slide 20

Slide 20 text

@brucel

Slide 21

Slide 21 text

@brucel

Slide 22

Slide 22 text

@brucel

Slide 23

Slide 23 text

@brucel

Slide 24

Slide 24 text

@brucel

Slide 25

Slide 25 text

@brucel World Bank: “The world’s 1 billion persons with disabilities—80 per- cent of whom live in developing countries—can lead more productive lives with the help of text, voice, and video communication.”

Slide 26

Slide 26 text

@brucel “But the mere existence of technology is an insuﬃcient condition to bridge the gaps in the socioeconomic inclusion of persons with disabilities. A supportive ecosystem is needed to drive the implementation of accessible digital technologies.” - “Digital Dividends” - World Bank (2016)

Slide 27

Slide 27 text

@brucel “But if not designed to be accessible, digital technologies can widen the disparities between persons with and without disabilities."

Slide 28

Slide 28 text

@brucel

Slide 29

Slide 29 text

@brucel

Slide 30

Slide 30 text

@brucel

Slide 31

Slide 31 text

@brucel

Slide 32

Slide 32 text

@brucel http://info.cern.ch/hypertext/WWW/TheProject.html

Slide 33

Slide 33 text

@brucel Why do we choose to break the web? • bad contrast, fonts, colours • lack of captions for videos • images • pixel-perfect layout • lack of keyboard accessibility • removing focus indicator

Slide 34

Slide 34 text

@brucel https://axesslab.com/accessibility-according-to-pwd

Slide 35

Slide 35 text

@brucel

Slide 36

Slide 36 text

@brucel

Slide 37

Slide 37 text

@brucel

Slide 38

Slide 38 text

@brucel

Slide 39

Slide 39 text

@brucel

Slide 40

Slide 40 text

@brucel

Slide 41

Slide 41 text

@brucel

Slide 42

Slide 42 text

Misusing tools

Slide 43

Slide 43 text

@brucel Icon fonts https://speakerdeck.com/ninjanails/death-to-icon-fonts

Slide 44

Slide 44 text

@brucel Bad markup http://webaim.org/projects/screenreadersurvey5/ - used by kind permission

Slide 45

Slide 45 text

@brucel WAI ARIA WAI-ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other, and their current state. WAI-ARIA describes new navigation techniques to mark regions and common Web structures as menus, primary content, secondary content, banner information, and other types of Web structures.

Slide 46

Slide 46 text

@brucel ARIA landmark roles role="contentinfo", "main", "banner" ...

Slide 47

Slide 47 text

Built-in beats bolt-on

Slide 48

Slide 48 text

@brucel

Slide 49

Slide 49 text

@brucel

Slide 50

Slide 50 text

@brucel Don't overuse landmarks http://webaim.org/projects/screenreadersurvey5/ - Used by kind permission.

Slide 51

Slide 51 text

@brucel

Slide 52

Slide 52 text

@brucel Whose responsibility? • Managers? • Designers? • Browser makers? • Standards/ Spec writers? • Framework authors? • Consumers? • Developers?

Slide 53

Slide 53 text

@brucel Managers! • Lead your teams with a culture of accessibility. • A11y makes ﬁnancial sense (more customers) • Much, much cheaper to build in a11y than remediate. •

Slide 54

Slide 54 text

@brucel Constitution for a site • “The user is sovereign. The site must be designed around user needs, not organisational structure or operational convenience. • Wherever possible, users should be consulted in formal user- testing. (Those of us within the organisation rarely have the same needs or expectations, and are therefore rarely reliable proxies.) • All content on the site must be accessible to people with disabilities. Where this clashes with aesthetics or organisational convenience, it trumps them. http://www.brucelawson.co.uk/2006/constitution-of-a-new-website/

Slide 55

Slide 55 text

@brucel Designers • Aesthetic design is subservient to function. Aesthetic design is subjective. Where internal stakeholders cannot agree, user-testing should take place. • In both design and content, simplicity beats complexity, increasing the range of devices that can be used to access the Site (including old machines and mobile browsers). Therefore, any proposed technological bells and whistles must have a demonstrable value to visitors.

Slide 56

Slide 56 text

@brucel Browser vendors http://html5accessibility.com/

Slide 57

Slide 57 text

@brucel Standards/ spec writers Design features to be accessible to users with disabilities. Access by everyone regardless of ability is essential. This does not mean that features should be omitted entirely if not all users can make full use of them, but alternate mechanisms should be provided. HTML Design Principles - https://www.w3.org/TR/html-design-principles/

Slide 58

Slide 58 text

@brucel but Web Components

Slide 59

Slide 59 text

@brucel

Slide 60

Slide 60 text

@brucel Web Components WTF? Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. https://www.webcomponents.org/introduction

Slide 61

Slide 61 text

@brucel Custom elements Click me!

Slide 62

Slide 62 text

@brucel Customized elements “a simple customized built-in element ... would automatically inherit the semantics and behaviour of the button element, with no need to implement these behaviours manually. In general, for any elements with nontrivial behaviour and semantics that build on top of existing elements of HTML, customized built-in elements will be easier to develop, maintain, and consume.”

Slide 63

Slide 63 text

@brucel Blocked by Apple “I'll note that we've vocally and repeatedly objected to having is=, and in fact, stated publicly that we won't implement this feature” - Ryosuke Niwa https://github.com/w3c/webcomponents/issues/509#issuecomment-224212371

Slide 64

Slide 64 text

@brucel https://bugs.chromium.org/p/chromium/issues/detail?id=652579

Slide 65

Slide 65 text

@brucel

Slide 66

Slide 66 text

@brucel

Slide 67

Slide 67 text

@brucel JavaScript frameworks

Slide 68

Slide 68 text

@brucel Framework authors • Accept pull requests! It's OK not to be perfect, but accept suggestions with humility. • Use proper semantics if possible, otherwise use ARIA.

Slide 69

Slide 69 text

@brucel

Slide 70

Slide 70 text

@brucel ARIA isn’t magic You still need to • maintain state and value • make sure things are keyboard-focusable • listen for keypresses • test!

Slide 71

Slide 71 text

@brucel Developers • “the technologies needed to receive the website should not be tied to one vendor, and should be free of charge to the user. The code that runs the website must conform to the rules of the various languages used.” • TAKE HOME: respect the tools (HTML, CSS, JS)

Slide 72

Slide 72 text

@brucel

Slide 73

Slide 73 text

@brucel Users • Users have a responsibility to come with up-to-date browsers and decent AT. • With evergreen browsers, this is easier than ever before. Lots of free screenreaders eg VoiceOver, Talkback, NVDA. • If you come to my site with IE6 and an old version of JAWS, don’t tell me that it’s inaccessible.

Slide 74

Slide 74 text

@brucel Perfect is the enemy of Good

Slide 75

Slide 75 text

@brucel

Slide 76

Slide 76 text

@brucel

Slide 77

Slide 77 text

@brucel

Slide 78

Slide 78 text

No no No no no no No no no no no no there’s no limits

Slide 79

Slide 79 text

to what you can achieve through gradual incremental improvements.

Slide 80

Slide 80 text

@brucel Be better, not perfect • There is no such thing as AAA compliance. You’ll never be accessible to everyone. • But you can always do something to improve accessibility for someone.

Slide 81

Slide 81 text

@brucel Little things • HTML5 sectioning elements • element • don’t disable browser’s focus ring! • alt text

Slide 82

Slide 82 text

@brucel

Slide 83

Slide 83 text

@brucel Share where possible

Slide 84

Slide 84 text

@brucel

Slide 85

Slide 85 text

@brucel

Slide 86

Slide 86 text

Implement phases of improvements

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

@brucel Wix • enable navigation by keyboard • provide Screen Reader compatibility • build infrastructure for accessibility development and testing.

Slide 89

Slide 89 text

@brucel

Slide 90

Slide 90 text

@brucel

Slide 91

Slide 91 text

@brucel • map Israel

Slide 92

Slide 92 text

@brucel • World map

Slide 93

Slide 93 text

@brucel 100 million

Slide 94

Slide 94 text

Improvements to Standards

Slide 95

Slide 95 text

@brucel

Slide 96

Slide 96 text

@brucel

Slide 97

Slide 97 text

@brucel

Slide 98

Slide 98 text

@brucel CSS @media screen and (max-width: 600px) { body {display: flex; flex-direction:column;} header {order:1} nav {order:4) main {order:2} footer {order:3} }