Placeholder Link
Critical - WCAG Level A
The placeholder-link issue arises when developers use links with an href attribute set to # or javascript:void(0). These are often used as placeholders during development or to trigger JavaScript functions without a page reload. However, this practice can lead to accessibility issues because it creates links that are non-functional or misleading for users relying on assistive technologies.
For users with disabilities, especially those using screen readers or keyboard navigation, these placeholder links can be confusing. Screen readers announce these links as interactive elements, but without proper interaction handling, they do not perform any meaningful action. This can lead to frustration and a poor user experience.
To fix this issue:
Ensure that all links have a clear and accessible purpose. If a link is intended to trigger a JavaScript function, use a
buttonelement instead, as buttons are semantically correct for actions and are naturally accessible.If you must use an anchor
<a>) element, ensure it has a validhrefattribute pointing to a meaningful URL or use ARIA roles and properties to clarify its purpose.
Best practices include:
Use
<button>elements for actions that do not navigate.If using
<a>, ensure it has a validhrefand is not solely reliant on JavaScript for functionality.Avoid using
href='#'orjavascript:void(0).Provide clear, descriptive link text.
Common mistakes:
Forgetting to add keyboard event handlers (e.g.,
keydownfor Enter key) for custom interactive elementsFailing to provide a focus outline for keyboard users.