Last week in the Web A11Y Slack workspace, somebody asked:
Hi all! I'm not sure if this has been asked before, but is it a failure of WCAG to use buttons for non-action items (i.e. navigating to another page)? I know it's semantically incorrect/against best practice, but is it technically a failure?
Our product is a single-page app that navigates through JavaScript, so few of our
<a>
tags havehref
s. If it is a failure (or borderline) to use buttons, what's the best treatment for these links to make them accessible?
My answer? Just use links.
Single-page apps make links complicated, but it is possible:
React
- You can use the
<Link>
component that comes with React Router. - You can also use the
<Link>
component that comes with Next.js.
Vue
- You can use the
<router-link>
component that comes with Vue Router. - You can also use the
<NuxtLink>
component that comes with Nuxt.js.