Certificates: addressing a11y feedback

* removing visual-based heading styles from 'sr-only' DOM elements
* revising default certificate view h1/heading copy
* revising DOM elements to use main/aside semantics
* revised edX/platform logo link alt text
* removed extra share/take home header text
* synced up add to LinkedIn profile copy

lms/djangoapps/certificates/models.py

@@ -558,12 +558,10 @@ class CertificateHtmlViewConfiguration(ConfigurationModel):
         {
             "default": {
                 "url": "http://www.edx.org",
-                "logo_src": "http://www.edx.org/static/images/logo.png",
-                "logo_alt": "Valid Certificate"
+                "logo_src": "http://www.edx.org/static/images/logo.png"
             },
             "honor": {
-                "logo_src": "http://www.edx.org/static/images/honor-logo.png",
-                "logo_alt": "Honor Certificate"
+                "logo_src": "http://www.edx.org/static/images/honor-logo.png"
             }
         }
     """

lms/djangoapps/certificates/tests/test_models.py

@@ -101,12 +101,10 @@ class CertificateHtmlViewConfigurationTest(TestCase):
         self.configuration_string = """{
             "default": {
                 "url": "http://www.edx.org",
-                "logo_src": "http://www.edx.org/static/images/logo.png",
-                "logo_alt": "Valid Certificate"
+                "logo_src": "http://www.edx.org/static/images/logo.png"
             },
             "honor": {
-                "logo_src": "http://www.edx.org/static/images/honor-logo.png",
-                "logo_alt": "Honor Certificate"
+                "logo_src": "http://www.edx.org/static/images/honor-logo.png"
             }
         }"""
         self.config = CertificateHtmlViewConfiguration(configuration=self.configuration_string)
@@ -134,12 +132,10 @@ class CertificateHtmlViewConfigurationTest(TestCase):
         expected_config = {
             "default": {
                 "url": "http://www.edx.org",
-                "logo_src": "http://www.edx.org/static/images/logo.png",
-                "logo_alt": "Valid Certificate"
+                "logo_src": "http://www.edx.org/static/images/logo.png"
             },
             "honor": {
-                "logo_src": "http://www.edx.org/static/images/honor-logo.png",
-                "logo_alt": "Honor Certificate"
+                "logo_src": "http://www.edx.org/static/images/honor-logo.png"
             }
         }
         self.assertEquals(self.config.get_config(), expected_config)

lms/djangoapps/certificates/views.py

@@ -500,7 +500,6 @@ def render_html_view(request, user_id, course_id):
 
     # Translators: This line appears as a byline to a header image and describes the purpose of the page
     context['logo_subtitle'] = _("Certificate Validation")
-    context['logo_alt'] = context.get('platform_name')
     invalid_template_path = 'certificates/invalid.html'
 
     # Kick the user back to the "Invalid" screen if the feature is disabled

lms/templates/certificates/_accomplishment-banner.html

@@ -32,26 +32,27 @@
             <div class="wrapper-copy-and-actions">
                 <p class="message-copy copy copy-base emphasized">${accomplishment_banner_congrats}</p>
                 <div class="message-actions">
-                %if badge:
-                    <p class="sr-only">${_("Share on:")}</p>
+                    <h3 class="sr-only">${_("Take this with you:")}</h3>
+
+                    %if badge:
                     <button class="action action-share-mozillaopenbadges btn btn-overlay btn-small">
                         <img class="icon icon-mozillaopenbadges" src="/static/certificates/images/ico-mozillaopenbadges.png" alt="Mozilla Open Badges Backpack">
                         ${_("Add to Mozilla Backpack")}
                     </button>
-                %endif
-                    <p class="sr-only">Take this with you:</p>
+                    %endif
+
                     <button class="action action-print btn btn-overlay btn-small" id="action-print-view">
                         <i class="icon fa fa-print" aria-hidden="true"></i>
                         ${_("Print Certificate")}
                     </button>
                 %if linked_in_url:
                     <a class="action-linkedin-profile" target="_blank" href="${linked_in_url}"
-                        title="${_('Add Certificate to LinkedIn Profile')}"
+                        title="${_('Add to LinkedIn Profile')}"
                         data-course-id="${course_id}"
                         data-certificate-mode="${course_mode}">
                         <img class="action-linkedin-profile-img"
                             src="${static.url('images/linkedin_add_to_profile.png')}"
-                            alt="${_('Share on LinkedIn')}" />
+                            alt="${_('Add to LinkedIn Profile')}" />
                     </a>
                 %endif
                 </div>

lms/templates/certificates/_accomplishment-header.html

+<%! from django.utils.translation import ugettext as _ %>
+
 <div class="wrapper-header">
 
     <header class="header-app" role="banner">
         <h1 class="header-app-title">
             <a class="logo" href="${logo_url}">
-                <img class="logo-img" src="${logo_src}" alt="${logo_alt}" />
+                <img class="logo-img" src="${logo_src}" alt="${_('{platform_name} Home').format(platform_name=settings.PLATFORM_NAME)}" />
             </a>
-            <span class="title title-sub sr-only">${logo_subtitle}</span>
+            <span class="sr-only">${logo_subtitle}</span>
         </h1>
     </header>
 

lms/templates/certificates/_accomplishment-rendering.html

@@ -7,7 +7,7 @@ if certificate_data and certificate_data.get('course_title', ''):
 course_mode_class = course_mode if course_mode else ''
 %>
 
-<article class="accomplishment accomplishment-main">
+<main class="accomplishment accomplishment-main">
 
     <div class="wrapper-accomplishment-rendering">
         <div class="accomplishment-rendering">
@@ -42,7 +42,7 @@ course_mode_class = course_mode if course_mode else ''
 
                 % if mode != 'base':
                 <div class="accomplishment-signatories">
-                    <h3 class="accomplishment-signatories-title hd-6 sr-only">${_("Noted by")}</h3>
+                    <h3 class="accomplishment-signatories-title sr-only">${_("Noted by")}</h3>
 
                     <div class="wrapper-signatories">
                         <div class="list-signatories">
@@ -66,7 +66,7 @@ course_mode_class = course_mode if course_mode else ''
             </div>
 
             <div class="accomplishment-orgs">
-                <h3 class="accomplishment-orgs-title hd-6 sr-only">${_("Supported by the following organizations")}</h3>
+                <h3 class="accomplishment-orgs-title sr-only">${_("Supported by the following organizations")}</h3>
 
                 <ul class="wrapper-orgs list-orgs">
                     <li class="wrapper-organization">
@@ -116,4 +116,4 @@ course_mode_class = course_mode if course_mode else ''
         </div>
     </div>
 
-</article>
+</main>

lms/templates/certificates/valid.html

@@ -8,8 +8,8 @@
 
 <%include file="_accomplishment-rendering.html" />
 <div class="wrapper-about">
-    <div class="about">
+    <aside role="complementary" class="about" aria-label="About edX Certificates">
         <%include file="_about-edx.html" />
         <%include file="_about-accomplishments.html" />
-    </div>
+    </aside>
 </div>