Tailwindcss +Next.j themes/libraries that meet AA WCAG standards and are semantically sound for SEO?
Hey all,
I have a client requiring a static landing page.
It must meet at least AA (ideally AAA) WCAG standards, and be semantically sound for SEO.
I can (and have) found dozens of next.js + tailwind themes/component libraries that would suit.
However, I don't want to commit to something only to find that it doesn't meet the above criteria of accessibility and SEO.
I'm wondering if anyone has had any personal experience using (can vouch for) any particular next.js + tailwind theme/component library. It'd go a long way to making me feel more comfortable with making a decision.
Obviously, we can always make our own adjustments, but I'm looking for something that will get us 80-90% of the way there.
6 Replies
I can't speak to your specifics, but are you up to speed on what you need in order to meet the standard? If not, this is a good checklist:
https://webaim.org/standards/wcag/checklist
Thanks for the reply! I've generally use the checklist here https://www.a11yproject.com/checklist/
We're trying to get a head start on the site so we don't need to build every module/component from scratch to meet compliance standards.
The client really wants to approve an existing theme that we can then configure/tweak as they want to have a very good idea of what the end result will look like.
I assume you have checked out tailwind labs' own library? it's unstyled but most of the a11y heavy-lifitng has been done
https://headlessui.com/
Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
You must take a look to Radix UI: https://www.radix-ui.com/. It is an unstyled components library, meaning you can use Tailwind CSS if you want.
If your convinced by it, I'd recommend to also consider shadcn UI: https://ui.shadcn.com/. It takes the best of Radix UI and adds extra components. This collection of components is intended to be used with Tailwind.
Primitives – Radix UI
An open-source React component library for building high-quality, accessible design systems and web apps.
@leweyse @phyrasaur - I wanted to thankyou for these suggestions. Sorry for the delayed response back.
I'm not usually responsible for deciding on the tech stack for projects, so I appreciated the help with this.
Radix looks to tick most of the accessibility requirements we need to cover, which is great.
I don't suppose you know of any proven templates/basic landing pages that leverage Radix?
Happy to help.
About templates, I think the best you can get is shadcnUI. It uses Radix components and delivers to you ready to use components: style, generic functionality and a few things more.
https://ui.shadcn.com/
Give it a try.