Kevin Powell - Community•8mo ago

Accessibility with icons/ images in links

Hey everyone, I have been looking around with no real luck about the best practice for using svg's as icons for my links in a nav bar. All I have really been able to find is that it's better to have the Image nested in the Link but I'm not so sure if even having the image is best for accessibility. When testing with a screen reader is keeps announcing "visited link, graphic, github" which doesn't feel quite right. Anyone done something similar or have any advice? Thanks so much!

<Link
  href='https://github.com/#'
  className='nav-bar__btn'>
    <Image
      className='nav-bar__img-svg'
      src='./github-mark-white.svg'
      alt='Github'
      width={30}
      height={30}
    />
</Link>

<Link
  href='https://github.com/#'
  className='nav-bar__btn'>
    <Image
      className='nav-bar__img-svg'
      src='./github-mark-white.svg'
      alt='Github'
      width={30}
      height={30}
    />
</Link>

3 Replies

ἔρως•8mo ago

the icon shouldn't provide any important information at all, depending on the situation in your example, having the title in the link would be a good idea or just put it in text inside the link on the alt of the icon, i would say "github logo" but i would set the icon as role="none" some/all screenreaders seem to read the alt attribute setting the icon as role="none" should prevent the screen reader from reading the icon's alt, which is there just to be pretty and not for important information for important information, you do this

WagglesOP•8mo ago

That's working much better now, thanks!

ἔρως•8mo ago

you're welcome

Gaming

Programming

Accessibility with icons/ images in links