You may need been in conditions the place you acquired a classical three-column weblog structure design. Sadly, all three columns shut off with a “Learn extra” hyperlink. These hyperlinks aren’t good for accessibility as a result of “Learn extra” is not very descriptive.
Particularly when a web page consists of a number of hyperlinks with the identical identify, navigating them is a problem. How ought to one know the place all these “Learn extra” hyperlinks result in?
Simple-peasy, aria-label then helps to offer a extra accessible identify. Proper?
<a href="/wonders" aria-label="Wonders of the world">Learn extra</a>
Because of aria-label, display screen readers present extra precious info, even when components look visually the identical.
However in the present day I discovered that aria-label also can result in points with speech recognition instruments when it does not match what’s seen.
Guests navigating the net with their voice can inform the software program to click on a component based mostly on what they see — “Click on Learn extra”. An aria-label that overwrites a component’s accessible identify breaks this performance.
Ashlee M. Boyer recommends in her article Don’t Overwrite Visible Labels With aria-label to incorporate the visible label in case you’re enhancing it by way of aria-label.
<a href="/one thing" aria-label="Learn extra: Wonders of the world">Learn extra</a>
That is good to know, however the normal rule of ARIA stays: Use native and semantically appropriate components every time doable and solely use ARIA whenever you actually should.
So it may be higher to do away with all these “Learn extra” hyperlinks within the first place.
