From 162e00b24378358a4ceb28fdcb24a27256e78fe2 Mon Sep 17 00:00:00 2001
From: Robin <8597693+robrobinbin@users.noreply.github.com>
Date: Sun, 17 Jan 2021 23:49:36 +0100
Subject: [PATCH] Improve accessibility rating

---
 static/style.css         |  2 +-
 templates/post.html      |  4 ++--
 templates/search.html    | 11 ++++++-----
 templates/subreddit.html |  9 +++++----
 templates/user.html      |  5 +++--
 templates/utils.html     |  2 +-
 6 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/static/style.css b/static/style.css
index 2d3b34e..1e77f0e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -49,7 +49,7 @@ nav {
 
 nav * { color: var(--text); }
 nav #reddit { color: var(--accent); }
-nav #version { opacity: 25%; }
+nav #version { opacity: 50%; }
 
 #settings_link {
 	font-size: 18px;
diff --git a/templates/post.html b/templates/post.html
index 65dfb5b..1457354 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -62,7 +62,7 @@
 
 			<!-- POST MEDIA -->
 			{% if post.post_type == "image" %}
-			<img class="post_media" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
+			<img class="post_media" alt="Post image" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
 			{% else if post.post_type == "video" || post.post_type == "gif" %}
 			<video class="post_media" src="{{ post.media }}" controls autoplay loop></video>
 			{% else if post.post_type == "link" %}
@@ -85,7 +85,7 @@
 
 		<!-- SORT FORM -->
 		<form id="sort">
-			<select name="sort"> 
+			<select name="sort" title="Sort comments by"> 
 				{% call utils::options(sort, ["confidence", "top", "new", "controversial", "old"], "confidence") %}
 			</select><input id="sort_submit" type="submit" value="&rarr;">
 		</form>
diff --git a/templates/search.html b/templates/search.html
index 69edf23..9b65664 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -6,16 +6,16 @@
 {% block content %}
 	<div id="column_one">
 		<form id="search_sort">
-			<input id="search" type="text" name="q" placeholder="Search" value="{{ params.q }}">
+			<input id="search" type="text" name="q" placeholder="Search" value="{{ params.q }}" title="Search libreddit">
 			{% if sub != "" %}
 			<div id="inside">
 				<input type="checkbox" name="restrict_sr" id="restrict_sr" {% if params.restrict_sr != "" %}checked{% endif %}>
 				<label for="restrict_sr" class="search_label">in r/{{ sub }}</label>
 			</div>
 			{% endif %}
-			<select id="sort_options" name="sort">
+			<select id="sort_options" name="sort" title="Sort results by">
 				{% call utils::options(params.sort, ["relevance", "hot", "top", "new", "comments"], "") %}
-			</select>{% if params.sort != "new" %}<select id="timeframe" name="t"> 
+			</select>{% if params.sort != "new" %}<select id="timeframe" name="t" title="Timeframe"> 
 				{% call utils::options(params.t, ["hour", "day", "week", "month", "year", "all"], "all") %}
 			</select>{% endif %}<input id="sort_submit" type="submit" value="&rarr;">
 		</form>
@@ -54,15 +54,16 @@
 			</p>
 			<!-- POST MEDIA/THUMBNAIL -->
 			{% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %}
-			<img class="post_media" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
+			<img class="post_media" alt="Post image" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
 			{% else if post.post_type != "self" %}
 			<a class="post_thumbnail {% if post.thumbnail == "" %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media }}{% else %}{{ post.permalink }}{% endif %}">
 				{% if post.thumbnail == "" %}
 					<svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg">
+						<title>Thumbnail</title>
 						<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
 					</svg>
 				{% else %}
-					<img src="{{ post.thumbnail }}" width="{{ post.thumbnail_width }}px" height="{{ post.thumbnail_height }}px">
+					<img src="{{ post.thumbnail }}" alt="Thumbnail" width="{{ post.thumbnail_width }}px" height="{{ post.thumbnail_height }}px">
 				{% endif %}
 				<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
 			</a>
diff --git a/templates/subreddit.html b/templates/subreddit.html
index 3f1adb2..3c4720f 100644
--- a/templates/subreddit.html
+++ b/templates/subreddit.html
@@ -22,7 +22,7 @@
 						{% call utils::sort(["/r/", sub.name.as_str()].concat(), ["hot", "new", "top", "rising", "controversial"], sort.0) %}
 					{% endif %}
 				</div>
-				{% if sort.0 == "top" || sort.0 == "controversial" %}<select id="timeframe" name="t"> 
+				{% if sort.0 == "top" || sort.0 == "controversial" %}<select id="timeframe" name="t" title="Timeframe"> 
 					{% call utils::options(sort.1, ["hour", "day", "week", "month", "year", "all"], "day") %}
 					<input id="sort_submit" type="submit" value="&rarr;">
 				</select>{% endif %}
@@ -48,15 +48,16 @@
 				</p>
 				<!-- POST MEDIA/THUMBNAIL -->
 				{% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %}
-				<img class="post_media" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
+				<img class="post_media" alt="Post image" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
 				{% else if post.post_type != "self" %}
 				<a class="post_thumbnail {% if post.thumbnail == "" %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media }}{% else %}{{ post.permalink }}{% endif %}">
 					{% if post.thumbnail == "" %}
 						<svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg">
+							<title>Thumbnail</title>
 							<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
 						</svg>
 					{% else %}
-						<img src="{{ post.thumbnail }}" width="{{ post.thumbnail_width }}px" height="{{ post.thumbnail_height }}px">
+						<img src="{{ post.thumbnail }}" alt="Thumbnail" width="{{ post.thumbnail_width }}px" height="{{ post.thumbnail_height }}px">
 					{% endif %}
 					<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
 				</a>
@@ -91,7 +92,7 @@
 				</div>
 				{% endif %}
 				<div id="sub_meta">
-					<img id="sub_icon" src="{{ sub.icon }}">
+					<img id="sub_icon" src="{{ sub.icon }}" alt="Icon for r/{{ sub.name }}">
 					<p id="sub_title">{{ sub.title }}</p>
 					<p id="sub_name">r/{{ sub.name }}</p>
 					<p id="sub_description">{{ sub.description }}</p>
diff --git a/templates/user.html b/templates/user.html
index 4d8561e..23e41cf 100644
--- a/templates/user.html
+++ b/templates/user.html
@@ -39,15 +39,16 @@
 				</p>
 				<!-- POST MEDIA/THUMBNAIL -->
 				{% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %}
-				<img class="post_media" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
+				<img class="post_media" alt="Post image" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
 				{% else if post.post_type != "self" %}
 				<a class="post_thumbnail {% if post.thumbnail == "" %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media }}{% else %}{{ post.permalink }}{% endif %}">
 					{% if post.thumbnail == "" %}
 						<svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg">
+							<title>Thumbnail</title>
 							<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
 						</svg>
 					{% else %}
-						<img src="{{ post.thumbnail }}" width="{{ post.thumbnail_width }}px" height="{{ post.thumbnail_height }}px">
+						<img src="{{ post.thumbnail }}" alt="Thumbnail" width="{{ post.thumbnail_width }}px" height="{{ post.thumbnail_height }}px">
 					{% endif %}
 					<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
 				</a>
diff --git a/templates/utils.html b/templates/utils.html
index 626e83e..2b6e088 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -16,7 +16,7 @@
 
 {% macro search(root, search) -%}
 <form action="{% if root != "/r/" && !root.is_empty() %}{{ root }}{% endif %}/search/" id="searchbox">
-	<input id="search" type="text" name="q" placeholder="Search" value="{{ search }}">
+	<input id="search" type="text" name="q" placeholder="Search" title="Search libreddit" value="{{ search }}">
 	{% if root != "/r/" && !root.is_empty() %}
 	<div id="inside">
 		<input type="checkbox" name="restrict_sr" id="restrict_sr">