Added ARIA attributes to essential elements

legal_db/templates/404.html

@@ -1,12 +1,12 @@
 {% extends 'legal_db/base.html' %}
 
 {% block body_content %}
-  <main class="hero">
+  <main class="hero" aria-label="Error Page">
     <div class="hero-body has-text-centered">
       <h1 class="hero-title-big">404</h1>
       <h2 class="b-header">Page Not Found!</h2>
       <p class="margin-vertical-normal">The page you are looking for doesn't exist.</p>
-      <a href="{% url 'home' %}" class="button">Return Home</a>
+      <a href="{% url 'home' %}" class="button" role="button">Return Home</a>
     </div>
   </main>
 {% endblock %}

legal_db/templates/legal_db/case/form.html

@@ -42,7 +42,7 @@ <h4 class="b-header">Contact</h4>
             <strong>Agreement and Consent</strong> <span class="required">*</span><br/>
             <label for="{{ case_form.agreement.id_for_label }}" class="checkbox">
               {% render_field case_form.agreement %}
-              I have read and agree to the <a href="https://creativecommons.org/privacy/" class="has-text-dark-slate-blue">Creative Commons Privacy Policy</a>.
+              I have read and agree to the <a href="https://creativecommons.org/privacy/" class="has-text-dark-slate-blue" aria-label="Creative Commons Privacy Policy">Creative Commons Privacy Policy</a>.
             </label>
             {{ case_form.agreement.errors }}
           </div>
@@ -132,7 +132,7 @@ <h4 class="b-header">Links to relevant materials</h4>
                     {{ link_form.url.errors }}
                   </div>
                   <div class="column is-1">
-                    <button type="button" class="button is-delete" onclick="deleteLinkForm('link-form-{{ forloop.counter0 }}')">
+                    <button type="button" class="button is-delete" onclick="deleteLinkForm('link-form-{{ forloop.counter0 }}')" aria-label="Delete this link form">
                       <i class="icon cross"></i>
                     </button>
                   </div>

legal_db/templates/legal_db/case/index.html

@@ -8,7 +8,7 @@
     <h1 class="hero-title title is-2">Cases</h1>
     <div class="contribute-card">
       <article class="card entry-post link no-border is-hidden-touch">
-        <a href="{% url 'case_submit' %}" class="has-background-tomato">
+        <a href="{% url 'case_submit' %}" class="has-background-tomato" aria-label="Submit a legal dispute to the database">
           <span class="card-content has-bottom-link">
             <h2 class="card-title">Contribute</h2>
             <span class="content">Do you want to submit a legal dispute to the database?</span>
@@ -29,7 +29,9 @@ <h2 class="card-title">Contribute</h2>
       <div id="tags" aria-expanded="true">
       {% for tag in tags %}
         <label for="tag-check-{{ forloop.counter }}" id="tag-label-{{ forloop.counter }}"
-               class="button tag case margin-right-small margin-vertical-smaller{% if tag.checked %} selected{% endif %}">
+               class="button tag case margin-right-small margin-vertical-smaller{% if tag.checked %} selected{% endif %}"
+               role="checkbox" aria-checked="{% if tag.checked %}true{% else %}false{% endif %}"
+               >
           {{ tag.name }}
           <input type="checkbox" class="tag__check" name="tags[]"
                  id="tag-check-{{ forloop.counter }}"

legal_db/templates/legal_db/faq.html

@@ -14,12 +14,12 @@ <h1 class="hero-title title is-2">Frequently Asked Questions</h1>
       <div class="column is-9">
         <div class="control has-icons-left">
           <label for="search" class="is-sr-only">Search:</label>
-          <input id="search" class="input column is-8 margin-bottom-big" type="text" onkeyup="search()" placeholder="Search for..." />
+          <input id="search" class="input column is-8 margin-bottom-big" type="text" onkeyup="search()" placeholder="Search for..." aria-label="Search through FAQs"/>
           <span class="icon is-left"><i class="icon search"></i></span>
         </div>
         <div>
           {% for faq in faqs %}
-          <article class="faq__content">
+          <article class="faq__content" aria-labelledby="faq-head-{{ forloop.counter }}">
             <div id="faq-head-{{ forloop.counter }}" class="faq__head" aria-expanded="false">
               <h5 class="faq__title">{{ faq.question }}</h5>
             </div>

legal_db/templates/legal_db/index.html

@@ -4,7 +4,7 @@
   <section class="hero">
     <div class="container">
       <h1 class="hero-title">Creative Commons Legal Database</h1>
-      <p class="hero-description body-bigger column is-9">This database includes <a href="{% url 'case_index' %}" class="has-text-weight-bold">case law</a> and <a href="{% url 'scholarship_index' %}" class="has-text-weight-bold">legal scholarship</a> that relates to Creative Commons legal tools.<br/>Please note that the database is not comprehensive, and CC does not necessarily endorse the views of the courts or scholars whose decisions and writings are referenced. The content provided is purely informational, designed for those seeking to better understand the legal ecosystem in which the CC legal tools operate.</p>
+      <p class="hero-description body-bigger column is-9">This database includes <a href="{% url 'case_index' %}" class="has-text-weight-bold" aria-label="Link to case law section">case law</a> and <a href="{% url 'scholarship_index' %}" class="has-text-weight-bold" aria-label="Link to legal scholarship section">legal scholarship</a> that relates to Creative Commons legal tools.<br/>Please note that the database is not comprehensive, and CC does not necessarily endorse the views of the courts or scholars whose decisions and writings are referenced. The content provided is purely informational, designed for those seeking to better understand the legal ecosystem in which the CC legal tools operate.</p>
     </div>
   </section>
   <section class="explore">
@@ -15,14 +15,14 @@ <h2 class="title is-3">Explore by content</h2>
           <div class="padding-top-large">
             <h3 class="subtitle is-4 padding-bottom-big">Cases</h3>
             {% for tag in cases_tags %}
-            <a href="{% url 'case_index' %}?tags%5B%5D={{ tag }}" class="button tag case outline margin-right-small margin-vertical-small">
+            <a href="{% url 'case_index' %}?tags%5B%5D={{ tag }}" class="button tag case outline margin-right-small margin-vertical-small" aria-label="View cases tagged with {{ tag }}">
               {{ tag }}
             </a>
             {% endfor %}
           </div>
         </div>
         <div class="column is-half">
-          <article class="card entry-post link no-border">
+          <article class="card entry-post link no-border" aria-label="Navigate to Caselaw Database">
             <a href="{% url 'case_index' %}" class="has-background-tomato">
               <span class="card-content has-bottom-link">
                 <h3 class="b-header has-text-white">Caselaw Database</h3>
@@ -35,13 +35,13 @@ <h3 class="b-header has-text-white">Caselaw Database</h3>
         <div class="column is-half">
           <h3 class="subtitle is-4 padding-bottom-big">Scholarship</h3>
           {% for tag in scholarship_tags %}
-          <a href="{% url 'scholarship_index' %}?tags%5B%5D={{ tag }}" class="button tag scholarship outline margin-right-small margin-vertical-small">
+          <a href="{% url 'scholarship_index' %}?tags%5B%5D={{ tag }}" class="button tag scholarship outline margin-right-small margin-vertical-small" aria-label="View scholarship tagged with {{ tag }}">
             {{ tag }}
           </a>
           {% endfor %}
         </div>
         <div class="column is-half">
-          <article class="card entry-post link no-border">
+          <article class="card entry-post link no-border" aria-label="Navigate to Legal Scholarship Database">
             <a href="{% url 'scholarship_index' %}" class="has-background-forest-green">
               <span class="card-content has-bottom-link">
                 <h3 class="b-header has-text-white">Legal Scholarship Database</h3>
@@ -60,11 +60,11 @@ <h3 class="b-header has-text-white">Legal Scholarship Database</h3>
         <div class="column is-half">
           <h2 class="title is-3">Contribute</h2>
           <p class="padding-vertical-normal">The information presented here has been contributed by many dedicated members of the CC Global Network and CC staff. You can contribute too using our forms linked to on this page.</p>
-          <a href="{% url 'case_submit' %}" class="button case small margin-right-bigger margin-bottom-normal">Submit a case</a>
-          <a href="{% url 'scholarship_submit' %}" class="button scholarship small">Submit an article</a>
+          <a href="{% url 'case_submit' %}" class="button case small margin-right-bigger margin-bottom-normal" aria-label="Submit a case">Submit a case</a>
+          <a href="{% url 'scholarship_submit' %}" class="button scholarship small" aria-label="Submit a scholarship article">Submit an article</a>
         </div>
         <div class="column is-half">
-          <article class="card entry-post link">
+          <article class="card entry-post link" aria-label="Navigate to Frequently Asked Questions">
             <a href="{% url 'faq' %}">
               <span class="card-eyebrow">Check the</span>
               <h2 class="card-title">Frequently asked questions</h2>

legal_db/templates/legal_db/partials/_breadcrumb.html

@@ -1,24 +1,24 @@
 {% with current_path=request.resolver_match.url_name %}
 <nav class="breadcrumb caption bold" aria-label="breadcrumbs">
   <ul>
-    <li><a href="{% url 'home' %}">Home</a></li>
+    <li><a href="{% url 'home' %}" aria-label="Go to homepage">Home</a></li>
 
     {% if current_path == 'case_index' %}
-      <li class="is-active"><a>Cases</a></li>
+      <li class="is-active" aria-current="page"><a>Cases</a></li>
 
     {% elif current_path == 'case_detail' %}
-      <li><a href="{% url 'case_index' %}">Cases</a></li>
+      <li><a href="{% url 'case_index' %}" aria-label="Go to cases page">Cases</a></li>
       <li class="is-active"><a>Case Detail</a></li>
 
     {% elif current_path == 'scholarship_index' %}
-      <li class="is-active"><a>Scholarship</a></li>
+      <li class="is-active" aria-current="page"><a>Scholarship</a></li>
 
     {% elif current_path == 'scholarship_detail' %}
-      <li><a href="{% url 'scholarship_index' %}">Scholarship</a></li>
+      <li><a href="{% url 'scholarship_index' %}" aria-label="Go to scholarship page">Scholarship</a></li>
       <li class="is-active"><a>Scholarship Detail</a></li>
 
     {% elif current_path == 'faq' %}
-      <li class="is-active"><a>FAQ</a></li>
+      <li class="is-active" aria-current="page"><a>FAQ</a></li>
 
     {% endif %}
   </ul>

legal_db/templates/legal_db/partials/_search.html

@@ -1,23 +1,24 @@
 {% load widget_tweaks %}
 
-<section class="columns is-gapless is-vcentered margin-top-big margin-bottom-small">
+<section class="columns is-gapless is-vcentered margin-top-big margin-bottom-small" aria-label="Search and Filters">
   <div class="column is-8">
+    <div role="search" method="get" class="field has-addons" aria-label="Search form">
     <div class="field has-addons">
       <div class="control has-icons-left search-input">
         <label for="{{ form.keywords.id_for_label }}" class="is-sr-only">Search: </label>
         {% render_field form.keywords|add_class:"input" placeholder="Search for..." %}
-        <span class="icon is-left"><i class="icon search"></i></span>
+        <span class="icon is-left" aria-hidden="true"><i class="icon search"></i></span>
       </div>
       <div class="control is-4">
-        <button type="submit" class="button small">Search</button>
+        <button type="submit" class="button small" aria-label="Submit search">Search</button>
       </div>
     </div>
     {{ form.keywords.errors }}
   </div>
   <div class="column">
-    <strong id="tags-filter" class="tags-filter margin-left-normal">
-      <span id="tags-hide">Hide topic filters <i class="icon chevron-up"></i></span>
-      <span id="tags-show" class="is-hidden">Show topic filters <i class="icon chevron-down"></i></span>
+    <strong id="tags-filter" class="tags-filter margin-left-normal" aria-label="Topic filters">
+      <span id="tags-hide" aria-controls="tags-filter">Hide topic filters <i class="icon chevron-up"></i></span>
+      <span id="tags-show" class="is-hidden" aria-controls="tags-filter">Show topic filters <i class="icon chevron-down"></i></span>
     </strong>
   </div>
 </section>

legal_db/templates/legal_db/result.html

@@ -5,11 +5,11 @@
     <div class="hero-body has-text-centered">
       <p class="body-big">Thank you for your submission.<br/> It will be reviewed by Creative Commons staff, and you may be contacted for more information.</p>
       <br/>
-      <a href="{% url 'home' %}" class="button margin-normal">Return Home</a>
+      <a href="{% url 'home' %}" class="button margin-normal" aria-label="Return to Home page">Return Home</a>
       {% if "scholarship" in action %}
-        <a href="{% url 'scholarship_submit' %}" class="button button-scholarship margin-normal">Submit another article</a>
+        <a href="{% url 'scholarship_submit' %}" class="button button-scholarship margin-normal" aria-label="Submit another article">Submit another article</a>
       {% else %}
-        <a href="{% url 'case_submit' %}" class="button button-case margin-normal">Submit another case</a>
+        <a href="{% url 'case_submit' %}" class="button button-case margin-normal" aria-label="Submit another case">Submit another case</a>
       {% endif %}
     </div>
   </main>

legal_db/templates/legal_db/scholarship/detail.html

@@ -1,7 +1,7 @@
 {% extends 'legal_db/base.html' %}
 
 {% block body_content %}
-<div class="hero scholarship">
+<div class="hero scholarship" role="banner" aria-label="Hero title">
   <div class="container">
     {% include "legal_db/partials/_breadcrumb.html" %}
     <h2 class="hero-title b-header">{{ scholarship.title }}</h2>

legal_db/templates/legal_db/scholarship/form.html

@@ -14,7 +14,7 @@ <h1 class="hero-title title is-2">Scholarship Submission</h1>
       <form class="form scholarship" action="{% url 'scholarship_submit' %}" method="post">
       {% csrf_token %}
       {% if scho_form.non_field_errors %}
-        <div class="notification warning">
+        <div class="notification warning" role="alert" aria-live="assertive">
           <strong class="notification-container">{{ scho_form.non_field_errors }}</strong>
         </div>
       {% endif %}
@@ -36,15 +36,15 @@ <h4 class="b-header">Contact</h4>
 
         <div class="field">
           <strong>Agreement and Consent</strong> <span class="required">*</span><br/>
-          <label for="{{ scho_form.agreement.id_for_label }}" class="checkbox">
+          <label for="{{ scho_form.agreement.id_for_label }}" class="checkbox"  aria-required="true">
             {% render_field scho_form.agreement %}
             I have read and agree to the <a href="https://creativecommons.org/privacy/" class="has-text-dark-slate-blue">Creative Commons Privacy Policy</a>.
           </label>
           {{ scho_form.agreement.errors }}
         </div>
         <br/>
 
-        <h4 class="b-header">Article information</h4>
+        <h4 class="b-header" aria-label="Article information section">Article information</h4>
 
         <div class="field">
           <label class="has-text-weight-bold" for="{{ scho_form.title.id_for_label }}">Title of article</label>
@@ -106,7 +106,7 @@ <h4 class="b-header">Link to article</h4>
         </div>
       {% endwith %}
 
-      <button type="submit" class="button scholarship">submit scholarship</button>
+      <button type="submit" class="button scholarship" aria-label="Submit scholarship form">submit scholarship</button>
     </form>
     </div>
   </div>

manage.py

@@ -42,4 +42,4 @@ def main():
     except Exception:
         print("ERROR (1) Unhandled exception:", file=sys.stderr)
         print(traceback.print_exc(), file=sys.stderr)
-        sys.exit(1)
+        sys.exit(1)