The footer structure is not semantically structured. The only thing setting apart the footer sections are mock "headers" colored black instead of blue (see attached). These sections' top links should actually be structured as h2's (or h3's). This would make it more accessible to people with color-blindness and screen readers.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mgifford’s picture

Agreed. So rather than:

<ul class="drupal-news"><li class="0 first"><a href="http://drupal.org/news">Drupal News</a></li>
<li class="1"><a href="http://drupal.org/planet" title="News from Drupal community members">Planet Drupal</a></li>
<li class="2"><a href="https://association.drupal.org/news" title="News from association.drupal.org">Association News</a></li>
<li class="3"><a href="http://drupal.org/social-media" title="Drupal on social media">Social Media Directory</a></li>
<li class="4"><a href="http://drupal.org/security" title="Advisories from the security team">Security Announcements</a></li>
<li class="5 last"><a href="http://groups.drupal.org/jobs" title="Jobs posted on groups.drupal.org">Jobs</a></li>
</ul>

So it should be more like:

<h3><a href="http://drupal.org/news">Drupal News</a></h3>
<ul class="drupal-news"><li class="0 first"><a href="http://drupal.org/planet" title="News from Drupal community members">Planet Drupal</a></li>
<li class="1"><a href="https://association.drupal.org/news" title="News from association.drupal.org">Association News</a></li>
<li class="2"><a href="http://drupal.org/social-media" title="Drupal on social media">Social Media Directory</a></li>
<li class="3"><a href="http://drupal.org/security" title="Advisories from the security team">Security Announcements</a></li>
<li class="4 last"><a href="http://groups.drupal.org/jobs" title="Jobs posted on groups.drupal.org">Jobs</a></li>
</ul>

So each of the groups of lists in the footer would have a heading.

Geijutsuka’s picture

I'm not privy to how the footer menu is currently generated, but the new structure can be implemented nicely with the menu block module, though the h3's would then be h2's.

zeta ζ’s picture

Issue summary: View changes
Status: Active » Needs review

Has been confirmed …

eliza411’s picture

Issue tags: +Drupal.org 7.1

Tagging.

mgifford’s picture

H2's would be fine.

tvn’s picture

Project: [Archive] Drupal.org D7 upgrade QA » Bluecheese
Component: User interface » Code
Status: Needs review » Active
Issue tags: -Drupal.org 7.1
mgifford’s picture

What's needed to fix this?

drumm’s picture

Project: Bluecheese » Drupal.org cross-site customizations
Version: » 7.x-3.x-dev

This is actually set in drupalorg_crosssite.module, after the // Build the footer navigation comment.

See http://drupal.org/node/1018084 for dev sites to try out changes.

mgifford’s picture

I put in a request here https://drupal.org/node/2170269

Not sure when I'll get to it, but always good to start the process.

mgifford’s picture

So just to confirm what's there now. In modules/drupalorg_crosssite/drupalorg_crosssite.module in the drupalorg_crosssite_preprocess_page() function the footer is defined as an array:
$vars['page']['footer']

Which is then spit out in the bluecheese theme themes/bluecheese/tpl/page.tpl.php:
<?php print render($page['footer']); ?>

I am a bit unsure though as to where the array is processed... This would need to be broken up though so that we aren't just styling the first element in the list to look like a heading, but that it is actually a proper HTML heading.

   $vars['page']['footer'] = array_merge(array('drupalorg_crosssite' => array(                                                            
      '#weight' => -1,                                                                                                                     
      '#prefix' => '<div class="doormat clearfix">',                                                                                       
      '#suffix' => '</div>',                                                                                                               
      array(                                                                                                                               
        '#attributes' => array(                                                                                                            
          'class' => array('drupal-news'),                                                                                                 
        ),                                                                                                                                 
        '#theme' => 'links',                                                                                                               
        '#links' => array(                                                                                                                 
          array(                                                                                                                           
            'href' => 'http://drupal.org/news',                                                                                            
            'title' => t('Drupal News'),                                                                                                   
          ),                                                                                                                               
          array(                                                                                                                           
            'href' => 'http://drupal.org/planet',                                                                                          
            'title' => t('Planet Drupal'),                                                                                                 
            'attributes' => array('title' => t('News from Drupal community members')),                                                     
          ),  ... 

Thoughts on approaches to break this down?

drumm’s picture

That is all accurate. The render array doesn't necessarily need to be broken up, but rearranged. The call to render() in page.tpl.php is the processing, that part should stay untouched.

I don't know the best way to format the array to add in headings. Since this is site-specific code, we aren't afraid of being hacky and putting markup in #prefix and #suffix.

mgifford’s picture

Status: Active » Needs review
FileSize
1.61 KB

I don't know that I got the headings correct. I wasn't sure how these items were organized so made it up.

Geijutsuka’s picture

  1. +++ sites/all/modules/drupalorg_crosssite/drupalorg_crosssite.module	2014-01-20 17:02:11 +0000
    @@ -83,6 +83,7 @@
    +        '#prefix' => '<h4 class="element-invisible">' . t('News Items') . '</h4>',
    

    current heading:
    Drupal News

  2. +++ sites/all/modules/drupalorg_crosssite/drupalorg_crosssite.module	2014-01-20 17:02:11 +0000
    @@ -120,6 +121,7 @@
    +        '#prefix' => '<h4 class="element-invisible">' . t('Our Community') . '</h4>',
    

    current heading:
    Community

  3. +++ sites/all/modules/drupalorg_crosssite/drupalorg_crosssite.module	2014-01-20 17:02:11 +0000
    @@ -153,6 +155,7 @@
    +        '#prefix' => '<h4 class="element-invisible">' . t('Online Documentation') . '</h4>',
    

    current heading:
    Get Started

  4. +++ sites/all/modules/drupalorg_crosssite/drupalorg_crosssite.module	2014-01-20 17:02:11 +0000
    @@ -190,6 +193,7 @@
    +        '#prefix' => '<h4 class="element-invisible">' . t('Drupal Code Base') . '</h4>',
    

    current heading:
    Download & Extend

  5. +++ sites/all/modules/drupalorg_crosssite/drupalorg_crosssite.module	2014-01-20 17:02:11 +0000
    @@ -222,6 +226,7 @@
    +        '#prefix' => '<h4 class="element-invisible">' . t('Governance of Community') . '</h4>',
    

    current heading:
    About

Geijutsuka’s picture

Didn't know if I should change the code or not... just commented on prefix lines. Not sure if that was the correct way to review the patch. I still don't really have contributing etiquette down.

mgifford’s picture

This is a totally fine way to provide feedback. Great etiquette.

I didn't change the links, simply the headings that are used to organize them.

In the present footers, the headers are actually their own links which roughly are associated with categories of links in the footer.

I could have simply replaced the link and made it a heading, but that didn't seem right either.

mgifford’s picture

It's been about a month & a half since I posted a patch on this.

@Geijutsuka's comments were useful clarifications about the patch, but I think it's still good.

I don't think it's done right now, and these changes should be an improvement.

  • Commit 05d9aa3 on 7.x-3.x authored by mgifford, committed by drumm:
    #2121337: Add accessible headings to footer.
    
drumm’s picture

Status: Needs review » Fixed

Looks good, committed & deploying.

mgifford’s picture

Excellent... Thanks @drumm.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.