Best Way to give keyboard focus for a icon

Question

I have a ChevronUp/down icon which serves as a button to open/close the menu.

I want to give keyboard focus to the icon for accessibility support. I tried to add it into "a" tag <a href="#"> <i></i> </a>

It gives focus but when it's clicked, the href="#" part will make the page refresh. I am wondering what's the best way to give keyboard focus for tag?

I tried "return false" for the <a> tag, but it also doesn't work as it will disable the all onclick events.

@KonradLinkowski We want users to be able to click it through keyboard. — kevinzf, Oct 18 '22 at 09:34
_I tried "return false" for the tag_, where did you return false, inside the href attribute? try `` — GrafiCode, Oct 18 '22 at 09:38
If you insist to use an `` tag, you may try `...`, a [common way](https://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean) to get rid of the default behaviour of an `` tag. — Hao Wu, Oct 18 '22 at 09:38
@kevinzf — What makes you think users *can't* 'click' a button using the keyboard? — Quentin, Oct 18 '22 at 09:44
Also, if you care about accessibility you need to let people who can't see (what I assume is) *a background image on your italic non-text* know what the button does. Use an `` with an `alt` attribute inside the button. — Quentin, Oct 18 '22 at 09:45
@Quentin I think that's a fontawesome element or similar. adding `aria-label="description"` to the wrapping (or — GrafiCode, Oct 18 '22 at 09:49
`` should be used only for navigation, this seems more like a ` — Konrad, Oct 18 '22 at 11:32

score 2 · Accepted Answer · answered Oct 18 '22 at 17:23

Use a button element to trigger some on-page interactivity. A link is for navigation, either to another page or an in-page anchor. You can always use CSS to remove default browser styling for buttons if needed.

In the case of a button like this that's just an icon with no text, you need an aria-label that tells non-visual users what it is.

<button aria-label="Open menu"> <i></i> </button>

See as well the W3 Design Pattern for dropdown menus for more info. https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation-hybrid.html

Best Way to give keyboard focus for a icon

1 Answers1