With VoiceOver on Safari 4.0.5 on Snow Leopard 10.6.3, the site title is read out three times when using Garland theme.

I'm guessing this is for:

- the A element title
- the logo IMG alt
- the SPAN

This gets rather tedious!

Stark reads only 'home' for the logo, and the site title just once, which is probably what Garland should do too.

CommentFileSizeAuthor
#14 787634-1.patch1.65 KBmgifford
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Everett Zufelt’s picture

@joachim

Can you please paste the markup related to the site title on the site that you're testing so that we can take a look to analyze what might be causing the problem? I would imagine that this is possibly a VO thing and that there might be little we can do about it, but I'd like to see the exact page source of this section to know for sure.

joachim’s picture

Sure:

<div id="logo-floater">
  <div id="branding">
    <strong><a title="my Drupal 7 site " href="/7-drupal/">
      <img id="logo" alt="my Drupal 7 site " src="http://localhost:8888/7-drupal/themes/garland/logo.png">
      <span>my Drupal 7 site</span>
    </a></strong>
  </div>
</div>

With Stark theme, it's this:

<div class="section clearfix">
  <a id="logo" rel="home" title="Home" href="/7-drupal/">
    <img alt="Home" src="http://localhost:8888/7-drupal/themes/stark/logo.png">
  </a>
  <div id="name-and-slogan">
    <div id="site-name"><strong>
      <a rel="home" title="Home" href="/7-drupal/"><span>my Drupal 7 site</span></a>
    </strong></div>
  </div> <!-- /#name-and-slogan -->
</div>

On that I get 'Home' read out twice, which at least seems more informative.

Though perhaps the ALT for the logo should actually be 'site logo'?

Everett Zufelt’s picture

@joachim

1. I think we can likely do without the title attribute on the anchor around the image. This redundant since the image has an alt attribute.

2. I may have already opened an issue on the alt for the logo image, if not I will in the future. Short story is we need a theme settings option to allow site admins to change the alt of the image to whatever they would like it to be. This needs to be a D8 thing. There are differing opinions to alt for a logo. Should it be 'logo', or 'Text-on-logo', or 'description of the image in the logo', or a combination of 1 or more of these? Hard to say, and I don't think that there is always a right answer. A picture is worth 1000 words, hard to encapsulate it in the alt attribute, so we need to encapsulate, to the best of our ability, the message / meaning that the image is intended to convey.

joachim’s picture

> I think we can likely do without the title attribute on the anchor around the image

I'll roll a patch to take that off in all core themes. Care to retitle this issue to cover that?

Though I'm confused about Stark -- why doesn't 'Home' get read three times there? It's there in two A titles and one IMG alt.

> I may have already opened an issue on the alt for the logo image, if not I will in the future.

I reckon for D7 we can at least change the ALT for the logo to something that's reasonably meaningful like "$sitename logo". Post the link to the new issue when you've found it / filed it :)

Everett Zufelt’s picture

@joachim

My only guess, and it's just a guess, is that in Garland the title of the anchor is different than the contents of the anchor (alt + link text), whereas in Stark the anchor title == the content of the anchor (alt alone). I can't stress enough how this is only a guess. Hard to know exactly what logic Apple is using here to decide what to read.

For the custom alt text on logo see:
#717708: Document how to set logo in theme with proper alt tags

mgifford’s picture

Ok, so in Garland the code is now:

      <div id="header">
        <div id="logo-floater">
        <?php if ($logo || $site_title): ?>
          <?php if ($title): ?>
            <div id="branding"><strong><a href="<?php print $front_page ?>" title="<?php print $site_name_and_slogan ?>">
            <?php if ($logo): ?>
              <img src="<?php print $logo ?>" alt="<?php print $site_name_and_slogan ?>" id="logo" />
            <?php endif; ?>
            <?php print $site_html ?>
            </a></strong></div>
          <?php else: /* Use h1 when the content title is empty */ ?>
            <h1 id="branding"><a href="<?php print $front_page ?>" title="<?php print $site_name_and_slogan ?>">
            <?php if ($logo): ?>
              <img src="<?php print $logo ?>" alt="<?php print $site_name_and_slogan ?>" id="logo" />
            <?php endif; ?>
            <?php print $site_html ?>
            </a></h1>
        <?php endif; ?>
        <?php endif; ?>
        </div>

and you'd like to remove the title (so just shortening this line:

            <div id="branding"><strong><a href="<?php print $front_page ?>">

I can't see getting rid of the alt text.

Thoughts? The title does provide some additional information as someone hovers above the image link. It's not completely useless to people.

joachim’s picture

I've just done a CVS update and I"m not seeing the same code as you in Garland:

From my browser:

        
      <div id="header">
        <div id="logo-floater">
                              <h1 id="branding"><a href="/7-drupal/" title="my Drupal 7 site ">
                          <img src="http://localhost:8888/7-drupal/sites/default/files/color/garland-30b5b936/logo.png" alt="my Drupal 7 site " id="logo" />
                        <span>my Drupal 7 site</span>            </a></h1>
                        </div>

        <h2 class="element-invisible">Main menu</h2><ul class="links main-menu"><li class="menu-388 first last"><a href="/7-drupal/node/1" title="">node 1</a></li>
</ul>        <h2 class="element-invisible">Secondary menu</h2><ul class="links secondary-menu"><li class="menu-28 first"><a href="/7-drupal/user/2">peon</a></li>
<li class="menu-26 last"><a href="/7-drupal/user/logout">Log out</a></li>
</ul>      </div> <!-- /#header -->

'my Drupal 7 site' is read three times.

YaxBalamAhaw’s picture

I've noticed this issue as well. Duplicating the alt attribute of the logo while providing link text could be considered a violation of WCAG 2 2.4.4 (at least that's what a validator I'm using says). Since text for the link is already specified in text, the alt attribute of the image could be null.

Also, Is there a reason why there is white-space after the site name in the title and alt attributes?

Lastly, and probably most important: When site-name is checked off in Garland's theme settings, the link's title and the image's alt attribute are both empty. This is definitely a violation of WCAG 2 1.1.1

Jeff Burnz’s picture

#8 - needs a variable_get on the site name etc to make sure the alt is always populated even if theme settings for site name etc are toggled off - we should try to fix this as it is a violation.

mgifford’s picture

Ok, we've got to get a bit closer to a patch here.

We've got the following instances where the $site_name_and_slogan variable is being used:

$ grep -ir site_name_and themes/garland/page.tpl.php 
            <div id="branding"><strong><a href="<?php print $front_page ?>" title="<?php print $site_name_and_slogan ?>">
              <img src="<?php print $logo ?>" alt="<?php print $site_name_and_slogan ?>" id="logo" />
            <h1 id="branding"><a href="<?php print $front_page ?>" title="<?php print $site_name_and_slogan ?>">
              <img src="<?php print $logo ?>" alt="<?php print $site_name_and_slogan ?>" id="logo" />

I'm curious if this isn't also a problem with other themes. They don't seem to use $site_name_and_slogan, but I'm curious how they've avoided this repetition.

Everett Zufelt’s picture

@mgifford

Thanks for posting this. It does seem a bit excessive, by which I mean overly verbose.

I don't have a d7 installation at the moment, can you please post the actual generated markup to compare?

mgifford’s picture

This is from my sandbox - http://drupal7.dev.openconcept.ca

<title>OpenConcept Drupal 7 Sandbox | One Sandbox to Rule Them All!</title>

...

                              <h1 id="branding"><a href="/" title="OpenConcept Drupal 7 Sandbox One Sandbox to Rule Them All!">
                          <img src="http://drupal7.dev.openconcept.ca/themes/garland/logo.png" alt="OpenConcept Drupal 7 Sandbox One Sandbox to Rule Them All!" id="logo" />
                        <span>OpenConcept Drupal 7 Sandbox</span> One Sandbox to Rule Them All!            </a></h1>

Not sure how to go around that until there is an option to state the logo's alt text in the theme for D8.

Everett Zufelt’s picture

@mgifford

Can we try moving the @title from the anchor to the image? This should still provide the tooltip as desired and would mean (likely) that AT would only read this content twice, once for the image-link and once for the span.

mgifford’s picture

Status: Active » Needs review
FileSize
1.65 KB

How's this - http://drupal7.dev.openconcept.ca/

                              <h1 id="branding"><a href="/">
                          <img src="http://drupal7.dev.openconcept.ca/themes/garland/logo.png" alt="OpenConcept Drupal 7 Sandbox One Sandbox to Rule Them All!" title="OpenConcept Drupal 7 Sandbox One Sandbox to Rule Them All!" id="logo" />
                        <span>OpenConcept Drupal 7 Sandbox</span> One Sandbox to Rule Them All!            </a></h1>
Everett Zufelt’s picture

Status: Needs review » Reviewed & tested by the community

Tested the sandbox with VoiceOver (SL) / Safari 5.0.1, JAWS 11 and NVDA 2010.1 / Firefox 3.6.9. All performing as expected, name and slogan read once.

Patch looks good setting to RTBC

webchick’s picture

Status: Reviewed & tested by the community » Fixed

Well that definitely sounds sub-optimal. :)

Committed to HEAD. Thanks!

Status: Fixed » Closed (fixed)
Issue tags: -Accessibility

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