Tweet
Tweet

Slide 1

Slide 1 text

@michellesanver Accessibility done right #phpuk

Slide 2

Slide 2 text

@michellesanver

Slide 3

Slide 3 text

@michellesanver WIIIIIIIE \o/ “Learn the most by sharing your knowledge with others” - @coderabbi

Slide 4

Slide 4 text

@michellesanver Michelle Sanver

Slide 5

Slide 5 text

@michellesanver

Slide 6

Slide 6 text

@michellesanver Michelle Sanver Co-President of PHPWomen

Slide 7

Slide 7 text

@michellesanver PHPWomen 15 pounds or 30 dollars

Slide 8

Slide 8 text

@michellesanver Michelle Sanver Accent(s)!?

Slide 9

Slide 9 text

@michellesanver Michelle Sanver

Slide 10

Slide 10 text

@michellesanver I’m a backend developer.

Slide 11

Slide 11 text

@michellesanver Disclaimer There’s a lot more to accessibility.

Slide 12

Slide 12 text

@michellesanver After lunch story

Slide 13

Slide 13 text

@michellesanver Aron Aron is a blind programmer

Slide 14

Slide 14 text

@michellesanver Aron He really knows how to use a screenreader

Slide 15

Slide 15 text

@michellesanver Aron I don’t

Slide 16

Slide 16 text

@michellesanver Disclaimer This talk is not how I planned it

Slide 17

Slide 17 text

@michellesanver This talk is not about “people with disabilities”

Slide 18

Slide 18 text

@michellesanver This talk is about people who are using the web.

Slide 19

Slide 19 text

@michellesanver Good Code Written with the user in mind

Slide 20

Slide 20 text

@michellesanver Assistive technology

Slide 21

Slide 21 text

@michellesanver Assistive technology Screen Readers

Slide 22

Slide 22 text

@michellesanver Assistive technology Text-To-Speech

Slide 23

Slide 23 text

@michellesanver Assistive technology Screen Magnifiers

Slide 24

Slide 24 text

@michellesanver Assistive technology Joysticks

Slide 25

Slide 25 text

@michellesanver Assistive technology Keyboards

Slide 26

Slide 26 text

@michellesanver Assistive technology Mobile Devices

Slide 27

Slide 27 text

@michellesanver Audience participation! What other assistive technology is there?

Slide 28

Slide 28 text

@michellesanver All technology is assistive technology

Slide 29

Slide 29 text

@michellesanver What if accessibility online was like accessibility IRL?

Slide 30

Slide 30 text

@michellesanver A typical ramp

Slide 31

Slide 31 text

@michellesanver A hotel layout

Slide 32

Slide 32 text

@michellesanver Hotel Layout: SunshinePHP I lost my glasses…

Slide 33

Slide 33 text

@michellesanver Hotel Layout: PHPUK I *really* hope I keep my glasses

Slide 34

Slide 34 text

@michellesanver Accessibility is about Universal design

Slide 35

Slide 35 text

@michellesanver Universal Design “Universal design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” -Ron Mace

Slide 36

Slide 36 text

@michellesanver Universal Design Keywords equitable, flexible, simple, intuitive, low effort, approachable, usable

Slide 37

Slide 37 text

@michellesanver Guidelines, rules and tools Keep your JavaScript ON!!!

Slide 38

Slide 38 text

@michellesanver Guidelines, rules and tools All functionality for all people

Slide 39

Slide 39 text

@michellesanver Content Gudelines

Slide 40

Slide 40 text

@michellesanver General Writing Use Consistent Language

Slide 41

Slide 41 text

@michellesanver General Writing Write out acronyms (At least the first time you use them)

Slide 42

Slide 42 text

@michellesanver General Writing Be clear and concise

Slide 43

Slide 43 text

@michellesanver Headings Screen reader users can use heading structure to navigate content.

Slide 44

Slide 44 text

@michellesanver Headings Keep your headers logical

Slide 45

Slide 45 text

@michellesanver Headings Don’t skip “h2” for design

Slide 46

Slide 46 text

@michellesanver Font-Face, Size and colour Easy to use sans-serif font

Slide 47

Slide 47 text

@michellesanver Font-Face, Size and colour Size: 12pt or more

Slide 48

Slide 48 text

@michellesanver Font-Face, Size and colour Size headers: Relative in order

Slide 49

Slide 49 text

@michellesanver Font-Face, Size and colour Heading 3: 14pt Heading 2: 16pt Heading 1: 18pt

Slide 50

Slide 50 text

@michellesanver Font-Face, Size and colour Keep a high contrast between background and font colour.

Slide 51

Slide 51 text

@michellesanver Links Give your links unique and descriptive names

Slide 52

Slide 52 text

@michellesanver Tables Only for tabular data!

Slide 53

Slide 53 text

@michellesanver Tables For complex tables, provide a summary

Slide 54

Slide 54 text

@michellesanver Forms Label form fields!

Slide 55

Slide 55 text

@michellesanver Forms Should be “tabable”

Slide 56

Slide 56 text

@michellesanver Forms “Tabable” in visual order

Slide 57

Slide 57 text

@michellesanver Forms Use fieldsets for related fields

Slide 58

Slide 58 text

@michellesanver Forms Don’t use only * for required fields

Slide 59

Slide 59 text

@michellesanver Forms Use ARIA in *addition* to asterix ARIA required="true" and ARIA required="false"

Slide 60

Slide 60 text

@michellesanver Forms After submitting Include errors in the page-title

Slide 61

Slide 61 text

@michellesanver Forms CAPTCHA is bad mmmkay http://webaim.org/blog/ spam_free_accessible_forms/

Slide 62

Slide 62 text

@michellesanver Colours Colourblindness

Slide 63

Slide 63 text

@michellesanver Colours Learning disabilities

Slide 64

Slide 64 text

@michellesanver Colours Satisfy both groups! Use colours *and* visual indicators

Slide 65

Slide 65 text

@michellesanver Audio & Video Alternative text version

Slide 66

Slide 66 text

@michellesanver Video Use Captions

Slide 67

Slide 67 text

@michellesanver Audio Include a text transcript

Slide 68

Slide 68 text

@michellesanver Audio & Video Also for non-auditory learners

Slide 69

Slide 69 text

@michellesanver Audio & Video If filling material for an already descriptive article… No alternative needed

Slide 70

Slide 70 text

@michellesanver Audio & Video Do *not* autoplay!

Slide 71

Slide 71 text

@michellesanver Audio & Video Make sure you can pause.

Slide 72

Slide 72 text

@michellesanver Audio & Video Avoid flashes

Slide 73

Slide 73 text

@michellesanver Audio & Video 3 flashes in one second can cause epileptic reactions.

Slide 74

Slide 74 text

@michellesanver Images Alt Text

Slide 75

Slide 75 text

@michellesanver Images Alt Text What you’re trying to convey!

Slide 76

Slide 76 text

@michellesanver Images Alt Text Can be replaced with a caption.

Slide 77

Slide 77 text

@michellesanver Images Alt Text Leave empty for decorative images

Slide 78

Slide 78 text

@michellesanver Images High contrast

Slide 79

Slide 79 text

@michellesanver Images For graphs, include a table if possible

Slide 80

Slide 80 text

@michellesanver Images Avoid images of text

Slide 81

Slide 81 text

@michellesanver WAI-Aria

Slide 82

Slide 82 text

@michellesanver WAI-Aria ARIA = Accessible Rich Internet Applications

Slide 83

Slide 83 text

@michellesanver Aria Roles

Slide 84

Slide 84 text

@michellesanver Aria: Roles “button” can be a fancy clickable element

Slide 85

Slide 85 text

@michellesanver Aria States and Properties

Slide 86

Slide 86 text

@michellesanver Aria examples Roles of "navigation" and "menu"

Slide 87

Slide 87 text

@michellesanver Aria examples Landmarks of "banner" and "main content"

Slide 88

Slide 88 text

@michellesanver Aria examples Alerts of "live" and "atomic"

Slide 89

Slide 89 text

@michellesanver Aria examples Forms

Slide 90

Slide 90 text

@michellesanver Dynamic content Accessible slide shows

Slide 91

Slide 91 text

@michellesanver Dynamic content Keyboard friendly video players NO AUTOPLAY PLZ

Slide 92

Slide 92 text

@michellesanver Aria: Live Regions Tell the user about dynamic updates!

Slide 93

Slide 93 text

@michellesanver Aria: Live Regions Polite or assertive

Slide 94

Slide 94 text

@michellesanver Aria: Live Regions Allows your JavaScript to be ON

Slide 95

Slide 95 text

@michellesanver Aria: Live Regions Twitter uses live regions NICELY

Slide 96

Slide 96 text

@michellesanver Aria: Live Regions: Twitter Has a dedicated accessibility team

Slide 97

Slide 97 text

@michellesanver Aria: Live Regions: Twitter Tweet field has tons of information

Slide 98

Slide 98 text

@michellesanver Aria Example Twitter
What's happening?

Slide 99

Slide 99 text

@michellesanver Aria Example Twitter
What's happening?

Slide 100

Slide 100 text

@michellesanver Aria Example Twitter
What's happening?

Slide 101

Slide 101 text

@michellesanver Aria Example Twitter
What's happening?

Slide 102

Slide 102 text

@michellesanver Aria Example Twitter
What's happening?

Slide 103

Slide 103 text

@michellesanver Aria Example Twitter
What's happening?

Slide 104

Slide 104 text

@michellesanver Online Assessment Tools

Slide 105

Slide 105 text

@michellesanver Online Assessment Tools Wave http://wave.webaim.org/

Slide 106

Slide 106 text

@michellesanver Online Assessment Tools Color Filter http://colorfilter.wickline.org/

Slide 107

Slide 107 text

@michellesanver Online Assessment Tools Vischeck http://www.vischeck.com/vischeck/

Slide 108

Slide 108 text

@michellesanver Online Assessment Tools Color Contrast Checker http://webaim.org/resources/contrastchecker/

Slide 109

Slide 109 text

@michellesanver Online Assessment Tools For more W3C Web Accessibility Tools list http://www.w3.org/WAI/ER/tools/

Slide 110

Slide 110 text

@michellesanver Wrapup

Slide 111

Slide 111 text

@michellesanver Wrapup Accessibility is *not* about assistive technology.

Slide 112

Slide 112 text

@michellesanver Wrapup Accessibility is about people.

Slide 113

Slide 113 text

@michellesanver Wrapup Accessibility is about universal design

Slide 114

Slide 114 text

@michellesanver Wrapup Accessibility means no workarounds

Slide 115

Slide 115 text

@michellesanver Wrapup Keep your JavaScript ON

Slide 116

Slide 116 text

@michellesanver Wrapup Follow guidelines

Slide 117

Slide 117 text

@michellesanver Wrapup Use WAI-Aria

Slide 118

Slide 118 text

@michellesanver Ask questions!

Slide 119

Slide 119 text

@michellesanver Thank you! Please rate my talk! https://joind.in/13371 (OMG, do you see the 1337? :D)

Slide 120

Slide 120 text

@michellesanver Accessibility Let’s talk about it.