Merge pull request #5333 from edx/alasdair/header-footer-accessibility-updates

Alasdair/header footer accessibility updates

AUTHORS

@@ -173,3 +173,4 @@ Jason Zhu <fmyzjs@gmail.com>
 Marceau Cnudde <marceau.cnudde@gmail.com>
 Braden MacDonald <mail@bradenm.com>
 Jonathan Piacenti <kelketek@gmail.com>
+Alasdair Swan <aswan@edx.org>

lms/templates/footer-edx-new.html

@@ -5,7 +5,7 @@
 
 ## WARNING: These files are specific to edx.org and are not used in installations outside of that domain. Open edX users will want to use the file "footer.html" for any changes or overrides.
 <div class="wrapper wrapper-footer edx-footer edx-footer-new">
-  <footer id="footer-global" class="footer-global" role="contentinfo">
+  <footer id="footer-global" class="footer-global" role="contentinfo" aria-label="Footer">
 
     <div class="footer-about">
       <h2 class="sr footer-about-title">${_("About edX")}</h2>
@@ -40,7 +40,7 @@
       </div>
     </div>
 
-    <div class="footer-nav">
+    <nav class="footer-nav" role="navigation" aria-label="About Us">
       <h2 class="footer-nav-title">${_("About & Company Info")}</h2>
 
       <div class="footer-nav-links">
@@ -58,30 +58,30 @@
         <a href="${marketing_link('DONATE')}" class="has-emphasis"><span class="copy">${_("Donate to edX")}</span></a>
         <a href="${marketing_link('JOBS')}" class="has-emphasis"><span class="copy">${_("Jobs at edX")}</span></a>
       </div>
-    </div>
+    </nav>
 
     <div class="footer-follow">
       <h2 class="footer-follow-title">${_("Follow Us")}</h2>
 
       <div class="footer-follow-links">
         <a href="${settings.PLATFORM_TWITTER_URL}" title="Twitter">
-          <i class="icon icon-twitter"></i>
+          <i class="icon icon-twitter element-invisible"></i>
           <span class="copy">${_("Twitter")}</span>
         </a>
         <a href="${settings.PLATFORM_FACEBOOK_ACCOUNT}" title="Facebook">
-          <i class="icon icon-facebook-sign"></i>
+          <i class="icon icon-facebook-sign element-invisible"></i>
           <span class="copy">${_("Facebook")}</span>
         </a>
         <a href="${settings.PLATFORM_MEETUP_URL}" title="Meetup">
-          <i class="icon icon-calendar"></i>
+          <i class="icon icon-calendar element-invisible"></i>
           <span class="copy">${_("Meetup")}</span>
         </a>
         <a href="${settings.PLATFORM_LINKEDIN_URL}" title="LinkedIn">
-          <i class="icon icon-linkedin-sign"></i>
+          <i class="icon icon-linkedin-sign element-invisible"></i>
           <span class="copy">${_("LinkedIn")}</span>
         </a>
         <a href="${settings.PLATFORM_GOOGLE_PLUS_URL}" title="Google+">
-          <i class="icon icon-google-plus-sign"></i>
+          <i class="icon icon-google-plus-sign element-invisible"></i>
           <span class="copy">${_("Google+")}</span>
         </a>
       </div>

lms/templates/navigation.html

@@ -36,12 +36,12 @@ site_status_msg = get_site_status_msg(course_id)
 % endif
 </%block>
 
-  <header class="${"global slim" if course else "global-new"}" aria-label="${_('Global Navigation')}">
-    <nav>
-    <h1 class="logo">
-      <a href="${marketing_link('ROOT')}">
+<header class="${"global slim" if course else "global-new"}" aria-label="Main" role="banner">
+  <nav aria-label="Main">
+    <h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
+      <a href="${marketing_link('ROOT')}" title="Home page" itemprop="url">
         <%block name="navigation_logo">
-            <img src="${static.url(branding.get_logo_url())}" alt="${platform_name()}"/>
+            <img src="${static.url(branding.get_logo_url())}" alt="${platform_name()}" title="${platform_name()}" itemprop="url" />
         </%block>
       </a>
     </h1>
@@ -51,15 +51,16 @@ site_status_msg = get_site_status_msg(course_id)
     % endif
 
     % if user.is_authenticated():
-    <ol class="left nav-global authenticated">
+    <div class="left nav-global authenticated">
       <%block name="navigation_global_links_authenticated">
         % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
-          <li class="nav-global-01">
+          <div class="nav-global-01">
             <a href="${marketing_link('COURSES')}">${_('Find Courses')}</a>
-          </li>
+          </div>
         % endif
       </%block>
-    </ol>
+    </div>
+
     <ol class="user">
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
@@ -79,6 +80,7 @@ site_status_msg = get_site_status_msg(course_id)
         </ul>
       </li>
     </ol>
+
       % if display_shopping_cart: # see shoppingcart.context_processor.user_has_cart_context_processor
         <ol class="user">
           <li class="primary">
@@ -105,28 +107,28 @@ site_status_msg = get_site_status_msg(course_id)
       </%block>
     </ol>
 
-    <ol class="right nav-courseware">
+    <div class="right nav-courseware">
       % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
         % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-        <li class="nav-courseware-01">
+        <div class="nav-courseware-01">
           <a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
-        </li>
+        </div>
         % else:
-        <li class="nav-courseware-01">
+        <div class="nav-courseware-01">
           <a class="cta cta-register" href="/register">${_("Register")}</a>
-        </li>
+        </div>
         % endif
       % endif
-    <li class="nav-courseware-02">
-      % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
-          % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-          <a class="cta cta-login nav-courseware-button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Log in")}</a>
-          % else:
-          <a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Log in")}</a>
-          % endif
-      % endif
-    </li>
-    </ol>
+      <div class="nav-courseware-02">
+        % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
+            % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
+            <a class="cta cta-login nav-courseware-button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Log in")}</a>
+            % else:
+            <a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Log in")}</a>
+            % endif
+        % endif
+      </div>
+    </div>
     % endif
   </nav>
 </header>