Browse Source

screen reader compliance

deadtom 1 month ago
parent
commit
061c4abac6

+ 1 - 0
TODO.md

@@ -1,3 +1,4 @@
 * Color blind friendly
+* Goal and Vote overlay instructions
 * GiveButter integration
 * Short video tutorials on configuring OwnchatBot.

+ 1 - 1
ownchatbot/static/style.css

@@ -84,7 +84,7 @@ img {
     display: none;
     padding: 6px 12px;
     border-top: none;
-    background-color: #002e63;
+    background-color: #4477aa;
     text-align: left;
 }
 

+ 21 - 21
ownchatbot/templates/add.html

@@ -13,20 +13,20 @@
     <div class="panel">
         <div class="navbar">
             <p></p>
-            <img src="/static/img/ownchatbotwide.png">
+            <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
         </div>
         <h1>Create a {{ reward_type }}</h1>
-        <form method="POST">
+        <form id="Add reward/category" method="POST">
             <table>
                 <tr>
                     <td><label for="name">Name:</label></td>
                     <td>
-                        <input type="text" name="name" required>
+                        <input id="name" type="text" name="name" required>
                         {% with messages = get_flashed_messages(with_categories=true) %}
                             {% if messages %}
                                 {% for category, message in messages %}
                                     {% if category == 'error' %}
-                                        <span style="color: red;">{{ message }}</span>
+                                        <span style="color: #ee6677;">{{ message }}</span>
                                     {% endif %}
                                 {% endfor %}
                             {% endif %}
@@ -38,22 +38,22 @@
                     {% if reward_type == "goal" %}
                         <tr>
                             <td><label for="target">Target:</label></td>
-                            <td><input type="number" name="target" required></td>                    
+                            <td><input id="target" type="number" name="target" required></td>                    
                         </tr>
                     {% else %}
                         <tr>
                             <td><label for="price">Price:</label></td>
-                            <td><input type="number" name="price" required></td>
+                            <td><input id="price" type="number" name="price" required></td>
                         </tr>
                     {% endif %}
                     <tr>
                         <td><label for="info">Description:</label></td>
-                        <td><textarea name="info" rows="1" cols="50" required></textarea></td>
+                        <td><textarea id="info" name="info" rows="1" cols="50" required></textarea></td>
                     </tr>
                     {% if reward_type == "special" %}
                         <tr>
                             <td><label for="cmd">Command:</label></td>
-                            <td><input type="text" name="cmd" required></td>
+                            <td><input id="cmd" type="text" name="cmd" required></td>
                         </tr>
                     {% endif %}
                     {% if reward_type != "category" %}
@@ -62,7 +62,7 @@
                         {% else %}
                             <tr>
                                 <td><label for="cooldown">Cool down:</label></td>
-                                <td><input type="number" name="cooldown" maxlength="2" size="2" value="0" required> minutes until this reward can be redeemed again, after each use.</td>
+                                <td><input id="cooldown" type="number" name="cooldown" maxlength="2" size="2" value="0" required> minutes until this reward can be redeemed again, after each use.</td>
                             </tr>
                         {% endif %}
                     {% endif %}
@@ -79,13 +79,13 @@
                                             <label for="milestone1_desc">Reward:</label>
                                         </td>
                                         <td>
-                                            <input type="text" name="milestone1_desc" size="30">
+                                            <input id="milestone1_desc" type="text" name="milestone1_desc" size="30">
                                         </td>
                                         <td>
                                             <label for="milestone1_points"> at </label>
                                         </td>
                                         <td>
-                                            <input type="number" name="milestone1_points" maxlength="4" size="4"> points reached.
+                                            <input id="milestone1_points" type="number" name="milestone1_points" maxlength="4" size="4"> points reached.
                                         </td>
                                     </tr>
                                     <tr>
@@ -93,13 +93,13 @@
                                             <label for="milestone2_desc">Reward:</label>
                                         </td>
                                         <td>
-                                            <input type="text" name="milestone2_desc" size="30">
+                                            <input id="milestone2_desc" type="text" name="milestone2_desc" size="30">
                                         </td>
                                         <td>
                                             <label for="milestone2_points"> at </label>
                                         </td>
                                         <td>
-                                            <input type="number" name="milestone2_points" maxlength="4" size="4"> points reached.
+                                            <input id="milestone2_points" type="number" name="milestone2_points" maxlength="4" size="4"> points reached.
                                         </td>
                                     </tr>
                                     <tr>
@@ -107,13 +107,13 @@
                                             <label for="milestone3_desc">Reward:</label>
                                         </td>
                                         <td>
-                                            <input type="text" name="milestone3_desc" size="30">
+                                            <input id="milestone3_desc" type="text" name="milestone3_desc" size="30">
                                         </td>
                                         <td>
                                             <label for="milestone3_points"> at </label>
                                         </td>
                                         <td>
-                                            <input type="number" name="milestone3_points" maxlength="4" size="4"> points reached.
+                                            <input id="milestone3_points" type="number" name="milestone3_points" maxlength="4" size="4"> points reached.
                                         </td>
                                     </tr>
                                 </table>
@@ -123,16 +123,16 @@
                     
                     <tr>              
                         <td>Categories</td>
-                        <td>Categories in <span style="color: red;">red</span> are inactive.
+                        <td>Categories in <span style="color: #ee6677;">red</span> are inactive.
                             <table>
                                 {% for cat in all_cats %}
                                 <tr>
                                     {% if cat in active_categories %}
                                     <td><label for="category">{{ cat }}:</label></td>
                                     {% else %}
-                                    <td><label for="category"><span style="color: red;">{{ cat }}</span>:</label></td>
+                                    <td><label for="category"><span style="color: #ee6677;">{{ cat }}</span>:</label></td>
                                     {% endif %}
-                                    <td><input type="checkbox" name="category" value="{{ cat }}"></td>
+                                    <td><input id="category" type="checkbox" name="category" value="{{ cat }}"></td>
                                 </tr>
                                 {% endfor %}
                             </table>
@@ -141,11 +141,11 @@
                 {% endif %}  
             </table>
             {% if reward_type == "category" %}
-                <br>By default, new categories are <span style="color: red;">inactive</span>.<br>
+                <br>By default, new categories are <span style="color: #ee6677;">inactive</span>.<br>
             {% else %}
-                <br>Your {{ reward_type }} will be <span style="color: red;">inactive</span>, until you add it to an active category.
+                <br>Your {{ reward_type }} will be <span style="color: #ee6677;">inactive</span>, until you add it to an active category.
             {% endif %}
-            <br><button class="button button2" type="submit">Create {{ reward_type }}</button><br>
+            <br><button id="Add reward/category" class="button button2" type="submit">Create {{ reward_type }}</button><br>
         </form>
 	{% if reward_type == "category"%}
         	<a href="{{ url_for('web_panels.mgmt', activeTab='categories') }}">Cancel</a>

+ 18 - 18
ownchatbot/templates/edit.html

@@ -8,31 +8,31 @@
     <div class="panel">
     <div class="navbar">
         <p>Edit {{ reward_data["type"] }} "{{ reward_name }}"</p>
-        <img src="/static/img/ownchatbotwide.png">
+        <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
     </div>
         <body style="text-align: left;">
-            <form method="POST">
+            <form id="Edit reward/category" method="POST">
                 <table>
                     {% if reward_data["type"] == "goal" %}
                     <tr>
                         <td> <label for="target">Target:</label> </td>
-                        <td> <input type="number" name="target" value="{{ reward_data["target"] }}" required> </td>
+                        <td> <input id="target" type="number" name="target" value="{{ reward_data["target"] }}" required> </td>
                     </tr>
                     {% else %}
                     <tr>
                         <td> <label for="price">Price:</label> </td>
-                        <td> <input type="number" name="price" value="{{ reward_data["price"] }}" required> </td>
+                        <td> <input id="price" type="number" name="price" value="{{ reward_data["price"] }}" required> </td>
                     </tr>
                     {% endif %}
                         <input type="hidden" name="type" value="{{ reward_data["type"] }}"><br>
                     <tr>
                         <td> <label for="info">Info:</label> </td>
-                        <td> <textarea name="info" rows="1" cols="50" required>{{ reward_data["info"] }}</textarea> </td>
+                        <td> <textarea id="info" name="info" rows="1" cols="50" required>{{ reward_data["info"] }}</textarea> </td>
                     </tr>
                     {% if reward_data["type"] == "special" %}
                     <tr>
                         <td> <label for="cmd">Command:</label> </td>
-                        <td> <input type="text" name="cmd" value="{{ reward_data["cmd"] }}" required> </td>
+                        <td> <input id="cmd" type="text" name="cmd" value="{{ reward_data["cmd"] }}" required> </td>
                     </tr>
                     {% endif %}
                     {% if reward_data["type"] != "category"%}
@@ -41,7 +41,7 @@
                         {% else %}
                         <tr>
                             <td> <label for="cooldown">Cool down:</label> </td>
-                            <td> <input type="number" name="cooldown" maxlength="2" size="2" value="{{ reward_data["cooldown"] }}" required> minutes until this reward can be redeemed again, after each use.</td>
+                            <td> <input id="cooldown" type="number" name="cooldown" maxlength="2" size="2" value="{{ reward_data["cooldown"] }}" required> minutes until this reward can be redeemed again, after each use.</td>
                         </tr>
                         {% endif %}
                     {% endif %}
@@ -58,13 +58,13 @@
                                             <label for="milestone1_desc">Reward:</label>
                                         </td>
                                         <td>
-                                            <input type="text" name="milestone1_desc" size="30" value="{{ reward_data["milestones"]["milestone1"][0] }}">
+                                            <input id="milestone1_desc" type="text" name="milestone1_desc" size="30" value="{{ reward_data["milestones"]["milestone1"][0] }}">
                                         </td>
                                         <td>
                                             <label for="milestone1_points"> at </label>
                                         </td>
                                         <td>
-                                            <input type="number" name="milestone1_points" maxlength="4" size="4" value="{{ reward_data["milestones"]["milestone1"][1] }}"> points reached.
+                                            <input id="milestone1_points" type="number" name="milestone1_points" maxlength="4" size="4" value="{{ reward_data["milestones"]["milestone1"][1] }}"> points reached.
                                         </td>
                                     </tr>
                                     <tr>
@@ -72,13 +72,13 @@
                                             <label for="milestone2_desc">Reward:</label>
                                         </td>
                                         <td>
-                                            <input type="text" name="milestone2_desc" size="30" value="{{ reward_data["milestones"]["milestone2"][0] }}">
+                                            <input id="milestone2_desc" type="text" name="milestone2_desc" size="30" value="{{ reward_data["milestones"]["milestone2"][0] }}">
                                         </td>
                                         <td>
                                             <label for="milestone2_points"> at </label>
                                         </td>
                                         <td>
-                                            <input type="number" name="milestone2_points" maxlength="4" size="4" value="{{ reward_data["milestones"]["milestone2"][1] }}"> points reached.
+                                            <input id="milestone2_points" type="number" name="milestone2_points" maxlength="4" size="4" value="{{ reward_data["milestones"]["milestone2"][1] }}"> points reached.
                                         </td>
                                     </tr>
                                     <tr>
@@ -86,13 +86,13 @@
                                             <label for="milestone3_desc">Reward:</label>
                                         </td>
                                         <td>
-                                            <input type="text" name="milestone3_desc" size="30" value="{{ reward_data["milestones"]["milestone3"][0] }}">
+                                            <input ="milestone3_desc" type="text" name="milestone3_desc" size="30" value="{{ reward_data["milestones"]["milestone3"][0] }}">
                                         </td>
                                         <td>
                                             <label for="milestone3_points"> at </label>
                                         </td>
                                         <td>
-                                            <input type="number" name="milestone3_points" maxlength="4" size="4" value="{{ reward_data["milestones"]["milestone3"][1] }}"> points reached.
+                                            <input ="milestone3_points" type="number" name="milestone3_points" maxlength="4" size="4" value="{{ reward_data["milestones"]["milestone3"][1] }}"> points reached.
                                         </td>
                                     </tr>
                                 </table>
@@ -102,19 +102,19 @@
                     
                     <tr>
                         <td>Categories</td>
-                        <td>Categories in <span style="color: red;">red</span> are inactive.
+                        <td>Categories in <span style="color: #ee6677;">red</span> are inactive.
                             <table>
                                 {% for cat in all_cats %}
                                     <tr>
                                         {% if cat in active_categories %}
                                         <td> <label for="category">{{ cat }}:</label> </td>
                                         {% else %}
-                                        <td> <label for="category"><span style="color: red;">{{ cat }}</span>:</label> </td>
+                                        <td> <label for="category"><span style="color: #ee6677;">{{ cat }}</span>:</label> </td>
                                         {% endif %}
                                         {% if cat in reward_data["categories"] %}
-                                            <td> <input type="checkbox" name="category" value="{{ cat }}" checked> </td>
+                                            <td> <input id="category" type="checkbox" name="category" value="{{ cat }}" checked> </td>
                                         {% else %}
-                                            <td> <input type="checkbox" name="category" value="{{ cat }}"> </td>
+                                            <td> <input id="category" type="checkbox" name="category" value="{{ cat }}"> </td>
                                         {% endif %}
                                     </tr>
                                 {% endfor %}
@@ -122,7 +122,7 @@
                         </td>
                     </tr>
                 </table>
-                <br><button class="button button2" type="submit">Save Changes</button><br>
+                <br><button id="Edit reward/category" class="button button2" type="submit">Save Changes</button><br>
             </form>
 		{% if reward_data["type"] == "category"%}
 			<a href="{{ url_for('web_panels.mgmt', activeTab='categories') }}">Cancel</a>

+ 5 - 5
ownchatbot/templates/edit_account.html

@@ -8,23 +8,23 @@
     <div class="panel">
     <div class="navbar">
         <p>Edit {{ name }}'s Account</p>
-        <img src="/static/img/ownchatbotwide.png">
+        <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
     </div>
         <body>
-            <form method="POST">
+            <form id="edit account" method="POST">
                 <table>
                     <tr style="border-bottom: none;">
                         <td> <label for="points">Points:</label> </td>
-                        <td> <input type="number" name="newpoints" value="{{ points }}"> </td>
+                        <td> <input id="points" type="number" name="newpoints" value="{{ points }}"> </td>
                         
                         <td> <label for="email">Email:</label> </td>
-                        <td> <input type="text" name="newemail" value="{{ email }}"  size="40"> </td>
+                        <td> <input id="email" type="text" name="newemail" value="{{ email }}"  size="40"> </td>
 
                         <input type="hidden" name="user_id" value="{{ user_id }}">
                         <input type="hidden" name="name" value="{{ name }}">
                     </tr>
                 </table>
-                <br><button class="button button2" type="submit">Save</button><br>
+                <br><button id="edit account" class="button button2" type="submit">Save</button><br>
             </form>
             <a href="{{ url_for('web_panels.mgmt', activeTab='accounts') }}">Cancel</a>
         </body>

+ 61 - 61
ownchatbot/templates/mgmt.html

@@ -21,7 +21,7 @@
                 <button class="tablinks" data-tab="kofi-settings" onclick="openTab(event, 'kofi-settings')">Kofi Settings</button>
             {% endif %}
         </div>
-        <img src="/static/img/ownchatbotwide.png">
+        <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
     </div>
 
     <div id='managerewards' class="tabcontent">
@@ -77,7 +77,7 @@
             </table>
             <br>
             {% if rewards %}
-            Rewards in <span style="color: red !important;">red</span> are inactive. To activate a reward, add it to an active category.
+            Rewards in <span style="color: #ee6677 !important;">red</span> are inactive. To activate a reward, add it to an active category.
             <table>
                 <thead>
                     <tr>
@@ -95,7 +95,7 @@
                     {% if reward in active_rewards %}
                     <tr>
                     {% else %}
-                    <tr style="color: red;">
+                    <tr style="color: #ee6677;">
                     {% endif %}
                         <td>{{ prefix }}{{ reward }}</td>
                         <td>{{ reward_info["price"] }}</td>
@@ -108,8 +108,8 @@
                         {% endif %}
                         <td>{{ reward_info["categories"] | join(', ') }}</td>
                         <td>
-                            <a href="{{ url_for('web_panels.edit', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: green;">Edit</span></button></a>&nbsp
-                            <a href="{{ url_for('web_panels.delete', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: red;">Delete</span></button></a>
+                            <a href="{{ url_for('web_panels.edit', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: #ccbb44;">Edit</span></button></a>&nbsp
+                            <a href="{{ url_for('web_panels.delete', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: #ee6677;">Delete</span></button></a>
                     {% endif %}
                     </tr>
                 {% endfor %}
@@ -133,15 +133,15 @@
                     {% if reward in active_rewards %}
                     <tr>
                     {% else %}
-                    <tr style="color: red;">
+                    <tr style="color: #ee6677;">
                     {% endif %}
                         <td>{{ prefix }}{{ reward }}</td>
                         <td>{{ reward_info["target"] }}</td>
                         <td>{{ reward_info["info"] }}</td>
                         <td>{{ reward_info["categories"] | join(', ') }}</td>
                         <td>
-                            <a href="{{ url_for('web_panels.edit', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: green;">Edit</span></button></a>&nbsp
-                            <a href="{{ url_for('web_panels.delete', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: red;">Delete</span></button></a>&nbsp
+                            <a href="{{ url_for('web_panels.edit', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: #ee6677;">Edit</span></button></a>&nbsp
+                            <a href="{{ url_for('web_panels.delete', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: #ccbb44;">Delete</span></button></a>&nbsp
                             <a href="{{ url_for('web_panels.reset', reward_name=reward, reward_type=reward_info["type"]) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: orange;">Reset</span></button></a>
                     {% endif %}
                     </tr>
@@ -166,15 +166,15 @@
                     {% if reward in active_rewards %}
                     <tr>
                     {% else %}
-                    <tr style="color: red;">
+                    <tr style="color: #ee6677;">
                     {% endif %}
                         <td>{{ prefix }}{{ reward }}</td>
                         <td>{{ reward_info["price"] }}</td>
                         <td>{{ reward_info["info"] }}</td>
                         <td>{{ reward_info["categories"] | join(', ') }}</td>
                         <td>
-                            <a href="{{ url_for('web_panels.edit', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: green;">Edit</span></button></a>&nbsp
-                            <a href="{{ url_for('web_panels.delete', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: red;">Delete</span></button></a>&nbsp
+                            <a href="{{ url_for('web_panels.edit', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: #ee6677;">Edit</span></button></a>&nbsp
+                            <a href="{{ url_for('web_panels.delete', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: #ee6677;">Delete</span></button></a>&nbsp
                             <a href="{{ url_for('web_panels.reset', reward_name=reward, reward_type=reward_info["type"]) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: orange;">Reset</span></button></a>
                     {% endif %}
                     </tr>
@@ -204,7 +204,7 @@
                 {% for user in users %}
                     <tr>
                         {% if not user[1] %}
-                            <td style="color: green;"> Temporary Account </td>
+                            <td style="color: #ee6677;"> Temporary Account </td>
                         {% else %}
                             <td> {{ user[1] }} </td>
                         {% endif %}
@@ -213,7 +213,7 @@
                         <td>{{ user[2] }} {{ points_label }}</td>
                         {% if user[4] %}
                             {% if not user[1] %}
-                                <td style="color: green;">{{ user[4] }}</td>
+                                <td style="color: #ee6677;">{{ user[4] }}</td>
                             {% else %}
                                 <td>{{ user[4] }}</td>
                             {% endif %}
@@ -250,12 +250,12 @@
                     <tr>
                         <td>
                             {% for cat in active_categories %}
-                            &nbsp;&nbsp;{{ cat }} - <a href="/mgmt/deactivate/{{ cat }}"><span style="color: green;">Deactivate</span></a>&nbsp;<a href="/mgmt/delcat/{{ cat }}/active"><span style="color: red;">Delete</span></a><br>
+                            &nbsp;&nbsp;{{ cat }} - <a href="/mgmt/deactivate/{{ cat }}"><span style="color: orange;">Deactivate</span></a>&nbsp;<a href="/mgmt/delcat/{{ cat }}/active"><span style="color: gray;">Delete</span></a><br>
                             {% endfor %}
                         </td>
                         <td>
                             {% for cat in inactive_categories %}
-                            &nbsp;&nbsp;{{ cat }} - <a href="/mgmt/activate/{{ cat }}"><span style="color: green;">Activate</span></a>&nbsp;<a href="/mgmt/delcat/{{ cat }}/inactive"><span style="color: red;">Delete</span></a><br>
+                            &nbsp;&nbsp;{{ cat }} - <a href="/mgmt/activate/{{ cat }}"><span style="color: #ee6677;">Activate</span></a>&nbsp;<a href="/mgmt/delcat/{{ cat }}/inactive"><span style="color: gray;">Delete</span></a><br>
                             {% endfor %}
                         </td>
                     </tr>
@@ -267,7 +267,7 @@
 
     <div id='announcements' class="tabcontent">
         <body>
-            <form method="POST" action="/mgmt/announcements">
+            <form id="announcements form" method="POST" action="/mgmt/announcements">
                 <table>
                 <h3>Manage Announcements</h3>
                 <table>
@@ -281,26 +281,26 @@
                     <tr>
                         <td> <label for="announce_enable">Enable:</label> </td>
                         {% if settings_info[8] %}
-                        <td> <input type="checkbox" name="announce_enable" value="{{ settings_info[8] }}" checked> </td>
+                        <td> <input id="announce_enable" type="checkbox" name="announce_enable" value="{{ settings_info[8] }}" checked> </td>
                         {% else %}
-                        <td> <input type="checkbox" name="announce_enable" value="{{ settings_info[8] }}"> </td>
+                        <td> <input id="announce_enable" type="checkbox" name="announce_enable" value="{{ settings_info[8] }}"> </td>
                         {% endif %}
                         <td>Enable periodic announcements</td>
                     </tr>
                     <tr>
                         <td> <label for="announce_interval">Interval:</label> </td>
-                        <td> <input type="number" name="announce_interval" value="{{ settings_info[9] }}" size="2" required> minutes</td>
+                        <td> <input id="announce_interval" type="number" name="announce_interval" value="{{ settings_info[9] }}" size="2" required> minutes</td>
                         <td>How long between each announcement?</td>
                     </tr>
                     <tr>
                         <td> <label for="announcements">Announcements:</label> </td>
                         <td>
-                            <textarea name="announcements" rows="5" cols="50">{{ announcements | join('\n') }}</textarea>
+                            <textarea id="announcements" name="announcements" rows="5" cols="50">{{ announcements | join('\n') }}</textarea>
                         </td>
                         <td>Enter your announcements, one per line. May contain html <a href=https://www.w3schools.com/tags/tag_img.asp>IMG tags</a> to display images.</td>
                     </tr>
                 </table>
-                <br><button class="button button2" type="submit">Save Changes</button><br>
+                <br><button id="announcements form" class="button button2" type="submit">Save Changes</button><br>
             </form>
             <br><br>
         </body>
@@ -308,7 +308,7 @@
 
     <div id='settings' class="tabcontent">
         <body style="text-align: left;">
-            <form method="POST" action="/mgmt/settings">
+            <form id="settings form" method="POST" action="/mgmt/settings">
                 <table>
                 <h3>OwnchatBot Settings</h3>
                     <thead>
@@ -320,22 +320,22 @@
                     </thead>
                     <tr>
                         <td> <label for="points_interval">Points Interval:</label> </td>
-                        <td> <input type="number" name="points_interval" value="{{ settings_info[1] }}" size="5" required> minutes</td>
+                        <td> <input id="points_interval" type="number" name="points_interval" value="{{ settings_info[1] }}" size="5" required> minutes</td>
                         <td>How often do you want to award your viewers points?</td>
                     </tr>
                     <tr>
                         <td> <label for="points_award">Points Award:</label> </td>
-                        <td> <input type="number" name="points_award" value="{{ settings_info[2] }}" size="5" required> points</td>
+                        <td> <input id="points_award" type="number" name="points_award" value="{{ settings_info[2] }}" size="5" required> points</td>
                         <td>How many points do you want to award them?</td>
                     </tr>
                     <tr>
                         <td> <label for="prefix">Chat Command Prefix:</label> </td>
-                        <td> <input type="text" name="prefix" maxlength="1" size="1" value="{{ settings_info[3] }}" required> </td>
+                        <td> <input id="prefix" type="text" name="prefix" maxlength="1" size="1" value="{{ settings_info[3] }}" required> </td>
                         <td>Character that preceeds chat commands, so OwnchatBot knows what to look for.<br>Example: "{{ settings_info[3] }}points"</td>
                     </tr>
                     <tr>
-                        <td> <label for=ocb_url>External URL:</label> </td>
-                        <td> <input type="text" name="ocb_url" size="40" value="{{ settings_info[10] }}" required> </td>
+                        <td> <label for="ocb_url">External URL:</label> </td>
+                        <td> <input id="ocb_url" type="text" name="ocb_url" size="40" value="{{ settings_info[10] }}" required> </td>
                         <td>What is the external URL of your OwnchatBot?</td>
                     </tr>
                         
@@ -352,17 +352,17 @@
                     </thead>
                     <tr>
                         <td> <label for="access_id">Access Token Name:</label> </td>
-                        <td style="padding: 5px;"> <input type="text" name="access_id" value="{{ settings_info[0] }}" size="40"> </td>
+                        <td style="padding: 5px;"> <input id="access_id" type="text" name="access_id" value="{{ settings_info[0] }}" size="40"> </td>
                         <td>Create in Owncast Admin panel. Integrations -> Access Tokens (check all three boxes)</td>
                     </tr>
                     <tr>
                         <td> <label for="access_token">Access Token:</label> </td>
-                        <td style="padding: 5px;"> <input type="password" name="access_token" value="{{ settings_info[4] }}" size="40"> </td>
+                        <td style="padding: 5px;"> <input id="access_tokens" type="password" name="access_token" value="{{ settings_info[4] }}" size="40"> </td>
                         <td>The token you created above.</td>
                     </tr>
                     <tr>
                         <td> <label for="owncast_url">Your Owncast URL:</label> </td>
-                        <td> <input type="text" name="owncast_url" value="{{ settings_info[5] }}" size="40"> </td>
+                        <td> <input type="text" id="owncast_url" name="owncast_url" value="{{ settings_info[5] }}" size="40"> </td>
                         <td>The external URL of your Owncast instance, with "http://" or "https://".</td>
                     </tr>
                 </table>
@@ -379,29 +379,29 @@
                     <tr>
                         <td> <label for="kofi_integration">Enable:</label> </td>
                         {% if settings_info[7] %}
-                        <td> <input type="checkbox" name="kofi_integration" value="{{ settings_info[7] }}" checked> </td>
+                        <td> <input id="kofi_integration" type="checkbox" name="kofi_integration" value="{{ settings_info[7] }}" checked> </td>
                         <td>Enable Ko-fi integration.</td>
                         {% else %}
-                        <td> <input type="checkbox" name="kofi_integration" value="{{ settings_info[7] }}"> </td>
+                        <td> <input id="kofi_integration" type="checkbox" name="kofi_integration" value="{{ settings_info[7] }}"> </td>
                         <td>Enable Ko-fi integration. ("Kofi Settings" button will appear in the navigation bar when enabled.)</td>
                         {% endif %}
                     </tr>
                     <tr>
                         <td> <label for="kofi_token">Verification Token:</label> </td>
-                        <td style="padding: 5px;"> <input type="password" name="kofi_token" value="{{ settings_info[6] }}" size="40"> </td>
+                        <td style="padding: 5px;"> <input id="kofi_token" type="password" name="kofi_token" value="{{ settings_info[6] }}" size="40"> </td>
                         <td>Get from Kofi -> More -> API -> Webhooks -> Advanced -> Verification Token.</td>
                     </tr>
                 </table>
                 
-                <br><button class="button button2" type="submit">Save Changes</button><br>
+                <br><button id="settings form" class="button button2" type="submit">Save Changes</button><br>
             </form>
             <br><br>
         </body>
     </div>
 
-    <div id='kofi-settings' class="tabcontent">
+    <div id="kofi-settings" class="tabcontent">
         <body style="text-align: left;">
-            <form method="POST" action="/mgmt/ksettings">
+            <form id='kofi-settings_form' method="POST" action="/mgmt/ksettings">
                 <table>
                 <h3>Kofi Settings</h3>
                 
@@ -416,20 +416,20 @@
                     <tr>
                         <td> <label for="enable_donations">Enable points for donations:</label> </td>
                         {% if kofi_settings['donations'] %}
-                        <td> <input type="checkbox" name="enable_donations" value="{{ kofi_settings['donations'] }}" checked> </td>
+                        <td> <input id="enable_donations" type="checkbox" name="enable_donations" value="{{ kofi_settings['donations'] }}" checked> </td>
                         {% else %}
-                        <td> <input type="checkbox" name="enable_donations" value="{{ kofi_settings['donations'] }}"> </td>
+                        <td> <input id="enable_donations" type="checkbox" name="enable_donations" value="{{ kofi_settings['donations'] }}"> </td>
                         {% endif %}
                         <td>Enable awarding points for donations</td>
                     </tr>
                     <tr>
                         <td> <label for="set_donation_points">Points per dollar:</label> </td>
-                        <td> <input type="number" name="set_donation_points" value="{{ kofi_settings['donation_points'] }}" size="5" required> points</td>
+                        <td> <input id="set_donation_points" type="number" name="set_donation_points" value="{{ kofi_settings['donation_points'] }}" size="5" required> points</td>
                         <td>How many points should viewers recieve, for every dollar they donate?</td>
                     </tr>
                     <tr>
                         <td> <label for="kofi_url">Kofi Page:</label> </td>
-                        <td style="padding: 5px;"> <input type="text" name="kofi_url" value="{{ kofi_settings['kofi_url'] }}" size="30"> </td>
+                        <td style="padding: 5px;"> <input id="kofi_url" type="text" name="kofi_url" value="{{ kofi_settings['kofi_url'] }}" size="30"> </td>
                         <td>What is your Kofi page URL?</td>
                     </tr>
                     <tr>
@@ -439,22 +439,22 @@
                                 <tr>
                                     <td> <label for="enable_subs">Enable points for subscriptions:</label> </td>
                                     {% if kofi_settings['subs'] %}
-                                    <td> <input type="checkbox" name="enable_subs" value="{{ kofi_settings['subs'] }}" checked> </td>
+                                    <td> <input id="enable_subs" type="checkbox" name="enable_subs" value="{{ kofi_settings['subs'] }}" checked> </td>
                                     {% else %}
-                                    <td> <input type="checkbox" name="enable_subs" value="{{ kofi_settings['subs'] }}"> </td>
+                                    <td> <input id="enable_subs" type="checkbox" name="enable_subs" value="{{ kofi_settings['subs'] }}"> </td>
                                     {% endif %}
                                     <td>Enable awarding points for monthly subscriptions</td>
                                 </tr>
                                 <tr>
                                     <td> <label for="sub_points">Points per month:</label> </td>
-                                    <td> <input type="number" name="sub_points" value="{{ kofi_settings['sub_points'] }}" size="6" required> points</td>
+                                    <td> <input id="sub_points" type="number" name="sub_points" value="{{ kofi_settings['sub_points'] }}" size="6" required> points</td>
                                     <td>How many points should subscribers recieve every month?</td>
                                 </tr>
                                         </tbody>
                                     </table>
                                 </tr>
                 </table>
-                <br><button class="button button2" type="submit">Save Changes</button><br>
+                <br><button id="kofi-settings_form" class="button button2" type="submit">Save Changes</button><br>
             </form>
             <br><br>
         </body>
@@ -469,7 +469,7 @@
         <body onload="focusInput()">
         <h1>To-Do List</h1>
         <form id="todo-item-form" method="POST" onsubmit="focusInput()" action="/mgmt/addtodoitem">
-            <input type="text" id="itemInput" name="item" placeholder="Add a new item">
+            <input type="text" id="itemInput" name="item" aria-label="Add a new item" placeholder="Add a new item">
             <button id="todo-item-form" class="button button2" type="submit">Add</button>
         </form>
         <ul>
@@ -478,18 +478,18 @@
                     {% if item.crossed == 'no' %}
                         <li style="text-decoration:none;">
                             {{ item.name }}
-                            <a href="{{ url_for('web_panels.cross', item_id=loop.index0) }}">[Cross Off]</a>&nbsp;<a href="{{ url_for('web_panels.rem_todo_item', item_id=loop.index0) }}"><span style="color: red;">[Remove]</span></a>
+                            <a href="{{ url_for('web_panels.cross', item_id=loop.index0) }}">[Cross Off]</a>&nbsp;<a href="{{ url_for('web_panels.rem_todo_item', item_id=loop.index0) }}"><span style="color: #ccbb44;">[Remove]</span></a>
                         </li>
                     {% else %}
                         <li> <span style="text-decoration:line-through;">
                             {{ item.name }}</span>
-                            <a href="{{ url_for('web_panels.uncross', item_id=loop.index0) }}">[Un-Cross]</a>&nbsp;<a href="{{ url_for('web_panels.rem_todo_item', item_id=loop.index0) }}"><span style="color: red;">[Remove]</span></a>
+                            <a href="{{ url_for('web_panels.uncross', item_id=loop.index0) }}">[Un-Cross]</a>&nbsp;<a href="{{ url_for('web_panels.rem_todo_item', item_id=loop.index0) }}"><span style="color: #ccbb44;">[Remove]</span></a>
                     {% endif %}
                 {% endfor %}
             {% endif %}
         </ul>
-        <form action="/mgmt/clearlist" method="get" style="display: inline;">
-            <button class="button button2" type="submit" class="button">Clear List</button>
+        <form id="clear_list_form" action="/mgmt/clearlist" method="get" style="display: inline;">
+            <button id="clear_list_form" class="button button2" type="submit" class="button">Clear List</button>
         </form>
         <hr>
         <h3>Stream Overlay</h3>
@@ -535,58 +535,58 @@
                 </tr>
             </thead>
                 <tr>
-                    <form id="nf_upload" action="/mgmt/alertupload/FOLLOWER_ALERT" method="post" enctype="multipart/form-data">
+                    <form id="new_follow_image_upload" action="/mgmt/alertupload/FOLLOWER_ALERT" method="post" enctype="multipart/form-data">
                     <td>New Follower:</td>
                     {% set follower_alert = alerts_dict["FOLLOWER_ALERT"] %}
                     {% if follower_alert %}
                         {% if "webm" in follower_alert %}
                             <td><video height="100" autoplay loop><source src="{{ url_for('web_panels.assets', asset_name=follower_alert) }}" type="video/webm"></video></td>
                         {% else %}
-                            <td><img src="{{ url_for('web_panels.assets', asset_name=follower_alert) }}"></td>
+                            <td><img alt="User Configurable Image" src="{{ url_for('web_panels.assets', asset_name=follower_alert) }}"></td>
                         {% endif %}
                     {% else %}
                         <td>Empty</td>
                     {% endif %}
                     <td><input type="file" name="FOLLOWER_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
-                    <td><button id="nf_upload" class="button button2" type="submit">Upload</button>
+                    <td><button id="new_follow_image_upload" class="button button2" type="submit">Upload</button>
                     </form>&nbsp
-                        <a href="{{ url_for('web_panels.del_alert', alert_type='FOLLOWER_ALERT') }}"><button class="button button2" onclick="openTab(event, 'alerts')"><span style="color: red;">Clear</span></button></a></td>
+                        <a href="{{ url_for('web_panels.del_alert', alert_type='FOLLOWER_ALERT') }}"><button id="new_follow_image_upload" class="button button2" onclick="openTab(event, 'alerts')"><span style="color: #ccbb44;">Clear</span></button></a></td>
                     <td>{{ settings_info[10] }}/alert/follower</td>
                 </tr>
                 <tr>
-                    <form id="nms_upload" action="/mgmt/alertupload/MILESTONE_ALERT" method="post" enctype="multipart/form-data">
+                    <form id="new_milestone_image_upload" action="/mgmt/alertupload/MILESTONE_ALERT" method="post" enctype="multipart/form-data">
                     <td>Milestone Reached:</td>
                     {% set milestone_alert = alerts_dict["MILESTONE_ALERT"] %}
                     {% if milestone_alert %}
                         {% if "webm" in milestone_alert %}
                             <td><video height="100" autoplay loop><source src="{{ url_for('web_panels.assets', asset_name=milestone_alert) }}" type="video/webm"></video></td>
                         {% else %}
-                            <td><img src="{{ url_for('web_panels.assets', asset_name=milestone_alert) }}"></td>
+                            <td><img alt="User Configurable Image" src="{{ url_for('web_panels.assets', asset_name=milestone_alert) }}"></td>
                         {% endif %}
                     {% else %}
                         <td>Empty</td>
                     {% endif %}
                     <td><input type="file" name="MILESTONE_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
-                    <td><button id="nms_upload" class="button button2" type="submit">Upload</button></form>&nbsp
-                        <a href="{{ url_for('web_panels.del_alert', alert_type='MILESTONE_ALERT') }}"><button class="button button2" onclick="openTab(event, 'alerts')"><span style="color: red;">Clear</span></button></a></td>
+                    <td><button id="new_milestone_image_upload" class="button button2" type="submit">Upload</button></form>&nbsp
+                        <a href="{{ url_for('web_panels.del_alert', alert_type='MILESTONE_ALERT') }}"><button id="new_milestone_image_upload" class="button button2" onclick="openTab(event, 'alerts')"><span style="color: #ccbb44;">Clear</span></button></a></td>
                     <td>{{ settings_info[10] }}/alert/milestone</td>
                 </tr>
                 <tr>
-                    <form id="ng_upload" action="/mgmt/alertupload/GOAL_ALERT" method="post" enctype="multipart/form-data">
+                    <form id="new_goal_image_upload" action="/mgmt/alertupload/GOAL_ALERT" method="post" enctype="multipart/form-data">
                     <td>Goal Reached:</td>
                     {% set goal_alert = alerts_dict["GOAL_ALERT"] %}
                     {% if goal_alert %}
                         {% if "webm" in goal_alert %}
                             <td><video height="100" autoplay loop><source src="{{ url_for('web_panels.assets', asset_name=goal_alert) }}" type="video/webm"></video></td>
                         {% else %}
-                            <td><img src="{{ url_for('web_panels.assets', asset_name=goal_alert) }}"></td>
+                            <td><img alt="User Configurable Image" src="{{ url_for('web_panels.assets', asset_name=goal_alert) }}"></td>
                         {% endif %}
                     {% else %}
                         <td>Empty</td>
                     {% endif %}
                     <td><input type="file" name="GOAL_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
-                    <td><button id="ng_upload" class="button button2" type="submit">Upload</button></form>&nbsp
-                        <a href="{{ url_for('web_panels.del_alert', alert_type='GOAL_ALERT') }}"><button class="button button2" onclick="openTab(event, 'alerts')"><span style="color: red;">Clear</span></button></a></td>
+                    <td><button id="new_goal_image_upload" class="button button2" type="submit">Upload</button></form>&nbsp
+                        <a href="{{ url_for('web_panels.del_alert', alert_type='GOAL_ALERT') }}"><button id="new_goal_image_upload" class="button button2" onclick="openTab(event, 'alerts')"><span style="color: #ccbb44;">Clear</span></button></a></td>
                     <td>{{ settings_info[10] }}/alert/goal</td>
                 </tr>
         </table>

+ 2 - 2
ownchatbot/templates/queue.html

@@ -14,7 +14,7 @@
     <div class="panel">
     <div class="navbar">
         <p>Rewards Queue Management</p>
-        <img src="/static/img/ownchatbotwide.png">
+        <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
     </div>
         <body>
             {% if votes %}
@@ -84,7 +84,7 @@
                         </td>
 
                         {% if goal[1] == goal[2] %}
-                        <td> {{ goal[1] }} / {{ goal[2] }} <img src=/static/img/tada.png style="width: 24px; height: 24px;"></td>
+                        <td> {{ goal[1] }} / {{ goal[2] }} <img alt="Party horn with confetti" src=/static/img/tada.png style="width: 24px; height: 24px;"></td>
                         {% else %}
                         <td> {{ goal[1] }} / {{ goal[2] }} </td>
                         {% endif %}

+ 9 - 9
ownchatbot/templates/userpanel.html

@@ -13,7 +13,7 @@
             <button class="tablinks" data-tab="rewards" onclick="openTab(event, 'rewards')">Points and Rewards</button>
             <button class="tablinks" data-tab="queue" onclick="openTab(event, 'queue')">Rewards Queue</button>
         </div>
-        <img src="/static/img/ownchatbotwide.png">
+        <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
     </div>
 
     <div id='ocbinfo' class="tabcontent">
@@ -36,7 +36,7 @@
         
         <hr>
         {% if kofi_integration %}
-            <h4><a href="{{ kofi_settings['kofi_url'] }}/donate" target="new"><img src="/static/img/kofi_symbol.png"></a> Kofi Integration</h4>
+            <h4><a href="{{ kofi_settings['kofi_url'] }}/donate" target="new"><img alt="Kofi Coffee Cup" src="/static/img/kofi_symbol.png"></a> Kofi Integration</h4>
             
             {% if kofi_settings['donations'] %}
                 {% set d_points_label = 'point' if donation_points == 1 else 'points' %}
@@ -60,7 +60,7 @@
                         {% if messages %}
                             {% for category, message in messages %}
                                 {% if category == 'failure' %}
-                                    <span style="color: red;">{{ message }}</span>
+                                    <span style="color: #ee6677;">{{ message }}</span>
                                 {% endif %}
                                 {% if category == 'success' %}
                                     <span style="color: green;">{{ message }}</span>
@@ -69,15 +69,15 @@
                         {% endif %}
                     {% endwith %}
                     
-                    <form method="POST" action="/set_viewer_email">
+                    <form id="code" method="POST" action="/set_viewer_email">
                         <label for="code">Type !reg_mail into the chat, and enter the code it gives you here:</label>
-                        <input type="number" name="code" size="6" required><br>                        
+                        <input id="code" type="number" name="code" size="6" aria-required="true" required><br>                        
                         <label for="new_email">Enter the email address associated with your Kofi account:</label>
-                        <input type="text" name="new_email" value="{{ user[4] }}" size="40" required>
+                        <input id="code" type="text" name="new_email" value="{{ user[4] }}" size="40" aria-required="true" aria-label="Enter email address" required>
                         <input type="hidden" name="instance" value="{{ instance }}">
                         <input type="hidden" name="user_name" value="{{ username }}">
                         <br>Email addresses are <b>ONLY</b> used for Kofi integration. They are not sent to any other individual or company, and will not be used to create or send mailing lists of any kind.<br>
-                        <input type="hidden" name="user_id" value="{{ user[0] }}"> <button class="button button2" type="submit">Save Email</button>
+                        <input id="code" type="hidden" name="user_id" value="{{ user[0] }}"> <button class="button button2" type="submit">Save Email</button>
                     </form><br>
                 {% endif %}
                 </div>
@@ -174,7 +174,7 @@
                                         {% if milestones[milestone_key][1] < goal[2] %}
                                             {% set milestone_progress = milestones[milestone_key][1] / goal[2] * 100 %}
                                                 <div class="milestone-marker" style="position: absolute; left: {{ milestone_progress }}%; transform: translateX(-50%);">
-                                                    <img src="/static/img/milestone.png" style="width: 16px; height: 16px;" title="{{ milestones[milestone_key][1] }} points. {{ milestones[milestone_key][0] }}">
+                                                    <img alt="Red Flag" src="/static/img/milestone.png" style="width: 16px; height: 16px;" title="{{ milestones[milestone_key][1] }} points. {{ milestones[milestone_key][0] }}">
                                                 </div>
                                             {% endif %}
                                         {% endif %}
@@ -182,7 +182,7 @@
                             </div>
                         </td>
                         {% if goal[1] == goal[2] %}
-                        <td>   {{ goal[1] }} / {{ goal[2] }} <img src=/static/img/tada.png style="width: 24px; height: 24px;"></td>
+                        <td>   {{ goal[1] }} / {{ goal[2] }} <img alt="Party horn with confetti" src=/static/img/tada.png style="width: 24px; height: 24px;"></td>
                         {% else %}
                         <td>   {{ goal[1] }} / {{ goal[2] }} </td>
                         {% endif %}