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
ἔρως
ἔρως2mo 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
Waggles
Waggles2mo ago
That's working much better now, thanks!
ἔρως
ἔρως2mo ago
you're welcome