Commit 07307cb4 by Brian Talbot

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
parent 03db7a7f
......@@ -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"
}
}
"""
......
......@@ -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)
......
......@@ -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
......
......@@ -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>
......
<%! 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>
......
......@@ -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>
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment