Bugzilla

> is it something like the following example that you have in mind as a solution:

Yes, I expect the accessible name/label to just be the main text ("View your personalized protections dashboard") so a user can quickly know they are focusing a link element. And the accessible description to be a combination of the "Opens in a new tab" title and the visible description, in either order, with some punctuation between them.

Regarding VoiceOver, it is announcing both the accessible name, description and *then* the text content. Is that a VoiceOver bug given that the accessible name computation for `<a>` is specified to be either the text content or the name, but not both? Or is it a symptom of misuse of `aria-label` on the web?

If you want to avoid this effect on VoiceOver, could you maybe keep the description outside of the link, so to modify your example:

```html
<div title="Opens in new tab">
  <p><a href="mozilla.org" aria-describedby="description image">On-screen label</a></p>
  <p id="description">On-screen description.</p>
  <img alt="Opens in a new tab" id="image" src="chrome://global/skin/icons/open-in-new.svg">
</div>
```

Or even just drop the full description from the link element, if it isn't actually that important to the link itself.


```html
<div title="Opens in new tab">
  <p><a href="mozilla.org" aria-describedby="image">On-screen label</a></p>
  <p id="description">On-screen description.</p>
  <img alt="Opens in a new tab" id="image" src="chrome://global/skin/icons/open-in-new.svg">
</div>
```

This may duplicate the some of the text if you are reading the full page in browse mode, but the focus mode behaviour will be better.

> is it something like the following example that you have in mind as a solution:

Yes, I expect the accessible name/label to just be the main text ("View your personalized protections dashboard") so a user can quickly know they are focusing a link element. And the accessible description to be a combination of the "Opens in a new tab" title and the visible description, in either order, with some punctuation between them.

Regarding VoiceOver, it is announcing both the accessible name, description and *then* the text content? Is that a VoiceOver bug given that the accessible name computation for `<a>` is specified to be either the text content or the name, but not both? Or is it a symptom of misuse of `aria-label` on the web?

If you want to avoid this effect on VoiceOver, could you maybe keep the description outside of the link, so to modify your example:

```html
<div title="Opens in new tab">
  <p><a href="mozilla.org" aria-describedby="description image">On-screen label</a></p>
  <p id="description">On-screen description.</p>
  <img alt="Opens in a new tab" id="image" src="chrome://global/skin/icons/open-in-new.svg">
</div>
```

Or even just drop the full description from the link element, if it isn't actually that important to the link itself.


```html
<div title="Opens in new tab">
  <p><a href="mozilla.org" aria-describedby="image">On-screen label</a></p>
  <p id="description">On-screen description.</p>
  <img alt="Opens in a new tab" id="image" src="chrome://global/skin/icons/open-in-new.svg">
</div>
```

This may duplicate the some of the text if you are reading the full page in browse mode, but the focus mode behaviour will be better.

> is it something like the following example that you have in mind as a solution:

Yes, I expect the accessible name/label to just be the main text ("View your personalized protections dashboard") so a user can quickly know they are focusing a link element. And the accessible description to be a combination of the "Opens in a new tab" title and the visible description, in either order, with some punctuation between them.

Regarding VoiceOver, it is announcing both the accessible name, description and *then* the text content? Is that a VoiceOver bug given that the accessible name computation for `<a>` is specified to be either the text content or the name, but not both? Or is it a symptom of misuse of `aria-label` on the web?

If you want to avoid this effect on VoiceOver, could you maybe keep the description outside of the link, so to modify your example:

```html
<div title="Opens in new tab">
  <p><a href="mozilla.org" aria-describedby="description image">On-screen label</a></p>
  <p id="description">On-screen description.</p>
  <img alt="Opens in a new tab" id="image" src="chrome://global/skin/icons/open-in-new.svg">
</div>
```

Or even just drop the full description from the link element, if it isn't actually that important to the link itself.


```html
<div title="Opens in new tab">
  <p><a href="mozilla.org" aria-describedby="image">On-screen label</a></p>
  <img alt="Opens in a new tab" id="image" src="chrome://global/skin/icons/open-in-new.svg">
  <p id="description">On-screen description.</p>
</div>
```

This may duplicate the some of the text if you are reading the full page in browse mode, but the focus mode behaviour will be better.