Web Accessibility: Front-End Meetup

Slide 1

Slide 1 text

WEB ACCESSIBILITY AN INTRODUCTION FOR FRONT-END DESIGNERS

Slide 2

Slide 2 text

WEB ACCESSIBILITY HI, I’M TIM ▸ Organizer of the St. Pete Front-End Meetup ▸ Director of User Experience @ GravityFree ▸ Instructor with Tampa Bay Girl Develop It ▸ Community Moderator for Treehouse ▸ Started my adventure with HTML in 1995 (the year before CSS).

Slide 3

Slide 3 text

WEB ACCESSIBILITY WHAT’S ON THE AGENDA ▸ What is Accessibility (a11y)? ▸ The ADA, Section 508, and the WCAG 2.0 ▸ Technology Won’t Save Poor Design: Contrast, State, Perception, and Refresh Rate ▸ HTML Attributes and Semantic HTML5 Tags ▸ ARIA Role Deﬁnitions ▸ Think Outside the Structure ▸ What if we designed our CSS around accessibility roles? ▸ The Testing Tools I Love

Slide 4

Slide 4 text

ACCESSIBILITY ISN’T JUST ABOUT SCREENREADERS

Slide 5

Slide 5 text

“I’M NOT A LAWYER AND I DON’T PLAY ONE ON TV OR THE INTERNET.” Tim Knight WEB ACCESSIBILITY

Slide 6

Slide 6 text

ADA, SECTION 508, AND THE WCAG 2.0 WEB ACCESSIBILITY

Slide 7

Slide 7 text

I’LL MAKE THIS PART QUICK A GUIDELINE CRASH COURSE ON THE ADA, SECTION 508, AND THE WCAG 2.0

Slide 8

Slide 8 text

“FEDERAL PROCUREMENT LAW REQUIRES THAT [INTERACTIVE TRANSACTION MACHINES] PURCHASED BY THE FEDERAL GOVERNMENT COMPLY WITH STANDARDS ISSUED BY THE ACCESS BOARD UNDER SECTION 508 OF THE REHABILITATION ACT OF 1973, AS AMENDED.” Section 707 of The American’s with Disability Act  http://www.ada.gov/regs2010/2010ADAStandards/2010ADAstandards.htm#pgfId-1006537

Slide 9

Slide 9 text

SO WHAT’S SECTION 508? WEB ACCESSIBILITY

Slide 10

Slide 10 text

WEB ACCESSIBILITY SECTION 508: WEB-BASED INTRANET AND INTERNET INFORMATION AND APPLICATIONS (1194.22) ▸ Requires text equivalents for non-text and multimedia items ▸ Information should be conveyed without the need for color ▸ It should be readable without a stylesheet ▸ Data relationships should be deﬁned (tables, forms, etc.) ▸ Pages shall be designed to avoid causing the screen to ﬂicker with a frequency greater than 2 Hz and lower than 55 Hz (basically no more than 3 times a second) https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/guide-to-the- section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22

Slide 11

Slide 11 text

WEB ACCESSIBILITY SECTION 508: WEB-BASED INTRANET AND INTERNET INFORMATION AND APPLICATIONS (1194.22) ▸ And so much more… ▸ Worst yet, Section 508 is currently in a state of revision. https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/guide-to-the- section-508-standards/web-based-intranet-and-internet-information-and-applications-1194-22

Slide 12

Slide 12 text

Slide 13

Slide 13 text

DON’T GET TOO EXCITED. IF YOUR COMPANY RECEIVES FEDERAL FUNDING, CURRENT COURT RULINGS ARE STARTING TO SET PRECEDENT THAT THIS COULD INCLUDE YOU TOO.

Slide 14

Slide 14 text

STAY AWAKE… ALL THE LEGAL STUFF IS ALMOST DONE

Slide 15

Slide 15 text

ENTER THE WCAG 2.0 (WEB CONTENT ACCESSIBILITY GUIDELINES)

Slide 16

Slide 16 text

BROKEN UP INTO FOUR GROUPS: Perceivable Operable Understandable Robust

Slide 17

Slide 17 text

WEB ACCESSIBILITY PERCEIVABLE: ▸ Guideline 1.1: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. ▸ Guideline 1.2: Time-based media: Provide alternatives for time-based media. ▸ Guideline 1.3: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. ▸ Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background. INFORMATION AND USER INTERFACE COMPONENTS MUST BE PRESENTABLE TO USERS IN WAYS THEY CAN PERCEIVE.

Slide 18

Slide 18 text

WEB ACCESSIBILITY OPERABLE: ▸ Guideline 2.1: Make all functionality available from a keyboard. ▸ Guideline 2.2: Provide users enough time to read and use content. ▸ Guideline 2.3: Do not design content in a way that is known to cause seizures. ▸ Guideline 2.4: Provide ways to help users navigate, ﬁnd content, and determine where they are. USER INTERFACE COMPONENTS AND NAVIGATION MUST BE OPERABLE.

Slide 19

Slide 19 text

WEB ACCESSIBILITY UNDERSTANDABLE: INFORMATION AND THE OPERATION OF USER INTERFACE MUST BE UNDERSTANDABLE. ▸ Guideline 3.1: Make text content readable and understandable. ▸ Guideline 3.2: Make web pages appear and operate in predictable ways. ▸ Guideline 3.3: Help users avoid and correct mistakes.

Slide 20

Slide 20 text

WEB ACCESSIBILITY ROBUST: CONTENT MUST BE ROBUST ENOUGH THAT IT CAN BE INTERPRETED RELIABLY BY A WIDE VARIETY OF USER AGENTS, INCLUDING ASSISTIVE TECHNOLOGIES. ▸ Guideline 4.1: Maximize compatibility with current and future user agents, including assistive technologies. There are three levels of conformance. For a helpful guide on meeting A, AA, or AAA conformity, see: http://webaim.org/standards/wcag/WCAG2Checklist.pdf

Slide 21

Slide 21 text

OKAY, THAT’S THE BASIC GUIDELINES… AND NOW…

Slide 22

Slide 22 text

TECHNOLOGY WON’T SAVE POOR DESIGN WEB ACCESSIBILITY

Slide 23

Slide 23 text

CONTRAST (AA) The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1 Large-scale text and images of large- scale text should have a contrast ratio of at least 3:1 (14pt and bold or larger, or 18pt or larger)

Slide 24

Slide 24 text

CONTRAST (AAA) The visual presentation of text and images of text should have a contrast ratio of at least 7:1 Large-scale text and images of large- scale text should have a contrast ratio of at least 4.5:1 (14pt and bold or larger, or 18pt or larger)

Slide 25

Slide 25 text

https://github.com/getﬂourish/Sketch-Color-Contrast-Analyser COLOR CONTRAST ANALYSER FOR SKETCH

Slide 26

Slide 26 text

http://webaim.org/resources/contrastchecker/ COLOR CONTRAST CHECKER

Slide 27

Slide 27 text

STATE Make it clear to the user where they are, where they’ve been, and what their options are.

Slide 28

Slide 28 text

STATE

Slide 29

Slide 29 text

STATE Pressing tab on BBC let’s you access accessibility features.

Slide 30

Slide 30 text

PERCEPTION Avoid extended cognitive load to decipher the meaning of abstract images or complicated text. (Yes, there’s probably a simpler way I could have said that)

Slide 31

Slide 31 text

REFRESH RATE Alerting with blinking, shaking, or other techniques that “ﬂash” an item on the screen should not ﬂash that item more than 3 times per second to reduce the chance of seizures.

Slide 32

Slide 32 text

HTML ATTRIBUTES AND SEMANTIC HTML5 TAGS WEB ACCESSIBILITY

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

THE “GOOD” BROWSERS WILL UNDERSTAND EACH OF THESE ROLES AUTOMATICALLY.

Slide 35

Slide 35 text

BROWSER ACCESSIBILITY http://www.html5accessibility.com/

Slide 36

Slide 36 text

LET’S TALK PRACTICAL CODE EXAMPLES

Slide 37

Slide 37 text

WEB ACCESSIBILITY DEALING WITH IMAGES AND ALT TAGS

THE LONGDESC ATTRIBUTE WAS REMOVED IN HTML5   Photo of Tim Knight

A recently taken headshot of Tim Knight.

Slide 38

Slide 38 text

WEB ACCESSIBILITY ICON FONTS WITHOUT LABELS ARE INVISIBLE USE A LABEL THAT YOU CAN HIDE, BUT SHOW TO A SCREENREADER Facebook

Slide 39

Slide 39 text

WEB ACCESSIBILITY SCREENREADER TEXT (BASED ON BOOTSTRAP) .sr-text { border: 0; clip: rect(0,0,0,0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

Slide 40

Slide 40 text

WEB ACCESSIBILITY INLINE SVG ICONS

Slide 41

Slide 41 text

WEB ACCESSIBILITY ORGANIZING TABLE DATA WITH THEAD, TBODY, TFOOT, AND SCOPE Table 1.1: A table example with various office products. Quantity Product Price Total Office Desk 2 $800.00 $1,600.00 Totals: $1,100.00

Slide 42

Slide 42 text

WEB ACCESSIBILITY FORM FIELDS SHOULD HAVE RELATED LABELS Email DON’T JUST USE A PLACEHOLDER INSTEAD OF A LABEL, IT DOESN’T COUNT Email Address

Slide 43

Slide 43 text

CONNECTING WITH ARIA ROLES WEB ACCESSIBILITY

Slide 44

Slide 44 text

DEFAULT ROLES

Slide 45

Slide 45 text

YOU DON’T NEED TO STATE AN ARIA ROLE IF YOU’RE JUST REITERATING THE DEFAULT ROLE. ARIA ROLES ARE A WAY FOR YOU TO HAVE ACCESS TO THE BROWSER’S ACCESSIBILITY API TO ADJUST ATTRIBUTES FOR AN ITEM IN THE ACCESSIBILITY TREE. http://w3c.github.io/html-aria/

Slide 46

Slide 46 text

WEB ACCESSIBILITY CURRENT ARIA ROLES NOT AVAILABLE IN HTML ▸ alert ▸ alertdialog ▸ gridcell ▸ log ▸ marquee ▸ menuitemcheckbox ▸ menuitemradio ▸ scrollbar ▸ status ▸ tab ▸ tabpanel ▸ timer ▸ tooltip ▸ treeitem ▸ grid ▸ menu ▸ menubar ▸ tablist ▸ toolbar ▸ tree ▸ treegrid ▸ directory ▸ document ▸ group ▸ note ▸ presentation ▸ region ▸ application ▸ search For the full list see: https://www.w3.org/TR/wai-aria/roles

Slide 47

Slide 47 text

WEB ACCESSIBILITY YOUR DON’T NEED TO DO THINGS LIKE THIS BUT YOU’RE WELCOME TO DO THINGS LIKE THIS

I'm a hidden div

Slide 48

Slide 48 text

WEB ACCESSIBILITY ARIA IS ESPECIALLY USEFUL TO COMMUNICATE STATE AND RELATIONSHIPS Shopping Bag

Your Bag is empty.

Slide 49

Slide 49 text

THINK OUTSIDE THE STRUCTURE WEB ACCESSIBILITY

Slide 50

Slide 50 text

DON’T FORGET YOUR VIDEOS WEB ACCESSIBILITY

Slide 51

Slide 51 text

SUBTITLE WORKSHOP XE http://www.uruworks.net/

Slide 52

Slide 52 text

AEGISUB http://www.aegisub.org/

Slide 53

Slide 53 text

YOUTUBE https://www.youtube.com

Slide 54

Slide 54 text

WEB ACCESSIBILITY USING SUBTITLES WITHIN HTML5 VIDEO For more information on adding captions and subtitles to HTML5 video, see: https:// developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/ Adding_captions_and_subtitles_to_HTML5_video

Slide 55

Slide 55 text

THERE’S ALSO PDFS, WORD, OR OTHER TYPES OF DOCUMENTS TO CONSIDER WEB ACCESSIBILITY

Slide 56

Slide 56 text

WHAT IF WE DESIGNED OUR CSS AROUND ROLES? WEB ACCESSIBILITY

Slide 57

Slide 57 text

WEB ACCESSIBILITY LINKS AREN’T BUTTONS, THEY’RE LINKS An Important Link Learn More About This Button .button { background-color: #ccc; border: 1px solid #999; border-radius: 3px; color: #333; cursor: pointer; font: 0.85em "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 5px 10px; text-decoration: none; } .button:hover { background-color: #666; border: 1px solid #666; color: #fff; }

Slide 58

Slide 58 text

WEB ACCESSIBILITY SO TELL THE BROWSER THEY’RE BUTTONS AND STYLE ACCORDINGLY An Important Link Learn More About This Button button, [role="button"] { … } button.primary, [role="button"].primary { … }

Slide 59

Slide 59 text

WEB ACCESSIBILITY STOP THIS DAMN MADNESS An Important Link Learn More About This Button ENFORCE ACCESSIBILITY PRACTICE An Important Link Learn More About This Button button[disabled], [role="button"][disabled] { ... }

Slide 60

Slide 60 text

THE BUTTON CONCEPT IS JUST AN EXAMPLE…

Slide 61

Slide 61 text

WEB ACCESSIBILITY WHAT ABOUT ROLE SPECIFIC COMPONENTS? [role=“tablist”].feature__pager   [role=“tab”] {…}

Slide 62

Slide 62 text

http://www.ebaytechblog.com/2015/11/04/how-our-css-framework-helps-enforce-accessibility/

Slide 63

Slide 63 text

DROPBOX’S INTERNAL FRAMEWORK INCLUDES ACCESSIBILITY MIXINS https://github.com/dropbox/scooter/pull/4

Slide 64

Slide 64 text

THE TESTING TOOLS  I LOVE WEB ACCESSIBILITY

Slide 65

Slide 65 text

ACCESSIBILITY DEVELOPER TOOLS https://github.com/GoogleChrome/accessibility-developer-tools