Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the Previous and Next button markup #8

Closed
4 tasks done
jasonwebb opened this issue Aug 16, 2020 · 0 comments
Closed
4 tasks done

Improve the Previous and Next button markup #8

jasonwebb opened this issue Aug 16, 2020 · 0 comments
Labels
feature change Change to an existing feature or functionality

Comments

@jasonwebb
Copy link

jasonwebb commented Aug 16, 2020

  • 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.

@jasonwebb jasonwebb added the feature change Change to an existing feature or functionality label Aug 16, 2020
jasonwebb added a commit that referenced this issue Aug 17, 2020
@jasonwebb jasonwebb reopened this Aug 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature change Change to an existing feature or functionality
Projects
None yet
Development

No branches or pull requests

1 participant