Slide 1
Slide 1 text
Accessibility
Web Accessibility Workshop
Slide 2
Slide 2 text
Agenda
Why accessibility matters?
Accessibility Guidelines & Standards
Accessibility layers
● Visual design for A11y
● Coding for A11y
Testing Tools
Next actions
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
Visual and Interaction Layer
Slide 14
Slide 14 text
Design - Accessibility
Slide 15
Slide 15 text
Accessibility
Responsive
Desktop
Minimum touchable area on responsive: 42x42px
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Code Layer
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Coding for A11y - HTML
Native HTML5 = Semantic markup = Accessibility
Native HTML tag
Semantic
Non semantic
Slide 21
Slide 21 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 22
Slide 22 text
Coding for A11y - ARIA tags - Roles - Landmarks
Slide 23
Slide 23 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 25
Slide 25 text
Coding for A11y - CSS
Don’ts
:before, :after {
content: “previous page”
}
:hover {}
px
DO’s
:focus {}
:active{}
rem
Slide 26
Slide 26 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 27
Slide 27 text
No content
Slide 28
Slide 28 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 29
Slide 29 text
Testing Tools
Slide 30
Slide 30 text
A11Y - Tools
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
A11Y - Assistive Technology - Screen Readers
VoiceOver + Safari NVDA + Internet Explorer JAWS + Firefox
Slide 34
Slide 34 text
Video
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
What is next?
Phase 1
● Run the evaluation tools
● Start from visual accessibility
● Focus on keyboard navigation
Phase 2
● Content accessibility
● Screen reader