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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃憣 IMPROVE: Add link-alt to fix card link accessibility #89

Merged
merged 2 commits into from Aug 18, 2022

Conversation

chrisjsewell
Copy link
Member

This PR adds the link-alt option to card (and grid-item-card) directives,
in order to assign a discernable name to the link (for screen readers).

As noted in #78, it may be ideal to add aria-label/aria-hiddento the actual linkHTML element. However, this would entail having to override aspects of the sphinx HTML builder. Instead, we include the link alt text, but add asd-hide-link-textCSS class, to setfont-size: 0`, to hide the text.
This solution was taken from https://stackoverflow.com/questions/471510/hide-text-using-css, and seemed to be the simplest solution.

fixes #78

@chrisjsewell
Copy link
Member Author

@bertiewooster what do you think of this solution?

@bertiewooster
Copy link

Thanks @chrisjsewell! Yes, from what I can tell, that seems to solve the problem. I checked by comparing the Sphinx design Cards page canonical version to the version built from this pull request. It would be best if someone who uses a screenreader could verify that this solution works for their reader.

Before

Lighthouse report includes Links do not have a discernible name

<a class="sd-stretched-link reference external" href="https://example.com"></a>

After

Lighthouse report does not contain that problem

<a class="sd-stretched-link sd-hide-link-text reference external" href="https://example.com"><span>example</span></a>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Card links do not have a discernible name (accessibility issue)
2 participants