It seems like everywhere you look now AI has taken over the conversation as the top buzzword in tech. "How can AI help you code?" or "How you can leverage AI to improve you work!" are the usual taglines. More recently it has been "Did you know you can have AI generate a website for you?".
Once I heard this I did a search and sure enough, I was flooded with different sites that leverage AI to build your site. Naturally I wanted to use one of these and explore how accessible the default template was. Here is what I found!
Things To Note
The way AI is used varies from site to site, but for the most part most of these sites use a combination of AI and personal customization to build sites. Do note, that what I tested was just the out of box implementation, no customizations off of that.
I used the site Durable for this specific example I tested. The reason for using it was seeing multiple tweets and posts on social media saying "Make a whole site leveraging AI using this!". However, I have built on other sites that you use AI and the results are extremely similar.
Finally, this is not meant to bash AI or any specific site that helps users generate sites. It is just general curiosity and awareness for users who want to use this to build content.
The Generated Site
When I went to the site to build my own, I simply said I was a personal business and where I was located. After that, a couple a minute later, POOF! The site was complete!
The site had 5 main sections:
- Introduction banner with "Get Started" button
- Our Services section with 3 "Learn more" links
- A carousel with testimonials
- A photo gallery
- A contact us section with 3 text input fields
Simple enough right? So what were the results?
Automated Issues
Using axe-core the site had 17 issues. 11 Critical issues and 6 serious issues. 17 does not sound like much, however the 11 critical issues are very big ones. They included:
- All form elements in "Contact us" section were missing labels
- The carousel buttons were missing an accessible label
- All the images in the "Gallery" were missing alt text
Although the site used native HTML (which is a massive plus) for form inputs and carousel buttons, the basic accessibility functionality was missing from this. Simple and for attributes were missing on all the inputs.
The other serious issues were color contrast, which most of these sites do allow you to change the color scheme to fix.
Keyboard Issues
The biggest keyboard issue that I found was the fact that focus indicators were very inconsistent across the page. Some elements would get it, and others would not so it was very easy to lose where you are on the page.
There is also a whole set of images in the "Gallery" section that is not accessible via keyboard at all. When using a mouse you can click on any of the images to open yet ANOTHER carousel. This whole section is not available to keyboard only users.
The rest of the site functions with a keyboard and works properly. This is mainly due to the fact that native HTML is used for all actionable items on the page.
Screen Reader Issues
Navigating the page was a little difficult, specifically in browse mode. Since the site itself seems to be using JavaScript to move from section to section as to what is in "focus" it can make navigating the page a little odd as it goes from section to section.
It also has multiple links and buttons that have the same text that makes it extremely difficult to know what button is associated with what section of content.
The final thing, was all images that did have alternative text had very basic text such as "banner image" or a randomly generated string.
Overall Thoughts
AI is here to stay for better or for worse. Generating sites using even pieces of AI is going to be the way that small business or even personal sites can be made easily. The positives from an accessibility perspective are:
- Use of native HTML
- Some practical use of ARIA
- Simplistic enough layout that doesn't cause cognitive overload
- Resize support is great
Do I think AI will be able to one day make fully accessible sites? My personal opinion is that accessibility will always be a human problem to solve and it will continue to require human solutions. It seems like AI could almost certainly find its way to creating fully accessible web sites some day, but my gut reaction is that that day is not any time soon.
We as accessibility advocates need to ensure we push that there are problems with generating sites leveraging AI and bring awareness to them in this ever changing space.
Top comments (4)
I bet AI can code better than the average developer (senior level even). And that's really sad.
My worry is that as developers start using these AI tools to a greater extent, they will become less skilled over time. In other words, they will become less capable of fixing accessibility issues than they are today.
What are the prompts that you used for building the page. Did you ask to make it accessible?
If you asked a SWE to build a page and not being explicit, they wouldn’t do it either. 🤣
Accessibility SHOULD be the default, but I know that unfortunately that isn't reality.