Merge pull request #468 from andrewmcgivery/master

Fixes #464: Accessibility Fixes Round 2

webcompat/static/css/development/page/contributors.css

@@ -17,12 +17,12 @@
   line-height:5em;
   font-weight:bold;
 }
-.contributors__item__title h3 {
+.contributors__item__title h2 {
   font-size:1.4em;
   cursor:pointer;
 }
 @media (--viewport-375px) {
-  .contributors__item__title h3 {
+  .contributors__item__title h2 {
     font-size:1.2em;
   }
 }

webcompat/templates/about.html

@@ -3,15 +3,15 @@
 <div class="page page--about about">
 {% include "shared/nav.html" %}
   <main class="wc-content wc-content--body" role="main">
-    <h2 class="wc-Title--l">About</h2>
-    <h3 class="wc-Title--m">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>
+    <h1 class="wc-Title--l">About</h1>
+    <h2 class="wc-Title--m">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.</h2>
     <div class="u-textCenter about_media">
       <img class="u-image" src="../img/about.png" alt="About logo" />
     </div>
-    <h4 class="wc-Title--s">What is Web Compatibility?</h4>
+    <h3 class="wc-Title--s">What is Web Compatibility?</h3>
     <p>Web compatibility is about making sure web sites work consistently across all browsers and devices.</p>
     <p>Sometimes, sites have bugs or policies that prevent them from working well in every browser. We work to help web developers and site owners identify and fix such issues.</p>
-    <h4 class="wc-Title--s ">Web compatibility issues usually follow a three part life cycle:</h4>
+    <h3 class="wc-Title--s ">Web compatibility issues usually follow a three part life cycle:</h3>
     <div class="about_bug about_bug--reporting">
       <strong class="about_bug_label">Bug Reporting</strong>: Finding and reporting compatibility issues around the web. This is the first and most critical part of the process. We all run into compatibility issues when using the web. Most people do not know how or where to report these issues. Webcompat.com make the process or reporting issues simple.
     </div>

webcompat/templates/browse-issues/my-issues.html

@@ -13,7 +13,9 @@ <h3 class="wc-titleIssue">Submitted by Me</h3>
     </div>
     <% }); %>
   <% } else { %>
+  <div class="r-Grid-cell r-all--1of2 r-maxM--2of2">
   <p>Nothing reported yet!</p>
+  </div>
   <% } %>
   </script>
 </div>

webcompat/templates/contributors.html

@@ -17,31 +17,31 @@ <h1 class="wc-Hero-title wc-Title--xl">Welcome aboard!<br/>Get started below...<
     <div class="contributors__item">
       <div class="contributors__item__header">
         <div class="wc-content contributors__item__title">
-          <h3><button class="contributors__item__btn is-active" type="button">How to Reproduce a Bug<span class="icon icon--contributors"></span></button></h3>
+          <h2><button class="contributors__item__btn is-active" type="button">How to Reproduce a Bug<span class="icon icon--contributors"></span></button></h2>
         </div>
       </div>
       <div class="contributors__item__content wc-content is-open">{% include "contributors/reproduce-bug.html" %}</div>
     </div>
     <div class="contributors__item">
       <div class="contributors__item__header">
         <div class="wc-content contributors__item__title">
-          <h3><button class="contributors__item__btn" type="button">How to Diagnose a Bug<span class="icon icon--contributors"></span></button></h3>
+          <h2><button class="contributors__item__btn" type="button">How to Diagnose a Bug<span class="icon icon--contributors"></span></button></h2>
         </div>
       </div>
       <div class="contributors__item__content wc-content">{% include "contributors/diagnose-bug.html" %}</div>
     </div>
     <div class="contributors__item">
       <div class="contributors__item__header">
         <div class="wc-content contributors__item__title">
-          <h3><button class="contributors__item__btn" type="button">How to Do Site Outreach<span class="icon icon--contributors"></span></button></h3>
+          <h2><button class="contributors__item__btn" type="button">How to Do Site Outreach<span class="icon icon--contributors"></span></button></h2>
         </div>
       </div>
       <div class="contributors__item__content wc-content">{% include "contributors/site-outreach.html" %}</div>
     </div>
     <div class="contributors__item">
       <div class="contributors__item__header">
         <div class="wc-content contributors__item__title">
-          <h3><button class="contributors__item__btn" type="button">Contribute to this site<span class="icon icon--contributors"></span></button></h3>
+          <h2><button class="contributors__item__btn" type="button">Contribute to this site<span class="icon icon--contributors"></span></button></h2>
         </div>
       </div>
       <div class="contributors__item__content page wc-content">{% include "contributors/contribute.html" %}</div>

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="Developer Console Screenshot"/>
     </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="Bug Comments Screenshot"/>
     </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="Browse Issues Screenshot"/>
     </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="Issue Comment Screenshot"/>
     </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 Bugs Screenshot"/>
     </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 Screenshot"/>
       </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="GitHub Comment Screenshot"/>
       </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 Screenshot"/>
           </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="Dribble Screenshot"/>
           </div>
         </li>
         <li><strong>Corporate emails.</strong>

webcompat/templates/form.html

@@ -29,24 +29,24 @@
     </div>
     <div class="r-Grid r-Grid--withGutter">
       <div class="r-Grid-cell r-all--1of2 r-maxM--2of2">
-        <div class="u-formGroup">
-          <label id="site-owner" class="u-formLabel">Is this your site?</label>
+        <fieldset class="u-formGroup">
+          <legend id="site-owner" class="u-formLabel">Is this your site?</legend>
           {% for subradio in form.site_owner %}
           <div class="radio-inline">
             {{ subradio }} {{ subradio.label }}
           </div>
           {% endfor %}
-        </div>
+        </fieldset>
       </div>
       <div class="r-Grid-cell r-all--1of2 r-maxM--2of2">
-        <div class="u-formGroup">
-          <label class="u-formLabel">What seems to be the trouble?</label>
+        <fieldset class="u-formGroup">
+          <legend class="u-formLabel">What seems to be the trouble?</legend>
           {% for subradio in form.problem_category %}
           <div class="radio">
             {{ subradio }} {{ subradio.label }}
           </div>
           {% endfor %}
-        </div>
+        </fieldset>
       </div>
     </div>
     <div class="r-Grid r-Grid--withGutter">

webcompat/templates/privacy.html

@@ -3,14 +3,14 @@
 <div class="page page--privacy">
 {% include "shared/nav.html" %}
   <div class="wc-content wc-content--body" role="main">
-    <h2 class="wc-Title--l">Webcompat.com Privacy Policy</h2>
+    <h1 class="wc-Title--l">Webcompat.com Privacy Policy</h1>
     <small>Last Updated: December 4, 2014</small>
-    <h4 class="wc-Title--s">About Us</h4>
+    <h2 class="wc-Title--s">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>
     <h2 class="wc-Title--s">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>
     <p>The User Agent HTTP header that your browser sends will be recorded in the bug report, if you choose to report a bug, but is hidden by default.</p>
-    <h4 class="wc-Title--s">Reporting Anonymously</h4>
+    <h2 class="wc-Title--s">Reporting Anonymously</h2>
     <p>If you choose the anonymous option, the only information that we’ll receive is the content of your report.</p>
     <h2 class="wc-Title--s">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>

webcompat/templates/topbar.html

@@ -19,7 +19,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>