@PhoenixDev22
Posted
hello @Ayon95 ,
I have some suggestions regarding your solution :
-
<svg> 's do not add important information to a document should be considered decorative. You can usearia-hidden="true"to hide the SVG from screen readers.focusable="false"is also used to ensure Internet Explorer won’t allow the Tab key to navigate into the SVG. -
Create a custom
:focus-visiblestyling to any interactive elements. This will make the users can navigate this website using keyboard (by using Tab key) easily.
Hopefully this feedback helps.
Marked as helpful
@Ayon95
Posted
@PhoenixDev22 Thanks for the feedback. You are right about the decorative SVG icons. The links are tabbable even without :focus-visible. As far as I know, you need :focus-visible when you want to show the focus indicator only when the user navigates to an interactive element using keyboard, and not when the user clicks on it.
@PhoenixDev22
Posted
Greeting @Ayon95 ,
it is essential that interactive elements have focus-visible styles. These need to be really clear and obvious as they are needed to help a keyboard user know where is focused on the page. :focus-visible is used similarly to :focus: to bring attention to the element that currently has the focus.
I read this article about focus and focus visible
Hopefully it helps.
@Ayon95
Posted
@PhoenixDev22 Thanks for sharing. I read this article. Browsers already show default clearly visible focus styles when an interactive element is focused. The problem comes when the focus styles are shown when a user clicks on an interactive element (default behavior). Design specs may require you to hide those focus styles unless users navigate to interactive elements using a keyboard. That's when :focus-visible comes into play as explained in the article :)
