My site fails to meet accessibility conformance on the code side

Ollo. I am pretty well-versed in designing for accessibility. I am not a developer, however, which is a massive reason I used webflow for my most recent web project and would love to continue to do so for future projects.

The site I recently created fails to meet WCAG 2.1 accessibility conformance on the code side in a lot of really important areas. As I do not write code, I do not have the necessary skills to manipulate the code, and I don’t think I can fix it on my own.

Some issue examples:

  • FIXED in designer Language not specified (should be English for screenreaders)
  • HALF FIXED in designer Landmarks not set
  • Landmarks are set for main areas/containers, yet axe is still flagging that not all landmarks are set
  • ARIA attributes are incorrect

Failing Elements
div.w-slider-dot.w-active
div.w-slider-dot
div.w-slider-dot

  • discernable text not set for one link icon—the target, but I have selected for it to open in a new page

Failing Elements
a.footer-sm.w-inline-block

Have any of you remediated the default webflow output code for accessibility? Perhaps there are some things I can change in the designer to fix some issues?

Site: www.featherandnest.com

https://preview.webflow.com/preview/feather-and-nest?utm_medium=preview_link&utm_source=dashboard&utm_content=feather-and-nest&preview=80b95ce687f6cbe6914d00babf89ded1&mode=preview

Hi @ktdid. There are a few things you can do to fix some of these issues.

For the “language not specified” go into your Project Settings → Custom Code → Advanced Settings → Language Code. Here you can specify which language you’d like to set (there’s even a handy link to find the code you need).

For “landmarks not set”, I believe it’s because you have each of your Sections labeled as the default “div”. In the navigator, select your section. Then in the right-sided panel, go to the settings tab. Here you can switch the “tag” for each of your sections (header, footer, section, etc.). This will provide better semantic structure to your site.

Hopefully that will help with a few of your issues. I’m not sure about your incorrect ARIA attributes.

I found this article helpful myself, check it out, Webflow accessibility: a step-by-step guide to making your site accessible

1 Like

Whoa! Couldn’t get much easier to fix the language setting. Thank you!

I also did some more searching this morning and found that I hadn’t spec’d the tags (just seeing your reply now). I’ve assigned tags and the landmark errors have reduced. I’m not passing 100% in the landmark area so I’m sure there’s more I have to do…and perhaps the answers will be in the guide you shared! Thanks for that too!

Getting closer! (One day I’ll be able to lend a hand in the forum.)

1 Like

Awesome! Glad I was able to help you at least a little bit @ktdid :slight_smile:

1 Like

I’d say you helped a lot!

1 Like

I made some updates to my original topic post…does anyone have any ideas/solutions?