From 08d594e3a4989fa2375a1dde60237d31c7e3ff9e Mon Sep 17 00:00:00 2001 From: Gleb Martynov Date: Sat, 25 Dec 2021 10:39:04 +0100 Subject: [PATCH] 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 #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. --- Unwrap/Content/SixtySeconds/HTMLWrapper.html | 2 +- Unwrap/Reusables/Themes/Dark/DarkTheme.css | 4 ++++ Unwrap/Reusables/Themes/Light/LightTheme.css | 4 ++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/Unwrap/Content/SixtySeconds/HTMLWrapper.html b/Unwrap/Content/SixtySeconds/HTMLWrapper.html index f6ef0d04..43eeed57 100644 --- a/Unwrap/Content/SixtySeconds/HTMLWrapper.html +++ b/Unwrap/Content/SixtySeconds/HTMLWrapper.html @@ -8,7 +8,7 @@ -

+

Play Video

[BODY] diff --git a/Unwrap/Reusables/Themes/Dark/DarkTheme.css b/Unwrap/Reusables/Themes/Dark/DarkTheme.css index 7c6e0066..a7010387 100644 --- 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 index fa05b2a7..3c3076e9 100644 --- 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!