Slide 1

Slide 1 text

Accessibility Web Accessibility

Slide 2

Slide 2 text

Agenda Why accessibility matters? Accessibility Guidelines & Standards Accessibility layers ● Coding for a11y Testing Tools ● Video A11y project - Careers and Apply case study (Manila) PageUp A11y Maturity

Slide 3

Slide 3 text

Inclusive Design

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Inclusive Design Accessibility Usability Human Centred Design

Slide 6

Slide 6 text

Disability Types

Slide 7

Slide 7 text

PageUp main users groups Keyboard users Use keyboard rather than mouse Have full sight Low vision users Color blindness Magnify content by zoom Screen reader users Use screen reader software Have no sight

Slide 8

Slide 8 text

Guidelines & Standards

Slide 9

Slide 9 text

WCAG 2.1 Web Content Accessibility Guidelines 78 total criteria organized as 13 guidelines under 4 principles Perceivable Users must be able to perceive the information being presented Operable Users must be able to operate the interface Understandable Users must be able to understand the information on the interface Robust Users must be able to access the content as technologies advance

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

A11y Layers

Slide 12

Slide 12 text

A11y Layers Code HTML, CSS, JS, ARIA Visual Design Color contrast, icons, typography, layout, responsive, touch targets Focus states, active indicator Content Information architecture, images, videos, captions, simple language

Slide 13

Slide 13 text

Code Layer

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Coding for A11y - HTML Native HTML5 = Semantic markup = Accessibility Native HTML tag

Semantic

Non semantic

Slide 16

Slide 16 text

Coding for A11y - ARIA tags Web Accessibility Initiative (WAI) Accessible Rich Internet Applications (ARIA) ARIA is a specification from the W3C and created to improve accessibility of applications by providing extra information to assistive technologies, such as screen readers, via attributes which could be added to HTML. Roles States and Properties

Slide 17

Slide 17 text

Coding for A11y - ARIA tags - Roles - Landmarks

Slide 18

Slide 18 text

Coding for A11y - ARIA tags Disabled Hidden Selected Checked Drag and drop Live regions Modal States and Properties Button Checkbox Link Radio Scrollbar Searchbox Slider Switch Tab Tabpanel Option Progressbar Textbox Treeitem Widgets Banner Complementary Contentinfo Form Main Navigation Search Application Landmarks

Slide 19

Slide 19 text

Skip to main content ● Accessible ● Semantic

Slide 20

Slide 20 text

Coding for A11y - CSS Don’ts :before, :after { content: “previous page” } :hover {} px DO’s :focus {} :active{} rem

Slide 21

Slide 21 text

Coding for A11y - CSS .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } Help

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Coding for A11y - JavaScript function toggleMenu() { menuIcon.addEventListener('click', function () { sideBar.classList.toggle('open'); if (sideBar.classList == "") { setAriaExpanded('false'); } else { setAriaExpanded('true'); } }); } // screen reader accessibility function setAriaExpanded(val) { for (var i = 0; i < menuIcons.length; i++) { menuIcons[i].setAttribute('aria-expanded', val); } }

Slide 24

Slide 24 text

Testing Tools

Slide 25

Slide 25 text

A11Y - Tools

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

A11Y - Assistive Technology - Screen Readers VoiceOver + Safari JAWS + Internet Explorer NVDA + Firefox

Slide 28

Slide 28 text

Video

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Manila

Slide 31

Slide 31 text

External Audits and Certifications

Slide 32

Slide 32 text

How did Apply and Careers do?* *As of Q4 2017-2018

Slide 33

Slide 33 text

Case Studies | Stories | Interesting bits

Slide 34

Slide 34 text

Visual perception should match the auditory perception Let’s listen to an audio clip...

Slide 35

Slide 35 text

Be wary of browser differences Internet Explorer Chrome 12 key presses to navigate 6 items 6 key presses to navigate 6 items IE defines SVG elements as focus-able. The first keypress puts focus on the anchor and second moves the focus to the SVG.

Slide 36

Slide 36 text

Operable vs Consistent

Slide 37

Slide 37 text

Missing styling standards Why was this painful? Client CSS customisation - Apply header inline style - Careers

Slide 38

Slide 38 text

PageUp GEL: https://gel.pageuppeople.com

Slide 39

Slide 39 text

Landmark navigation issues

Slide 40

Slide 40 text

ARIA and when not to use it
header
I’m a cute butterfly
vs

header

I’m a cute butterfly

header

vs

header

If you an use a native HTML element or attribute with the semantics of behavior you require already built into it, then do so Do not change the native semantics

Slide 41

Slide 41 text

The Accessibility Resolution Playbook

Slide 42

Slide 42 text

Melbourne

Slide 43

Slide 43 text

Optimizing Quantitatively Managed Defined (Standard) Managed (Repeatable) Continually optimizing accessibility processes Actively managing, controlling standard accessibility processes Using standard, documented processes for accessibility across the organization Encouraging discipline and increasing the repeatability of accessibility processes Performing accessibility activities in an ad hoc, uncontrolled and reactive manner Initial (Chaotic) We are here A11y Maturity Model

Slide 44

Slide 44 text

accessibility chapter-frontend So what now? Join some channels Empathize with our users Use your software with the keyboard only Install a screen reader like NVDA to read out your software Check your web pages by using Wave

Slide 45

Slide 45 text

Useful Links ● Web Content Accessibility Guidelines (WCAG) 2.0 - W3C ● https://www.w3.org/WAI/WCAG21/Understanding/ ● https://github.com/filipelinhares/WAI-ARIA-cheatsheet ● https://webaim.org/standards/wcag/checklist ● https://knowledgeportal.pageuppeople.com/building-a-site-with-accessibility-in-mind/ ● https://www.nvaccess.org/ ● http://www.freedomscientific.com/Products/Blindness/JAWS ● https://webaim.org/resources/contrastchecker/ ● https://www.w3.org/TR/WCAG20/https://www.w3schools.com/html/html5_semantic_elements.asp ● http://w3c.github.io/html/dom.html#allowed-aria-roles-states-and-properties ● https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh ● http://accessibility.voxmedia.com/

Slide 46

Slide 46 text

Questions