Web accessibility of Lovable  ## Metadata - Author: [[A11y explained with Diana]] - Full Title: Web accessibility of Lovable - Category: #articles - Document Note: --- tags: [#accessibility, #wcag22, #ai-tools, #keyboard-navigation, #a11y-testing, #wordpress] Author: Diana (web accessibility expert; last name not provided) Source: YouTube Reference: https://www.youtube.com/watch?v=5dsTzzMzcfA date created: 2025-09-08 17:00 --- # 🧩 Title: Accessibility Review of the Lovable AI Platform (Video Transcript Analysis) ## 🧭 Table of Contents: [📝 Summary](#-summary) • [📖 Main Content](#-main-content) • [🗒️ Notes](#-notes) • [📚 References](#-references) • [🗣️ Paraphrase](#-paraphrase) • [📰 Newsletter](#-newsletter) • [✅ Action Items](#-action-items) • [🧪 Hypotheses](#-hypotheses) • [📊 Methodology](#-methodology) • [❓ Questions](#-questions) • [🔮 Future Research](#-future-research) • [💡 Implications](#-implications) • [🧠 Learning Styles Assessment](#-learning-styles-assessment) • [♿ Accessibility Assessment](#-accessibility-assessment) • [🌍 DEIB Assessment](#-deib-assessment) • [🧮 Logical Validity](#-logical-validity) • [🎯 Conclusion](#-conclusion) ### 🔗 References (at-a-glance) 🔗 Video: https://www.youtube.com/watch?v=5dsTzzMzcfA 🔗 WCAG 2.2: https://www.w3.org/WAI/WCAG22/quickref/ 🔗 Accessibility Insights for Web: https://accessibilityinsights.io/ 🔗 NVDA screen reader: https://www.nvaccess.org/ 🔗 WordPress Accessibility Handbook: https://make.wordpress.org/accessibility/handbook/ ## 📝 Summary: 🔹 The presenter, Diana, audits Lovable’s site and a generated landing page using automated checks, quick keyboard-focus testing, and structural reviews. 🔹 She reports 32 automated issues on Lovable’s homepage (e.g., missing alt text, ARIA/name mismatches) and focus-visibility problems that impede keyboard users ([02:54](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=174), [05:40](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=340)). 🔹 A generated “dancer” landing page fares better but still includes contrast failures, two `<h1>` elements, and confusing landmarks ([11:15](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=675), [14:01](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=841), [16:49](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=1009)). 🔹 Diana stresses: automated tools are fast but incomplete; real user testing and assistive-tech checks remain essential. ## 📖 Main Content: 🔹 **Scope & approach** — Diana uses Accessibility Insights’ automated scan, quick keyboard traversal, heading/landmark inspection, and spot checks for contrast and accessible names. She explicitly limits the audit to a rapid pass, not a full WCAG conformance review ([00:07](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=7)). 🔹 **Lovable homepage** — Despite strong color contrast in many areas, automated scans flag ~32 issues; keyboard focus sometimes lands on hidden or unclear elements; some interactive controls appear only on mouse hover, leaving keyboard users stranded ([02:54](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=174), [05:40](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=340)). 🔹 **Generated landing page** — After prompting Lovable to make a WCAG 2.2-compliant “dancer” site, the published result shows fewer automated issues (three noted), yet still fails on contrast (“Get in touch”), dual `<h1>` usage, and odd landmark structure; footer links lack focus in one column ([11:15](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=675), [14:01](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=841), [21:18](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=1278)). 🔹 **Key message** — You can generate usable prototypes quickly with AI, but you must plan for accessibility from the start and verify with manual checks, assistive tech, and user feedback ([23:37](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=1417)). ### 🗒️ Notes 🔹 [02:54](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=174) Automated scan: ~32 violations on Lovable’s homepage; missing alt text; ARIA/name issues. 🔹 [03:36](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=216) Presenter expected good contrast; still many non-contrast failures surfaced. 🔹 [04:44](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=284) Keyboard focus sometimes lands on hidden controls; indicates poor focus management. 🔹 [05:40](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=340) Hover-revealed action buttons not reachable by keyboard; screen-reader users may miss features entirely. 🔹 [07:31](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=451) Prompts Lovable to create a WCAG 2.2-compliant “dancer” landing page. 🔹 [11:15](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=675) Published page: three automated issues, including “Get in touch” contrast failure. 🔹 [14:01](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=841) Structure: two `<h1>` elements; overall headings otherwise logical. 🔹 [15:45](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=945) Landmarks: missing clear `<main>`; footer navigation nested strangely. 🔹 [16:49](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=1009) Accessible names: urges descriptive, non-duplicated labels (“View my work” vs contextless “Click here”). 🔹 [19:08](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=1148) Keyboard pass: visible focus mostly good, but some sections trap or skip focus. 🔹 [21:18](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=1278) Forms: requires programmatic error messaging for SR users; footer column lacks focusability. 🔹 [23:37](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=1417) Takeaway: AI speeds prototyping; accessibility still needs deliberate, manual verification. ## 📚 References: 🔗 Video transcript source: https://www.youtube.com/watch?v=5dsTzzMzcfA 🔗 WCAG 2.2 Quick Reference: https://www.w3.org/WAI/WCAG22/quickref/ 🔗 Accessibility Insights for Web: https://accessibilityinsights.io/ 🔗 NVDA (screen reader): https://www.nvaccess.org/ 🔗 WordPress Accessibility Handbook: https://make.wordpress.org/accessibility/handbook/ ## 🗣️ Paraphrase: 🔹 Original idea ([02:54](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=174)–[05:40](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=340)): “The Lovable homepage looks high-contrast, but automated checks still find 32 issues, including alt-text and label problems. Keyboard focus sometimes lands on hidden elements.” 🔸 Paraphrase: The homepage appears visually strong; however, an automated audit flags dozens of issues, such as missing alternates and mislabeled controls. Keyboard-only users hit hidden targets and unclear focus states, which blocks navigation. 🔹 Original idea ([14:01](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=841)–[16:49](https://www.youtube.com/watch?v=5dsTzzMzcfA&t=1009)): “The generated page uses two H1s and odd landmarks; contrast fails on a key button; accessible names need to be specific, not generic.” 🔸 Paraphrase: The AI-built page duplicates the main heading and organizes landmarks in confusing ways. A primary button fails contrast. Control labels should describe their function and destination, not rely on vague phrases. ## 📰 Newsletter: 🔹 **Learning web dev, faster:** AI builders can spin up prototypes in minutes. Yet accessibility still requires human eyes and assistive-tech checks. 🔹 **A11y update:** A quick pass with Accessibility Insights caught 30+ issues on one AI-generated page. Contrast, keyboard focus, and labels matter. Start with WCAG 2.2 and test with NVDA. 🔹 **Community highlights:** The WordPress Accessibility Team continues to publish practical guidance—bookmark the Handbook and share it with contributors. 🔹 **Fresh tools:** Try Accessibility Insights for Web (free) and NVDA. They’re lightweight and effective for a first sweep. 🔹 **Links:** WCAG 2.2 → https://www.w3.org/WAI/WCAG22/quickref/ • A11y Insights → https://accessibilityinsights.io/ • NVDA → https://www.nvaccess.org/ • WP A11y Handbook → https://make.wordpress.org/accessibility/handbook/ ## ✅ Action Items: 🔹 **Use-case brief (DevRel/OSPO):** Draft a 1-pager showing how AI page builders fit secure, compliant, accessible product pipelines at GoDaddy. 🔹 **Contributor pathway:** Create a “first-issue” set for accessibility: contrast checks, heading maps, focus order, alt text. Route through WordPress.org projects and internal repos. 🔹 **Education kit:** Record a 10-minut - Summary: In this video, I dive deep into the web accessibility of Lovable’s main page, evaluating how well it meets accessibility standards and offers an inclusive experience for all users. As a certified web accessibility expert, I share insights on what works well and what can be improved. Plus, I used Lovble to create a simple, clean landing page and checked how accessible its web content. If you care about making the web accessible and want practical tips on combining AI with accessibility best practices, this video is for you! What you’ll learn: ‧ Key accessibility issues on Lovable’s homepage ‧ How to evaluate web accessibility with real-world examples ‧ Step-by-step AI-generated landing page creation and check of its accessibility ‧ Best practices for accessible design and coding If you find this helpful, don’t forget to like, subscribe, and hit the bell icon to stay updated on more accessibility insights and web development tutorials! - URL: https://www.youtube.com/watch?v=5dsTzzMzcfA&list=WL&index=3 Hello everybody. My name is Diana andI’m a web accessibility expert. So todaywe will give a shout to Lovable.This is a very popular AI platformto create web apps or websites or whatever you want, actually,using AI. And even I tried to usethis platform before to create mylanding page, as many web developers do. Ididn’t really have time towork on my own web pages. I was working on my clients.So I decided to use this tool to see ifit can help me create something fast,something good, and something modern.It’s true that it can help a lot, but ittook me a lot of time to make itaccessible because for me, as a webaccessibility expert, whatever I createshould be 100% accessible.Today we will test how accessible theplatform itself is, and we will try tocreate a landing web page and see howaccessible it is as a result. So I’lljust share my screen with you.Okay, that’s where it is. Okay, so thisis Lovable. This is just the webpage that you see if you open theirwebsite. And now we will take a lookwith Accessibility Insights for Web. Extension how accessible it is. I shouldwarn that a full accessibilityaudit takes time, and if I do this onthe video, it might take several hours.So, in order to be fast and efficient,I will use an automatic tool– an automatic check. It will not be afull accessibility check, but it willtell us if it's accessible or not. Likefor example, if it finds zeroaccessibility-related issues, we candig deeper and findsomething during a deeper and bettermore profound analysis. But we will notdo it today. So let's just take a lookat something on the surface if it'saccessible or not. And I hope you cansee. So, I turn on automatic checks foraccessibility insights for the web extension and we'll take a look to see if it'ssuccessful. Okay. So already, we can findmany mistakes. My first idea was that it has good colorcontrast because it's mostly white fonton a black or very dark background. Thiswas good. Here, you cansee some examples from thecommunity. Everything was white on black,which I considered to be good, butyou can see that there are still a lotHow many mistakesprecisely? We will check right now. Sowe have precisely 32 mistakes thatare found automatically. So this isnot so good. It can be seen thatthey concentrated on AI technology, butnot on how their tool is accessible. We have problems correlated to area labelsand button names, as well as alternative textfor images missing. Yes, here they are.We can see them. So, yes,it's these elements. We can also see other problems relatedto accessibility, like with the meta viewport link.Sorry, it's alittle bit hard to read it here. Yes,but you can see that actually, inevery section, there are some problems. Even though it has a good contrast,there are no contrast-related issuesthat I found, but the rest has problems. Ican also take a look right now at thefocus and the keyboard accessibility. IWill not check here for screen readeraccessibility, as I will not turn on my NVDA programto check if the site is accessible forscreen readers because, on the video,it's not really heard well in theresult. So right now, we will check thefocus, and I will just try to go with theLet’s use the keyboard and see if we can see thefocus clearly. Yeah, Iwould say that I can see where I amon the page. Right now ithas disappeared. I think it’s super basic. That’s where we are, but I’m not sure. Yes.Some elements do not have a strong focus.Okay. I don’t understand why Ineed to click twice. I guess it’sabout the outer layer; it goes to thishidden button. This is aproblem. It can’t be seen, and even for meI didn’t know it existed until Ifocused on it with the mouse. This is amistake for sure. So, here we go through the elements and thesuggestions.Yeah, with the keyboard,these buttons that appear on thefocus remix and preview, we don’t seethem. When we click on the elements, thenit moves up, but nothing shows on the screen; we cannot seeanything. If these elements aren’t accessiblefor the screen reader,this means that people who use the keyboardwill not hear that something is there;they will think that it’s a mistake, or thereThere is some issue with an image because itmoves up; it becomes shorter in height. But, uh, the rest we don’t see. Wedidn’t see that there are some features,and this is a big problem. I already seethat there are a lot of problems withthe main page of the Lovable website. Uh, buthere the footer is very good, with a good background, and I can see the focusof all the buttons. I didn’t checkthe links clearly because, you know, theaccessible names and the name of thelink should be the same, or it shouldcontain the same phrases. Um, so rightnow, it’s just a fast check to understandif it’s successful. So, the website, themain page of Lovable is not good with webaccessibility. That’s what I can sayright now. And, uh, we can try tocreate a simple landing web page tosee how accessible the result is. So, forexample, uh, I need to createa simple landing page —a landing web page, um, about me as adancer, for example. Uh,it should beum,fullycompliant to WCAG. 2.2.So, BCAG 2.2, for those who don't know,it's the criteria for web accessibility,international ones. If you followthem, then it means that you are mostprobably accessible. However, we should neverforget about real user experience.After becoming accessible, youneed to test your tool to ensure that there's nothing missing,because the criteria are like rules;they are not 100% applicable toall disabilities and all the needsof people. Okay, so let’s tryto see the result and how it’sgoing to look. It will take a little bit of time to create a landing web page,but I will be with you during thistime, and, yeah, we can see how itcreates, how it thinks, and how AIliterally creates the web page andwhich steps it goes through. This isgreat! When I was creating mylanding web page, I had to change manytimes because, usually, when youcreate without an AI tool, it takes a longtime. Probably all web developers know thatto create from scratch it takes much time. First, you need todesign. First, you need to think. What you need, then, is to design a solutionon paper. Just structure what youneed to code. Then, you code the firstversion, add information, images, and links.Then you need to be sure that everything isaccessible. It’s very good to use AI toolsto create a first prototype of the web page.It's really great because it takes several minutes,depending on how complicated it is. But for a web designer,it would take much longer. I don’t know,probably there are web designers who doeverything very fast, but I prefer theapproach of deep analysis and thinking a lot beforeyou actually code. I think it'simportant in order not to redo contenta hundred times what you have already created.Think about the final product and do it right. So with the Loable, I created my landing page for theclients, and it was very fast, but Ihad to work a lot on accessibility forthe web page. Right now, we will seewhy my web page was more complex,with precise sections and information that I neededto include. And here I just wrote that, okay, weCreate a simple landing web page about dance. There are not so many real requirements,and the Lovable AI tool is free to createwhat it wants. For us, what is important — and the only requirement thatwe wrote down — is the web accessibility ofthe product, and that's what we willsee. Right now, it's editing the components andthe contact section.Well, it sounds good. Usually, the contact sectionis in the footer or at the end of theweb page.Oh yes, right now it's in the footer.I was right; it was just before the footer.We will see how it goes. I hope that the result will come soon.Please let me know in thecomments if you tried Lovable.What was your experience with this solution? Right now, many people are using it, and it's very popular.So, it's important to check its web accessibility.I think it's ending.Yes, we got some notifications. That's great,because we need to wait for some time.Okay. This is our site.I will go straight to publish it,and after I publish, I will be able to. Use the Accessibility Insights for Webextension in order to analyze it.So it's publishing.I'll just copy the link and I'll open ithere.Okay.So that's how our website looks like. UhI can already see here that there is aproblem with the color contrast because"Get in touch" cannot be seen. I thinkit's less than one for the color contrastratio. Uh because I really can hardly seeit here. Uh, but never mind, this isjust one thing. We will check everythingelse. So it's uh black text on whitebackground. This is good for the contrast color ratio. And umhere we see the styles expertisesection. This is good. And uh we go toexperienceand uh some dates, like some um online CVthat were created for us and the contactarea. Okay. So let's take a look at howaccessible it is.That's what we will do right now. Andso it shows that there are just threemistakes, three issues related to webaccessibility with the color contrast. Iguess it was that one that we sawuh in the beginning, the button. Yeah. Right. Actually, it's all in thebeginning. That's what it says to me. Umyes, and here there is a problem with thebutton. Probably we cannot putthe focus on it, and there is the sameproblem here. Yes, right now I will check.Okay, so these are mistakes that arenoticed automatically. Now we'll checkfor example, uh, heading structure: is itcorrect? So I already see that there aretwo H1 headings. This is a big mistake. It's the same as if you would buy a bookwhich has two titles, uh, two names. Uhthis cannot be. There should bejust one H1, and this is a hugemistake. Huge! No, even from theoptimization point of view, uh, therobots of the uh, Googlesearch or whatever searching agent youare using, um, they will consider it abig mistake. They will not be able tounderstand how to, uh, what to think aboutyour site, what it's about because it hastwo H1. It's very confusing for them.So, we see two H1, H2,uh, level with H3 and H4. Okay, thisseems to be good. Uh, yeah, I would saythe heading structure, except for thefact that there are two H1 headings,it's quite good. Yes. I don't see problems here. It'svery logical for me. From myperspective,yes, it looks good, except for the onething that I mentioned. Here wecan see with the extension headings maphow it looks like. I like thestructure. It's very logical. However, there is one big mistake. Now we will take a look at, for example, landmarks. Okay.We have a section introducing the dancer,in the region of navigation. It's a little bitunclear; I don't understand what exactly thissection contains. Iwill take a look later more closely.There is a navigation menu part.Okay. Then we have the section about, Ithink there is actually no main sectionthat would contain all of theinformation of the web page.That's what I don't see. It's allsegmented very much. But that's how it is. Thefooter is a little bit strange; thenavigation in the footer actuallyincludes another footer inside. I think this is right. The navigationis a little bit confusing for me, and itwill be confusing. It means that it willbe confusing for the screen reader. Um,okay. So we have some problems here andthere. That's what I would say. Uh, let'stake a look at accessible names. So, um, that's where we can see howwhat most probably a screen reader willhear if we use it. Um, a screen reader isa very important program — like the tool forpeople who cannot see the website.They actually use a screen reader tohear all the information. But it's notjust for people who cannot see. Thereare also some people who understandinformation better when they hear it. And for those types of people, it'seasier to navigate through the site witha screen reader. But if your site is notaccessible for the screen reader, theywill not see anything, or they will seesome wrong information. Like, um, forexample, for the image, they cannot understandwhat the accessible name of theimage is, but it can be something like img35. Just like, um, even me, sometimes in a hurry,I save an image with such a name, but I tryTo never upload it online because itmight affect the people who usescreen readers. The image should reallycontain what you have on it, especially its accessible name. So that's what we see. We see, um, get intouch, view my work. Um, I would saythat the accessible name, preferably, should be first.It shouldn't repeat itself.So you shouldn't have a button that says, "Clickhere," because they will not understandfrom the content what itmeans or where you lead the user.You need to be more precise about whatthe action will provide or where it leadsor what it represents. So, um, try to avoidshort titles, short names, and shortaccessible names. Um, everything shouldprovide more information, like, um, forexample, do we have some buttons or justyeah, there are not so many buttonsreally on this landing page.There are just these two in thebeginning; there are not really manybecause we have one web page.Let's take a look at the focus and thekeyboard accessibility. That's what I cancheck right now with you, and we willsee what we need to look at: thefocus should be visual. Is a focus coming with the keyboard orwith the mouse on the element? It shouldbe seen that we are here on the side. Uh,and all the interactive elements thereshould be accessible. There shouldn’t beany traps. So like we click on somethingor get somewhere, and then we cannot goaway from this element. We should avoidsuch situations. It shouldn’t be there. Okay. So, we go from the name of thewebsite. I use a keyboard. I use atab to navigate through the site. Okay.So, right now I don’t understand where Iam. I guess I’m at the logo,but I’m not 100% sure. I guess I’m atthe dance artist name. Uh, but as you cansee, there is no focus, so I’m a littlebit lost. Um, oh no, I was somewhereelse. Yeah. Like, uh, this was somethinglike navigation, like section hero that Ididn’t understand what was there. Soit’s some hidden section, uh, that Icannot even see. Okay. But here we seethe focus. So, we’re at the logo. We goto about, then styles, experience, contact. This is good. View my work. This isgood. Um, I just don’t understand why wehave two times, like, uh, it’s usually justthe button. Why is there something insidethe button? Uh, yes, and the colorThe contrast is really bad here where we canget the touch button. Um, but the focus isvisual. We can see where we are on theweb page. Here there is a contactform so we can get in. I don't thinkit's so much that it's working, and wecan send something right now because Ididn't really add my email or anything,so I didn't make it work. But it's veryimportant to settle the error messagesso that they can be not just visuallyseen, but also heard by thescreen reader. So, like, the person who istyping their name in the text editor forthe email, they should hear that this isthe wrong area to write your name. Pleasewrite your email. This is really important. So, we go through, yes, the focus can beseen. I think it's good. Here are thelinks to follow on social media.Yes, I would say, oh, but theservices, it's not, oh, yes, there is aproblem with this part. It's completelynot accessible. Um, so under the services,what's supposed to be a second row oflinks in the footer, it's not working atall. There is no focus; there is aFocus on the right row. This is theproblem. So, um, yes, and now the focus wentback to the top. I didn't even see thatit jumped up without going tothe right row, unfortunately. Uh, so we can see that there areproblems. Now let's take a look at themobile version. This will be the laststep for this fast check of webaccessibility of Lovable. So I will just choose responsiveness.Okay, let's take a look at this one. Um,what we are looking atis whether there is a problem.Something is moving; there are not somany elements, so it should not be sobad. But, uh, still, we need to take alook if we can see everything, if theelements are not shifting. Um,right now, yeah, I think it's good. Well, right now I cannot really scrollthe screen; there is no whitespace. Sometimes it happens with themistakes.Right now I don't see this. So, that'show it looks on the phone. I would sayit's a quite good result, and all theinformation is here, including the contactform. Okay. And the footer. Okay. So Ithink it looks quite good. Um, soThat's how it looked during our check ofLovable, and please let me know aboutyour experience with it. So what wefound is that even if you write down inyour prompt that you need an accessible website, and this is the only requirement that you have, you stillwill have a lot of mistakes and a lot ofproblems with focus, and a veryclear, obvious mistake that we had withthe button "Get in touch." Um, so this is abig problem. The website of Lovable,their own website, the first landingpage contains a lot of accessibilityrelated issues, but still it's a goodsolution, and I hope that they willcontinue developing websites and that theywill put more attention on webaccessibility. Thank you for being with me duringthis check, and please let me knowwhat your experience is. Have a good day., Web accessibility of Lovable, A11y explained with Diana, 01k4q4jftvcc3gxz8y89ak51f2.