WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: 2 questions - describe the logo or just say it's the logo? aria role for contact info?

for

Number of posts in this thread: 15 (In chronological order)

From: Sandy
Date: Thu, Jan 10 2013 8:43AM
Subject: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
No previous message | Next message →

hey all,

I have a couple of really basic questions.

I have a test page up which has a logo which is a link to the home page.
It has the alt text "home. IMD logo." Should I describe the logo or
would this be a torment of aural clutter?

Also, is there a good aria role for a div that contains a phone number
and email address?

http://inclusivemedia.ca/launch/index-sf11.shtml

The site is a work in progress -- we are redoing the whole thing,
starting with the home page. I would really appreciate any comments
and/or suggestions.

thanks!
Sandy

From: Don Mauck
Date: Thu, Jan 10 2013 8:56AM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

I don't know about your second question but for the graphic, if you have home already done, just do a alt="" on the graphic and a screen reader won't see it but the graphic would still be visible.

From: Birkir R. Gunnarsson
Date: Thu, Jan 10 2013 8:58AM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

Hi Sandy

Regarding the logo/link. I generally get annoyed by information about
logos, find them more of a visual candy usually.
How about putting the sentence after the logo into the link and set
the logo´s alt to ""
Then a link would read:
"inclusive media & design : web media accessibility for all"
I am not sure where the link points though or why it is a link at all
(isn't the "home" link part of the navigation menu just a little bit
below?=

Regarding the contact info. I like it as it is, just an h2 heading at
the end. I wish there was a dedicated aria role for contact info
actually, banner to me has always been a bit vague and hard to decide
when to use it. Just make sure to put "ph: " or "phone: " before the
phone number, to avoid any type of confusion. Sometimes screen readers
do not read phone numbers as such, just each digit individually, and
it can get confusing.

Also, I would advice against putting a navigation landmark around the
"skip to content" link at the top of the page. Just like with
headings, too many landmarks reduce the usefulness significantly, so I
would take that one out.
Regarding the search, that´s a bit of a different issue. This is the
only edit box on this particular page, and the search landmark seems a
bit superfluous, but on any page where there are multiple edit fields
(such as multiple types of searches or a form) the search landmark
role comes in very handy.
Of course one can always create one's own custom regions by using
aria-label along with the region role )I can dig up a link to samples
of this and post it, no problem), though I am not sure how popular it
is to implement custom aria roles.
Please make sure the news section is marked up with a "news" heading,
even if it is off-screen, easier to jump directly to the news stories.
hth
-B

On 1/10/13, Sandy < = EMAIL ADDRESS REMOVED = > wrote:
> hey all,
>
> I have a couple of really basic questions.
>
> I have a test page up which has a logo which is a link to the home page.
> It has the alt text "home. IMD logo." Should I describe the logo or
> would this be a torment of aural clutter?
>
> Also, is there a good aria role for a div that contains a phone number
> and email address?
>
> http://inclusivemedia.ca/launch/index-sf11.shtml
>
> The site is a work in progress -- we are redoing the whole thing,
> starting with the home page. I would really appreciate any comments
> and/or suggestions.
>
> thanks!
> Sandy
> > > >

From: Sandy
Date: Thu, Jan 10 2013 9:52AM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

Birkir, thanks so much for taking the time to do this.

I have a new test page with some changes:
http://inclusivemedia.ca/launch/index-sf12.shtml

The logo now has an alt="" and the name is included in the link. I left
off the tagline.

I have this there because the logo/homepage link is a bit of a
convention, now, and people do click it whether it's a link or not. (It
won't stay on this page, since this is the home page.)

I added "phone" to the phone number.

Took the navigation landmark off the skip link and the search off the
search. Anyone else have an opinion about that? This strikes me as
possibly contentious.

Marked up "news" with a heading.

What do you think? and THANKS again.

Sandy

> Regarding the logo/link. I generally get annoyed by information about
> logos, find them more of a visual candy usually.
> How about putting the sentence after the logo into the link and set
> the logo´s alt to ""
> Then a link would read:
> "inclusive media & design : web media accessibility for all"
> I am not sure where the link points though or why it is a link at all
> (isn't the "home" link part of the navigation menu just a little bit
> below?=
>
> Regarding the contact info. I like it as it is, just an h2 heading at
> the end. I wish there was a dedicated aria role for contact info
> actually, banner to me has always been a bit vague and hard to decide
> when to use it. Just make sure to put "ph: " or "phone: " before the
> phone number, to avoid any type of confusion. Sometimes screen readers
> do not read phone numbers as such, just each digit individually, and
> it can get confusing.
>
> Also, I would advice against putting a navigation landmark around the
> "skip to content" link at the top of the page. Just like with
> headings, too many landmarks reduce the usefulness significantly, so I
> would take that one out.
> Regarding the search, that´s a bit of a different issue. This is the
> only edit box on this particular page, and the search landmark seems a
> bit superfluous, but on any page where there are multiple edit fields
> (such as multiple types of searches or a form) the search landmark
> role comes in very handy.
> Of course one can always create one's own custom regions by using
> aria-label along with the region role )I can dig up a link to samples
> of this and post it, no problem), though I am not sure how popular it
> is to implement custom aria roles.
> Please make sure the news section is marked up with a "news" heading,
> even if it is off-screen, easier to jump directly to the news stories.
> hth
> -B
>
> On 1/10/13, Sandy < = EMAIL ADDRESS REMOVED = > wrote:
>> hey all,
>>
>> I have a couple of really basic questions.
>>
>> I have a test page up which has a logo which is a link to the home page.
>> It has the alt text "home. IMD logo." Should I describe the logo or
>> would this be a torment of aural clutter?
>>
>> Also, is there a good aria role for a div that contains a phone number
>> and email address?
>>
>> http://inclusivemedia.ca/launch/index-sf11.shtml
>>
>> The site is a work in progress -- we are redoing the whole thing,
>> starting with the home page. I would really appreciate any comments
>> and/or suggestions.
>>
>> thanks!
>> Sandy
>> >> >> >>
>
>

From: Don Mauck
Date: Thu, Jan 10 2013 9:59AM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

I'm not sure that you really need to banner there, can you put an alt="" and the top and bottom banner as well, haven't looked at the code as I don't want to look at someone's proprietary code.

From: Ramón Corominas
Date: Fri, Jan 11 2013 1:17PM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

I would never put alt="" for the logo of a website.

The logo is not decorative content. Indeed, it is usually the main
component of corporate identity. Putting an alt="" to the logo makes it
invisible to blind users, and they might want to download the logo in
order to use it in a document, for example.

Regards,
Ramón.


Birkir wrote:

> Regarding the logo/link. I generally get annoyed by information about
> logos, find them more of a visual candy usually.
> How about putting the sentence after the logo into the link and set
> the logo´s alt to ""
> Then a link would read:
> "inclusive media & design : web media accessibility for all"
> I am not sure where the link points though or why it is a link at all
> (isn't the "home" link part of the navigation menu just a little bit
> below?

From: Birkir R. Gunnarsson
Date: Fri, Jan 11 2013 2:26PM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

Hi

In my 5 years of browsing I have never had the need to download the
logo, however you do make a good point, that scenario is simply one I
have never thought of.
What would bother me is if the logo appears on every single page on
the site, (of course sighted users might be bothered by that too I
guess).
So what if one leaves the logo on the front page and/or on the
"contact us" or "about us" page, if there is one?
Ideally I'd leave an empty alt text around the logo on the front page
if there is a clearly marked link to an "about us" page, but only some
websites have that.

Another thing about the logo. It has always botherred me that the alt
text only says "company name, logo". I would like to know a little bit
about the logo, color, shape, logo text if any, because it is the
identity of the company, and it could be beneficial to me to have an
understanding of what it looks like.
I agree with the alt usage descriptions in any other case, describe
purpose not looks, but the logo generally does not have any purpose
except to create a viaul identity of the vwebsite owner.
This is an interesting point.
-Birkir

On 1/11/13, Ramón Corominas < = EMAIL ADDRESS REMOVED = > wrote:
> I would never put alt="" for the logo of a website.
>
> The logo is not decorative content. Indeed, it is usually the main
> component of corporate identity. Putting an alt="" to the logo makes it
> invisible to blind users, and they might want to download the logo in
> order to use it in a document, for example.
>
> Regards,
> Ramón.
>
>
> Birkir wrote:
>
>> Regarding the logo/link. I generally get annoyed by information about
>> logos, find them more of a visual candy usually.
>> How about putting the sentence after the logo into the link and set
>> the logo´s alt to ""
>> Then a link would read:
>> "inclusive media & design : web media accessibility for all"
>> I am not sure where the link points though or why it is a link at all
>> (isn't the "home" link part of the navigation menu just a little bit
>> below?
>
> > > >

From: sfeldman
Date: Fri, Jan 11 2013 4:15PM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

hey Ramón, hi Birkir

http://www.inclusivemedia.ca/index.shtml
Here is what we have for now. The alt on the logo is "IMD logo" and the
link includes the logo and the company name.

I have put in a longdesc. I can imagine wanting to hear a description of
the logo once, but the thing is on every page. Have these been
deprecated? I seem to remember something like that, but it seems like a
reasonable solution.

Does having the navigation (etc.) on the longdesc page make sense?

thanks,
Sandy



>> I would never put alt="" for the logo of a website.
>>
>> The logo is not decorative content. Indeed, it is usually the main
>> component of corporate identity. Putting an alt="" to the logo makes it
>> invisible to blind users, and they might want to download the logo in
>> order to use it in a document, for example.
>>
>> Regards,
>> Ramón.
>>
>>
>> Birkir wrote:
>>
>>> Regarding the logo/link. I generally get annoyed by information about
>>> logos, find them more of a visual candy usually.
>>> How about putting the sentence after the logo into the link and set
>>> the logo´s alt to ""
>>> Then a link would read:
>>> "inclusive media & design : web media accessibility for all"
>>> I am not sure where the link points though or why it is a link at all
>>> (isn't the "home" link part of the navigation menu just a little bit
>>> below?

From: Weissenberger, Todd M
Date: Mon, Jan 14 2013 7:14AM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

Consider logos and wordmarks like the ones at Wikipedia, Google, Microsoft or WebAIM. These are intended to convey the name and maybe the tagline of the organization. Our general approach for any image of text is to use the text as the ALT content.

The W3 uses this approach on their own properties, also nesting the <img> within a top-level <h1 id="logo">. So, good enough for me.

Best,
Todd

From: Jake Joehl
Date: Sun, Jan 20 2013 3:54PM
Subject: Re: 2 questions - describe the logo or just say it's thelogo? aria role for contact info?
← Previous message | Next message →

This is an interesting discussion. I actually suggested to some current
colleagues and a former colleague now deceased, that our new website
have a clear description of our logo. I quite like how this was done on
http://www.acb.org/adp, which is the website for the Audio Description
Project. In keeping with their theme, they have an audio version of their logo.
Jake
Original message:
> Hi

> In my 5 years of browsing I have never had the need to download the
> logo, however you do make a good point, that scenario is simply one I
> have never thought of.
> What would bother me is if the logo appears on every single page on
> the site, (of course sighted users might be bothered by that too I
> guess).
> So what if one leaves the logo on the front page and/or on the
> "contact us" or "about us" page, if there is one?
> Ideally I'd leave an empty alt text around the logo on the front page
> if there is a clearly marked link to an "about us" page, but only some
> websites have that.

> Another thing about the logo. It has always botherred me that the alt
> text only says "company name, logo". I would like to know a little bit
> about the logo, color, shape, logo text if any, because it is the
> identity of the company, and it could be beneficial to me to have an
> understanding of what it looks like.
> I agree with the alt usage descriptions in any other case, describe
> purpose not looks, but the logo generally does not have any purpose
> except to create a viaul identity of the vwebsite owner.
> This is an interesting point.
> -Birkir

> On 1/11/13, Ramón Corominas < = EMAIL ADDRESS REMOVED = > wrote:
>> I would never put alt="" for the logo of a website.

>> The logo is not decorative content. Indeed, it is usually the main
>> component of corporate identity. Putting an alt="" to the logo makes it
>> invisible to blind users, and they might want to download the logo in
>> order to use it in a document, for example.

>> Regards,
>> Ramón.


>> Birkir wrote:

>>> Regarding the logo/link. I generally get annoyed by information about
>>> logos, find them more of a visual candy usually.
>>> How about putting the sentence after the logo into the link and set
>>> the logo´s alt to ""
>>> Then a link would read:
>>> "inclusive media & design : web media accessibility for all"
>>> I am not sure where the link points though or why it is a link at all
>>> (isn't the "home" link part of the navigation menu just a little bit
>>> below?

>> >> >> > > >

From: Robert Jaquiss
Date: Sun, Jan 20 2013 6:21PM
Subject: Re: 2 questions - describe the logo or just say it's thelogo? aria role for contact info?
← Previous message | Next message →

Hello:

I am new to this list, so this is the first thread I have commented on.
As a blind user, I might find it useful to have a description of a logo on
the Home and About pages, but an empty alt tag on other pages. In this way,
the information about the logo is available, but doesn't have to be passed
over all the time.

Regards,
Robert

Robert Jaquiss


From: Srinivasu Chakravarthula
Date: Sun, Jan 20 2013 8:17PM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

Robert,
> I am new to this list, so this is the first thread I have commented on.

Welcome and glad to hear from you.

> As a blind user, I might find it useful to have a description of a logo on
> the Home and About pages, but an empty alt tag on other pages. In this way,
> the information about the logo is available, but doesn't have to be passed
> over all the time.
Providing empty alt attribute may be a violation. What if I land up directly onto a different page of the website? My take would be describe the logo in about page and provide company name as alt attribute for logo in all pages.

Makes sense?
Regards,

Srinivasu
http://srinivasu.org Twitter: @vasutweets
Sent from my iPad

From: Sandy
Date: Mon, Jan 21 2013 10:17AM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

Here's what I have ended up doing -

alt="home. IMD logo, a rounded square containing off-centred circles in
bright, warm colours"

Thanks to everyone who commented. You guys are great!

Sandy

From: Jukka K. Korpela
Date: Mon, Jan 21 2013 10:24AM
Subject: Re: 2 questions - describe the logo or just say it's the logo? aria role for contact info?
← Previous message | Next message →

2013-01-21 19:17, Sandy wrote:

> Here's what I have ended up doing -
>
> alt="home. IMD logo, a rounded square containing off-centred circles in
> bright, warm colours"
>
> Thanks to everyone who commented. You guys are great!

I haven't had time to read the discussion, and not much motivation
either (the question is simple and addressed in many fine documents),
but I cannot help commenting that the outcome makes no sense. There are
three sensible alternatives: alt="", alt="IMD", and maybe alt="IMD
logo", depending on the role of the image. If the image is a link to a
"home page", then you could add the word "home" and a preposition,
though "main page" would be better.

Writing a short story about a logo would make sense only if the logo
itself, as a graphic, was the topic of discussion.

Yucca

From: Chagnon | PubCom
Date: Mon, Jan 21 2013 10:26AM
Subject: Re: 2 questions - describe the logo or just say it's thelogo? aria role for contact info?
← Previous message | No next message

Srinivasu wrote:
"Providing empty alt attribute may be a violation. What if I land up directly onto a different page of the website? My take would be describe the logo in about page and provide company name as alt attribute for logo in all pages."

Because search engines can send users directly to pages inside the website, Srinivasu is correct to ask; what happens when someone lands inside the website and unknowingly bypasses the homepage? So a solution has to work for all pages, both the homepage and all internal pages.

In most cases, a literal description of a logo's appearance isn't needed to meet the intentions of accessibility and WCAG. Here's why:
The purpose of a logo is the provide a quickly recognized "image" or "brand" for the company or organization. It can accomplish this in any of several ways: through the use of a distinctive typeface, distinctive letterforms, a pictograph, color, and/or artistic rendition of these items.

(I say this as a former college instructor of graphic design and award-winning designer.)

Example, Microsoft's new logo would be visually described something like this:
4 identically-sized squares arranged to form a larger square, using the colors (clockwise from top left) red, green, blue, and golden-orange-yellow. The word "Microsoft" uses a semi-bold weight of a sans serif font and appears to the right of the square that's made up of the 4 smaller squares.

It's hard for me to find an example of a logo where a blind user would need to know such visual gibberish. Or would want to know it, especially over and over as they cycle through a website.

Sometimes it's difficult to figure out the intent of the logo's visual appearance, too. In the Microsoft example, who knows why the new logo has 4 squares arranged to make a larger square, other than it might be a throwback to a logo Microsoft used long ago that had an actual window with 4 panes of glass as the pictograph, which then evolved into 4 colored panes of glass, and then evolved again into 4 colored trapezoid squiggly flying things, which now have become 4 squares that form a square. We also don't know why those 4 colors were chosen for the squares; 3 of them are close to the pure red-blue-green RBG colors of computer monitors and screens, but not quite, and the golden-orange-yellow color doesn't correlate to anything. They do look attractive together and that's probably the main reason why they were chosen by the designers.

A logo is a visual brand (and the term used by the graphic arts and advertising industries is "branding") that in less than a second conveys to sighted visitors that they are on an official, authentic webpage from Microsoft. And if the brand is on a tangible product, it conveys that this is an authentic Microsoft product, not a pirated forgery.

So maybe what needs to be conveyed to screen reader users is simple Alt-text, like: "Logo, Microsoft." It most closely matches the intent for sighted visitors, that this is a Microsoft-branded webpage branded.

Logos don't convey to sighted people the phone number or other info about the company, so that should not be in the Alt-text. The logo could be linked to that information, but it's not part of the actual logo graphic itself unless you're describing the logo for 1-800-flowers.com, which does have the phone number in the logo because their name is their phone number.

A good strategy might be to have that simple Alt-text on all uses of the logo throughout the website. To minimize hearing it voiced repeatedly at the top of every webpage as the user cycles through the website, the Skip Nav / Skip to Main Content links should be placed before the logo so that it can be bypassed.

That's my take on this interesting conversation. Professor Bevi, over and out <grin>.
Love to hear other's opinions.

— Bevi Chagnon