Very tedious accessibility question about alt tags

For a WCAG 2.0 complia开发者_运维百科nt website need to have alt tags for the images.

When it comes to something like a company logo. Should the alt tag just be the name of the company, or the name of the company followed by "Logo" I think the former makes more sense but if there is a definitive best practice I would like to know!

Exciting question eh?

The best guideline is, if the image wasn't available - what would you want to see instead?

The alt text shouldn't be a description of the image, it's a textual alternative to the image.

Is the logo of value to users of screen-readers? If not--then consider displaying the image via CSS rather than an <img> tag--CSS (presentational) images do not need to have alt tags (they actually can't have them), they are understood to be a visual-portion of the page rather than the actual content of the page.

implies that the image is valuable content related to the page--so if the logo is essentially eye-candy, of presentational value only, then it may not belong in HTML at all.

Just remember: screen-readers allow users to access the content. HTML is for content, CSS for presentation--if your HTML is muddied with non-content then providing a good, accessible, experience becomes much more difficult.

I think it's up to your personal preference. You want to convey the meaning of the image, not exactly what it is. for example, i would use alt text like 'next page' instead of 'right arrow'. So I would go with the company title, as that's the point of the logo.

I would go for "Logo of (Companyname)" because the ALT text serves as a description of the image that gets served if the user can't see it (e.g. for screen readers).

I think the WCAG 2.0 guidelines are supporting this:

When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.

Well, whatever makes the flow of the text of the page most understandably. IF the logo is right next to the company name as text, then neither "Big Company Big Company" nor "Big Company Logo Big Company" is really best when spoken by a screen reader.

The requirement for alt tags is mostly for images as buttons:

 <a href="page2.html"><img src="next.png" alt="next page" /> </a>

or other places where the image conveys real information, like graphs and charts.

Places where the image is merely decorative, a blank alt tag might be best.

Imaging an "About the company" web page, with all images with alt tags, being read aloud by a screen read. (Actaul text from exxonmobil.com: "About us- two workers on the Kizomba platform in Angola - We are the world's largest publicly traded international oil and gas company") Dragging the irrelevant detail from the image here lowers readability instead of raising it.

I wish I could point to an authoritative source, but having dealt with accessibility in a former life, I believe "logo" is preferred as it more accurately denotes the entity. For example alt="Photograph of Mount Hood" is quite different than alt="Mount Hood" and the former is much preferred.

While I do very much like @Gareth's answer, there is another thing to consider:

What is the parent element of the logo? If it is marked up like so: <a href="/index.html"><img src="/company-logo.png" alt="" /></a>, then the best alt would actually be along the lines of "[Company] Home Page" or "Go to [Company] home page". A disabled user with a screenreader would then hear "[Company] Home Page, link", or possibly, "[Company] Home Page, visited link".

Any time you are using an image as the link content, then the alt should tell the user where they go when that link is clicked. Same with buttons. If you use an image as button content, then the alt should tell the user what happens when the button is clicked.

Just as an aside: if clicking takes the user to another page or another part of the page, but requires no further interaction, the clicked element is almost always semantically a link. If clicking performs an action apart from navigation, shows additional options or content, or requires further interaction from the user after clicking (opens a dialog that must then be closed), then the clicked element is almost always semantically a button. Whenever possible, use the proper semantic element and style it with CSS. This will make your content accessible to the broadest range of assistive technologies.