Responsive 3-column card component using semantic HTML and CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  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 use aria-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

  0

  ---

  

  Mushfiq Rahman•300

  @Ayon95Posted almost 3 years ago

  @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.

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  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.

  0

  

  Mushfiq Rahman•300

  @Ayon95Posted almost 3 years ago

  @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 :)

  1