Merge pull request #4215 from radinamatic/contentrec-sr-2nd

Optimize Content Recommendations for screen readers - 2nd take
learningequality · Sep 1, 2015 · eed9e20 · eed9e20
2 parents 11b9356 + 8f2b944
commit eed9e20
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 20 deletions.
diff --git a/kalite/distributed/static/css/distributed/khan-lite.less b/kalite/distributed/static/css/distributed/khan-lite.less
@@ -920,5 +920,14 @@ to items you want to have the icon appear with.
     margin-top:30px
 }
 
+/* Additional styles for content-rec */
 
+.gly-h1 {
+    font-size: 36px;
+    margin-bottom: 10px;
+    margin-top: 20px;
+}
 
+.up10 {
+    margin-top: 10px;
+}
diff --git a/...distributed/static/js/distributed/contentrec/hbtemplates/content-explore-topic.handlebars b/...distributed/static/js/distributed/contentrec/hbtemplates/content-explore-topic.handlebars
@@ -3,17 +3,18 @@
   <div class="content-explore-topic">
     <div class="row">
       <div class="col-xs-12">
-          <h4><small>{{_ "Based on your interest in" }} {{ interest_topic.title }}:</small></h4>
+          <p class="up10">{{_ "Based on your interest in" }} <b>{{ interest_topic.title }}</b><span class="sr-only">{{_ ", we recommend you" }}</span>:</p>
       </div>
     </div>
     <div class="row">
       <div class="col-xs-5">
-          <h3>{{ suggested_topic.title }}:</h3>
+          <h2 class="h3">{{ suggested_topic.title }}:</h2>
       </div>
       {{#if suggested_topic.description }}
       <div class="col-xs-7">
-        <h4>{{_ "Description" }}:</h4>
-        <p>{{ truncate suggested_topic.description 70 }}</p>
+        <p class="h4">{{_ "Description" }}:</p>
+        <p aria-hidden="true">{{ truncate suggested_topic.description 70 }}</p>
+        <span class="sr-only">{{ suggested_topic.description }}</span>
       </div>
       {{/if}}
       <hr class="module_divider" />

diff --git a/kalite/distributed/static/js/distributed/contentrec/hbtemplates/content-explore.handlebars b/kalite/distributed/static/js/distributed/contentrec/hbtemplates/content-explore.handlebars
@@ -5,7 +5,7 @@
         <h1 class="card-title">{{_ "Explore" }}</h1>
       </div>
       <div class="col-xs-3">
-      <h1 class="glyphicon glyphicon-road" aria-hidden="true"></h1>
+          <span aria-hidden="true" role="presentation"><i class="glyphicon glyphicon-road gly-h1"></i></span>
       </div>
       <hr class="module_divider"/>
   </div>

diff --git a/...tributed/static/js/distributed/contentrec/hbtemplates/content-nextsteps-lesson.handlebars b/...tributed/static/js/distributed/contentrec/hbtemplates/content-nextsteps-lesson.handlebars
@@ -3,28 +3,36 @@
 	<a href="/learn/{{ path }}" class="content-nextsteps-lesson-link">
       <div class="col-xs-3">
         <center>
+        <!--ALT for image gets read from 'description' so it doesn't need to be read twice-->
           {{#if content_urls.thumbnail }}
-          <img src="{{content_urls.thumbnail}}" class="img-responsive">
+          <img src="{{content_urls.thumbnail}}" class="img-responsive"
+              {{#if description }}
+                  aria-hidden="true" role="presentation"
+              {{else}}
+                  alt="{{ truncate description 150 }}"
+              {{/if}}>
           {{else}}
-          <h1 class="icon-{{kind}} glyphicon-expand"></h1>
+          <span aria-hidden="true" role="presentation"><i class="icon-{{kind}} glyphicon glyphicon-expand gly-h1"></i></span>
           {{/if}}
         </center>
       </div>
 
       <div class="col-xs-6">
-          <h4>
-            <small>{{ topic.title }}:</small>
+          <h2 class="h4">
+            <span class="small">{{ topic.title }}:</span>
             <br />
             {{ title }}
-        </h4>
+          </h2>
       </div>
     </a>
     <!--The URL without the specific video, so that we see the path
     along the nav and show them the entire series-->
     <a href="/learn/{{ topic.path }}" class="content-nextsteps-topic-link">
       <div class="col-xs-3">
-          <h4>{{_ "Topic" }}</h4>
-          <span class="ns_series_arrow glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
+          <p class="h4">{{_ "Topic" }}:</p>
+          <span aria-hidden="true" role="presentation"><i class="ns_series_arrow glyphicon glyphicon-arrow-right"></i></span>
+          <!--Radina: Since glyph is invisible, adding 'sr-only' topic title-->
+          <span class="sr-only">{{ topic.title }}</span>
       </div>
     </a>
 <hr class="module_divider">

diff --git a/kalite/distributed/static/js/distributed/contentrec/hbtemplates/content-nextsteps.handlebars b/kalite/distributed/static/js/distributed/contentrec/hbtemplates/content-nextsteps.handlebars
@@ -5,7 +5,7 @@
           <h1>{{_ "Next Steps" }}</h1>
       </div>
       <div class="col-xs-3">
-          <h1 class="glyphicon glyphicon-ok" aria-hidden="true"></h1>
+          <span aria-hidden="true" role="presentation"><i class="glyphicon glyphicon-ok gly-h1"></i></span>
       </div>
     <hr class="module_divider"/>
   </div>

diff --git a/kalite/distributed/static/js/distributed/contentrec/hbtemplates/content-resume.handlebars b/kalite/distributed/static/js/distributed/contentrec/hbtemplates/content-resume.handlebars
@@ -5,7 +5,7 @@
       <h1>{{_ "Resume" }}</h1>
     </div>
     <div class="col-xs-3">
-      <h1 class="glyphicon glyphicon-play-circle" aria-hidden="true"></h1>
+      <span aria-hidden="true" role="presentation"><i class="glyphicon glyphicon-play-circle gly-h1"></i></span>
     </div>
     <hr class="module_divider" />
   </div>
@@ -16,21 +16,27 @@
       <div class="row">
         <center>
           <div class="col-xs-12">
-            <h4>{{ title }}</h4>
+            <h2 class="h4">{{ title }}</h2>
           </div>
         </center>
       </div>
       <div class="row">
         <div class="col-xs-12">
           <center>
-            <img src="{{content_urls.thumbnail}}" class="img-responsive" alt="{{ truncate description 100 }}">
+          <!--ALT for image gets read from 'description' so it doesn't need to be read twice-->
+            <img src="{{content_urls.thumbnail}}" class="img-responsive"
+                 {{#if description }}
+                     aria-hidden="true" role="presentation"
+                 {{else}}
+                     alt="{{ truncate description 150 }}"
+                 {{/if}}>
           </center>
         </div>
       </div>
         {{#if description }}
         <div class="row">
           <div class="col-xs-12">
-            <h3>{{_ "Description" }}:</h3>
+            <p class="h3">{{_ "Description" }}:</p>
           </div>
         </div>
         <div class="row">
@@ -43,13 +49,13 @@
       <div class="row">
         <div class="col-xs-3">
           <center>
-            <h1 id="exercise-icon" class="icon-{{kind}} glyphicon-expand"></h1>
+            <span aria-hidden="true" role="presentation"><i id="exercise-icon" class="icon-{{kind}} glyphicon glyphicon-pencil gly-h1"></i></span>
           </center>
         </div> 
 
         <div class="col-xs-9">
-          <h4><small>{{_ "Exercise" }}:</small></h4>
-          <h4>{{ title }}</h4>
+          <h2 class="h4">{{_ "Exercise" }}:<br />
+          {{ title }}</h2>
         </div>
 
 <!-- NO descriptions for excercise? Is it necessary?