Aria roles and labels across templates. closes #72

bakerydemo/static/css/main.css

@@ -491,8 +491,8 @@ li.has-submenu a.allow-toggle {
 }
 
 .breadcrumb-container {
-  /*background-color: rgba(21, 38, 44, 0.8);*/
   background: linear-gradient(to right, rgba(21,38,44,0.8) 0%,rgba(0,0,0,0.9) 100%);
+  margin-top: -1px;
   position: relative;
   z-index: 3;
 }

bakerydemo/templates/base.html

@@ -8,8 +8,8 @@
 {% wagtailuserbar %}
 
 {% block header %}
-    {% include "includes/header.html" with parent=site_root calling_page=self %}
     {# Header contains the main_navigation block #}
+    {% include "includes/header.html" with parent=site_root calling_page=self %}
 {% endblock header %}
 
 {% block head-extra %}
@@ -21,11 +21,11 @@
 
 
 {% block breadcrumbs %}
-    {% breadcrumbs %}
     {# breadcrumbs is defined in base/templatetags/navigation_tags.py #}
+    {% breadcrumbs %}
 {% endblock breadcrumbs %}
 
-<content>
+<content role="main">
     {% block content %}
     {% endblock content %}
 </content>

bakerydemo/templates/base/form_page.html

@@ -21,18 +21,18 @@
         You could render your form using a Django rendering shortcut such as `{{ form.as_p }}` but that will tend towards unsemantic code, and make it difficult to style. You can read more on Django form at:
         https://docs.djangoproject.com/en/1.10/topics/forms/#form-rendering-options
         {% endcomment %}
-            <form action="{% pageurl page %}" method="POST">
+            <form action="{% pageurl page %}" method="POST" role="form">
                 {% csrf_token %}
                 {% if form.subject.errors %}
-                    <ol>
+                    <ol role="alertdialog">
                     {% for error in form.subject.errors %}
-                        <li><strong>{{ error|escape }}</strong></li>
+                        <li role="alert"><strong>{{ error|escape }}</strong></li>
                     {% endfor %}
                     </ol>
                 {% endif %}
 
                 {% for field in form %}
-                    <div class="fieldWrapper">
+                    <div class="fieldWrapper" aria-required={% if field.field.required %}"true"{% else %}"false"{% endif %}>
                         
                         {{ field.label_tag }}{% if field.field.required %}<span class="required">*</span>{% endif %}
 

bakerydemo/templates/includes/footer.html

@@ -1,6 +1,6 @@
 {% load navigation_tags static %}
 
-<div class="container">
+<div class="container" role="contentinfo">
     <div class="row">
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
             <ul class="list-inline text-center">
@@ -29,7 +29,7 @@
                     </a>
                 </li>
             </ul>
-            <p class="copyright text-center text-muted">{% get_footer_text %}</p>
+            <p class="copyright text-center text-muted" role="note">{% get_footer_text %}</p>
         </div>
     </div>
 </div>

bakerydemo/templates/includes/header.html

@@ -1,17 +1,17 @@
 {% load navigation_tags %}
-<div class="header clearfix">
+<div class="header clearfix" role="banner">
     <div class="container">
         <div class="row">
             <div class="col-lg-12">
                 <a href="/" class="logo">The Wagtail Bakery</a>
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navigation" aria-expanded="false">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navigation" aria-label="Mobile menu" aria-expanded="false">
                         <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
 
-                <form action="/search" method="get" class="search" _lpchecked="1">
+                <form action="/search" method="get" class="search" _lpchecked="1" role="search">
                     <input name="q" type="text" placeholder="Search the site" id="" aria-label="Search the site" autocomplete="off">
                     <a href="#" class="search-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"></path></svg>
@@ -19,11 +19,11 @@
                 </form>
 
                 {% block main_navigation %}
-                    <nav class="collapse navbar-collapse" id="main-navigation">
+                    <nav class="collapse navbar-collapse" id="main-navigation" role="navigation" aria-label="Primary site navigation">
                         <ul class="nav nav-pills">
+                            {# main_menu is defined in base/templatetags/navigation_tags.py #}
                             {% get_site_root as site_root %}
                             {% top_menu parent=site_root calling_page=self %}
-                            {# main_menu is defined in base/templatetags/navigation_tags.py #}
                         </ul>
                     </nav>
                 {% endblock %}

bakerydemo/templates/includes/messages.html

@@ -1,8 +1,8 @@
 {% if messages %}
-    <div>
+    <div role="alertdialog">
         <ul class="messages">
             {% for message in messages %}
-            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
+            <li{% if message.tags %} class="{{ message.tags }}"{% endif %} role="alert">{{ message }}</li>
             {% endfor %}
         </ul>
     </div>

bakerydemo/templates/tags/breadcrumbs.html

@@ -1,19 +1,19 @@
 {% load wagtailcore_tags %}
 
 
-<div class="breadcrumb-container">
+<nav class="breadcrumb-container" aria-label="breadcrumb" role="navigation">
   <div class="container">
       <div class="row">
           <div class="col-lg-12">
             {% if ancestors %}
-              <ol class="breadcrumb" aria-label="You are here:" role="navigation">
+              <ol class="breadcrumb">
                   {% for ancestor in ancestors %}
                     {% if forloop.last %}
-                      <li class="active">
+                      <li class="active" aria-level="{{ancestors|length}}">
                         {{ ancestor }}
                       </li>
                     {% else %}
-                      <li><a href="{% pageurl ancestor %}">{{ ancestor }}</a></li>
+                      <li><a href="{% pageurl ancestor %}" aria-level="{% cycle 1 2 3 4 5 %}">{{ ancestor }}</a></li>
                     {% endif %}
                   {% endfor %}
               </ol>
@@ -21,4 +21,4 @@
           </div>
       </div>
   </div>
-</div>
+</nav>

bakerydemo/templates/tags/top_menu.html

@@ -8,7 +8,7 @@
               {% top_menu_children parent=menuitem %}
               {# Used to display child menu items #}
       {% else %}
-          <a href="{% pageurl menuitem %}">{{ menuitem.title }}</a>
+          <a href="{% pageurl menuitem %}" role="menuitem">{{ menuitem.title }}</a>
       {% endif %}
   </li>
 {% endfor %}

bakerydemo/templates/tags/top_menu_children.html

@@ -1,7 +1,7 @@
 {% load navigation_tags wagtailcore_tags %}
 
-<ul class="dropdown-menu">
+<ul class="dropdown-menu" role="menu">
   {% for child in menuitems_children %}
-    <li><a href="{% pageurl child %}">{{ child.title }}</a></li>
+    <li><a href="{% pageurl child %}" role="menuitem">{{ child.title }}</a></li>
   {% endfor %}
 </ul>