Creative Commons: Accessibility improvements

cms/templates/js/license-selector.underscore

 <div class="license-wrapper">
-    <label class="label setting-label" for="list-license-types">
+    <h3 class="label setting-label">
         <%= gettext("License Type") %>
-    </label>
-    <ul class="license-types" id="list-license-types">
+    </h3>
+    <ul class="license-types">
         <% var link_start_tpl = '<a href="{url}" target="_blank">'; %>
         <% _.each(licenseInfo, function(license, licenseType) { %>
             <li data-license="<%- licenseType %>">
@@ -29,14 +29,14 @@
 <% var license = licenseInfo[model.type]; %>
 <% if(license && !_.isEmpty(license.options)) { %>
     <div class="wrapper-license-options">
-        <label class="label setting-label" for="list-license-options">
+        <h4 class="label setting-label">
             <%- gettext("Options for {license_name}").replace("{license_name}", license.name) %>
-        </label>
+        </h4>
         <p class='tip tip-inline'>
             <%- gettext("The following options are available for the {license_name} license.")
                         .replace("{license_name}", license.name) %>
         </p>
-        <ul class="license-options" id="list-license-options">
+        <ul class="license-options">
             <% _.each(license.option_order, function(optionKey) { %>
                 <% var optionInfo = license.options[optionKey]; %>
                 <% if (optionInfo.type == "boolean") { %>
@@ -49,11 +49,26 @@
                                    <% if (optionSelected) { print("is-selected"); } %>
                                    <% if (optionDisabled) { print("is-disabled"); } else { print("is-clickable"); } %>"
                     >
-                        <i class="fa fa-fw
+                        <i aria-hidden="true"
+                          class="fa fa-fw
                              <% if(optionSelected) { print("fa-check-square-o"); } else { print("fa-square-o"); } %>
                              <% if(optionDisabled) { print("is-disabled"); } %>
                              "></i>
-                        <h4 class="option-name"><%- optionInfo.name %></h4>
+                        <h4 class="option-name">
+                            <%- optionInfo.name %>
+                            <%
+                                var states = [];
+                                if (optionSelected) {
+                                    states.push(gettext("selected"));
+                                }
+                                if (optionDisabled) {
+                                    states.push(gettext("disabled"));
+                                }
+                                if (states) {
+                            %>
+                                <span class="sr">, <%- states.join(", ") %></span>
+                            <% } %>
+                        </h4>
                         <div class="explanation"><%- optionInfo.help %></div>
                     </li>
                 <% } // could implement other types here %>
@@ -64,13 +79,13 @@
 
 <% if (showPreview) { %>
     <div class="license-preview-wrapper">
-        <label class="label setting-label" for="license-preview">
+        <h4 class="label setting-label">
             <%= gettext("License Display") %>
-        </label>
+        </h4>
         <p class="tip">
             <%= gettext("The following message will be displayed at the bottom of the courseware pages within your course.") %>
         </p>
-        <div id="license-preview">
+        <div class="license-preview">
         <% // keep this synchronized with the contents of common/templates/license.html %>
         <% if (model.type === "all-rights-reserved") { %>
             © <span class="license-text"><%= gettext("All Rights Reserved") %></span>
@@ -91,9 +106,9 @@
                     alt="<%- typeof licenseString == "string" ? licenseString : "" %>"
                     />
             <% } else { %>
-                <i class="icon-cc"></i>
+                <i aria-hidden="true" class="icon-cc"></i>
                 <% _.each(enabled, function(option) { %>
-                        <i class="icon-cc-<%- option %>"></i>
+                        <i aria-hidden="true" class="icon-cc-<%- option %>"></i>
                 <% }); %>
                 <span class="license-text"><%= gettext("Some Rights Reserved") %></span>
             <% } %>

common/templates/license.html

@@ -43,9 +43,9 @@ def parse_license(lic):
              />
         </a>
     % else:
-        <i class="icon-cc"></i>
+        <i aria-hidden="true" class="icon-cc"></i>
         % for option in enabled:
-            <i class="icon-cc-${option}"></i>
+            <i aria-hidden="true" class="icon-cc-${option}"></i>
         % endfor
         <span class="license-text">${_("Some Rights Reserved")}</span>
     % endif