0

I have made a static site with Nuxt.js and TailwindCSS, and I am currently trying to make it a11y friendly by including keyboard navigation with the tab key. I am finding this impossible however as focus seems to shift between the browser controls and the root-level document (Firefox shows dotted lines around the entire page) when using tab. I am not able to access any of the links/buttons even after manually messing around with the tab index attribute. I am wondering if this is something to do with framework/tools I am using it or if there's something I'm overlooking in my HTML templates that's affecting keyboard navigation.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Sahil Shaheen
  • 41
  • 2
  • 1
    Probably an HTML issue. You could maybe post some code (won't be able to help myself tho). Or try Chakra UI Vue, it is aimed towards a11y and working with Nuxt. – kissu May 23 '21 at 08:42
  • 1
    @kissu It was a Mac issue. https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox And Chakra UI is absolutely awesome! – Sahil Shaheen May 23 '21 at 11:11
  • You could start with the Nuxt.js validator and start fixing the issues: https://html-validator.nuxtjs.org/. Also use SiteImprove extension for Chrome it's brilliant at showing issues in the browser along with the Inspector. Also Chakra UI: https://www.smashingmagazine.com/2020/07/accessible-front-end-application-chakra-ui-nuxtjs/ – Nathaniel Flick May 23 '21 at 19:58

0 Answers0