In the age of new trends in web design and CSS technologies like Flexbox and Grids, what do we need to think about when it comes to accessibility and CSS?
2. About BarrierBreak
• Based in Mumbai, India.
• Accessibility auditing, tools and training.
• For profit enterprise with a social mission.
• One of the pioneers of accessibility
awareness in India.
• About 70-75% of our employees have a
disability of some kind.
3. About Me
• Head of Innovation and Research at
BarrierBreak
• Co-Editor of the HTML5 specification at W3C.
• Part of Web Platform WG, AGWG and more.
• Google Developer Expert.
• Previously at Opera as PM of Extensions and
part of Developer Relations.
5. Trends in web design
The web is growing more aesthetically pleasing, but at what cost?
6. Subtle
colors
• Unfortunately not caring about
contrast
• Some sites have a looping video
as a background, but with text
on top of it.
7. Gradients
Gradients are pretty popular as backgrounds too.
If care isn’t taken for proper contrast, then it makes it hard (and sometimes
impossible) to read.
8. Parallax
• Common design pattern in many
websites
• Sometimes the transitions are
too fast or cover too much of
the screen, causing strain.
9. Information online
We have a bunch of information online on accessibility for HTML, ARIA,
JavaScript etc.
10. CSS
Not too many people talk about these when talking accessibility
19. WCAG 2.0, Section 1.4.1
Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a visual
element. (Level A)
20. WCAG 2.0, Section 1.4.1
(Continued)
Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a visual
element. (Level A)
21. WCAG 2.1, Section
1.4.11
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components
Visual information used to indicate states and boundaries of user interface components, except for
inactive components or where the appearance of the component is determined by the user agent and not
modified by the author;
Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics
is essential to the information being conveyed.
AT RISK!!!
22. Tools I use
• Contrast (Mac Paid App)
• Chrome Canary Devtools (Free) + Google Developer Accessibility Tools
Extension
• There are a number of similar tools which do pretty much the same
thing. It’s a matter of preference.
23. New in Chrome 65 (Canary as of now)
Open up color picker in devtools. Get color picker which can analyze color contrast ratio.
28. This debate got a lot of talk a while
ago
Source: https://hackernoon.com/rems-and-ems-and-why-you-probably-dont-need-them-
664b9ce1e09f
29. “My point: you don’t need in depth knowledge
and fancy tools for working out if rems and
ems are ‘better for accessibility’ — just imagine
that you are someone with bad eyesight”
Quote from the article - 1
30. “The above facts, to me, make it crystal clear
that browser text size adjustment is of no use
in the real world. And so I will not take this
setting into account in my decision
making process.”
Quote from the article - 2
31. With points and counter points
Source: https://medium.com/@jpdevries/rems-and-ems-and-why-you-probably-
need-them-ff99a0002cdd
37. Upcoming: CSS Paint
API
Generate presentational graphics using JS instead of using an image via
`url()`
Tutorial: https://developers.google.com/web/updates/2018/01/paintapi
40. Parallax
• Common design pattern in many
websites
• Sometimes the transitions are
too fast or cover too much of
the screen, causing strain.
41. Vestibular Disorder – causes (on the
web)
• Many sites have parallax based designs, which can tend to cause
discomfort to people with vestibular disorders.
• Can also be caused by certain animations moving quickly in the page.
43. prefers-reduced-motion
(continued)
• Listen if the user has changed preference for reduced motion at the OS
level
• Adjust UI accordingly
var reducedMotionQuery = matchMedia('(prefers-reduced-motion)');
function handleReduceMotionChangeEvent() {
if (motionQuery.matches) {
/*User has enabled 'reduced motion' preferences in the OS*/
/* adjust motion of 'transition' or 'animation' properties */
} else {
/* display animation with standard speed. Default UI elements. */
}
}
recuedMotionQuery.addListener(handleReduceMotionChangeEvent);
handleReduceMotionChanged();
44. Reduced motion – Things to keep in
mind
• Don’t disable or reduce all animation.
• Some animation might be essential to understanding the content
properly.
• Only reduce animation or movement of UI elements which are likely
to cause vestibular issues.
• Listen to user feedback on it.
45. Inverted colors
• This allows you to have apply a exclusive set of CSS which is only there for
people who have switched on inverted colors on the OS level.
• Safari only currently.
• Typical use case is for images, since inverted colors inverts images too.
@media (inverted-colors) {
...
}
50. Windows High-Contrast Mode -
Continued
Text is mapped to windowText
Hyperlinks is mapped to N/A, we apply
the color to <a>
Selected Text is mapped to highlightText
& highlight
Button Text is mapped to buttonFace
Background is mapped to window
51. Are we with the times?
1.3.2 - Meaningful Sequence
Level A
When the sequence in which content is presented affects
its meaning, a correct reading sequence can be
programmatically determined.
52. AKA,
DOM order should match visual
order
Additional Info: https://www.w3.org/WAI/GL/WCAG20-TECHS/css.html#C27
58. Ordering in the real world
While this should be the case, and we should push
for it ... in the real world, we need to see how
practical this advice is.
Source: https://www.w3.org/TR/css-flexbox-1/#order-accessibility
59. Firefox’s Flexbox ‘bug’
Firefox used to have a ‘bug’, where if the visual order is changed with flexbox,
the keyboard navigation followed the visual order instead of the DOM order.
This turned out to be good, even though its technically a bug which violated
the spec.
61. How to fix problem of visual order not
matching focus
• This is a problem which needs fixing from the browsers as well as
somewhere in the specs
• I proposed an attribute which could specify how order should behave
(by default matching DOM order, but can be changed to match visual)
• Current debate whether we need a CSS fix for it or an HTML attribute
for it.
• Read more and comment on the WICG page for it.
63. Further Reading and resources
• BarrierBreak CSS Accessibility Extension
• Accessibility Developer Tools Chrome Extension
• CSS Techniques for WCAG 2.0
• Google Web Fundamentals Tutorial on the CSS Paint API
• JP de Vries article: Rems, ems and why you probably need them
• Greg Whitworth’s article on how to use –ms-high-contrast
• The webkit.org article on responsive design for motion
• Leonie Watson on the Flexbox and Keyboard navigation disconnect.
• Proposal for a new HTML attribute (or CSS entry) for allowing DOM order to
follow visual order.