drone build Sun Sep 20 15:08:31 PDT 2026
This commit is contained in:
@@ -40,7 +40,80 @@
|
||||
|
||||
|
||||
|
||||
<style>.post-metadata {
|
||||
<style>#toc {
|
||||
float: right;
|
||||
margin: 1rem 0 1.5rem 1.5rem;
|
||||
width: min(calc(100% - 1.5rem), 23rem);
|
||||
/* 23rem is the width of the words 'table of contents' in my header font */
|
||||
/* yes, it's a bit hacky */
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
#toc {
|
||||
float: unset;
|
||||
margin-top: 2rem;
|
||||
margin-left: .5rem;
|
||||
width: calc(100% - .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
#toc details {
|
||||
border: thick solid var(--color-pink);
|
||||
border-radius: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#toc summary {
|
||||
position: relative;
|
||||
top: -1.5rem;
|
||||
left: -.75rem;
|
||||
width: fit-content;
|
||||
background: var(--color-bg);
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
#toc summary:focus-visible {
|
||||
outline: .15rem solid var(--color-teal);
|
||||
}
|
||||
|
||||
#toc summary::marker {
|
||||
font-size: 2.35rem;
|
||||
}
|
||||
|
||||
#toc h2 {
|
||||
margin-top: 0;
|
||||
display: inline;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
#toc nav {
|
||||
position: relative;
|
||||
top: -1.25rem;
|
||||
}
|
||||
|
||||
#toc li {
|
||||
margin-block: .45rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
#toc nav > ol {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* basically we want to style this `ol` as a `ul` */
|
||||
#toc ol > li {
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
#toc ol > li > ol > li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
#toc ol > li > ol > li > ol > li {
|
||||
list-style: square;
|
||||
}
|
||||
.post-metadata {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
@@ -438,6 +511,8 @@ body:has(dialog[open]) {
|
||||
color-scheme: light dark;
|
||||
|
||||
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
|
||||
/* if you change the header font, go to post-toc.css and fuck about with the width
|
||||
of the table of contents */
|
||||
--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
|
||||
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
|
||||
|
||||
@@ -496,7 +571,6 @@ body:has(dialog[open]) {
|
||||
}
|
||||
|
||||
/* Base */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@@ -1814,7 +1888,7 @@ switch (currentThemeValue) {
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article data-pagefind-body="">
|
||||
<h1 id="visual-site-builders-and-accessibility">visual site builders and accessibility</h1>
|
||||
<h1>visual site builders and accessibility</h1>
|
||||
|
||||
<div class="post-metadata">
|
||||
<p>
|
||||
@@ -1843,7 +1917,79 @@ switch (currentThemeValue) {
|
||||
<img class="hero" src="/img/roses.jpg" alt="Image unrelated to post. Two peach-colored roses, the farther away one a bit out of focus." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
|
||||
<p>Recently, I <a href="https://flipping.rocks/@inherentlee/117037989967706516" target="_blank" rel="external">asked on the Fediverse</a> about visual/drag-and-drop website builders and got a wealth of answers.</p>
|
||||
|
||||
|
||||
<aside id="toc">
|
||||
<details>
|
||||
<summary><h2>table of contents</h2></summary>
|
||||
<nav class="toc">
|
||||
<ol>
|
||||
|
||||
<li><a href="#blocs">Blocs</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#cowsites">Cowsites</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#figma-sites">Figma Sites</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#framer">Framer</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#kiki">Kiki</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#mmm.page">mmm.page</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#rapidweaver">Rapidweaver</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#showit">Showit</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#squarespace">Squarespace</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#startup">Startup</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#straw.page">Straw.page</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#univer.se">Univer.se</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#webflow">Webflow</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#webnode">Webnode</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#wobble-web">Wobble Web</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#wordpress-builders">Wordpress builders</a>
|
||||
|
||||
<ol>
|
||||
|
||||
<li><a href="#beaver-builder">Beaver Builder</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#divi">Divi</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
|
||||
<li><a href="#summary">summary</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<p>Recently, I <a href="https://flipping.rocks/@inherentlee/117037989967706516" target="_blank" rel="external">asked on the Fediverse</a> about visual/drag-and-drop website builders and got a wealth of answers.</p>
|
||||
<p>I want to evaluate based on some accessibility factors:</p>
|
||||
<ol>
|
||||
<li><strong>Semantic HTML:</strong> how well does the builder adhere to properly formed semantic HTML?</li>
|
||||
@@ -2097,7 +2243,7 @@ switch (currentThemeValue) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="mmm-page">mmm.page</h2>
|
||||
<h2 id="mmm.page">mmm.page</h2>
|
||||
<p><a href="https://mmm.page/" target="_blank" rel="external">mmm.page</a> 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.</p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -2291,7 +2437,7 @@ switch (currentThemeValue) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="straw-page">Straw.page</h2>
|
||||
<h2 id="straw.page">Straw.page</h2>
|
||||
<p><a href="https://straw.page/" target="_blank" rel="external">Straw.Page</a> 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).</p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -2339,7 +2485,7 @@ switch (currentThemeValue) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="univer-se">Univer.se</h2>
|
||||
<h2 id="univer.se">Univer.se</h2>
|
||||
<p><a href="https://univer.se/" target="_blank" rel="external">Univer.se</a> is a drag-and-drop builder with plenty of premade themes. I reviewed a premade theme to get started.</p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -2575,6 +2721,7 @@ switch (currentThemeValue) {
|
||||
<p>*Promotes generative AI features.</p>
|
||||
<p>**Usability concerns on iPad.</p>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
@@ -2612,47 +2759,47 @@ switch (currentThemeValue) {
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
|
||||
<h2 data-ha-exclude="">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/intro-to-wireframing/">
|
||||
<h2 data-ha-exclude="" id="intro-to-wireframing">intro to wireframing </h2>
|
||||
<a class="postlink" href="/framer-accessibility/">
|
||||
<h2 data-ha-exclude="">framer accessibility </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
|
||||
<img src="/img/framer.png" alt="A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features." loading="lazy" decoding="async" width="841" height="532">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/my-favorite-git-flag/">
|
||||
<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag </h2>
|
||||
<a class="postlink" href="/moving-images/">
|
||||
<h2 data-ha-exclude="">moving images </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." loading="lazy" decoding="async" width="1000" height="666">
|
||||
<img src="/img/cormorant.jpg" alt="Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/eleventy-lessons/">
|
||||
<h2 data-ha-exclude="" id="eleventy-lessons">eleventy lessons </h2>
|
||||
<a class="postlink" href="/an-intro-to-git/">
|
||||
<h2 data-ha-exclude="">an intro to git </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
|
||||
<img src="/img/goldeneye-tail.jpg" alt="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -2709,6 +2856,6 @@ switch (currentThemeValue) {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/visual-site-builders-and-accessibility/` was built on 2026-09-20T00:40:39.766Z -->
|
||||
<!-- This page `/visual-site-builders-and-accessibility/` was built on 2026-09-20T22:08:14.588Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user
