w3c / wcag

Web Content Accessibility Guidelines
https://w3c.github.io/wcag/guidelines/22/
Other
1.14k stars 257 forks source link

2.5.3: Must the visible label of site logos linking to the start page be included in the accName? #722

Closed detlevhfischer closed 5 years ago

detlevhfischer commented 5 years ago

The question has cropped up here a couple of times if the visible label of site logos linking to the site's start page must always be included in the accName (e.g., the alt attribute) of that logo element.

There is a convention that site logos placed in the header link to the start page, so speech users may try "click home", "click start" or (German) "Klick Startseite" etc. to activate that label, regardless of (possibly obscure) label text. So do "start" or "home" (or equivalents in other languages) fail?

The other issue is the success of interpreting speech input if the string is an aconym like VDEK - some users may say "vee-dee-ee-kay" others "veedeck" etc. If the logo graphic then also contains a strapline of varying length (in this case, "Die Ersatzkassen") the question arises whether this strapline would also need to be included in the accName in order to meet 2.5.3. Common sense says that it probably shouldn't necessarily be included (even though inclusion would not be a failure). There is a trade-off between the length of the accName that non-visual users will be presented with, and covering visible label text to meet 2.5.3. My hunch is that site logos might, for the reasons mentioned, better be excluded from 2.5.3. The logo angle is, it seems, not covered in the current 2.5.3 understanding text. Thoughts? @mbgower ?

awkawk commented 5 years ago

There's never any guarantee that the speech tool will respond to a label that is properly represented in the accessible name if the speaker doesn't state the name in the way that the tool recognizes it. This will certainly impact logos with acronyms or initialisms where the user and the tool may not treat them the same, and will also affect people who have trouble speaking clearly (e.g. a typical speech user who has a stroke, or who just doesn't speak very clearly).

I don't think that we can control for that, but I do think that 2.5.3 does apply to logos.

jake-abma commented 5 years ago

Agree with @awkawk comment on recognition issues with AT and speech although the last comment is debatable:

... but I do think that 2.5.3 does apply to logos.

Not sure if this strokes with other SC when talking about logo's, we might (have) except(ed) them for 2.5.3 for the following reason:

We may demand Logotypes, but not all text (characters) in logo's per se

jake-abma commented 5 years ago

take one from Wiki, must add all text in ACC name or fail?

https://upload.wikimedia.org/wikipedia/commons/8/84/Wikipedia-logo-tracescan.svg

:-)

jake-abma commented 5 years ago

http://www.mixedmethods.org/uploads/8/7/5/2/87520800/fm-m3rs-logo-reverse-no-name_orig.png

awkawk commented 5 years ago

@jake-abma there isn't an exception for logos in 2.5.3 but there is for 1.4.3, 1.4.5, 1.4.6, and 1.4.9 - I don't know how we would make the case that an exception exists.

awkawk commented 5 years ago

@jake-abma for that logo I would feel like I conformed with alt="Michigan Mixed Methods" as I would treat the other characters as decorative and not part of the label for that control.

jake-abma commented 5 years ago

@awkawk I know, so what about a logo like this? http://www.mixedmethods.org/uploads/8/7/5/2/87520800/fm-m3rs-logo-reverse-no-name_orig.png

A minor 'flaw' in the creation and ready for Silver?

detlevhfischer commented 5 years ago

@KimPatch what's your take on this, Kim? What are your speech input expectations when faced with logos like VDEK or the ones referenced by Jake?

jake-abma commented 5 years ago

https://i.etsystatic.com/8804575/r/il/4b90ba/1061302103/il_794xN.1061302103_fw72.jpg

https://mir-s3-cdn-cf.behance.net/project_modules/disp/b5aaf88482395.560be30c59e8c.jpg

https://i.pinimg.com/originals/f0/60/1c/f0601c976c4931b5f2ad33ebb832b06d.jpg

https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/0009/4128/brand.gif?itok=SbOEJgdx

https://i.kym-cdn.com/entries/icons/facebook/000/014/657/2000px-Unicode_logo.svg.jpg

https://image.spreadshirtmedia.net/image-server/v1/mp/products/T1313A1MPA3343PT10X5Y0D136436450FS4627/views/3,width=378,height=378,appearanceId=1,backgroundColor=F2F2F2,version=1549917618/love-letters-mixed-enamel-mug.jpg

jake-abma commented 5 years ago

Just wondering where the line is with logo's

detlevhfischer commented 5 years ago

@jake-abma I think most of your examples would not be considered legible label text - some are decipherable and so might qualify (creative, love). I think it is still another issue whether the conventional position (mostly top-left, repeated across pages) and character of site logos qualifies for an exception - a logo somehow seems to say "home" regardless of its arcane or not so arcane content. But I can equally live with a line like "If the logo renders legible text (IBM, Nasa, whatever) then that text must be part of the accname". It just means some re-naming effort for quite a number of sites. And it would be good to cover that case in Understanding.

jake-abma commented 5 years ago

@detlevhfischer some facts:

Definition label:

label text or other component with a text alternative that is presented to a user to identify a component within Web content

Here the "other component with a text alternative" is fine for a label, no need to add the text / description of the picture per se. (example is a pencil icon for edit button where "edit" would be fine for a ACC name, no need to add "pencil" in there)

For SC 2.5.3 Label in Name we have:

For labels that include images of text... the ACC name contains the text that is presented visually.

Clear demand, if "images of text" definition matches the image conditions it's a must

Definition image of text:

image of text text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect

With Note:

NOTE This does not include text that is part of a picture that contains significant other visual content.

Ok, so according to this definition and the Note there's a (fine/grey) line somewhere which possibly excludes many logo's like: http://www.mixedmethods.org/uploads/8/7/5/2/87520800/fm-m3rs-logo-reverse-no-name_orig.png

What is interesting here are, again, the edge cases where the "particular visual effect"can cause confusion like in the following:

https://image.spreadshirtmedia.net/image-server/v1/mp/products/T1313A1MPA3343PT10X5Y0D136436450FS4627/views/3,width=378,height=378,appearanceId=1,backgroundColor=F2F2F2,version=1549917618/love-letters-mixed-enamel-mug.jpg

Is this ACC name "Love" or "Velo"? Or do we need to add both?

At Web Accessibility Tutorials - Guidance on how to create websites that meet WCAG it says:

An alt Decision Tree:

Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?

Yes: Use the alt attribute to communicate the destination of the link or action taken. See Functional Images.

Functional Images https://www.w3.org/WAI/tutorials/images/functional/

Example of Logo DOES contain text but suggests only as an "extra" on top of the "primary function"

Note 1: In this situation, the logo is also an image of the text “W3C”, but in this case, its primary function is to link to the homepage, so the word “home” was added to the text alternative.

and

Functional images are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image. For instance, as shown in examples below, the text alternative should be “print this page” rather than “(image of a) printer”, “search” rather than “magnifying lens” or “Example.com homepage” rather than “Example.com logo”.

Here is says "should" and " purpose of the image" rather than a description.

So in conclusion we have:

A clear line is not always present, some do, some don't and seems like a judgement call from an auditor. Also it seems it's best practice but not required but I could be wrong.

awkawk commented 5 years ago

Approved WG Response: Logos are not exempted from 2.5.3 Label in Name. A logo that contains text that serves as a link to a home page would need an accessible name, and in most situations that name should incorporate the text in the logo. However, there are nuances to consider.

So when creating ALT text (which is part of the accName calculation) for logos with text serving as homepage links, it is advisable to include in the name any text which users would consider part of the company name, and also append the function (e.g., "IBM home").

Logos will sometimes include additional text that is secondary, and that additional text may not be needed as part of the label for the component. Label is defined as "text or other component with a text alternative that is presented to a user to identify a component within Web content" and authors should evaluate whether all text in an image is intended to identify the component or if some may be excluded. For example, in this image (http://www.mixedmethods.org/uploads/8/7/5/2/87520800/fm-m3rs-logo-reverse-no-name_orig.png) an author may decide that the primary text used to identify the component is "Michigan Mixed Methods" and the additional images of text are decorative and therefore can be excluded from the accessible name.

jake-abma commented 5 years ago

These kinds are interesting, although characters can be recognised, ignore?!

http://www.duijghuijzen.nl/uploads/nieuws/nieuwsbericht/dghzn150x150.jpg

patrickhlauke commented 5 years ago

These kinds are interesting, although characters can be recognised, ignore?!

http://www.duijghuijzen.nl/uploads/nieuws/nieuwsbericht/dghzn150x150.jpg

that's really more like a word art / vector shape that hints at characters. the alt for that image, and therefore the label, would be whatever the name of the company actually is. i think this is really a question more about 1.1.1 than 2.5.3, as satisfying 1.1.1 here should not conflict with 2.5.3 (provided the author doesn't override or otherwise change the accessible name of the control/link that's made up of just that image). and 1.1.1 does, of course, have a certain element of subjectivity/common sense, which i don't think we should try to eliminate by wholesale making exceptions here.

mbgower commented 5 years ago

So, a few things.

  1. Images of Text excludes logos (defining them as essential). So it's okay to have a a logo with images of text. I think we'd all agree on that.
  2. Within Image of Text, the example for a logo is explicit: "The image has a text alternative." I think we'd all agree it needs one -- and ALT text is part of the accname calculation.
  3. In 1.1.1 Non-text Content, a logo which is a hyperlink matches:

    If non-text content is a control or accepts user input, then it has a name that describes its purpose.

So the discussion is really about what the purpose of a company logo is. If it wasn't a hyperlink, it would arguably be decorative, but Detlev_ has already stated that the usual scenario is that it serves as a link to the homepage, so to me it seems clear that the accname should be either "[company name]", "home" or "[company name] home". As has been pointed out, whether a logo made up of letters is treated as an acronym or an initialism -- and in the case of the latter, whether it is spelled out or just given as letters -- is at the discretion of the author. For instance "IBM home" , "IBM" and "International Buisness Machines" would all be acceptable ALTs for the logo, with my preference being the first one (which would also work as a trigger for Label in Name with most speech recognition systems). I'd consider just "home" to be a weak fourth option, because it doesn't match the main visible text.

mraccess77 commented 5 years ago

I would agree that "IBM Home" would be best. In the case of a linked logo the purpose is most important and the logo is dependent on whether that information is communicated else where on the page. Often it's not and thus "IBM home" combines both of those. This is aligned with the Trusted Tester recommendations.

alastc commented 5 years ago

I'd note that, in Dragon at least, if there is a link for "Home", saying "Click home" will take you to the browser home page, it doesn't follow the link. The company name would be important for a logo-link.

Also, the proposed response above has changed quite a bit, so worth re-reading.

awkawk commented 5 years ago

Response above approved by the WG on July 30, 2019.