Accessibility Fixes

webcompat/static/css/development/layout/utilities.css

@@ -52,3 +52,7 @@
 .wc-hidden {
   display:none;
 }
+.wc-sronly {
+	position: absolute;
+	top: -999px;
+}

webcompat/templates/about.html

@@ -2,7 +2,7 @@
 {% block body %}
 <div class="page page--about about">
 {% include "shared/nav.html" %}
-  <div class="wc-content wc-content--body">
+  <main class="wc-content wc-content--body" role="main">
     <h2>About</h2>
     <h3>Webcompat.com is developed by volunteers and supported by Mozilla. This site is an <span class="wc-bold" style="color:grey">open invitation for all web users, developers and browser vendors</span> to get involved in the web compatibility effort. Our goal is to make it easy to report and view problems for any part of the web.</h3>
     <div class="u-textCenter about_media">
@@ -22,6 +22,6 @@ <h4>Web compatibility issues usually follow a three part life cycle:</h4>
       <strong class="about_bug_label">Getting Contacts and Reaching Out</strong>: To get any bug fixed you need a good contact. There are many ways to find a contact at a company or web site. Sometimes finding a contact can be easy. Other times it requires some creativity and luck. After finding a contact, the next step is to make contact and help resolve the issue. Webcompat.com aims to make this process easier by allowing developers to check for bugs with their sites and applications in one location.
     </div>
     <p>The web is big and keeps getting bigger. To make sure it’s all compatible we need help from people in all regions of the world. The great thing is anyone can help. You don’t need to be a techie and as little as 5 minutes can make a huge difference!</p>
-  </div>
+  </main>
 </div>
 {% endblock %}

webcompat/templates/contributors.html

@@ -2,6 +2,7 @@
 {% block body %}
 <div>
 {% include "shared/nav.html" %}
+<main role="main">
   <div class="wc-Hero wc-Hero--contributors">
     <div class="wc-content">
       <div class="wc-Hero-section wc-Hero-section--left wc-Hero-section--contributors">
@@ -46,6 +47,7 @@ <h3><button class="contributors__item__btn" type="button">Contribute to this sit
       <div class="contributors__item__content page wc-content">{% include "contributors/contribute.html" %}</div>
     </div>
   </div>
+  </main>
 </div>
 {% endblock %}
 {%- block extrascripts -%}

webcompat/templates/contributors/diagnose-bug.html

@@ -7,15 +7,15 @@
   <li class="contributors__list__item">
     <span>Check the console to see if there are errors</span>
     <div class="contributors__list__screenshot">
-      <img src="../img/6consolesnapshot.jpg" alt"Console snapshot"/>
+      <img src="../img/6consolesnapshot.jpg" alt="Console snapshot"/>
     </div>
   </li>
   <li class="contributors__list__item"><span>Google any errors</span></li>
   <li class="contributors__list__item"><span>Write a comment with your findings on the issue</span></li>
   <li class="contributors__list__item">
     <span>If you know how to fix the issue, or have information related to a fix, add it in a comment</span>
     <div class="contributors__list__screenshot">
-      <img src="../img/9commentsnapshot.jpg" alt"Comment snapshot"/>
+      <img src="../img/9commentsnapshot.jpg" alt="Comment snapshot"/>
     </div>
   </li>
   <li class="contributors__list__item"><span>If not, post what you tried on the issue</span></li>

webcompat/templates/contributors/reproduce-bug.html

@@ -2,15 +2,15 @@
   <li class="contributors__list__item">
     <span>Find a bug that "Needs Diagnosis"</span>
     <div class="contributors__list__screenshot">
-      <img src="../img/1browsesnapshot.jpg" alt"Browser snapshot"/>
+      <img src="../img/1browsesnapshot.jpg" alt="Browser snapshot"/>
     </div>
   </li>
   <li class="contributors__list__item"><span>Make sure you have the same browser/OS running (if possible)</span></li>
   <li class="contributors__list__item"><span>See if you can reproduce</span></li>
   <li class="contributors__list__item">
     <span>Comment on the issue with your findings</span>
     <div class="contributors__list__screenshot">
-      <img src="../img/4issuesnapshot.jpg" alt"Browser snapshot"/>
+      <img src="../img/4issuesnapshot.jpg" alt="Browser snapshot"/>
     </div>
   </li>
 </ul>

webcompat/templates/contributors/site-outreach.html

@@ -2,7 +2,7 @@
   <li class="contributors__list__item">
     <span>Find a bug that is labeled "Ready for Outreach"</span>
     <div class="contributors__list__screenshot">
-      <img src="../img/1readyforoutreach.jpg" alt"Ready for outreach snapshot"/>
+      <img src="../img/1readyforoutreach.jpg" alt="Ready for outreach snapshot"/>
     </div>
   </li>
   <li class="contributors__list__item"><span>Now it's time to track down someone to help get the fix implemented, but first a few tips on doing outreach:</span></li>
@@ -18,7 +18,7 @@
     <li class="contributors__list__item contributors__list__item--lvl_down">
       <span>Chrome bug reports: <a title="Chrome bug reports" href="https://crbug.com/new">http://crbug.com/new</a></span>
       <div class="contributors__list__screenshot">
-        <img src="../img/chromebugreport.jpg" alt"Chrome bug report snapshot"/>
+        <img src="../img/chromebugreport.jpg" alt="Chrome bug report snapshot"/>
       </div>
     </li>
     <li class="contributors__list__item contributors__list__item--lvl_down"><span>Firefox bug reports: <a title="Firefox bug reports" href="https://bugzilla.mozilla.org/enter_bug.cgi">https://bugzilla.mozilla.org/enter_bug.cgi</a></span></li>
@@ -32,7 +32,7 @@
     <li class="contributors__list__item contributors__list__item--lvl_down">
       <span><strong>Does the web site have a support email or an issue tracker?</strong>  This is a simple one, but there's no guarantee that your request will be addressed.  Most of the time the responses are automatic but it's better than nothing. If in return you get an ID and/or a URI, put it in the issue comments.</span>
       <div class="contributors__list__screenshot">
-        <img src="../img/2lastbullet_comment.jpg" alt"Comment snapshot"/>
+        <img src="../img/2lastbullet_comment.jpg" alt="Comment snapshot"/>
       </div>
     </li>
     <li class="contributors__list__item contributors__list__item--lvl_down">
@@ -47,7 +47,7 @@
         <li><strong>Slideshare.</strong>
           When you can't find the information about a developer, you might want to try to search something such as $COMPANY_NAME site:slideshare.net or any appropriate keywords that will make you closer to a contact. Some companies have their developers speaking at conferences about issues with performances, etc. Be careful of talks related to sales or marketing. In the slides, there is often the contact information of the developer.
           <div class="contributors__list__screenshot">
-            <img src="../img/slideshare.jpg" alt"Slideshare snapshot"/>
+            <img src="../img/slideshare.jpg" alt="Slideshare snapshot"/>
           </div>
         </li>
         <li><strong>Github, etc.</strong>
@@ -56,7 +56,7 @@
         <li><strong>Web designer.</strong>
           Sometimes when you can't reach a web developer, you may try to reach web designers who have also their own type of social networks such as dribbble.com. Usually they have contacts with web developers and may be able to give an introduction. In some web agencies, the web designer will be a good initial contact. Again, be tactful and don't make the life of the web designer harder in his/her own company.
           <div class="contributors__list__screenshot">
-            <img src="../img/webdesigner.jpg" alt"Webdesigner snapshot"/>
+            <img src="../img/webdesigner.jpg" alt="Webdesigner snapshot"/>
           </div>
         </li>
         <li><strong>Corporate emails.</strong>

webcompat/templates/error.html

@@ -2,12 +2,12 @@
 {% block body %}
 <div class="page page--404">
   {% include "shared/nav.html" %}
-  <div class="wc-content wc-content--body" id="pageerror">
-    <h2>Yikes!  {{ error_message }} ({{ error_code }})</h2>
-    <h3>(sound of broken glass)</h3>
+  <main class="wc-content wc-content--body" id="pageerror" role="main">
+    <h1>Yikes!  {{ error_message }} ({{ error_code }})</h1>
+    <h2>(sound of broken glass)</h2>
     <br>
     <br>
     <a class="Button Button--action" href="/">Return home</a>
-    </div>
+    </main>
 </div>
 {% endblock %}

webcompat/templates/index.html

@@ -1,6 +1,7 @@
 {%- extends "layout.html" -%}
 {%- block body -%}
 {% include "topbar.html" %}
+<main role="main">
 <div class="wc-Hero">
   <div class="wc-content">
     <div class="wc-Hero-section wc-Hero-section--left wc-Hero-section--home ">
@@ -92,6 +93,7 @@ <h2>Join The Team</h2>
       </div>
   </div>
 </div>
+</main>
 {% endblock %}
 {%- block extrascripts -%}
 {%- if config.PRODUCTION -%}

webcompat/templates/issue-list.html

@@ -2,10 +2,11 @@
 {% block body %}
   <div class="IssueList js-issue-page" data-username="{{ session.username }}">
   {% include "shared/nav.html" %}
+  <main role="main">
     <div class="wc-content wc-content--body js-issuelist-filter">
       <script type="text/template" id="issuelist-filter-tmpl">
       <!-- Temporary Header -->
-      <h2 class="wc-margin-bottom">Issues</h2>
+      <h1 class="wc-margin-bottom">Issues</h1>
       <div class="Dropdown Dropdown--large js-dropdown-wrapper"></div>
       <div>
         <button type="button" class="IssueList-filtering IssueList-filtering--untriaged" data-filter="untriaged">
@@ -30,8 +31,9 @@ <h2 class="wc-margin-bottom">Issues</h2>
     <div class="IssueList-search js-issuelist-search">
       <script type="text/template" id="issuelist-search-tmpl">
       <div class="wc-content IssueList-search-content">
-        <input type="text" class="IssueList-search-form mousetrap" placeholder="Search by keyword">
-        <button role="button" type="submit" class="cssr-ResetButton IssueList-search-button js-search-button"><span class="icon icon-search"></span></button>
+		<label for="IssueList-search-input" class="wc-sronly">Search By Keyword</label>
+        <input type="text" id="IssueList-search-input" class="IssueList-search-form mousetrap" placeholder="Search by keyword">
+        <button role="button" type="submit" class="cssr-ResetButton IssueList-search-button js-search-button"><span class="wc-sronly">Search</span><span class="icon icon-search"></span></button>
       </div>
       </script>
     </div>
@@ -78,6 +80,7 @@ <h2 class="wc-margin-bottom">Issues</h2>
         </script>
       </div>
     </div>
+	</main>
   </div>
 
 <script type="text/template" id="dropdown-tmpl">

webcompat/templates/issue.html

@@ -2,15 +2,16 @@
 {% block body %}
   <div class="page page--issue">
   {% include "shared/nav.html" %}
-    <div class="wc-content wc-content--body Issue">
-      <h2 class="Issue-title">
+    <main class="wc-content wc-content--body Issue" role="main">
+      <h1 class="Issue-title">
       <script type="text/template" id="title-tmpl">
         <a class="Issue-back" href="{{ url_for("show_issues") }}" title="All issues">
+		  <span class="wc-sronly">All Issues</span>
           <span class="icon icon-arrow-left"></span>
         </a>
         Issue <%= number %>: <%- title %>
       </script>
-      </h2>
+      </h1>
       <div class="Issue-wrapper">
         <!-- Issue Date -->
         <div class="Issue-create">
@@ -34,7 +35,7 @@ <h2 class="Issue-title">
         <script type="text/template" id="issue-labels-tmpl">
           <span class="Label Label--title">Labels</span>
           {% if session.user_id and session.avatar_url %}
-            <span class="LabelEditor-wrapper"><button class="LabelEditor-launcher icon icon-gear"></button></span>
+            <span class="LabelEditor-wrapper"><button class="LabelEditor-launcher icon icon-gear"><span class="wc-sronly">Edit Labels</span></button></span>
           {% endif %}
           <span class="Label-list">
           <% _.each(labels, function(label) { %>
@@ -73,7 +74,8 @@ <h2 class="Issue-title">
           <div class="Comment-body Comment-body--caret">
             <!--<div class="Comment-drag">-->
               <!-- TODO(miket) <div class="comment__dd">Attach images by dragging &amp; dropping, <span class="comment__dd__label">selecting them</span> or pasting form the clipboad </div> -->
-              <textarea class="Comment-wrapper Comment-text" placeholder="Leave a comment"></textarea>
+              <label for="Comment-text" class="wc-sronly">Comment Text</label>
+			  <textarea id="Comment-text" class="Comment-wrapper Comment-text" placeholder="Leave a comment"></textarea>
             <!--</div>-->
             <div class="Comment-button">
               <button class="Button Button--action">
@@ -89,7 +91,7 @@ <h2 class="Issue-title">
         <p class="Issue-login">Please <a href="{{ url_for('login') }}">login</a> to edit issues.</p>
         {% endif %}
        </div>
-    </div>
+    </main>
   </div>
 
   <script type="text/template" id="label-editor-tmpl">

webcompat/templates/privacy.html

@@ -2,22 +2,22 @@
 {% block body %}
 <div class="page page--privacy">
 {% include "shared/nav.html" %}
-  <div class="wc-content wc-content--body">
-    <h2>Webcompat.com Privacy Policy</h2>
+  <main class="wc-content wc-content--body" role="main">
+    <h1>Webcompat.com Privacy Policy</h1>
     <small>Last Updated: August 15, 2014</small>
-    <h4>About Us</h4>
+    <h2>About Us</h2>
     <p><a href="http://www.webcompat.com">Webcompat.com</a> allows you to report web compatibility issues though a simple webform. Volunteers view the reports, identify solutions, and share the reports and solutions with the website admins. For more details see our <a href="about">About page</a>.</p>
-    <h4>Public Reports</h4>
+    <h2>Public Reports</h2>
     <p>All reports are publicly accessible. Please do not include any confidential or personal information in the content of your report.</p>
-    <h4>Reporting Anonymously</h4>
+    <h2>Reporting Anonymously</h2>
     <p>If you choose the anonymous option, the only information that we’ll receive is the content of your report.</p>
-    <h4>Reporting via GitHub</h4>
+    <h2>Reporting via GitHub</h2>
     <p>If you choose the GitHub option, webcompat.com will receive your GitHub username and avatar.  You can revoke our access to this information at any time from the <a href="https://github.com/settings/applications">"Applications" section of your profile page</a>.</p>
-    <h4>Cookies &amp; Analytics</h4>
+    <h2>Cookies &amp; Analytics</h2>
     <p>If you log into our site using your GitHub user account, webcompat.com will use cookies to record your session information.  The cookie will expire when the session ends, i.e., when you click "logout".</p>
     <p>Webcompat.com also uses Google Analytics to track usage statistics.</p>
-    <h4>Contact Us</h4>
+    <h2>Contact Us</h2>
     <p>You can <a href="https://twitter.com/webcompat">find us on Twitter</a> or on the <a href="https://lists.mozilla.org/listinfo/compatibility">public mailing list [email protected]</a> (<a href="https://groups.google.com/forum/#!forum/mozilla.compatibility">archive</a>).  These are public forums, so please minimize any personal information you choose to share.</p>
-  </div>
+  </main>
 </div>
 {% endblock %}

webcompat/templates/shared/footer.html

@@ -1,4 +1,4 @@
-<footer class="wc-Footer">
+<footer class="wc-Footer" role="contentinfo">
   <div class="wc-content wc-content--footer">
   <ul class="wc-Footer-section wc-Footer-section--left">
     <li class="wc-Footer-item"><a class="wc-Footer-item-link wc-Footer-item-link--separator" href="{{ url_for('about') }}">About</a></li><!--

webcompat/templates/shared/nav.html

@@ -1,4 +1,4 @@
-<header class="wc-Navbar">
+<header class="wc-Navbar" role="banner">
   <nav class="wc-content" role="navigation">
     <div class="wc-Navbar-section wc-Navbar-section--left">
       <a class="wc-Navbar-link" href="/">
@@ -11,7 +11,7 @@
     {% else %}
       <a class="wc-Navbar-link" href="{{ url_for('logout') }}">Logout</a>
       {% if session.user_id and session.avatar_url %}
-      <img class="wc-Navbar-avatar" src=" {{ session.avatar_url }}s=40">
+      <img class="wc-Navbar-avatar" src=" {{ session.avatar_url }}s=40" alt="User Avatar">
       {% endif %}
     {% endif %}
     </div>

webcompat/templates/thanks.html

@@ -2,7 +2,7 @@
 {% block body %}
   <div class="page page--thanks">
     {% include "shared/nav.html" %}
-    <div class="wc-content wc-content--body">
+    <main class="wc-content wc-content--body" role="main">
       <h2>Thank you.</h2>
       <p>You're helping us make the web a better place to work and play.</p>
       {% if config['PRODUCTION'] %}
@@ -12,6 +12,6 @@ <h2>Thank you.</h2>
       {% endif %}
       <p><a href="{{ url_for("index") }}">Return back home</a>.</p>
       <a class="Button Button--action" id="twittershare" href="https://twitter.com/intent/tweet?text={{ encoded_text }}&url={{ encoded_issue }}&via=webcompat" target="_blank">Share on Twitter</a>
-    </div>
+    </main>
   </div>
 {% endblock %}

webcompat/templates/topbar.html

@@ -1,4 +1,4 @@
-<header class="wc-Navbar">
+<header class="wc-Navbar" role="banner">
   <nav class="wc-content" role="navigation">
     <div class="wc-Navbar-section wc-Navbar-section--left">{%- if browser == 'firefox' %}
       <a class="wc-Navbar-link" href="https://addons.mozilla.org/en-US/firefox/addon/webcompatcom-reporter/">Download our Firefox Add-on</a>