Do your best to make your webpage accessible

Do your best to make
your webpage accessible
Boštjan Kovač - @boshtian

THANKS!
@drupaldevdays #drupaldevdays

ABOUT THE SPEAKER
● Boštjan Kovač
● Technical director @
● @boshtian on drupal.org, Twitter …

● Working on couple of projects where
accessibility was a demand
● Went on Eric Eggert’s session in Drupal
Camp Vienna in 2015
● Really figured out how ignorant I was
● I don’t want to be ignorant
INSPIRATION AND MOTIVATION

TODAY WEBPAGES ARE

AWESOME UI

BEAUTIFUL DESIGN

LIGHTNING SPEED

WHAT ABOUT ACCESSIBILITY?

SO, CAN YOU DO IT?

FACTS

15%
of the world's population (>1 billion of people), have some form of disability.
– WHO, November 2016

110 - 190
million adults have significant difficulties in functioning.
– WHO, November 2016

8%
of men have some form of color blindness.
– NEI (National eye institute), February 2015

● Broken arm
● Lost eyeglasses
● Looking a video in a noisy room
SITUATIONAL DISABILITIES

● Responsive webpages for mobile devices
● Multi-lingual webpages
● Google is the biggest blind user of the
web
THIS IS ALSO ACCESSIBILITY

● Zoom
● Screen readers
● Browser configuration
● Captions
● Braile keyboard
● Mouth mouse
ASSISTIVE TECHNOLOGY

“The power of the Web is in its universality.
Access by everyone regardless of disability is an
essential aspect.”
- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

● Designing for web accessibility
● Creating content for web accessibility
● Developing for web accessibility
HOW TO START?

● Guidelines for creating accessible
webpages
● Developed by WAI under W3C
● Three levels of conformance:
○ Level A
○ Level AA
○ Level AAA
WCAG

● Level A
○ Provide text alternatives for non-text content
○ Provide a ‘Skip to Content’ link
○ Accessible by keyboard only (unplug mouse)
○ Logical order
○ Don’t trap keyboard users
○ Helpful and clear page title
○ Every link’s purpose is clear from its context
WCAG 2.0

● Level AA
○ Contrast ratio between text and background is
at least 4.5:1 (talk with the designers)
○ Text can be resized to 200% without loss of
content or function
○ Keyboard focus is visible and clear
○ Don’t use images of text
○ Use menus consistently
WCAG 2.0

● Level AAA
○ Contrast ratio between text and background is
at least 7:1 (again, for designers)
○ Offer users a range of presentation options
○ Don’t interrupt users
○ Don’t change elements until users ask
○ Provide a text alternative to videos
WCAG 2.0

● Public Working Draft
(comment by 31 March 2017)
● Attention being given to three areas
○ Small-screen and touch mobile devices
○ Users with low vision
○ Users with cognitive or learning disabilities
WCAG 2.1

● 3 Succes Criterias formally accepted
● 25 other Success Criterias suggestions
● https://www.w3.org/TR/WCAG21/
WHAT’S NEW IN WCAG 2.1

SIMPLE EXAMPLES I LIKE TO SHOW

SCREEN READER EXAMPLES
<button><i class="fa fa-pencil fa-2x"></i></button>
<button><i class="fa fa-remove fa-2x"></i></button>
<button title="Edit"><i class="fa fa-pencil fa-2x"></i></button>
<button title="Remove"><i class="fa fa-remove fa-2x"></i></button>

<img src="images/marvin.jpg" alt="Marvin the robot">
<a href="print.html">
<img src="images/printer.png" alt="Print document">
</a>
Informative images
<img src="images/agiledrop.png" alt="Agiledrop logo"></a>
Images of text
Functional images

DRUPAL & ACCESSIBILITY

● HTML5 tags <article>, <section>,
<header>, <aside>, <mark> and <nav>
● WAI-ARIA markup out of the box
○ <role=”main”> for main content
○ <role=”complementary”> for sidebars
HTML5 & IMPROVED SEMANTIC

● ARIA properties:
aria-required="true", aria-live, aria-label,
aria-labelledby, aria-describedby
● ARIA states:
aria-disabled="true", aria-checked,
aria-invalid
HTML5 & IMPROVED SEMANTIC

REMEMBER!
Google likes semantic markup.
HTML5 & Improved Semantics

● This is more for designers
● Drupal core developers do care
COLOR CONTRAST

● Alternative text (alt) required by default
● User image also has alt text required
IMAGES

● Drupal.announce() is now part of core
● Drupal.tabbingManager is also in core
● Fieldsets for radios and checkboxes in
Form API
Other things that improve accessibility

● jQuery UI used for autocomplete and
dialogs
● Inline Form Errors added in core as an
experimental module
Other things that improve accessibility

MOST COMMON MISTAKES DEVELOPERS MAKE

MARKUP
<header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t }}">
<div class="section layout-container clearfix">
{{ page.secondary_menu }}
{{ page.header }}
{{ page.primary_menu }}
</div>
</header>
Bartik theme (page.html.twig)

MARKUP
<header role="banner">
{{ page.header }}
</header>
Classy theme (page.html.twig)

REMEMBER THEM?

MARKUP
<div class="main-header">
<div class="col-sm-12 clearfix">
{{ page.header }}
</div>
</div>
Ignorant theme

MARKUP
{% if page.sidebar_first %}
<div id="sidebar-first" class="column sidebar">
<aside class="section" role="complementary">
{{ page.sidebar_first }}
</aside>
</div>
{% endif %}
Bartik theme (page.html.twig)

MARKUP
<aside class="layout-sidebar-first" role="complementary">
</aside>
{% endif %}
Classy theme (page.html.twig)

MARKUP
<div class="sidebar-first">
</div>
{% endif %}
Ignorant theme

SKIP LINK
<a href="#main-content" class="visually-hidden focusable">
{{ 'Skip to main content'|t }}
</a>
Don’t remove this (html.html.twig)
<a id="main-content" tabindex="-1"></a>
And this (page.html.twig)

IMAGES
<img class="special-class" src={{ file_url(node.field_test_image.entity.fileuri) }}>
Writing own markup for fields
● So many better ways of doing this
● Create your own twig file, preprocess ...

FORMS
● Form API will do most of the work for you
so use it!
● Use #title property on every element
● Use #title_display if you want to hide it
from display
● #description property is also highly
advisable

FORMS
● Use fieldsets to group elements which
belong together logically
○ Radio buttons, Checkboxes, Date elements
● Giving initial focus fo input field is almost
always a bad thing to do

AJAX
● Dynamic changes on the page are tricky
for screenreaders
● Also scrolling can add additional content
● Use Drupal.announce() in Drupal 8

Drupal.announce()
$('#search-list')
.on('itemInsert', function (event, data) {
// Insert the new items.
$(data.container.el).append(data.items.el);
// Announce the change to the page contents.
Drupal.announce(Drupal.t('@count items added to @container',
{'@count': data.items.length, '@container': data.container.title}
));
});
Example from announce.js

CSS
● Help yourself
● Example: use role attributes for styling
[role*=banner] a {
border-bottom: none;
}
Bartik theme

CSS
[role*=complementary] h2 {
font-size: 2rem;
color: #3b3b3b;
border-bottom: 1px solid #d6d6d6;
}
H2 in sidebar

CSS
[role*=main] p {
color: #3b3b3b;
}
Paragraph in main content

DRUPAL CONTRIB MODULES

BLOCK ARIA LANDMARK ROLES
● Drupal 7 & Drupal 8
● Extra block setting to add ARIA role
<div id="block-tags" class="..."
role="contentinfo">
...
</div>

SWITCHTHEME
● Only Drupal 7
● New block available to switch theme
● Custom links by using url parameter
<a href="http://d7.dev/?theme=garland" … >
Switch to Garland theme
</a>

HIGH CONTRAST
● Drupal 7 & Drupal 8
● New block available to switch color scheme
● Toggle high contrast after skip link (D7 only)

HIGH CONTRAST

ACCESSIBLE FORMS
● Only drupal 7 (Drupal 8 actually has most of
this out of the box)
● It adds:
○ required attribute to required fields
○ required label to required fields (instead of asterix
*)
○ aria-invalid to form fields with errors

OTHER TOOLS TO HELP YOU OUT

BROWSER EXTENSIONS
● Accessibility Developer Tools (Chrome)

BROWSER EXTENSIONS
● Siteimprove Accessibility Checker (Chrome)

BROWSER EXTENSIONS
● WAVE Accessibility Extension
(Chrome & Firefox)
● aXe (Chrome)
● WCAG Contrast checker (Firefox) or Color
Contrast Analyzer (Chrome)
● Web Accessibility Toolbar for IE

WEB-BASED TOOLS
● https://achecker.ca/checker/
● http://www.508checker.com/
● http://www.cynthiasays.com/
● http://ffoodd.github.io/a11y.css/

BOOK(S)
● https://www.wuhcag.com/wcag/

RESOURCES
● How people with disabilities use web:
○ https://www.w3.org/WAI/intro/people-use-web
● Tips for getting started:
○ https://www.w3.org/WAI/gettingstarted/tips/
● Tutorials for different elements:
○ https://www.w3.org/WAI/tutorials/
● Before and after demo:
○ https://www.w3.org/WAI/demos/bad/

ACCESSIBILITY IS NOT AN AFTERTHOUGHT

MAKES YOUR WEBSITE EASIER TO UNDERSTAND
(to people and to search engines)

ACCESSIBILITY IS AN OPPORTUNITY

THANK YOU
BOŠTJAN KOVAČ
@boshtian / bostjan.kovac@agiledrop.com

Do your best to make your webpage accessible

Recommended

Recommended

More Related Content

Similar to Do your best to make your webpage accessible

Similar to Do your best to make your webpage accessible (20)

Recently uploaded

Recently uploaded (20)

Do your best to make your webpage accessible