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 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
vs
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
header
I’m a cute butterfly
header
vs
header
header
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