Presentation about web accessibility and specifics about Drupal on this subject. Presented at Drupal Developer days in Seville - https://seville2017.drupaldays.org/.
3. ABOUT THE SPEAKER
● Boštjan Kovač
● Technical director @
● @boshtian on drupal.org, Twitter …
@drupaldevdays #drupaldevdays
4. ● 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
@drupaldevdays #drupaldevdays
18. ● Responsive webpages for mobile devices
● Multi-lingual webpages
● Google is the biggest blind user of the
web
THIS IS ALSO ACCESSIBILITY
@drupaldevdays #drupaldevdays
20. “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
@drupaldevdays #drupaldevdays
21. ● Designing for web accessibility
● Creating content for web accessibility
● Developing for web accessibility
HOW TO START?
@drupaldevdays #drupaldevdays
22. ● Guidelines for creating accessible
webpages
● Developed by WAI under W3C
● Three levels of conformance:
○ Level A
○ Level AA
○ Level AAA
WCAG
@drupaldevdays #drupaldevdays
23. ● 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
@drupaldevdays #drupaldevdays
24. ● 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
@drupaldevdays #drupaldevdays
25. ● 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
@drupaldevdays #drupaldevdays
26. ● 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
@drupaldevdays #drupaldevdays
27. ● 3 Succes Criterias formally accepted
● 25 other Success Criterias suggestions
● https://www.w3.org/TR/WCAG21/
WHAT’S NEW IN WCAG 2.1
@drupaldevdays #drupaldevdays
34. ● 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
@drupaldevdays #drupaldevdays
37. ● This is more for designers
● Drupal core developers do care
COLOR CONTRAST
@drupaldevdays #drupaldevdays
38. ● Alternative text (alt) required by default
● User image also has alt text required
IMAGES
@drupaldevdays #drupaldevdays
39. ● 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
@drupaldevdays #drupaldevdays
40. ● jQuery UI used for autocomplete and
dialogs
● Inline Form Errors added in core as an
experimental module
Other things that improve accessibility
@drupaldevdays #drupaldevdays
49. SKIP LINK
@drupaldevdays #drupaldevdays
<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)
51. 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
@drupaldevdays #drupaldevdays
52. 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
@drupaldevdays #drupaldevdays
53. AJAX
● Dynamic changes on the page are tricky
for screenreaders
● Also scrolling can add additional content
● Use Drupal.announce() in Drupal 8
@drupaldevdays #drupaldevdays
54. Drupal.announce()
@drupaldevdays #drupaldevdays
$('#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
55. CSS
● Help yourself
● Example: use role attributes for styling
@drupaldevdays #drupaldevdays
[role*=banner] a {
border-bottom: none;
}
Bartik theme
59. BLOCK ARIA LANDMARK ROLES
● Drupal 7 & Drupal 8
● Extra block setting to add ARIA role
@drupaldevdays #drupaldevdays
<div id="block-tags" class="..."
role="contentinfo">
...
</div>
60. SWITCHTHEME
● Only Drupal 7
● New block available to switch theme
● Custom links by using url parameter
@drupaldevdays #drupaldevdays
<a href="http://d7.dev/?theme=garland" … >
Switch to Garland theme
</a>
61. HIGH CONTRAST
● Drupal 7 & Drupal 8
● New block available to switch color scheme
● Toggle high contrast after skip link (D7 only)
@drupaldevdays #drupaldevdays
63. 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
@drupaldevdays #drupaldevdays
64. OTHER TOOLS TO HELP YOU OUT
@drupaldevdays #drupaldevdays
70. 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/
@drupaldevdays #drupaldevdays