site builders v1

css/main.css

@@ -240,6 +240,7 @@ table {
 	border-spacing: 0; /* border collapse doesn't play nice with radii */
 	border-radius: .3rem;
 	border: thin solid var(--color-pink);
+	margin: 1.25rem 0;
 }
 
 th {

src/posts/2026/2026-08-05-visual-site-builders-accessibility.md

@@ -0,0 +1,228 @@
+---
+title: visual site builders and accessibility
+image:
+  src: 2026/roses.jpg
+  alt: Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus.
+tags:
+  - reference
+  - software
+---
+
+Recently, I [asked on the Fediverse](https://flipping.rocks/@inherentlee/117037989967706516){target="_blank" rel="external"} about visual/drag-and-drop website builders and got a wealth of answers.
+
+I want to evaluate based on some accessibility factors:
+
+1. **Semantic HTML:** how well does the builder adhere to properly formed semantic HTML?
+1. **Keyboard navigation:** is keyboard focus visible? Can it be customized? (I was going to review skip links, but I'm a half dozen sites in and none have supported them thus far, at least not without entirely custom code)
+1. **Reading order:** is reading order automatically correct? If not, what does the user have to do to ensure correctness?
+1. **Text alternatives:** is there support for alt text?
+1. **Color:** does the builder support light and dark modes? (Note that I am looking for builders for those with no HTML/CSS experience, and "you can customize with CSS" is not acceptable)
+1. **Other accessibility concerns:** anything else of note?
+
+I will score **1** (bad), **2** (mixed), or **3** (good). If there is nothing to note for the "other" factor, I will score it as a 2. These scores **will not be weighted** according to priorities, but purely summed for a final ranking.
+
+There are, of course, many more factors that could be evaluated, but I will be focusing on these high-level ones.
+
+Want to just see the final ranking? Pop down to the [summary](#summary).
+
+## Blocs
+
+[Blocs](https://blocsapp.com/){target="_blank" rel="external"} is a builder for MacOS, iPad, and iPhone. I had trouble getting a template loaded on my iPad, but I reviewed the Blocs website - built with Blocs, of course - for major issues. This is, I would assume, the shiniest version possible.
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | Most major elements missing (no `<main>`, `<header>`, `<footer>`; `<nav>` present for the top nav but not bottom). | 1 |
+| Keyboard navigation | Custom focus, missing in many areas on the Blocs site and turned off by default in the CSS - not sure if that is for this site or is the standard. The ability to potentially customize focus is interesting. | 1 |
+| Reading order | Good! Block-based layout helps significantly here I would guess. | 3 |
+| Text alternatives | Supported. | 3 |
+| Color | Light and dark modes are possible - [Blocs dark mode documentation](https://help.blocsapp.com/knowledge-base/dark-theme/){target="_blank" rel="external"}. | 3 |
+| Other | Difficulty with iPad app. | 1 |
+| | | **12** |
+
+## Cowsites
+
+[Cowsites](https://cowsites.net){target="_blank" rel="external"} is a simple site editor with no drag-and-drop elements.
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | Some oddities, like the `<header>` being inside the `<main>` while the `<footer>` was not. Repeated `<h1>`s. | 2 |
+| Keyboard navigation | Browser default focus outlines. Some clipping of focus outlines. | 2 |
+| Reading order | Good. Difficult to mess up when there are no drag-and-drop elements. | 3 |
+| Text alternatives | Both image title and alt can be set in the editor, but don't appear to be surfaced in the actual site. | 1 |
+| Color | Single color palette. | 1 |
+| Other | No `lang` attribute set. Gallery page links are three separate links to the same place, with lacking link text for links 2 and 3. | 1 |
+| | | **10** |
+
+## Figma Sites
+
+[Figma Sites](https://www.figma.com/sites/){target="_blank" rel="external"} allows you to turn a Figma design into a functioning website. It offers gen AI features. I tested two themes from Figma Community.
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | Depends *heavily* on developer. One was `<div>`s all the way down, one was built with actual semantic HTML using the "Accessibility" section of one of the sidebars (it allows you to specify the tag a design element corresponds to). Notably, not a lot or a total lack of links? One theme had some `<buttons>`s, the other was littered with click events and `tabindex="0"`. | 1 |
+| Keyboard navigation | Browser default focus outlines. One template *actually* had a skip link! | 2 |
+| Reading order | Not clear how order is determined. Potentially partially influenced by order of elements in the sidebar, but one theme tested did not adhere to that and the nav was the last in the reading order despite being top of the sidebar order. I can't publish on the starter plan, so I can't see how my own changes influence the site, but with a well-built theme the organization helps ensure that adding new elements puts them in a reasonable place in the sidebar order. | 2 |
+| Text alternatives | Supported. | 3 |
+| Color | Light and dark modes are possible - [Figma variable modes documentation](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables){target="_blank" rel="external"}. | 3 |
+| Other | n/a | 2 |
+| | | **12** |
+
+## Kiki
+
+[Kiki](https://tomotama.com/kiki){target="_blank" rel="external"} is a simple site builder with no drag-and-drop elements. You can customize the CSS to your liking. I played with the demo site.
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | It's `<div>`s all the way down. No headers. `<p>` tags used, at least. | 1 |
+| Keyboard navigation | Browser default focus outlines. Significant focus outline clipping. Should be fixable with CSS... if we wanted to write CSS. | 2 |
+| Reading order | Good. Difficult to mess up when there are no drag-and-drop elements. | 3 |
+| Text alternatives | Seemingly not present, though there are no images in the demo site. | 1 |
+| Color | Since you can write your own CSS, all color is customizable... if we wanted to write CSS. | 1 |
+| Other | No `lang` attribute set. No `title`. | 1 |
+| | | **9** |
+
+## mmm.page
+
+[mmm.page](https://mmm.page/){target="_blank" rel="external"} is a drag-and-drop builder. The preview doesn't show you a standalone page (it's a page that also has the mmm.page login/signup menu bar), so I looked at a few sites to get a sense for how it worked.
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | While there is a `<main>`, it's otherwise `<div>`s all the way down. Generally no headers, though sites seem to have a visually hidden `<h1>` that matches the site title. `<p>` tags used, at least. | 1 |
+| Keyboard navigation | Browser default focus outlines. | 2 |
+| Reading order | Order of elements added determines reading order. | 1 |
+| Text alternatives | Supported. | 3 |
+| Color | Single color palette. | 1 |
+| Other | No `lang` attribute. Preponderance of empty `aria-label`s. | 1 |
+| | | **9** |
+
+## Rapidweaver
+
+[Rapidweaver](https://www.realmacsoftware.com/rapidweaver/){target="_blank" rel="external"} is built exclusively for Mac. Ah, well.
+
+## Showit
+
+[Showit](https://showit.com/){target="_blank" rel="external"} is a drag-and-drop builder with a Wordpress backend for content management. I reviewed several different premade themes. Custom CSS is allowed.
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | Depending on theme, *some* landmark tags might be present. One theme reviewed enclosed each individual nav link in a `<nav>` tag. Ew. Text can be set to be wrapped in a variety of tags, including bare `<div>`s. | 1 |
+| Keyboard navigation | The default CSS reset for Showit removes focus outlines on some elements (form fields and buttons, but not links). In one tested theme, further focus outlines were missing. Browser default focus outlines. Despite detailed ability to customize hover states in-editor, no ability to customize focus states. | 1 |
+| Reading order | Determined by the user via reordering elements in the sidebar. | 2 |
+| Text alternatives | Supported. | 3 |
+| Color | Single color palette. | 1 |
+| Other | n/a | 2 |
+| | | **10** |
+
+## Startup
+
+[Startup](https://designmodo.com/startup/){target="_blank" rel="external"} is a block-based builder with pre-defined components and less freedom than some others on this list.
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | Pretty good! They've seemingly dropped `<main>` and instead used an array of `<section>`s, but components are automatically associated with `<header>`, `<nav>`, `<footer>`, etc. | 3 |
+| Keyboard navigation | Browser default focus outlines. | 2 |
+| Reading order | Very orderly thanks to the strictness of the components - it's one component after another. Moving pieces around within the components maintains correct reading order. | 3 |
+| Text alternatives | Supported. | 3 |
+| Color | Per-component color palette. | 1 |
+| Other | Forms are weak - unlabeled fields and buttons. For a built in search field, I'd expect better. The components by default are *super* animation-heavy and don't respect `prefers-reduced-motion`. | 1 |
+| | | **13** |
+
+## Straw.page
+
+[Straw.Page](https://straw.page/){target="_blank" rel="external"} is a drag-and-drop builder that bills itself as mobile-friendly. I looked at one of the offered themes, intentionally choosing one that should have intuitive reading order (spoiler: didn't matter).
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | It's `<div>`s all the way down. No headers. `<p>` tags used, at least. Lists are just `<p>`s. | 1 |
+| Keyboard navigation | Focus actively turned off. | 1 |
+| Reading order | Order of elements added determines reading order. | 1 |
+| Text alternatives | Not possible. | 1 |
+| Color | Single color palette. | 1 |
+| Other | n/a | 2 |
+| | | **7** |
+
+## Univer.se
+
+[Univer.se](https://univer.se/){target="_blank" rel="external"} is a drag-and-drop builder with plenty of premade themes. I reviewed a premade theme to get started.
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | It's `<div>`s all the way down. Headers exist, but there are multiple `<h1>`s and the headers skip levels. `<p>` tags used, at least.  | 1 |
+| Keyboard navigation | Browser default focus outlines. | 2 |
+| Reading order | Surprisingly intuitive! Univer.se uses a grid-based layout system and that seems to help programmatically determine reading order. | 3 |
+| Text alternatives | Supported. | 3 |
+| Color | Single color palette. | 1 |
+| Other | No `lang` attribute. | 1 |
+| | | **11** |
+
+## Webflow
+
+[Webflow](https://webflow.com/){target="_blank" rel="external"} is a drag-and-drop builder. Currently bottom of my review list due to AI features.
+
+## Webnode
+
+[Webnode](https://https://www.webnode.com) is a drag-and-drop builder (with gen AI features). I reviewed a site built in it sent by the recommender as well as one of the premade themes.
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | Properly uses `<header>`, `<nav>`, `<main>`, `<footer>`. Nice. | 3 |
+| Keyboard navigation | Browser default focus outlines. | 2 |
+| Reading order | Decent, thanks to a block-based editor. | 3 |
+| Text alternatives | Supported. | 3 |
+| Color | Single color palette. | 1 |
+| Other | n/a | 2 |
+| | | **14** |
+
+## Wobble Web
+
+[Wobble Web](https://wwwobble.org/) is a drag-and-drop editor that allows you to edit the code directly in browser as well. There's no preview site; you can download the code and view it locally or publish it yourself. While there's a lot of flexibility for text styling, it's all tied directly to CSS rules, so you need to know some CSS to be effective.
+
+| Factor | Notes | Score |
+|---|---|---|
+| Semantic HTML | It's `<div>`s all the way down. No headers. `<p>` tags used, at least. | 1 |
+| Keyboard navigation | Browser default focus outlines. Should be editable with CSS... if we wanted to write CSS. | 2 |
+| Reading order | Order of elements added determines reading order. | 1 |
+| Text alternatives | Supported. | 3 |
+| Color | Single color palette. | 1 |
+| Other | n/a | 2 |
+| | | **10** |
+
+## Wordpress builders
+
+Gotta dive into Wordpress to explore these and haven't yet.
+
+### Beaver Builder
+
+[Beaver Builder](https://www.wpbeaverbuilder.com/){target="_blank" rel="external"}.
+
+### Divi
+
+[Divi](https://www.elegantthemes.com/gallery/divi/){target="_blank" rel="external"}.
+
+---
+
+## summary
+
+Overall, I explored 11 builders, couldn't test 1 due to OS restrictions, and have 3 left for future review.
+
+| Builder | Score |
+|---|---|
+| Webnode* | 14 |
+| Figma Sites* | 13 |
+| Startup | 13 |
+| Blocs** | 12 |
+| Univer.se | 11 |
+| Cowsites | 10 |
+| Showit | 10 |
+| Wobble Web | 10 |
+| Kiki | 9 |
+| mmm.page | 9 |
+| Straw.page | 7 |
+| Rapidweaver | Couldn't test (MacOS only). |
+| Beaver Builder (Wordpress) | Yet to review. |
+| Divi (Wordpress) | Yet to review. |
+| Webflow* | Yet to review. |
+
+\*Promotes gen AI features.
+
+\**Usability concerns on iPad.