Accessibility: Add better label to section video play buttons

I've added label "Play Video" to Chapter's Video, so that the VoiceOver speaks "Play Video Link" Adresses twostraws#226 Unfortunately native HTML-solutions for screen-readers tags don't work here(tried many). So finally i've added 1px high text to link.
gvmrtnv · Dec 25, 2021 · 08d594e · 08d594e
1 parent e9ec3e0
commit 08d594e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/Unwrap/Content/SixtySeconds/HTMLWrapper.html b/Unwrap/Content/SixtySeconds/HTMLWrapper.html
@@ -8,7 +8,7 @@
  </head>
 
  <body>
- <p class="mainImage"><a href="playVideo"><img src="[VIDEO-NUMBER].png" /></a></p>
+ <p class="mainImage"><a class="voiceOver" href="playVideo"><img src="[VIDEO-NUMBER].png" />Play Video</a></p>
 
  <div class="container">
  [BODY]

diff --git a/Unwrap/Reusables/Themes/Dark/DarkTheme.css b/Unwrap/Reusables/Themes/Dark/DarkTheme.css
@@ -25,6 +25,10 @@ a {
  text-decoration: none;
 }
 
+/*native HTML-solutions for screen-readers tags don't work here, only this tricky one*/
+a.voiceOver {
+ font-size: 1px;
+}
 
 /* 
  Getting nice syntax highlighting is tricky!

diff --git a/Unwrap/Reusables/Themes/Light/LightTheme.css b/Unwrap/Reusables/Themes/Light/LightTheme.css
@@ -29,6 +29,10 @@ a {
  text-decoration: none;
 }
 
+/*native HTML-solutions for screen-readers tags don't work here, only this tricky one*/
+a.voiceOver {
+ font-size: 1px;
+}
 
 /* 
  Getting nice syntax highlighting is tricky!