WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Chagnon | PubCom
Date: Jan 21, 2013 10:26AM

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