Re: accessible name, aria-label and speech input

Possibly an overly lengthy reply with lots of redundant explanation, but 
just for clarity...

On 13/01/2021 08:11, Kazuhito Kidachi wrote:

> My understanding is that, accessible name of anchor element should be 
> the same with visible text label in terms of speech input users

Per 2.5.3 Label in Name they don't have to be *the same*. The 
requirement is that the visible text is at least contained, as is, in 
the accessible name. The accessible name can be much longer, and have 
additional text before, after, or both...as long as the visible text 
itself is contained in there in the same order, unbroken. Some silly 
examples:

<a href="#" aria-label="Read more about something">Read more</a>
<a href="#" aria-label="Go to the page to read more">Read more</a>
<a href="#" aria-label="Go to the page to read more about this">Read 
more</a>

all pass, as "read more" is present in the accessible name.

<a href="#" aria-label="Read a bit more about this">Read more</a>

fails, as "read more" is not present as part of the accessible name (the 
individual words are, but not in that same unbroken string/sequence).

 > as far
 > as I read F96 Example 2 of Techniques for WCAG 2.1.
 >
 > 
https://www.w3.org/WAI/WCAG21/Techniques/failures/F96#example-2-invisible-link-text-disrupts-visible-label-text-string-in-accessible-name 


Those examples fail because the accessible name is either overridden 
completely with something that's different from the visible text

<button id="sitesearch" aria-label="Find in this site">Go</button>

<div id="hidden-label">Find in this site</div>
<input type="submit" aria-labelledby="hidden-label" value="search">

or where there's extra content in between the visible words, meaning 
that the visible label text string is not present, as seen, in the 
accessible name

<a href="#">Download <span class="accessibly-hidden">gizmo</span> 
specification</a>

visible text "Download specification", but accessible name is "Download 
gizmo specification".


> <http://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8>

 From the example, there

<a href="taxhike.html" aria-label="Read more about Seminole tax 
hike">[Read more...]</a>

passes because the text "read more" is present in the accessible name 
(as punctuation/symbols are ignored in the context of this SC - see 
https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html "Symbolic 
text characters" and "Punctuation and capitalization").


> https://www.w3.org/WAI/WCAG21/Techniques/general/G208.html#example-3-link-text-included-in-aria-label 

<a href="code-of-conduct.html">Code of conduct <span 
class="hidden_accessibly"> of ACME Corporation</span></a>

Visible text is "Code of conduct", and the full accessible name is "Code 
of conduct of ACME Corporation", so this passes as the accname contains 
the visible text.

<h4 id="poor">Insufficient Link Names Invade Community</h4>
<p>Citizens are reeling from the growing invasion of useless "read more" 
links appearing in their online resources. <a href="poor.html" 
aria-labelledby="generic poor"><span id="generic">More...</span></a>

Visible text is "More", accessible name is "More...Insufficient Link 
Names Invade Community", so this passes.

<a href="poor.html" aria-label="Read more about Insufficient link 
names">Read more</a>

Visible text is "read more", accessible name is "Read more about 
Insufficient link names"...

<button>Send <span class="accessibly-hidden"> Mail</span></button>

Visible text is "Send", accessible name is "Send Mail"...

So, long story short: to pass the visible text that acts as a label must 
be present exactly as seen (but ignoring punctuation/special characters) 
in the accessible name. You can have extra text in the accessible name, 
but what matters is that the exact string itself is at least present in 
there, unbroken.

P
-- 
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Wednesday, 13 January 2021 08:47:59 UTC