P.S. I Love You – A Story About Web Accessibility

Slide 1

Slide 1 text

A story about web accessibility P.S. I LOVE YOU EMANUEL BLAGONIĆ WORDCAMP KYIV 2016

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

But, what a blind person   sees in the morning?

Slide 8

Slide 8 text

? And, what a deaf person hears in the morning?

Slide 9

Slide 9 text

Nothing.

Slide 10

Slide 10 text

People are emphatic in their nature.

Slide 11

Slide 11 text

It is our obligation to think of every person in the world.

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Think functional. Not visual.

Slide 14

Slide 14 text

And what about the web?

Slide 15

Slide 15 text

“ Web users ultimately want to get   at data quickly and easily. They   don't care as much about   attractive sites and pretty design. Sir Tim Berners–Lee, inventor of World Wide Web

Slide 16

Slide 16 text

Meet the bad guy.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

We are all bad guys.

Slide 19

Slide 19 text

Web should be   open to everyone.

Slide 20

Slide 20 text

Let’s ask ourselves a question – are we doing all we can?

Slide 21

Slide 21 text

If you’re blind you don’t see that beautiful parallax effect.

Slide 22

Slide 22 text

Information is important. Visuals are not.

Slide 23

Slide 23 text

And, what about WordPress?

Slide 24

Slide 24 text

To democratize publishing through Open Source, GPL software. WORDPRESS MISSION

Slide 25

Slide 25 text

WordPress powers   26% of the web.

Slide 26

Slide 26 text

WordPress is accessible.

Slide 27

Slide 27 text

“ Technology is best when it   brings people together. Matt Mullenweg, co-founder of WordPress

Slide 28

Slide 28 text

You don’t want to compromise on accessibility. REMEMBER THIS

Slide 29

Slide 29 text

WCAG ARIA roles THE BASICS

Slide 30

Slide 30 text

There are 3 levels of WCAG. We usually aim for the AA. THE BASICS

Slide 31

Slide 31 text

“ All content should be perceivable, operable, understandable and robust. https://www.w3.org/WAI/WCAG20/glance/

Slide 32

Slide 32 text

Provide text alternatives and captions, and make it accessible by assistive technologies. PERCEIVABLE

Slide 33

Slide 33 text

Make everything accessible with a keyboard and easier to navigate. OPERABLE

Slide 34

Slide 34 text

Make text readable and let it behave in predictable ways. Avoid using dark UX patterns. UNDERSTANDABLE

Slide 35

Slide 35 text

Maximize compatibility with future versions. ROBUST

Slide 36

Slide 36 text

“ A road to accessible web starts with us, caring about our users.

Slide 37

Slide 37 text

Semantics STEP 1

Slide 38

Slide 38 text

“ Support for accessibility leads to   well-crafted HTML. Lyza Gardner, co-author of Head First Mobile Web

Slide 39

Slide 39 text

…

ELEMENTS OF A WEB PAGE

Slide 40

Slide 40 text

…

ELEMENTS OF A WEB PAGE

Slide 41

Slide 41 text

…

… LET’S USE HTML5 TAGS

Slide 42

Slide 42 text

But, something is missing. ARIA roles to the rescue! SEMANTICS

Slide 43

Slide 43 text

…

… LET’S USE HTML5 TAGS

Slide 44

Slide 44 text

… … … THINGS TO NOTE, THOUGH

Slide 45

Slide 45 text

WHAT ABOUT FORMS?

Slide 46

Slide 46 text

CREATING A SEARCH FORM

Slide 47

Slide 47 text

“ ARIA isn't for making HTML   accessible. It's for making   inaccessible HTML accessible. Heydon Pickering, freelance web accessibility consultant, interface designer and writer

Slide 48

Slide 48 text

— role="banner" for header — role="main" for main content — role="complementary" for sidebars — role="contentinfo" for footer — role="search" for search form — role="navigation" for navigation menus ARIA ROLES TO USE

Slide 49

Slide 49 text

Headings STEP 2

Slide 50

Slide 50 text

— Don’t use H1’s only  HEADINGS

Slide 51

Slide 51 text

…

BAD PRACTICE

Slide 52

Slide 52 text

…

GOOD PRACTICE

Slide 53

Slide 53 text

Don’t use H1’s only — Use proper heading structure (H1 > H2 > H3…)  HEADINGS

Slide 54

Slide 54 text

WordPress.org

WordPres Swag

News From Our Blog

WordPress 4.6.1 Security and Maintenance Release

It’s Easy As…

WordPress Users

Code is Poetry

A UNICORN DIED ON WORDPRESS.ORG

Slide 55

Slide 55 text

Site Title

Site tagline

HOW TO USE H1

Slide 56

Slide 56 text

Site Title

Site tagline

SITE BRANDING ON SUBPAGES

Slide 57

Slide 57 text

Page Title

Primary Navigation

Language Switcher

Secondary Content

Search

HEADING STRUCTURE

Slide 58

Slide 58 text

Don’t use H1’s only Use proper heading structure (H1 > H2 > H3…) — Make headings descriptive  HEADINGS

Slide 59

Slide 59 text

How to get to Kyiv?

Arriving by airplane

Arriving by car

Arriving by train

DESCRIPTIVE HEADINGS https://yoast.com/headings-use/

Slide 60

Slide 60 text

Labels, links and text alternatives STEP 3

Slide 61

Slide 61 text

— Provide meaningful alternate text  LABELS, LINKS, AND TEXT ALTERNATIVES

Slide 62

Slide 62 text

MEANINGFUL ALT TEXT

Slide 63

Slide 63 text

Provide meaningful alternate text — Make links descriptive  LABELS, LINKS, AND TEXT ALTERNATIVES

Slide 64

Slide 64 text

  Click here to learn more about our company   Learn more about our company on our About us page DESCRIPTIVE LINKS

Slide 65

Slide 65 text

Provide meaningful alternate text Make links descriptive — Use ARIA labels to name objects  LABELS, LINKS, AND TEXT ALTERNATIVES

Slide 66

Slide 66 text

LABELS FOR OBJECTS

Slide 67

Slide 67 text

Previous
Page 2
Next

LABELS FOR OBJECTS

Slide 68

Slide 68 text

Provide meaningful alternate text Make links descriptive Use ARIA labels to name objects — Provide text alternative for non-text content LABELS, LINKS, AND TEXT ALTERNATIVES

Slide 69

Slide 69 text

4 of 5

TEXT ALTERNATIVE FOR NON-TEXT CONTENT

Slide 70

Slide 70 text

Menu switchers STEP 4

Slide 71

Slide 71 text

— Use buttons instead of a

to create switchers  MENU SWITCHERS

Slide 72

Slide 72 text

Use buttons instead of a

to create switchers — Use “aria-expanded” property to show if menu is open or closed MENU SWITCHERS

Slide 73

Slide 73 text

  Menu …   Menu … DESCRIPTIVE LINKS

Slide 74

Slide 74 text

Screen reader text and keyboard access. STEP 5

Slide 75

Slide 75 text

.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } SCREEN READER ONLY CSS

Slide 76

Slide 76 text

Additional Information

SCREEN READER FRIENDLY HEADING

Slide 77

Slide 77 text

Skip to content Skip to footer SKIP LINKS

Slide 78

Slide 78 text

:focus STEP 6

Slide 79

Slide 79 text

— Make “skip links” first focusable element on your page  :FOCUS

Slide 80

Slide 80 text

Make “skip links” first focusable element on your page — Don’t remove :focus styles, rather improve them  :FOCUS

Slide 81

Slide 81 text

Make “skip links” first focusable element on your page Don’t remove :focus styles, rather improve them — Add an indication that something is focused (subtle background color, border or text decoration) :FOCUS

Slide 82

Slide 82 text

Forms STEP 7

Slide 83

Slide 83 text

First Name

FORMS

Slide 84

Slide 84 text

  First Name

HIDING LABELS IN FORMS

Slide 85

Slide 85 text

Text sizes and contrast STEP 8

Slide 86

Slide 86 text

— Make text readable  TEXT SIZES AND CONTRAST

Slide 87

Slide 87 text

Make text readable — Allow users to change text size  TEXT SIZES AND CONTRAST

Slide 88

Slide 88 text

Make text readable Allow users to change text size — Use fonts of appropriate weights  TEXT SIZES AND CONTRAST

Slide 89

Slide 89 text

Make text readable Allow users to change text size Use fonts of appropriate weights — Contrast ratio should be 4,5:1 for AA   and 7:1 for AAA TEXT SIZES AND CONTRAST

Slide 90

Slide 90 text

Foreground: #333 Background: #fff Ratio 12,63:1 / AAA Foreground: #666 Background: #fff Ratio 5,74:1 / AA Foreground: #999 Background: #fff Ratio 2,85:1 / Fail Foreground: #fff Background: #000 Ratio 21:1 / AAA

Slide 91

Slide 91 text

Bad Visibility

Slide 92

Slide 92 text

Better Visibility

Slide 93

Slide 93 text

Best Visibility

Slide 94

Slide 94 text

? So, what is the current   status of web accessibility?

Slide 95

Slide 95 text

“ One teacher, one book, and one pen can change the world. Malala Yousafzai

Slide 96

Slide 96 text

? What’s the current status of  WordPress accessibility?

Slide 97

Slide 97 text

Joe Dolson, Andrea Fercia, Rian Rietveld, Graham Armﬁeld, Mike Little, and Morten Rand-Hendriksen

Slide 98

Slide 98 text

They are our heroes. And we can help them! https://make.wordpress.org/accessibility/

Slide 99

Slide 99 text

If we want to have a truly open web – every person matters.

Slide 100

Slide 100 text

Because the person we’re missing out, could one day become a person who will change the world.

Slide 101

Slide 101 text

Thank you. Have a question? Ask me on Twitter — @eblagonic

Slide 102

Slide 102 text

AInspector Sidebar (Accessibility Evaluator)  http://firefox.cita.illinois.edu/ Web Accessibility Checker  http://achecker.ca/checker/index.php Inclusive Design Patterns (Book)  https://www.smashingmagazine.com/2016/06/inclusive-design-patterns/

Slide 103

Slide 103 text

Practical ARIA examples  http://heydonworks.com/practical_aria_examples/ Color Contrast Checker  http://webaim.org/resources/contrastchecker/ WordPress Theme Review Accessibility guidelines  https://make.wordpress.org/themes/handbook/review/accessibility/required/