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!
-Original file line number
+Diff line change
@@ Expand Up / @@ -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]
@@ Expand Down @@