Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
5 Ways to Simply Add Media
Accessibility (m16y) to your
Jamstack app
Tessa Mero
Step 1:
Understanding Web
Accessibility
Accessible to ALL
Visual impairment- (light sensitivity, contract
sensitivity, blind, etc)
Hearing impairment (deaf, sound...
Step 2:
Understanding Media
Accessibility (m16y)
99% of Websites Use
Some Form of Media
if {15% users need
accessible sites &&
there are 4.8b
website users} then
That’s over 720 m
people that need
YOU. The Developer.
Solution?
Updating thousands of media files can be long and tedious.
You can use a Media API to make simple on-the-fly changes
Step 3:
Use Media Technology
Automate image tag for alt text
Demo:
https://codepen.io/tmero/pen/RwGOvyy
Automate transcriptions for videos
Demo:
Demo: https://maple-thankful-starburst.glitch.me/
Code: https://glitch.com/edit/#...
Color Blind Simulations
Demo:
https://codepen.io/tmero/pen/dypLrrL
Other things to try:
● Create tool to give individuals ability to customize, such as contract or brightness slider
● Creat...
Step 4:
Use Tools/Plugins
Plugins:
● Vue.js Accessibility Plugin (Widget to help with visual needs)
○ https://github.com/mayashavin/vue-accessibilit...
Tools:
● Contrast Checker (WebAIM)
● Accessible Name and Description Checker (ANDI)
● Npm package: Colorable: https://jxnb...
Step 5:
Start small. Do more
https://m16y.io/
@tessamero
tessa.mero@cloudinary.com
slideshare.net/tessa99
5 ways to simply add media accessibility (m16y) to your jamstack app
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

5 ways to simply add media accessibility (m16y) to your jamstack app

Download to read offline

media accessibility

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

5 ways to simply add media accessibility (m16y) to your jamstack app

  1. 1. 5 Ways to Simply Add Media Accessibility (m16y) to your Jamstack app Tessa Mero
  2. 2. Step 1: Understanding Web Accessibility
  3. 3. Accessible to ALL Visual impairment- (light sensitivity, contract sensitivity, blind, etc) Hearing impairment (deaf, sound sensitivity, etc) Temporary Impairment (accident) Cognitive/mental (ADHD, English as 2nd language, seizure, focusing, etc) Savoryspiceshop.com using accessiBe plugin
  4. 4. Step 2: Understanding Media Accessibility (m16y)
  5. 5. 99% of Websites Use Some Form of Media
  6. 6. if {15% users need accessible sites && there are 4.8b website users} then
  7. 7. That’s over 720 m people that need YOU. The Developer.
  8. 8. Solution?
  9. 9. Updating thousands of media files can be long and tedious. You can use a Media API to make simple on-the-fly changes
  10. 10. Step 3: Use Media Technology
  11. 11. Automate image tag for alt text Demo: https://codepen.io/tmero/pen/RwGOvyy
  12. 12. Automate transcriptions for videos Demo: Demo: https://maple-thankful-starburst.glitch.me/ Code: https://glitch.com/edit/#!/maple-thankful-starburst
  13. 13. Color Blind Simulations Demo: https://codepen.io/tmero/pen/dypLrrL
  14. 14. Other things to try: ● Create tool to give individuals ability to customize, such as contract or brightness slider ● Create tool to check if your website follows WCAG AA regulations for accessibility laws. https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
  15. 15. Step 4: Use Tools/Plugins
  16. 16. Plugins: ● Vue.js Accessibility Plugin (Widget to help with visual needs) ○ https://github.com/mayashavin/vue-accessibility-demo ● React.js and Gatsby Plugins/Resources ○ https://dev.to/pagepro_agency/the-basics-of-web-accessibil ity-in-react-gatsby-projects-5ck2
  17. 17. Tools: ● Contrast Checker (WebAIM) ● Accessible Name and Description Checker (ANDI) ● Npm package: Colorable: https://jxnblk.github.io/colorable/ ● ChromeVox - Testing screen reading capability
  18. 18. Step 5: Start small. Do more https://m16y.io/
  19. 19. @tessamero tessa.mero@cloudinary.com slideshare.net/tessa99
  • AlyonaZhuravleva

    Jul. 3, 2021

media accessibility

Views

Total views

104

On Slideshare

0

From embeds

0

Number of embeds

6

Actions

Downloads

1

Shares

0

Comments

0

Likes

1

×