...
You could make the aria-label:
a) the same as the preceding heading OR
b) append the heading to the default link text/label, OR
c) create a completely new label that
c)
Example:
| Code Block |
|---|
<h1 class="sfgov-campaign-title">Vote by Nov 8</h1> <div class="mb-20"> <a href="https://sfgov.org/" class="btn" aria-label="Read more about voting on November 8">Read more</a> </div> |
...
The speech to input user will not know what the aria-label is as it is not visible to them. However if the aria-label starts out with the default button label, "Learn more about London Breed", the speech recognition software will be able to recognize that button label.
Ensure that Links Appear in Context
Provide links at the point in the content at which they're useful without visibly displaying the URL or "here".
What Elements Can Be Used With aria-label?
...
For more information on this, and on using ARIA with HTML in general, refer to the W3C Note on Using ARIA
Ensure that Links Appear in Context
Provide links at the point in the content at which they're useful without visibly displaying the URL.