The current version of the site is lacking semantic HTML and aria roles for accessibility

[johanbove]

Describe the bug The current version of the site is lacking semantic HTML and aria roles for accessibility. It has been built as a JavaScript web app, using Grommit components, which results in a slow rendering of the site and a lower than average Lighthouse score.

See Lighthouse test results

Expected behavior A website advocating universal basic income should be as accessible and inclusive as possible, whilst also making sure it is optimized for SEO and readability.

Screenshots

Desktop-Computer (please complete the following information):

• OS: Windows 10
• Browser FireFox
• Version latest

Additional context Perhaps switch the site generation to a static site generator like Eleventy?

[eminx]

Hi @johanbove

Thanks for taking your time to test the website!

However, I think your conclusions are mostly incorrect. The site's accessibility is almost perfect, thanks to the Grommet UI library we're using, and then it's also almost perfectly semantic, according to the test result you sent over. Same goes for SEO.

We're already using a static site generator called Next JS, which works great in my experience: https://nextjs.org

HOWEVER, there's an obvious problem with the performance, page load times. It certainly needs improvement, but thankfully it's going to be pretty easy to do it! Mostly the problem is due to heavy image sizes. But NextJS has a new image component that optimises them all on the fly! :)

It's interesting to note that the other problems are also related to the usage of images. So I should be able to get them fixed all in the same run!

Cheers, Emin

[johanbove]

Thanks Emin for your reply.

Perhaps it's just me being old-school at Web site development. After seeing all those inline styles and nested divs in the site's source code, some red flags went up in my view. I am also not convinced that all of the Web firstly needs to be written in JavaScript before it is being rendered to HTML.

About the "semantic html", I was looking at the site with CSS de-activated and then it shows that the HTML structure is lacking clear separation of blocks for header, main, navigation and footer as everything is a div, except for links and h1 tags. And this is imho not ideal.

You are right to say that the official WCAG accessibility problems are limited to missing ALT attributes in the images mostly (and some contrast issues) and the current lang should be added to the HTML tag. More analysis here: https://wave.webaim.org/report#/https://joincircles.net