<contenttype="html"><p>I made a spreadsheet of sticker vendors so you don't have to. And also ordered a bunch of sample packs, so you don't have to (and because I get very very into doing my research, and sample packs are very cheap).</p>
<p>I priced out <strong>3&quot;x3&quot; holographic die-cut vinyl stickers</strong> from US-based sticker vendors at three price points: 100 (or nearest above 100), 200 (or nearest above 200), and 500. Free shipping referenced <em>may</em> require a minimum to kick in - I noted it down as free if the minimum was below the price point for 100 stickers.</p>
<p>I did this work because my previous vendor, DieCutStickers, had notable print issues in the last batch I bought from them, and I decided to look for a new vendor. Because of this, they will not be listed.</p>
<p>Got a recommendation not in this writeup? Feel free to <a href="https://leecat.art/contact">let me know</a> and I'll price them out and add them.</p>
<p>Three other vendors are mentioned but will not appear in summaries: Sticker Guy, Sticker Mule, and Sticky Brand.</p>
<ul>
<li>Sticker Guy looks <strong>awesome</strong> for simple stickers (1 or maybe 2 colors printed on solid color vinyl), but holographic stickers are listed as temporarily unavailable, so I couldn't get a price quote.</li>
<li>Sticker Mule's CEO is a vocal Trump supporter.</li>
<li>Sticky Brand has started using generative AI marketing (this is secondhand information as I don't use instagram).</li>
<p>I cannot promise that other makers do not have issues similar to Sticker Mule or Sticky Brand; this is just what I surfaced in my research.</p>
<p>Death by Stickers stands out as <em>by far</em> the cheapest option for ~100 or maybe less, and still fairly competitive for ~200, though bumped out of the top slot by StickerGiant. If you want bulk, Brick City Printing comes out ahead - and they are union!</p>
<p>If you want really small lots, maybe try Sticker Bunnies - their pricing model is a flat per-sticker rate regardless of order size. Be aware, however, that they only take orders via email, so it may be a bit more of an involved process than most.</p>
<p>Bend Print Co. offers split backs or peel tabs for an increased sticker price. Sticker Robot mentions split backs in their FAQ, but sticker options only support peel tabs, also for an increased price. Vinyl Disorder offers peel tabs for an increased price.</p>
<p>It is of course worth it with many vendors to join their email list and wait for deals. These are the standard prices and do not account for sales or discounts.</p>
<h3 id="price-point-1%3A-100">Price point 1: 100</h3>
<p>Sticker Bunnies prices by sticker size and material - <strong>not</strong> quantity. 3&quot;x3&quot; holo die cut stickers are $0.90 per sticker - no bulk pricing. They also only accept orders via email (other than sample packs).</p>
<p>I did not price out Sticker Guy as I could not find pricing information for holographic stickers. I did find one table that listed holo stickers as temporarily unavailable. Still, they look like a great option for simpler sticker needs.</p>
<p><a href="https://www.motherjones.com/politics/2026/09/anthony-constantino-donald-trump-sticker-mule-congress-stefanik/" target="_blank" rel="external">CEO is a big Trump supporter</a>.</p>
<p>Sticker Ninja has an <em>amazing</em> amount of variety when it comes to glitter, shimmer, mirror finish, and more - not just your standard holographic. I stuck one to my laptop, and while I can't vouch for longevity at this time, it feels <em>quality</em> - nice sturdy vinyl.</p>
<p><img src="https://leecat.art/img/sticker-ninja.jpg" alt="Many stickers laid out on a desk, mostly with some variety of cutesy ninja iconography. There are a lot of shimmery, shiny, or glittery ones. A couple say things like 'queer joy is a revolution' or 'love beyond the binary'." loading="lazy" decoding="async" width="1000" height="590"></p>
<p>StickerGiant has a very comprehensive and informative sample pack showcasing a wide variety of materials ranging from the holo die cuts I priced out to kraft paper labels. They also include color samples on their materials for reference.</p>
<p><img src="https://leecat.art/img/sticker-giant.jpg" alt="An array of stickers on a table. All stickers are either labeled with their materials or their design is fully dedicated to describing their materials. There are many labels and die cut stickers." loading="lazy" decoding="async" width="1000" height="660"></p>
<p><img src="https://leecat.art/img/sticker-giant-colors.jpg" alt="CMYK swatches on glossy and matte samples of holo, white, and clear, as well as on kraft paper." loading="lazy" decoding="async" width="1000" height="750"></p>
<p>Sticky Brand has apparently gone pretty hard in on generative AI marketing. I priced them out (and ordered some stickers due to a <em>deep</em> discount) before learning this, so I'm noting prices down for reference, but I don't recommend them.</p>
<li><a href="https://docpop.org/2025/10/some-free-sticker-designs-and-where-to-print-them/" target="_blank" rel="external">Some Free Sticker Designs and Where to Print Them</a></li>
<contenttype="html"><p>this is a casual introduction to the fediverse (mastodon et al.) I wrote for a friend. I have shared it a few times, so I'm putting it here for ease of reference.</p>
<p>the general style of fedi is microblogging (and sometimes more macroblogging). There's posts (image/video/audio and polls supported) and hashtags. Depending on your server, your post character limit will vary - some servers allow posts as long as you would ever want, but servers that haven't customized their post limit will be at 500 if I recall correctly. My favorite features of fedi are a) it is not corporate-run and b) there are <strong>no ads!</strong></p>
<p>usernames are @user@server. Your server determines things like your post limit, what your UI looks like, who your mods are, and what rules you have to follow. Most of the UIs are pretty similar, so don't worry about that - just know that if you hop servers the interface may be a new color or have a few small changes. (You can also on mobile use an app - I don't recommend the &quot;main&quot; mastodon app. I use tusky on android and like it. Idk about apple, maybe ask for recs.)</p>
<p>all servers can, in theory, talk to each other. It's like email, using gmail doesn't mean you can only communicate with other gmail users. <strong>However,</strong> in practice, some servers have &quot;defederated&quot; from others, or have limitations in place that mean you'll review notifications from people on that server before accepting them. &quot;Defederation&quot; basically just means blocking - when two servers are connected, we say they are &quot;federated&quot; - this is where the &quot;fed&quot; part of &quot;fediverse&quot; comes from. (Mastodon, on the other hand, is just one of many apps that make up the fediverse.)</p>
<p>by and large, all (good) servers have defederated from the really trashy ones that host bigoted shit. But there's some borderline cases. For example, the &quot;main&quot; mastodon server run by the people who develop mastodon - mastodon.social - is huge and has signups totally open to anyone with no review. That means it is very vulnerable to waves of spam or rather unfriendly content. Because of this, some very solid servers consider limiting or blocking mastodon.social (or already have) despite its relevance as a huge presence in the fediverse.</p>
<p>because of the size, I would <strong>never</strong> recommend signing up with mastodon.social. Your moderation experience is likely to be <strong>terrible</strong>. Being on a smaller server allows you to have a more personal relationship with your mods!</p>
<p>speaking of your mods, they are usually moderating and paying for the server at no cost to the users, and it's good practice to chuck them some change every once and a while.</p>
<h2 id="moving-between-servers">moving between servers</h2>
<p>you can migrate between servers, and your old account will point visitors over to your new account - but be aware that <strong>your posts don't migrate with you</strong>. This is very annoying for many people. The posts won't go away (they're still attached to the old account), but you won't be able to continue to edit them or see notifications for them. If you're really attached to a particular post, I recommend re-making it on the new account.</p>
<h2 id="other-benefits-and-community-norms">other benefits and community norms</h2>
<p>you can edit posts! You can pin posts to your profile! And if you're invested in digital privacy, you can set a deletion timeline for your posts (with granular settings like &quot;posts with at least this many likes/boosts don't get deleted&quot; and similar rules). You can also set your account up so you have to manually approve people before they can follow you (because of this, it's a good idea to fill in some basic profile info before following people - a lot of people who manually approve followers will deny requests from empty profiles).</p>
<p>image/video/audio content supports alt text and I highly recommend writing it, as many users won't boost posts that lack alt text. Depending on what software your server is running, you may or may not be able to set alt text for your profile/header photos - this is a newer feature that not all servers have yet, so I would recommend adding alt text for those pictures somewhere in your profile even if you are able to set it.</p>
<p>posts also include a content warning or subject field, and it's generally good practice to use it for sensitive topics - some people also just use it more like an actual subject field. Some common abbreviations for CWs are &quot;mh/ph&quot; - mental health/physical health - and &quot;pol&quot; - politics. Idk why people abbreviate their CWs when the character limits are often so big.</p>
<h2 id="choosing-a-server">choosing a server</h2>
<p>choosing a server can be daunting. It's helpful to look at things like the rules and the size of the moderation team compared to the size of the userbase. The server name can be part of your choice! That's a tiny but fun benefit of unique servers. For example, I am at <a href="https://flipping.rocks" target="_blank" rel="external">flipping.rocks</a> and we love the outdoors, critters, etc. It's not as crafty of a server, but my photography and general love of nature fits in really well (and often you don't need to &quot;fit&quot; a server really - it's just nice to have a theme).</p>
<p>I generally recommend that people use their first 3-6 months looking at other servers and listening to the folks around them about whether they like their server. You may feel right at home in your starting server, or you may find something you like better, in which case you can learn how to migrate (happy to help).</p>
<p>your feed will be oh so empty! There is no &quot;algorithm&quot; in the sense that we think of one in other corporate-run social medias. What you see is the posts/boosts of people you follow, as well as hashtags you follow, in reverse chronological order.</p>
<p>I recommend a few things to get started:</p>
<ul>
<li>make a post with the hashtag #introduction as well as #hashtags of your interests, and say hi! That lets people meet you and introduce themselves</li>
<li>check out the &quot;local&quot; feed for your server and see who is around on there to follow</li>
<li>use tools like <a href="https://communitywiki.org/trunk" target="_blank" rel="external">communitywiki.org/trunk</a> or <a href="https://fedi.directory/" target="_blank" rel="external">fedi.directory/</a> to find people based on topic</li>
<contenttype="html"><p>FediZineFest returns for for its third run in 2026-2027. View the <a href="https://fedizinefest.fyi" target="_blank" rel="external">FediZineFest site</a>, or <a href="https://ko-fi.com/inherentlee/shop/fedizinefest2026_2027" target="_blank" rel="external">buy zine bundles</a>.</p>
<contenttype="html"><p>Made from <a href="https://www.etsy.com/listing/900951877/pdf-pattern-mouse-coin-purse-leather-diy" target="_blank" rel="external">a pattern by AnnaleatherHK on Etsy</a>.</p>
<contenttype="html"><p>This is a work in progress post originally written for a colleague beginning to explore <a href="https://framer.com" target="_blank" rel="external">Framer</a>, a visual site designer with CMS. It walks through some major web accessibility topics, first generally and then as they relate to Framer, with links to relevant resources.</p>
<h2 id="accessible-from-the-beginning">Accessible from the beginning</h2>
<p>Accessibility <strong>must</strong> be built from the start of a project. Retrofitting a project to be accessible requires far more effort than designing for accessibility from the start. Building with accessibility in mind prevents time consuming and expensive reworks.</p>
<li><strong>Assistive technology (AT):</strong>&quot;technology used by individuals with (varying levels and kinds of) disabilities in order to perform functions that might otherwise be difficult or impossible. It is an umbrella term for a wide variery of tools, including tools that enable access to information on the Web. ... Keyboards, screen readers, braille displays, voice recognition software, switch controls, and screen magnifiers are examples of high-tech assistive technology. Operating system and browser accessibility display modes (such as dark mode, and Windows High Contrast Mode) are also a form of assistive technology.&quot; (Sara Souiedan, <a href="https://practical-accessibility.today" target="_blank" rel="external">Practical Accessibility</a> - content gated behind paid course)
<li>See <a href="https://tetralogical.com/blog/2021/12/24/browsing-with-assistive-technology-videos/" target="_blank" rel="external">Browsing with Assistive Technology</a> for an overview of some common methods/uses of AT.</li>
<li><strong>Screen readers (SR):</strong> A type of AT aimed at Blind/low vision users which reads aloud page content. Notably, SRs do not simply read page content in order; they have complex shortcuts which allow users to summarize links on a page, skip headline-by-headline, move to landmark sections, and more.</li>
<li><strong>Web Content Accessibility Guidelines (WCAG):</strong>&quot;the standard that defines how to make Web content more accessible to people with disabilities. It defines a baseline set of guidelines that digital content must meet in order to provide minimum levels of accessibility.&quot; (Sara Souiedan, Practical Accessibility again)</li>
<p>Most HTML elements are semantic, that is, they convey meaning. Labeling something an <code>&lt;h1&gt;</code> doesn't just style it like a header; it also means that AT can understand it to be a header (this also helps with SEO - a lot of things that improve accessibility improve SEO as well). See the Mozilla docs for a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements" target="_blank" rel="external">list of semantic HTML elements</a>.</p>
<p>Notably, <code>&lt;div&gt;</code>s and <code>&lt;span&gt;</code>s are not semantic and convey no meaning. They are used for styling alone.</p>
<h3 id="semantic-html-in-framer">Semantic HTML in Framer</h3>
<p>Semantic HTML elements can be applied to any Framer element using the &quot;Accessibility&quot; section in the right-hand sidebar. Read about <a href="https://www.framer.com/help/articles/semantic-tags-navigation-footer/" target="_blank" rel="external">using semantic tags for navigation and footers</a> - this applies to far more than the two elements mentioned.</p>
<p>While Framer allows you to set the <code>&lt;span&gt;</code> tag on elements, avoid this unless you are <em>only</em> utilizing it for styling.</p>
<p>The order of elements in an HTML document is referred to as the <strong>reading order</strong>. While visual styling can change the flow of elements in a page, SRs will follow reading order. It's important for your reading order to match the visual flow of elements on the page for two reasons:</p>
<ol>
<li>Those elements are presumably in visual order for a reason! A different reading order may make them confusing or totally unfollowable.</li>
<li>Low vision or partially sighted users who rely on both screen visuals and SRs will suffer if the visual content does not match the audio content.</li>
</ol>
<h3 id="reading-order-in-framer">Reading order in Framer</h3>
<p>Reading order is maintained in Framer in two ways:</p>
<ol>
<li>When layouts are applied effectively via the &quot;Layout&quot; section in the right-hand sidebar, the visual order of the elements guides the reading order.</li>
<li>In the absence of the above, the order of the elements in the left-hand sidebar determines reading order. Notably, reading order seems to go from bottom to top in this case rather than the intuitive top to bottom.</li>
<p>Following from reading order, we reach the concept of keyboard navigation. The ability to navigate the web without a mouse is core to several forms of AT as well as improving quality of life for savvy internet users - and anyone filling out web forms. Using the <code>TAB</code> key to move through a webpage navigates through the reading order, landing on every interactable element it finds. What is an interactable element? There are four kinds:</p>
<ol>
<li><strong>Links</strong> bring a user to a new page (or sometimes a different section of the same page)</li>
<li><strong>Buttons</strong> perform an action without changing pages</li>
<li><strong>Form controls</strong> allow user input</li>
<li>Any element with the <strong><code>tabindex</code></strong> attribute set can be tabbed to. Notably, if tabindex is set, interacting with the element should always do something. Use tabindex <em>extremely</em> sparingly and with intention.</li>
</ol>
<h3 id="keyboard-navigation-in-framer">Keyboard navigation in Framer</h3>
<p>Links, buttons, and form controls are tabbable by default. When tagged as the correct HTML element, they will function as expected.</p>
<p><a href="https://www.framer.com/help/articles/tab-order-customization/" target="_blank" rel="external">Framer supports adding the tabindex attribute</a>. If you <em>must</em> do this for some reason, make sure to set its value to 0 - Framer defaults to 1. 0 will maintain the reading order established by layout and the left-hand sidebar; 1 will place the tabbable element first in the tabbing order.</p>
<p>I really recommend avoiding complex keyboard navigation like dropdowns (really not that complex, but... basically anything that doesn't just use the tab key suffers). They seem pretty impossible to remediate. If possible, it requires <em>extensive</em> custom code.</p>
<p>When navigating with a keyboard, there should always be visual indication on the screen of where we have navigated to. This indication is referred to as <strong>focus</strong> or the <strong>focus indicator</strong>. Browsers have default focus stylings, usually an outline around the element, but focus can - and frequently should - be customized with CSS. Default focus outlines may not have very high contrast against the elements in your website, and, unless you are testing with many browsers, you can't easily confirm that all default focus indication works well with your color scheme. Additionally, default focus may clash with your site and impact how elements like your forms look in use.</p>
<h3 id="keyboard-focus-in-framer">Keyboard focus in Framer</h3>
<p>Framer does not currently allow for customizing keyboard focus in the editor. It must be done using <a href="https://www.framer.com/help/articles/how-to-add-custom-code/" target="_blank" rel="external">custom CSS</a>.</p>
<p>In my tests, it was very possible to clip out the browser default focus outline with certain padding settings. Ensure that at least 3px of padding surrounds tabbable elements. Make sure to review your site by tabbing through the page(s), and ensure that a full outline surrounds all interactable elements.</p>
<p>Skip links allow keyboard users to bypass large repeated blocks of content (such as a top nav). Without a skip link, a keyboard user will not stay long on a site - after moving to a new page, they may realize they have to tab through the entire nav again and leave.</p>
<p>Skip links are generally invisible to mouse users, and only appear when tabbing around a page. To see an example, open <a href="https://webaim.org/" target="_blank" rel="external">WebAIM (Web Accessibility in Mind)</a> and hit the <code>TAB</code> key. Notice the red box that appears in the upper left that reads &quot;skip to main content.&quot;</p>
<h3 id="skip-links-in-framer">Skip links in Framer</h3>
<p>Skip links in Framer require custom code, both React and CSS.</p>
<p>Text alternatives - alternative text, captioning, audio descriptions, etc. - are the most commonly thought of form of web accessibility. You likely need no further explanation of what they are and why they matter, but they can be rather daunting to write. I recommend reading <a href="https://adrianroselli.com/2024/05/my-approach-to-alt-text.html" target="_blank" rel="external">Adrian Roselli's approach to writing alt text</a>.</p>
<h3 id="text-alternatives-in-framer">Text alternatives in Framer</h3>
<p>Text alternatives can be easily set by double clicking on the media item in question to open the editing dialog.</p>
<h2 id="color">Color</h2>
<p>There are a couple areas to consider when it comes to color:</p>
<ol>
<li><strong>Light and dark modes</strong> are both accessibility needs, and a site that only offers one limits access of some potential users.</li>
<li><strong>Color contrast</strong> will improve users' abilities to view and read your site. WebAIM covers <a href="https://webaim.org/articles/contrast/" target="_blank" rel="external">color contrast as it relates to WCAG</a>. While you can use <a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="external">WebAIM's contrast checker</a>, I recommend finding a more fully-featured color design tool that incorporates contrast checking, luminance comparison, color vision simulation, and more. My personal tool of choice is <a href="https://atmos.style/" target="_blank" rel="external">Atmos</a>.</li>
<li>Ensuring that <strong>color alone is not used to communicate meaning</strong> helps users with various color deficiencies or certain AT users access your content and understand what is going on. For example, a form that highlights inputs in red when they are improperly filled in should <em>also</em> provide error messages.</li>
</ol>
<h3 id="color-in-framer">Color in Framer</h3>
<p>Regarding item 1, Framer supports <a href="https://www.framer.com/academy/lessons/light-dark-mode" target="_blank" rel="external">light and dark modes for your color styles</a>. Items 2 &amp; 3 are handled independently of Framer.</p>
<p>A huge percentage of web browsing comes from mobile devices or tablets - and that's not to mention ultrawide monitors. Our websites <strong>must</strong> take this into account.</p>
<h3 id="responsive-design-in-framer">Responsive design in Framer</h3>
<p>Read about <a href="https://www.framer.com/blog/design-responsive-websites/" target="_blank" rel="external">how to design responsive websites in Framer</a>.</p>
<h2 id="forms">Forms</h2>
<p>Accessible forms can be <em>hard</em>. They bring in challenges relating to labeling, validation, reading order, and color design.</p>
<ol>
<li><strong>Labeling:</strong> all form controls should have associated labels. Note that placeholder text does not constitute a label! Best practice is that labels be visible, but in some cases (for example a search bar which can be widely visually understood via placeholder text and a magnifying glass icon) you may want an invisible label. <a href="https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text" target="_blank" rel="external">Invisible labels can be achieved in several ways</a>.</li>
<li><strong>Validation:</strong> thankfully, form control attributes can control validation for many common scenarios such as email, phone number, etc. It’s also possible to control whether an input is required.</li>
<li><strong>Reading order:</strong> it’s important to ensure that tabbing through your form follows the same order as the visual items.</li>
<li><strong>Color:</strong> as discussed earlier, ensure that errors are not communicated solely by color!</li>
</ol>
<h3 id="forms-in-framer">Forms in Framer</h3>
<li><strong>Labeling:</strong> follow the pattern that Framer uses in its basic form for labeling. This will nest the form control inside the label.
<li><strong>Validation:</strong> In the &quot;Input&quot; section of the right-hand sidebar, there is a dropdown for input type. There is also a toggle for whether the input is required.
<li>Note that setting an input to required will not add an asterisk or any other similar visual pattern to the label - doing this yourself is highly recommended. It also will not provide visual feedback to the user until clicking the &quot;Submit&quot; button, at which point an error message comes up - this can be a painful pattern for longer forms. Further visual feedback requires custom CSS.</li>
<li><strong>Reading order:</strong> follow the guidance for reading order discussed earlier.</li>
<li><strong>Color:</strong> since visual feedback for required feeds does not exist by default, this only becomes a concern if you write custom CSS.</li>
<li>Links should have <strong>anchor text</strong> that accurately represents what they point to (review this document for examples - note how links encapsulate the content they lead to).
<ul>
<li>Counterexample: a newspaper page with many &quot;continue reading&quot; links. In this case, you would use the title or aria-label attributes to give a better programmatic name to the link that isn't visible to sighted users. Framer doesn't support the title attribute, so use <a href="https://www.framer.com/help/articles/improving-accessibility-with-aria-labels/" target="_blank" rel="external">aria-label</a> (found under &quot;Accessibility&quot; in the right-hand sidebar).</li>
</ul>
</li>
<li>Links should always be <strong>visibly indicated as links</strong> - underlines are traditional, and traditional is understandable by users. If you choose otherwise, ensure you aren't <a href="https://leecat.art/framer-accessibility/#color">distinguishing only by color</a>!
<ul>
<li>If your links are underlined, avoid underlining other text elements to avoid confusion.</li>
</ul>
</li>
<li>Some users need <strong>reduced or removed animations</strong>. There is a setting in Framer to <a href="https://www.framer.com/help/articles/reduced-motion-settings/" target="_blank" rel="external">allow reduced motion support</a>. It's turned off by default.</li>
<contenttype="html"><p>This page contains textual representation of and supplementary material for my Leatherworking Tools zine, including links to all tools and additional information as needed.</p>
<p>The Leatherworking Tools zine has been created for <a href="https://leecat.art/fedizinefest-2026-2027">FediZineFest 2026-2027</a> and will be part of the physical and digital bundles. For digital material, there will be a home-printable version and a version for reading on digital devices. If you want the delightfully illustrated zine itself, <a href="https://ko-fi.com/inherentlee/shop/fedizinefest2026_2027" target="_blank" rel="external">buy a bundle now</a>.</p>
<p>Please note that links are examples, and you do not need the precise model linked. Where possible, I have found cheaper versions of tools - for example, you <em>can</em> get a fancy mallet or maul (they <em>are</em> nice), or you can get a 16oz or 32oz hardware store rubber mallet. I have linked the hardware store version.</p>
<p>Some things, like thread or rivets, come in other colors or finishes. Feel free to explore; I have linked only one.</p>
<p>Please note that I am familiar with US retailers, and cannot make recommendations for other countries.</p>
<p>My favorite leatherworking retailer is <a href="https://www.buckleguy.com/" target="_blank" rel="external">Buckleguy</a>. They offer tools, hardware, leather, supplies, etc. and are generally extremely high quality with good customer service.</p>
<p>Occasionally, I will link other retailers such as <a href="https://tandyleather.com/" target="_blank" rel="external">Tandy</a> (a common retailer, but with products that may be lower quality - great for bulk leather for prototype and practice though!), <a href="https://www.weaverleathersupply.com/" target="_blank" rel="external">Weaver</a>, or <a href="https://springfieldleather.com/" target="_blank" rel="external">Springfield</a>. I will also link to non-leather specific retailers such as <a href="https://www.dickblick.com/" target="_blank" rel="external">Blick</a> and <a href="https://www.acehardware.com/" target="_blank" rel="external">Ace Hardware</a> as is relevant.</p>
<h2 id="cover">Cover</h2>
<p>The front and back cover spread is patterned with many small icons of leatherworking tools and explanatory diagrams in dark pink. Dark teal text reads &quot;Leatherworking tools&quot; &quot;by Lee,&quot; and, on the back &quot;2026.&quot;</p>
<li>You can apply this with a bit of cloth, <a href="https://www.buckleguy.com/wool-daubers-5-length-12-per-bag/" target="_blank" rel="external">wool dauber</a>, <a href="https://www.dickblick.com/products/lineco-micro-spatula/" target="_blank" rel="external">micro spatula</a>, etc... I just use my finger</li>
<li>If you're setting buckles, you might want this, or...</li>
</ul>
</li>
</ul>
<h3 id="simulating-an-oblong-punch">Simulating an oblong punch</h3>
<ol>
<li><strong>Plan:</strong> draw your oblong shape. You'll probably want it about as long as your leather strap is wide, and the width should be determined by the width of the buckle tongue</li>
<li><strong>Punch two holes:</strong> punch a hole at each end of the oblong</li>
<li><strong>Cut from one side <em>halfway</em> in:</strong> from one hole, cut halfway through the oblong</li>
<li><strong>Cut remainder of line from other side:</strong> meet your existing cut</li>
<li>Get a 2-tooth and one with lots of teeth - a full set is nice, but not as necessary</li>
<li>Also called &quot;pricking irons&quot;</li>
<li><strong>Use these with your cutting board, <em>not</em> your cutproof mat</strong></li>
<li>You can also use a combination of a <a href="https://www.buckleguy.com/japanese-stitching-marking-wheel-curved-handle/" target="_blank" rel="external">marking wheel</a> and <a href="https://www.buckleguy.com/bg-leather-awls-detachable-needle/" target="_blank" rel="external">awl</a>, but this <em>will</em> be slower and you won't be able to punch out 6-9 stitches at once</li>
</ul>
</li>
<li>2 <a href="https://www.buckleguy.com/517-harness-needles-for-hand-sewing-blunt-tip-5-needles/" target="_blank" rel="external">Blunt tip needles</a></li>
<p>I recommend watching <a href="https://www.youtube.com/watch?v=nHL_duaJxWQ" target="_blank" rel="external">How to Saddle Stitch</a> in addition to reading my single-page overview. Particularly useful is his method of securing the thread to the needle (I just didn't have the space to cover this).</p>
<ol>
<li>Pre-punch holes</li>
<li>Thread needles on both ends</li>
<li>Thread through first hole</li>
<li>Needle 1 through next hole</li>
<li>Follow with needle 2. Pull existing thread to the side to avoid piercing it</li>
<li>Pull tight with even tension</li>
<li>Repeat</li>
</ol>
<p>To finish, stitch backwards for a few stitches. Trim ends short. Melt. Flatten by rubbing against metal end of lighter.</p>
<p>One end of the rivet sits in the bowl of the <strong>anvil</strong>. The other end caps on and is nested in the <strong>setter</strong>, which is then hit with a mallet (or maul).</p>
<p>A basic setter and anvil has an anvil that is larger than the rivet.</p>
<ul>
<li><strong>Good:</strong> works with multiple rivet sizes; cheap and common</li>
<li><strong>Bad:</strong> hard to set evenly</li>
</ul>
<p>My preference is a fixed-size setter and anvil. The anvil is sized to the rivet cap size.</p>
<ul>
<li>
<p><strong>Good:</strong> better looking and easier</p>
</li>
<li>
<p><strong>Bad:</strong> only one size of rivet; often higher quality which raises the price</p>
</li>
<li>
<p><a href="https://tandyleather.com/products/easy-to-do-rivets-setter" target="_blank" rel="external">Basic double-cap rivets, setter, and anvil set</a></p>
<contenttype="html"><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>
<li><strong>Keyboard navigation:</strong> 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)</li>
<li><strong>Reading order:</strong> is reading order automatically correct? If not, what does the user have to do to ensure correctness?</li>
<li><strong>Text alternatives:</strong> is there support for alt text?</li>
<li><strong>Color:</strong> does the builder support light and dark modes? (Note that I am looking for builders for those with no HTML/CSS experience, and &quot;you can customize with CSS&quot; is not acceptable)</li>
<li><strong>Other accessibility concerns:</strong> anything else of note?</li>
</ol>
<p>I will score <strong>1</strong> (bad), <strong>2</strong> (mixed), or <strong>3</strong> (good). If there is nothing to note for the &quot;other&quot; factor, I will score it as a 2. These scores <strong>will not be weighted</strong> according to priorities, but purely summed for a final ranking.</p>
<p>There are, of course, many more factors that could be evaluated, but I will be focusing on these high-level ones.</p>
<p>Want to just see the final ranking? Pop down to the <a href="https://leecat.art/visual-site-builders-and-accessibility/#summary">summary</a>.</p>
<h2 id="blocs">Blocs</h2>
<p><a href="https://blocsapp.com/" target="_blank" rel="external">Blocs</a> 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.</p>
<table>
<thead>
<tr>
<th>Factor</th>
<th>Notes</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantic HTML</td>
<td>Most major elements missing (no <code>&lt;main&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code>; <code>&lt;nav&gt;</code> present for the top nav but not bottom).</td>
<td>1</td>
</tr>
<tr>
<td>Keyboard navigation</td>
<td>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.</td>
<td>1</td>
</tr>
<tr>
<td>Reading order</td>
<td>Good! Block-based layout helps significantly here I would guess.</td>
<td>3</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 - <a href="https://help.blocsapp.com/knowledge-base/dark-theme/" target="_blank" rel="external">Blocs dark mode documentation</a>.</td>
<p><a href="https://cowsites.net" target="_blank" rel="external">Cowsites</a> is a simple site editor with no drag-and-drop elements.</p>
<table>
<thead>
<tr>
<th>Factor</th>
<th>Notes</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantic HTML</td>
<td>Some oddities, like the <code>&lt;header&gt;</code> being inside the <code>&lt;main&gt;</code> while the <code>&lt;footer&gt;</code> was not. Repeated <code>&lt;h1&gt;</code>s.</td>
<td>2</td>
</tr>
<tr>
<td>Keyboard navigation</td>
<td>Browser default focus outlines. Some clipping of focus outlines.</td>
<td>2</td>
</tr>
<tr>
<td>Reading order</td>
<td>Good. Difficult to mess up when there are no drag-and-drop elements.</td>
<td>3</td>
</tr>
<tr>
<td>Text alternatives</td>
<td>Both image title and alt can be set in the editor, but don't appear to be surfaced in the actual site.</td>
<td>1</td>
</tr>
<tr>
<td>Color</td>
<td>Single color palette.</td>
<td>1</td>
</tr>
<tr>
<td>Other</td>
<td>No <code>lang</code> attribute set. Gallery page links are three separate links to the same place, with lacking link text for links 2 and 3.</td>
<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>
<td>Depends <em>heavily</em> on developer. One was <code>&lt;div&gt;</code>s all the way down, one was built with actual semantic HTML using the &quot;Accessibility&quot; 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 <code>&lt;buttons&gt;</code>s, the other was littered with click events and <code>tabindex=&quot;0&quot;</code>.</td>
<td>1</td>
</tr>
<tr>
<td>Keyboard navigation</td>
<td>Browser default focus outlines. One template <em>actually</em> had a skip link!</td>
<td>2</td>
</tr>
<tr>
<td>Reading order</td>
<td>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.</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 - <a href="https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables" target="_blank" rel="external">Figma variable modes documentation</a>.</td>
<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>
<p>I have written <a href="https://leecat.art/framer-accessibility">further thoughts on Framer accessibility</a> as part of a more in-depth review.</p>
<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>Browser default focus outlines. Some weird clipping of focus outlines in the testing I did. Focus states configurable with custom CSS. Controls that require more than just the <code>tab</code> key suffer.</td>
<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>
<thead>
<tr>
<th>Factor</th>
<th>Notes</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantic HTML</td>
<td>It's <code>&lt;div&gt;</code>s all the way down. No headers. <code>&lt;p&gt;</code> tags used, at least.</td>
<td>1</td>
</tr>
<tr>
<td>Keyboard navigation</td>
<td>Browser default focus outlines. Significant focus outline clipping. Should be fixable with CSS... if we wanted to write CSS.</td>
<td>2</td>
</tr>
<tr>
<td>Reading order</td>
<td>Good. Difficult to mess up when there are no drag-and-drop elements.</td>
<td>3</td>
</tr>
<tr>
<td>Text alternatives</td>
<td>Seemingly not present, though there are no images in the demo site.</td>
<td>1</td>
</tr>
<tr>
<td>Color</td>
<td>Since you can write your own CSS, all color is customizable... if we wanted to write CSS.</td>
<td>1</td>
</tr>
<tr>
<td>Other</td>
<td>No <code>lang</code> attribute set. No <code>title</code>.</td>
<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>
<tr>
<th>Factor</th>
<th>Notes</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantic HTML</td>
<td>While there is a <code>&lt;main&gt;</code>, it's otherwise <code>&lt;div&gt;</code>s all the way down. Generally no headers, though sites seem to have a visually hidden <code>&lt;h1&gt;</code> that matches the site title. <code>&lt;p&gt;</code> tags used, at least.</td>
<p><a href="https://www.realmacsoftware.com/rapidweaver/" target="_blank" rel="external">Rapidweaver</a> is built exclusively for Mac. Ah, well.</p>
<h2 id="showit">Showit</h2>
<p><a href="https://showit.com/" target="_blank" rel="external">Showit</a> is a drag-and-drop builder with a Wordpress backend for content management. I reviewed several different premade themes. Custom CSS is allowed.</p>
<table>
<thead>
<tr>
<th>Factor</th>
<th>Notes</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantic HTML</td>
<td>Depending on theme, <em>some</em> landmark tags might be present. One theme reviewed enclosed each individual nav link in a <code>&lt;nav&gt;</code> tag. Ew. Text can be set to be wrapped in a variety of tags, including bare <code>&lt;div&gt;</code>s.</td>
<td>1</td>
</tr>
<tr>
<td>Keyboard navigation</td>
<td>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.</td>
<td>1</td>
</tr>
<tr>
<td>Reading order</td>
<td>Determined by the user via reordering elements in the sidebar.</td>
<p><a href="https://www.squarespace.com/" target="_blank" rel="external">Squarespace</a> is a visual site builder that starts you off with premade templates. It's somewhat block-based and limited in full customizability.</p>
<table>
<thead>
<tr>
<th>Factor</th>
<th>Notes</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantic HTML</td>
<td>Template tested uses somewhat reasonable semantic HTML. Choice of what is considered a heading is a bit curious</td>
<td>2</td>
</tr>
<tr>
<td>Keyboard navigation</td>
<td>Template tested has custom tab focus styling. Cannot be further edited, but custom that fits the theme is pretty standout. Skip link included in at least some templates.</td>
<td>Imperfect and can't be edited by user. Block-based layout is a little too freeform to ensure proper reading order, so the user should be careful where they add things. Early testing indicates that reading order is determined by the <em>first</em> place a block is placed, and is never re-assessed by the builder.</td>
<p><a href="https://designmodo.com/startup/" target="_blank" rel="external">Startup</a> is a block-based builder with pre-defined components and less freedom than some others on this list.</p>
<table>
<thead>
<tr>
<th>Factor</th>
<th>Notes</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantic HTML</td>
<td>Pretty good! They've seemingly dropped <code>&lt;main&gt;</code> and instead used an array of <code>&lt;section&gt;</code>s, but components are automatically associated with <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>, <code>&lt;footer&gt;</code>, etc.</td>
<td>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.</td>
<td>3</td>
</tr>
<tr>
<td>Text alternatives</td>
<td>Supported.</td>
<td>3</td>
</tr>
<tr>
<td>Color</td>
<td>Per-component color palette.</td>
<td>1</td>
</tr>
<tr>
<td>Other</td>
<td>Forms are weak - unlabeled fields and buttons. For a built in search field, I'd expect better. The components by default are <em>super</em> animation-heavy and don't respect <code>prefers-reduced-motion</code>.</td>
<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>
<tr>
<th>Factor</th>
<th>Notes</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantic HTML</td>
<td>It's <code>&lt;div&gt;</code>s all the way down. No headers. <code>&lt;p&gt;</code> tags used, at least. Lists are just <code>&lt;p&gt;</code>s.</td>
<td>1</td>
</tr>
<tr>
<td>Keyboard navigation</td>
<td>Focus actively turned off.</td>
<td>1</td>
</tr>
<tr>
<td>Reading order</td>
<td>Order of elements added determines reading order.</td>
<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>
<tr>
<th>Factor</th>
<th>Notes</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantic HTML</td>
<td>It's <code>&lt;div&gt;</code>s all the way down. Headers exist, but there are multiple <code>&lt;h1&gt;</code>s and the headers skip levels. <code>&lt;p&gt;</code> tags used, at least.</td>
<td>Surprisingly intuitive! Univer.se uses a grid-based layout system and that seems to help programmatically determine reading order.</td>
<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>
<p><a href="https://https://www.webnode.com" target="_blank" rel="external">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>
<p><a href="https://wwwobble.org/" target="_blank" rel="external">Wobble Web</a> 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.</p>
<td>It's <code>&lt;div&gt;</code>s all the way down. No headers. <code>&lt;p&gt;</code> tags used, at least.</td>
<td>1</td>
</tr>
<tr>
<td>Keyboard navigation</td>
<td>Browser default focus outlines. Should be editable with CSS... if we wanted to write CSS.</td>
<td>2</td>
</tr>
<tr>
<td>Reading order</td>
<td>Order of elements added determines reading order.</td>
