Waggles
Waggles
PostsComments
KPCKevin Powell - Community
Created by Waggles on 7/3/2024 in #front-end
NVDA reading modal items multiple times
Hey everyone. I have been working a modal mobile menu and trying to use NVDA to make sure it's accessible for screen readers but whenever I go to open the modal I get some really strange behaviour where it reads everything within the modal multiple times (see the log below). I have tried assigning custom aria-labels to things but nothing really seems to be working. Anyone else run into these issues? It also happens on both Chrome and Firefox here is a link to the repo if anyone wants to try it : https://github.com/Chris-Wagg-Frontend-Mentor-Projects/news-homepage 
banner landmark    navigation landmark    button    open menu
open menu  button  
dialog  Home
Home
New
New
Popular
Popular
Trending
Trending
Categories
Categories
close menu  button  
button    close menu
visited  link    Home
visited  link    New
visited  link    Popular
visited  link    Trending
visited  link    Categories
banner landmark    navigation landmark    button    open menu
open menu  button  
dialog  Home
Home
New
New
Popular
Popular
Trending
Trending
Categories
Categories
close menu  button  
button    close menu
visited  link    Home
visited  link    New
visited  link    Popular
visited  link    Trending
visited  link    Categories
7 replies
KPCKevin Powell - Community
Created by Waggles on 6/7/2024 in #front-end
Best practice to use a modal/ dialogue for a mobile side menu?
If you're building a mobile side menu that pops in and out is it best practice to use just a div/nav with all your links nested inside or to use something like a modal/dialogue instead? I'm thinking that with a div you would lose a lot of baked in accessibility that a modal might have for example or does that present it's own issues? Thanks in advance for any tips or advice!
5 replies
KPCKevin Powell - Community
Created by Waggles on 4/26/2024 in #front-end
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>
12 replies