inherentlee/leecat.art-site
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drone build Tue Sep 8 09:15:34 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-08 16:15:34 +00:00
parent 45e23478ef
commit 4ed9e84a0a
295 changed files with 3605 additions and 3463 deletions
Download Patch File Download Diff File Expand all files Collapse all files
visual-site-builders-and-accessibility/index.html
+66 -18
View File
@@ -1670,7 +1670,7 @@ if (window.innerWidth > 650) {
</tbody>
</table>
<h2 id="figma-sites">Figma Sites</h2>
<p><a href="https://www.figma.com/sites/" target="_blank" rel="external">Figma Sites</a> allows you to turn a Figma design into a functioning website. It offers gen AI features. I tested two themes from Figma Community.</p>
<p><a href="https://www.figma.com/sites/" target="_blank" rel="external">Figma Sites</a> allows you to turn a Figma design into a functioning website. It offers generative AI features. I tested two themes from Figma Community.</p>
<table>
<thead>
<tr>
@@ -1718,7 +1718,53 @@ if (window.innerWidth > 650) {
</tbody>
</table>
<h2 id="framer">Framer</h2>
<p>To be explored.</p>
<p><a href="https://framer.com" target="_blank" rel="external">Framer</a> is a full-featured site designer with a built-in CMS. It offers generative AI features.</p>
<table>
<thead>
<tr>
<th>Factor</th>
<th>Notes</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantic HTML</td>
<td>Tags can be set per-element in the &quot;Accessibility&quot; section of the right-hand pane. Takes work, but is doable with care.</td>
<td>2</td>
</tr>
<tr>
<td>Keyboard navigation</td>
<td>Browser default focus outlines. Some weird clipping of focus outlines in the testing I did. Focus states configurable with custom CSS.</td>
<td>2</td>
</tr>
<tr>
<td>Reading order</td>
<td>With proper layout settings, reading order can be correct. Takes some effort and can't really just be stumbled into.</td>
<td>2</td>
</tr>
<tr>
<td>Text alternatives</td>
<td>Supported.</td>
<td>3</td>
</tr>
<tr>
<td>Color</td>
<td>Light and dark modes are possible.</td>
<td>3</td>
</tr>
<tr>
<td>Other</td>
<td>&quot;Accessibility&quot; section of the right-hand pane allows adding tab index. Defaults to 1 rather than 0.</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td></td>
<td><strong>13</strong></td>
</tr>
</tbody>
</table>
<h2 id="kiki">Kiki</h2>
<p><a href="https://tomotama.com/kiki" target="_blank" rel="external">Kiki</a> 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.</p>
<table>
@@ -2012,7 +2058,7 @@ if (window.innerWidth > 650) {
<h2 id="webflow">Webflow</h2>
<p><a href="https://webflow.com/" target="_blank" rel="external">Webflow</a> is a drag-and-drop builder. Currently bottom of my review list due to AI features.</p>
<h2 id="webnode">Webnode</h2>
<p><a href="https://https://www.webnode.com">Webnode</a> 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.</p>
<p><a href="https://https://www.webnode.com">Webnode</a> is a drag-and-drop builder (with generative AI features). I reviewed a site built in it sent by the recommender as well as one of the premade themes.</p>
<table>
<thead>
<tr>
@@ -2133,6 +2179,10 @@ if (window.innerWidth > 650) {
<td>13</td>
</tr>
<tr>
<td>Framer*</td>
<td>13</td>
</tr>
<tr>
<td>Startup</td>
<td>13</td>
</tr>
@@ -2181,16 +2231,12 @@ if (window.innerWidth > 650) {
<td>Yet to review.</td>
</tr>
<tr>
<td>Framer*</td>
<td>Yet to review.</td>
</tr>
<tr>
<td>Webflow*</td>
<td>Yet to review.</td>
</tr>
</tbody>
</table>
<p>*Promotes gen AI features.</p>
<p>*Promotes generative AI features.</p>
<p>**Usability concerns on iPad.</p>
</article>
@@ -2234,43 +2280,45 @@ if (window.innerWidth > 650) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/comparing-text-editors/">
<h2 data-ha-exclude="" id="comparing-text-editors">comparing text editors </h2>
<a class="postlink" href="/designing-a-bag/">
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>software</li>
</ul>
<img src="/img/horsetail.jpg" alt="Image unrelated to post. Close up on a horsetail plant&#39;s stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
</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="/eleventy-lessons/">
<h2 data-ha-exclude="" id="eleventy-lessons">eleventy lessons </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/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </h2>
<a class="postlink" href="/screen-reader-optimizations/">
<h2 data-ha-exclude="" id="screen-reader-optimizations">screen reader optimizations </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
<img src="/img/crow.jpg" alt="Image unrelated to post. A crow poses on driftwood against a whitish sky." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -2306,6 +2354,6 @@ if (window.innerWidth > 650) {
</footer>
<!-- This page `/visual-site-builders-and-accessibility/` was built on 2026-09-06T16:03:11.875Z -->
<!-- This page `/visual-site-builders-and-accessibility/` was built on 2026-09-08T16:15:16.386Z -->
</body>
</html>