search

bendc / frontend-guidelines

Some HTML, CSS and JS best practices.
8.29k stars 653 forks source link

The point 'Accessibility' #6

Closed visualcookie closed 9 years ago

visualcookie commented 9 years ago

Hi,

you're writing the company name in the alt-Tag. In case for accessibility to work you should use "The Logo of My Company Inc.", so people who can't see know, what the screenreader is doing there.

This is especially important for all images. Try to describe what's the image shows.

Just a tip. :)

bendc commented 9 years ago

I'm pretty sure that's actually not true.

AndyScott77 commented 9 years ago

@visualcookie the example is correct

Refer to : http://www.w3.org/wiki/HTML/Elements/img#A_short_phrase_or_label_with_an_alternative_graphical_representation

The point being it depend on context.

The first example on w3.org is a logo, here non-visually impared people see the image as a logo, some branding. Therefore the description should also reflect the branding.

Later they discuss your point, the design of the logo, in this situation it's important for the visitor know what the image looks like, thus visually impaired people would need the content of the image described.

The same applies to photos, you need to describe the image. For example if there was a photo of some Bridge, say Tower Bridge in London, simply saying "Photo of Tower Bridge" isn't really sufficient - what if the reader has no idea what it (for want of a better word) looks like. Instead it would be better to describe it in greater detail, colours size, for example "A imposing bridge, made up of 3 sections, separated by two large central towers and blue supports"

Tower Bridge

Maybe adding another example using a photo would be good?