Merge pull request #1559 from bl-aire/accessibility

Improve BinderHub page Accessibility

Author: minrk

binderhub/static/index.css

@@ -77,7 +77,7 @@ p > a:hover {
 }
 
 .btn-submit{
-    background-color:rgb(243, 162, 83);
+    background-color:rgb(223, 132, 41);
     box-shadow: 1px 1px rgba(0,0,0,.075);
     color:white;
     border:none;
@@ -236,18 +236,27 @@ h4 {
 }
 
 .point-orange {
-    border-color: rgb(243, 162, 83);
-    color: rgb(243, 162, 83);
+    border-color: rgb(247, 144, 42);
+    color: rgb(247, 144, 42);
 }
 
 .point-red {
-    border-color: rgb(208, 102, 129);
-    color: rgb(208, 102, 129);
+    border-color: rgb(204, 67, 101);
+    color: rgb(204, 67, 101);
 }
 
 .point-blue {
-    border-color: rgb(87, 154, 202);
-    color: rgb(87, 154, 202);
+    border-color: rgb(41, 124, 184);
+    color: rgb(41, 124, 184);
+}
+
+/*reduce font size of h1 and h2 so the initial design when h3 and h4 tags were used respectively is retained*/
+h1{
+    font-size:1.25em;
+}
+
+h2{
+    font-size:1.125em;
 }
 
 span.front-em {

binderhub/templates/index.html

@@ -13,13 +13,13 @@
     <div class="col-lg-10 col-lg-offset-1">
       {% block header %}
       <div id="header" class="text-center">
-        <h3>Turn a Git repo into a collection of interactive notebooks</h3>
+        <h1>Turn a Git repo into a collection of interactive notebooks</h1>
         <div id="explanation">
           Have a repository full of Jupyter notebooks? With Binder, open those notebooks in an executable environment, making your code immediately reproducible by anyone, anywhere.
         </div>
       </div>
       <div id="tutorials" class="text-center">
-        <h4>New to Binder? Get started with a <a href="https://the-turing-way.netlify.app/communication/binder/zero-to-binder.html" target="_blank">Zero-to-Binder tutorial</a> in Julia, Python, or R.</h4>
+        <h2>New to Binder? Get started with a <a href="https://the-turing-way.netlify.app/communication/binder/zero-to-binder.html" target="_blank">Zero-to-Binder tutorial</a> in Julia, Python, or R.</h2>
       </div>
       {% endblock header %}
 
@@ -99,15 +99,15 @@ <h4 id="form-header" class='row'>Build and launch a repository</h4>
 
         <div class="badges row">
             <div class="dropdownmenu" id="toggle-badge-snippet">
-              <label>Expand to see the text below, paste it into your README to show a binder badge: <img id="badge" src="{{static_url("images/badge_logo.svg")}}"></label>
+              <label>Expand to see the text below, paste it into your README to show a binder badge: <img id="badge" src="{{static_url("images/badge_logo.svg")}}" alt="Binder badge logo"></label>
               <a id="badge-link"></a>
               <a href="#" title="show badge snippets"><span id="badge-snippet-caret" class="glyphicon glyphicon-triangle-right"></span></a>
             </div>
             <div id="badge-snippets" class="hidden">
               <!--Markdown section-->
               <div  class="badge-snippet-row">
                  <pre id="markdown-badge-snippet" data-default="Fill in the fields to see the markdown badge snippet."></pre>
-                 <img class="icon" src="{{static_url("images/markdown-icon.svg")}}">
+                 <img class="icon" src="{{static_url("images/markdown-icon.svg")}}" alt="Markdown icon">
                  <img class="icon clipboard"
                     src="{{static_url("images/copy-icon-black.svg")}}"
                     data-clipboard-target="#markdown-badge-snippet"
@@ -116,7 +116,7 @@ <h4 id="form-header" class='row'>Build and launch a repository</h4>
               <!--RST section-->
               <div  class="badge-snippet-row">
                   <pre id="rst-badge-snippet" data-default="Fill in the fields to see the rST badge snippet."></pre>
-                  <img class="icon" src="{{static_url("images/rst-icon.svg")}}">
+                  <img class="icon" src="{{static_url("images/rst-icon.svg")}}" alt="restructured text icon">
                   <img class="icon clipboard" src="{{static_url("images/copy-icon-black.svg")}}"
                     data-clipboard-target="#rst-badge-snippet"
                     alt="Copy rst link to clipboard">

binderhub/templates/page.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <title>{% block title %}Binder{% endblock %}</title>
   {% block meta_social %}
@@ -30,7 +30,7 @@
   <div class="container">
     <div class="row">
       <div id="logo-container">
-        <img id="logo" src={% block logo_image %}"{{static_url("logo.svg")}}"{% endblock logo_image %} width="390px"  />
+        <img id="logo" src={% block logo_image %}"{{static_url("logo.svg")}}"{% endblock logo_image %} width="390px" alt="Binder logo" />
       </div>
     </div>
   </div>