Improve the Previous and Next button markup
jasonwebb opened this issue · 0 comments
jasonwebb commented
- Move the icon to an inner DOM element so that it can be hidden from screen readers using
aria-hidden="true"
. - Wrap the inner text in a
<span>
and apply CSS to make it visible to screen readers only. - Remove the
aria-label
once the above changes are made, since the inner text will act as a more robust accessible name (see the First Rule of ARIA Use). - Document changes in the main README
Currently the buttons render like so:
<button class="slick-prev slick-arrow" aria-label="Previous" type="button">
:before
Previous
</button>
Where an unrecognizable (to screen readers) custom font character is injected via the :before
pseudo-class.
What we really want is this:
<button class="slick-prev slick-arrow" type="button">
<span class="slick-previous-icon" aria-hidden="true"></span>
<span class="slick-sr-only">Previous</span>
</button>
For reference, see this nice section about icon buttons in the MDN's documentation for the <button>
element.