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

Component uses Anchors with no href Attribute #2

Open
jlazarski opened this issue Jan 4, 2019 · 1 comment
Open

Component uses Anchors with no href Attribute #2

jlazarski opened this issue Jan 4, 2019 · 1 comment

Comments

@jlazarski
Copy link

Due to the use of the tag with no href in the component, the console is marked with a few warnings about accessibility. I realize this is just a warning and is being caused by a linting plugin but wanted to mention it. Here is the warning being seen:

The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid

@digilou
Copy link

digilou commented Aug 9, 2021

Glad to see this issue! I ran into this today because it creates a huge problem for keyboard-only users. If you're looking for compliance, this is a WCAG Level A failure (2.1.1). The pagination links are skipped over entirely (can't be reached) when a person tabs from interactive component to interactive component.

My first reaction is to change it to a button if it's dynamically changing a component on the page. If it's actually given a path to lead to another page, then a href is appropriate.

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

No branches or pull requests

2 participants