Added ARIA attributes to essential elements

legal_db/templates/404.html

@@ -7,7 +7,7 @@
       <h1 class="hero-title-big">404</h1>
       <h2 class="b-header">{% trans "Page Not Found!" %}</h2>
       <p class="margin-vertical-normal">{% trans "The page you are looking for doesn't exist." %}</p>
-      <a href="{% url 'home' %}" class="button">{% trans "Return Home" %}</a>
+      <a href="{% url 'home' %}" class="button" role="button">{% trans "Return Home" %}</a>
     </div>
   </main>
 {% endblock %}

legal_db/templates/legal_db/case/detail.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block body_content %}
-<section class="hero case">
+<section class="hero case" aria-label="{{ case.name}}">
   <div class="container">
     {% include "legal_db/partials/_breadcrumb.html" %}
     <h2 class="hero-title b-header">{{ case.name }}</h2>
@@ -11,7 +11,7 @@ <h2 class="hero-title b-header">{{ case.name }}</h2>
 <section class="details">
   <div class="container">
     <div class="columns">
-      <aside class="column is-one-third">
+      <aside class="column is-one-third" aria-label="{% trans 'Case Details' %}">
         <div class="margin-bottom-bigger">
           <h4 class="b-header margin-bottom-small">{% trans "Country" %}</h4>
           <p>{{ case.country.name }}</p>
@@ -45,7 +45,7 @@ <h4 class="b-header margin-bottom-small">{% trans "Relevant materials" %}</h4>
           </ul>
         </div>
       </aside>
-      <article class="column is-two-thirds">
+      <article class="column is-two-thirds" aria-label="{% trans 'Case Information' %}">
         <h3 class="b-header margin-bottom-small">{% trans "Background information" %}</h3>
         <p>{{ case.background }}</p>
         <br/>

legal_db/templates/legal_db/case/form.html

@@ -17,10 +17,10 @@ <h1 class="hero-title title is-2">{% trans "Case Submission" %}</h1>
 <section class="columns submit is-centered">
   <div class="column is-9">
     <div class="container">
-      <form class="form case" action="{% url 'case_submit' %}" method="post">
+      <form class="form case" action="{% url 'case_submit' %}" method="post" aria-label="Case Submission Form">
         {% csrf_token %}
         {% if case_form.non_field_errors %}
-          <div class="notification warning">
+          <div class="notification warning" role="alert">
             <strong class="notification-container">{{ case_form.non_field_errors }}</strong>
           </div>
         {% endif %}
@@ -147,7 +147,7 @@ <h4 class="b-header">{% trans "Links to relevant materials" %}</h4>
               Please include any links to pleadings, briefs, and opinions in the lawsuit, as well as blog posts, academic articles, or other relevant materials. At least one URL is required.
             {% endblocktrans %}
           </p>
-          <div id="link-formset">
+          <div id="link-formset" aria-live="polite">
             {{ link_formset.management_form }}
             {% for link_form in link_formset %}
               <div id="link-form-{{ forloop.counter0 }}">
@@ -167,7 +167,7 @@ <h4 class="b-header">{% trans "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

@@ -35,7 +35,9 @@ <h2 class="card-title">{% trans "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

@@ -19,7 +19,7 @@ <h1 class="hero-title title is-2">{% trans "Frequently Asked Questions" %}</h1>
         </div>
         <div>
           {% for faq in faqs %}
-          <article class="faq__content">
+          <article class="faq__content" aria-label="Frequently Asked Questions">
             <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

@@ -31,7 +31,7 @@ <h3 class="subtitle is-4 padding-bottom-big">{% trans "Cases" %}</h3>
         </div>
         <div class="column is-half">
           <article class="card entry-post link no-border">
-            <a href="{% url 'case_index' %}" class="has-background-tomato">
+            <a href="{% url 'case_index' %}" class="has-background-tomato" aria-label="{% trans 'Go to Caselaw Database' %}">
               <span class="card-content has-bottom-link">
                 <h3 class="b-header has-text-white">{% trans "Caselaw Database" %}</h3>
                 <span class="content">{% trans "The Case Law Database includes court decisions from around the globe concerning Creative Commons." %}</span>
@@ -50,7 +50,7 @@ <h3 class="subtitle is-4 padding-bottom-big">{% trans "Scholarship" %}</h3>
         </div>
         <div class="column is-half">
           <article class="card entry-post link no-border">
-            <a href="{% url 'scholarship_index' %}" class="has-background-forest-green">
+            <a href="{% url 'scholarship_index' %}" class="has-background-forest-green" aria-label="{% trans 'Navigate to Legal Scholarship Database' %}">
               <span class="card-content has-bottom-link">
                 <h3 class="b-header has-text-white">{% trans "Legal Scholarship Database" %}</h3>
                 <span class="content">{% trans "The Scholarship Database aims to provide users with resources concerning the use, interpretation, and enforceability of Creative Commons licenses." %}</span>
@@ -77,7 +77,7 @@ <h2 class="title is-3">{% trans "Contribute" %}</h2>
         </div>
         <div class="column is-half">
           <article class="card entry-post link">
-            <a href="{% url 'faq' %}">
+            <a href="{% url 'faq' %}" aria-label="{% trans 'Navigate to Frequently Asked Questions' %}">
               {% blocktrans trimmed %}
                 <span class="card-eyebrow">Check the</span>
                 <h2 class="card-title">Frequently asked questions</h2>

legal_db/templates/legal_db/partials/_breadcrumb.html

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

legal_db/templates/legal_db/partials/_header.html

@@ -23,7 +23,7 @@
           <form action="{% url 'set_language' %}" method="post">
             {% csrf_token %}
             <div class="select">
-              <select name="language" onchange="this.form.submit()">
+              <select name="language" onchange="this.form.submit()" aria-label="{% trans 'Select language' %}">
                 <option disabled>{% trans 'Languages available' %}</option>
                 {% get_current_language as LANGUAGE_CODE %}
                 {% get_available_languages as languages %}

legal_db/templates/legal_db/partials/_search.html

@@ -1,7 +1,8 @@
 {% load i18n 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="{% trans 'Search and Filters' %}">
   <div class="column is-8">
+    <div role="search" method="get" class="field has-addons" aria-label="{% trans '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">{% trans "Search:" %} </label>

legal_db/templates/legal_db/scholarship/detail.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block body_content %}
-<div class="hero scholarship">
+<div class="hero scholarship" role="banner" aria-label="{% trans'Hero title' %}">
   <div class="container">
     {% include "legal_db/partials/_breadcrumb.html" %}
     <h2 class="hero-title b-header">{{ scholarship.title }}</h2>
@@ -11,7 +11,7 @@ <h2 class="hero-title b-header">{{ scholarship.title }}</h2>
 <div class="details">
   <div class="container">
     <div class="columns">
-      <aside class="column is-one-third">
+      <aside class="column is-one-third" aria-label="{% trans 'Scholarship detials' %}">
           <div class="margin-bottom-bigger">
             <h4 class="b-header margin-bottom-small">{% trans "License on article" %}</h4>
             {% if not scholarship.license %} <p class="has-text-grey">{% trans "Unknown" %}</p>

legal_db/templates/legal_db/scholarship/form.html

@@ -16,7 +16,7 @@ <h1 class="hero-title title is-2">{% trans "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 %}

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)