Title Text


Title Text








$10M

Vue your media with accessibility
🤓 #m16y 🤓


Me as 👩💻
Senior FrontEnd Developer


@MayaShavin



This talk is about...
- 🤔 What is media accessibility?
- 😰 The current challenges
- ✅ Techniques for media accessibility
- 🚀 Developing efficient accessibility policy


Accessibility is
See
Understand
Use





Media Accessibility (m16y)
Use of color
Background images

Visual alternative


😰 Challenges


Photophobia
Light sensitivity
HEADING
Contrast sensitivity



HEADING

https://www.uat.edu


Deuteranopia



Tritanopia


The color game




Achromatopsia




Blindness

✅ Techniques


Dark Mode

Light Mode
filter
invert()

.darkMode {
filter: invert(1);
}




Contrast sensitivity



.container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: black;
}
.banner {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.6;
}
.title {
z-index: 2;
font-size: 50px;
color: white;
}
.container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: black;
}
.banner {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.6;
}
I'm a title


.banner {
filter: brightness(
var(--bannerBrightness)
);
}
.title {
position: absolute;
margin: auto;
z-index: 2;
font-size: 50px;
color: white;
}
<img class="banner"
.../>
<img class="banner"
style="--bannerBrightness:60%"
.../>
.banner {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.6;
}
.title {
z-index: 2;
font-size: 50px;
color: white;
}
I'm a title




Color blind?


No CSS Solution!
😱







Achromatopsia


<img
alt="Superdry Dry Originals Pocket T-Shirt"
data-color="Vintage Brick Red"
...
/>






👑 Extra guidelines


WAI-ARIA


The a11y relationship
Browser DOM
WAI ARIA
Assistive Technology

roles
states
properties


Example
<button
aria-disabled=”false"
>
Place order
</button>
<div
role=”button"
aria-disabled=”false"
>
Place order
</div>
✅
❌








Text & Texture




An icon is worth a thousand words


✅
❌


Color combination 🎨


⚒️ Tools





Lighthouse


NoCoffee Simulator


Sim Daltonism

Take action 📢
- ✅ Be intuitive
- ✅ Apply WAI-ARIA (good for SEO & screen reader)
- ✅ Image Alt & description is a must!
- ✅ Pay attention to color combination - use Simulator!
- ✅ Test accessibility with Axe, Accessibility Insights or Lighthouse


Projects & Links 🚀
- 🔗 Vue M16y project: https://github.com/mayashavin/vue-m16y
- 🔗 Demo: https://github.com/mayashavin/vue-accessibility-demo
- 🔗 M16y project news & updates: https://m16yproject.io
- 🔗 Accessibility enhancement for Vue Storefront





Vue your media with accessibility (m16y)
By Maya Shavin
Vue your media with accessibility (m16y)
How do you, as developers, handle medias to offer good UX to visual impairments at minimal extra code and complexity? That’s what my talk about. It will focus on a CSS/JS-less developing approach to achieve full accessibility support with real time media manipulation, and keep the process fun.
- 3,026