Ref: https://github.com/bigbinary/neeto-engineering-ui-ux/issues/103
This problem occurs when we use a <div> element with a click event listener for navigation purposes. By default, <div> elements do not have built-in keyboard navigation behavior. To make <div> element keyboard accessible requires extra effort. To address the issue consider using anchor tags <a> instead of <div> elements for navigation.
Use anchor tag instead of div
Anchor tags are inherently keyboard accessible and require less effort to ensure a good user experience for all users.
When you use an anchor tag with an href attribute, you can typically navigate to the linked resource using keyboard shortcuts.
Shortcut |
Description |
|---|---|
Shift + Enter |
Pressing Shift and Enter while a link is focused open the link in a new browser window. |
Shift + Click |
Holding down the Shift key while clicking a link opens the link in a new browser window. |
Cmd + Enter |
Pressing the Command key and Enter while a link is focused opens the link in a new tab. |
Cmd + Click |
Holding down the Command key and clicking a link opens the link in a new tab. |
Enter/Spacebar |
Pressing Enter/Spacebar when a link is focused typically activates the link, taking you to the linked page or resource. |
<div> lacks all these features hence not recommended to link any resource or a page.