Skip to main Content
Back to posts

Accessible SVG

Posted 12mnths ago
profile pic

debugger Front end 2 Comments

I am trying to figure out the best way to make an inline SVG accessible: between <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" alt="alt text"> <path d="M17 2.99981C17.2626 2.73717 17.5744 2.52883 17.9176 2.38669C18.2608 2.24455 18.6286 2.17139 19 2.17139C19.3714 2.17139 19.7392 2.24455 20.0824 2.38669C20.4256 2.52883 20.7374 2.73717 21 2.99981C21.2626 3.26246 21.471 3.57426 21.6131 3.91742C21.7553 4.26058 21.8284 4.62838 21.8284 4.99981C21.8284 5.37125 21.7553 5.73905 21.6131 6.08221C21.471 6.42537 21.2626 6.73717 21 6.99981L7.5 20.4998L2 21.9998L3.5 16.4998L17 2.99981Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>

and <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <title>alt text</title> <path d="M17 2.99981C17.2626 2.73717 17.5744 2.52883 17.9176 2.38669C18.2608 2.24455 18.6286 2.17139 19 2.17139C19.3714 2.17139 19.7392 2.24455 20.0824 2.38669C20.4256 2.52883 20.7374 2.73717 21 2.99981C21.2626 3.26246 21.471 3.57426 21.6131 3.91742C21.7553 4.26058 21.8284 4.62838 21.8284 4.99981C21.8284 5.37125 21.7553 5.73905 21.6131 6.08221C21.471 6.42537 21.2626 6.73717 21 6.99981L7.5 20.4998L2 21.9998L3.5 16.4998L17 2.99981Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>

which one works best

1 up vote 0 down votes

Comments

  • profile pic
    peter sila

    SVG images do not support the alt attribute in the same way that HTML images do. In HTML, the alt attribute is used to provide alternative text for images to make them accessible. However, in SVG, the alt attribute is not a standard attribute, and it is not used for providing alternative text.

    To make SVG images accessible, you can use other methods. One common approach is to use the aria-label attribute within the <svg> element. The aria-label attribute is recognized by screen readers and provides an accessible name for the SVG image. The second example is not accessible because the SVG does not have the role of an image.

    0 up votes 0 Down votes
  • profile pic
    Sarah

    I would advice using the first option, however, use title="..." instead of alt="..." to label the element.

    0 up votes 0 Down votes

Unleash Your Voice, Amplify Accessibility

Empower Your Voice, Share Your Topics on Accessibility, and Ignite a Change in web content

Create a post