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?

1. Rethinking Accessibility
Related Best Practices
for CSS in the Modern
Age
Shwetank Dixit
Head – Accessibility Innovation and Research
BarrierBreak

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.

4. Do you think this pie chart is
accessible?

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

11. The inspiration for this talk
topic

12. BarrierBreak
CSS
Accessibility
Extension

13. CSS Techniques for WCAG
2.0

14. Inspiration
• BarrierBreak CSS Accessibility Extension
• CSS Techniques for WCAG 2.0

15. Color Contrast

16. Does this dress
look white and
gold? Or black
and blue?

17. Lots of controversy of the
color scheme of this
dress

18. It even had it’s own wikipedia page

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.

24. Chrome Accessibility Developer Tools
Extension
• Inspect Element -> Accessibility Properties -> Color Contrast Ratio

25. Sample Text

26. Sample Text

27. Font-Size
Can I just px already?

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

32. Zooming
Not all devices implement zooming the same way

33. Browser zoom != font size preference

34. Zooming – watch out for
• Older browsers
• Televisions
• Some mobile browsers like Opera for Android (Text
reflow)

35. Views from a CSS WG member
Link to above screenshot on the web

36. CSS background
Images
Only for presentational content

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

38. CSS User Queries
Like media queries, but for the user’s preferences instead

39. Vestibular Disorder
Feeling of dizziness and nauseousness when large parts of the UI move
quickly.

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.

42. prefers-reduced-motion
• Apply different styles for user’s who prefer reduced motion.
• Currently Safari only.
@media(prefers-reduced-motion){
...
}

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) {
...
}

46. Page as it appears by default

47. Page when colors are inverted, but
custom CSS is not applied

48. Page with optimal look on high
contrast
@media (inverted-colors) {
img {
filter: invert();
}
}

49. Windows High-Contrast Mode
@media (-ms-high-contrast: active) {}
@media (-ms-high-contrast: black-on-white) {}
@media (-ms-high-contrast: white-on-black) {}

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

53. Can we?
In the age of Flexbox and CSS
Grid?

54. Flexbox (unchanged order
example)
<div class="flex">
<div class="item-one">
...
</div>
<div class="item-two">
...
</div>
</div>
.flex {
display: flex;
flex-direction: column;
}

55. Flexbox (changed order
example)
<div class="flex">
<div class="item-one">
...
</div>
<div class="item-two">
...
</div>
</div>
.flex {
display: flex;
flex-direction: column;
}
.item-one {
order: 1;
}

56. CSS Grid (unchanged order)

57. CSS Grid (changed order)

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.

60. Firefox’s Flexbox ‘bug’
(continued)
It’s since been ‘fixed’ and now firefox’s behavior matches other
browsers.

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.

62. Thanks!
• Shwetank Dixit
• shwetank@barrierbreak.com
• @shwetank

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.