These slides show how important is the subject Accessibility and how developers can contribute to make things better by producing accessible websites. It's in our responsability to design and implement accessible tools and website. If we developers don't care, nobody will.

1. 19.02.2019
CSSibility…
we should
care
Marouen Mhiri - Karlsruhe CSS-Meetup

2. 19.02.2019
Marouen Mhiri
Web developer
CSS
withoutJS.com

3. 19.02.2019
Agenda
• Accessibility (a11y)
• Why should we care?
• First steps as developers
• CSS-properties to consider
• Browsers do already care

4. 19.02.2019
Accessibility
(A11y)
1

5. 19.02.2019
Definition
„Web accessibility means that websites, tools, and technologies
are designed and developed so that people with disabilities can
use them.“
(https://www.w3.org/WAI/fundamentals/accessibility-intro/#what)
2

6. 19.02.2019
Disabilities
3
Permanent Disability
Short-term (Temporary) Disability:
Conditional or Situation Disability:
Logic dependence Disability:

7. 19.02.2019
Why should we care?
4

8. 19.02.2019 5
equal access and equal opportunity
New business prospectives
Laws and policy requirements

9. 19.02.2019
First steps as
developers
6

10. 19.02.2019
• make the font-size bigger
• 12px used to be a standard
• make sizes between 15 and 18. Preferred: 18-20
• use the line-height
• standard: 1.2
• preferred: 1.5
• align your text but don’t justify it
• don’t justify because the spaces are irregular and the css hyphens-property
is not well supported
• use the alt-Tag
• <img src =”image-location” alt=”this is where your image description goes”>
• think about fallbacks
• use @support and use it right
• (http://romeo.elsevier.com/accessibility_checklist/)
7

11. 19.02.2019
CSS-properties to
consider
8

12. 19.02.2019
display: contents
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
ul {
display: contents;
}
9

13. 19.02.2019
flex-direction
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
ul {
display: flex;
flex-direction: column-reverse;
}
10

14. 19.02.2019
flex/grid - order (1)
<ul>
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
ul {
display: flex;
flex-direction: column;
}
.item2 {
order: 1;
}
.item3 {
order: 2;
}
.item1 {
order: 3;
}
11

15. 19.02.2019
flex/grid - order (2)
1
3
2 4
6
5
8
7
12

16. 19.02.2019
content: "text"
<h2>Headline Text</h2>
h2::after {
content: “Subline Text“;
}
13

17. 19.02.2019
content: "text"
@media print {
a[href^="http"]:not([href*="mywebsite.com"])::after {
content: " (" attr(href) ")";
}
}
14

18. 19.02.2019
Browsers do already
care
15

19. 19.02.2019
prefers-reduced-motion
.animation {
-webkit-animation: vibrate 0.3s linear infinite both;
animation: vibrate 0.3s linear infinite both;
}
<div class="animation">animated box</div>
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
-webkit-animation: none;
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
16

20. 19.02.2019
inverted-colors
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors
<p>If you're using inverted colors, this text should be blue
on white (the inverse of yellow on black). If you're not, it
should be red on light gray.</p>
@media (inverted-colors: inverted) {
p {
background: black;
color: yellow;
}
}
@media (inverted-colors: none) {
p {
background: #eee;
color: red;
}
}
p {
color: gray;
}
17

21. 19.02.2019
Why should we care?
18

22. 19.02.2019
because if we
(Developers) don’t,
nobody will.
19

23. 19.02.2019
Thank you!!!
marouen-mhiri.com
@MarouenMhiri
„Leave NO ONE behind“
- Steven Champeon