<AccessibleCSSinJS />
Maya Shavin
Senior Software Engineer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9671467/Microsoft_logo__2012_.svg.png)
In this talk
- ✨ A quick recap of accessibility
- 😰 Challenges & Solutions
- ✅ Tools
- 🚀 Developing an accessible mindset
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/5915533/Screen_Shot_2019-03-20_at_8.40.39.png)
![](https://cloudinary-res.cloudinary.com/image/upload/v1554013167/VueJS_Amsterdam_2018/jmfFw8ppxuQcYkdKe7v2RMaMweLj9S20xIeTzt09LKz5Kfc18nyZJ7eKojp2IQcMqFVgiSXbpvLHu8_ekrxTTD4tEFPwToiUgal_u9h_Lu4JnsdZvlDd2ImQ0kNwt7m-3ysS0I_OoQw.png)
What is accessibility?
![](https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/eyes_1f440.png)
See
🦻
Hear
![](https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/thinking-face_1f914.png)
Understand
⌨️
Use/Navigation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9673066/iStock-509301146.jpeg)
![](https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/eyes_1f440.png)
See
🦻
Hear
![](https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/155/thinking-face_1f914.png)
Understand
⌨️
Use/Navigation
Standards
Web Content Accessibility Guidelines
Perceivable
Operable
Understandable
Robust
WCAG 2.1
A
AA
AAA
- Web content
- Assist Technologies (WAI-ARIA)
- Web technology (Flash, video, audio)
- Visually impaired
- Cognitive disorders
Accessibility is HARD
Accessibility in React is HARD
Accessibility in React is COMPLEX
But NOT hard!
Accessibility is COMPLEX
Accessibility in components
With or without CSS-in-JS
Semantic HTML Tags
Focus management
Screen Reader support (WAI-ARIA etc)
Dynamic Content
Accessibility in components
Magnification support (200%, 400%)
Using Sematic HTML Tags
Landmarks/Regions
& Headings
table
h1-h7
article
header
footer
nav
dialog
button
a
input
![](https://cloudinary-res.cloudinary.com/image/upload/v1554150997/VueJS_Amsterdam_2018/E-wB7le1ePa3Pkyu_k898LTbiMNVOqTvaCB_L5ubMuN3NBkh2kfd6-0FDHYhNm0pHRzdZpRoy0kfVzWPkE7v1rmMBRQlCCXK4-c5D8ShdRskrOeoYoFtBRMqwhkP0O5aiopch9T7ilc.png)
![](https://cloudinary-res.cloudinary.com/image/upload/v1554151023/VueJS_Amsterdam_2018/XEDT6fGG2lRu0uNdxLxGa9gVlL2BtA7I04tTz0Xlfldkaqn19chPV2YN0pw4_TgaECmIC5asUiCqTEyDZL_rOpygpSHkwoRNrsPImg7dkppnazF-TT9NtRMsd4_OsvDXQ5qLmbR1t9E.png)
![](https://cloudinary-res.cloudinary.com/image/upload/v1554151042/VueJS_Amsterdam_2018/rr99frOdGkQ82kI0FI2famt6wCnOKGA7V0EZNgqF7rYG9727lFVO8pEsNRPGynvM3k9nyMwh0CbygwOUxgym75IQ_yzN8YvoG2AfZ_HJ.png)
![](https://cloudinary-res.cloudinary.com/image/upload/v1554151063/VueJS_Amsterdam_2018/lPRFA46S2Cg5S2NnbNu3i8p9AAaXrL6EE_eLgF4q-QDsWdrdKBJ9AMCZ8SG_fLvjF5kRcSO94oCX_suqGCWX9Y-froYi2pCS4mbQkUtxKIoHnLDOaVtrtUDXcUUA8gGUa5-_2Q7fOWQ.png)
JS
CSS
Parse CSS
Inject to Stylesheet
stylesheet.insertRule
Browser
HTML Paint
load
download
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9673920/11-Announcedcontentorder-1.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9673920/11-Announcedcontentorder-1.jpeg)
✅ Keep the heading order structure (h1 - h7)
✅ Use CSS order to re-arrange the appearance
Focus management
- Order of focus?
- Auto-focus ?
- Keyboard navigation flow ?
- Think logical
- Use refs, DOM API (.focus())
- Use tabIndex, order
Screen Reader support (WAI-ARIA)
<button
aria-label="Place an order"
>
Order
</button>
<button
aria-label="Place order button"
>
Order
</div>
✅
Place an order, button
❌
Place order button, button
aria-label vs aria-labelledby
<dialog role="dialog" aria-label="Sample Modal">
<header>
<h2 id="header-title">
Sample Modal
</h2>
</header>
<main>
<p id="description">
This is the content
</p>
</main>
<footer>
<button aria-label="close dialog">
Close
</button>
</footer>
</dialog>
<dialog role="dialog" aria-labelledby="header-title">
<header>
<h2 id="header-title">
Sample Modal
</h2>
</header>
<main>
<p id="description">
This is the content
</p>
</main>
<footer>
<button aria-label="close dialog">
Close
</button>
</footer>
</dialog>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9673958/Screen_Shot_2022-06-28_at_1.42.10.png)
<Badge>
Item Two
<BadgeIcon
aria-label="Badge count 6"
role="status"
>
6
</BadgeIcon>
</Badge>
Item two, badge count 6
✍️ Visible and understandable label
✅ Clear ARIA role when needed
👷♂️ Interactive value (aria-disabled, aria-selected, etc)
🗒️ Concise description as hints (don't use title)
Working with screen reader
3 out of 5 tasks completed
Add to list, button
Dynamic content with aria-live & aria-atomic
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9673958/Screen_Shot_2022-06-28_at_1.42.10.png)
<Badge className="v-badge theme--dark">
Item Two
<BadgeIcon
aria-atomic="true"
aria-live="polite"
aria-label="Badge count 6"
role="status"
>
6
</BadgeIcon>
</Badge>
100% accessible in combination with lazy loading component
Magnification support
200% - 400% Zoom
Text readability
Contrast/Color
Layout consistency
===
Responsiveness
Use media query & JS calculation
Color combination 🎨
![](https://cloudinary-res.cloudinary.com/image/upload/v1554153149/VueJS_Amsterdam_2018/YJiL812ChpSgzvezTG6yIUEf2NyQQKxOOCtrTtQHI6G9-1TcVJvosSb2eSn7JXYZqy_6zpoJEuiffd33xzEa4ogNOvWLMwYY3BCX1ek9_SXyGMKkmyO0enpyKQgbjy67AW8xF87b5wQ.gif)
Tools
Think Accessibility FIRST
And split the CSS code
Building an accessible component
What is component's type?
Focus & navigation behavior
Component internal flow and external flow
Component stylings
Interactivity
Take action 📢
- ✅ Be intuitive & organized
- ✅ Apply WAI-ARIA approriately
- ✅ Image Alt & description whenever needed!
- ✅ Pay attention to color combination!
- ✅ Test accessibility with Axe, Accessibility Insights or Lighthouse
- ✅ Manual testing with Screen reader and Screen magnifier
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9048077/google_developers_logomark_color.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9048132/colored-text.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005381/images/9291607/download.png)
Thank you
@mayashavin
mayashavin.com
Accessible CSS in JS?
By Maya Shavin
Accessible CSS in JS?
- 580