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

drone build Thu Sep 17 17:58:08 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-18 00:58:08 +00:00
parent 2fa3327bdf
commit 509f93bf61
313 changed files with 3571 additions and 3477 deletions
Download Patch File Download Diff File Expand all files Collapse all files
framer-accessibility/index.html
+21 -19
View File
@@ -1874,7 +1874,7 @@ switch (currentThemeValue) {
<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. They seem pretty impossible to remediate. If possible, it requires <em>extensive</em> custom code.</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>
<h2 id="keyboard-focus">Keyboard focus</h2>
<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>
@@ -1981,15 +1981,31 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="" id="accessible-image-modals">accessible image modals </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/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="/handedness-toggle/">
<h2 data-ha-exclude="" id="handedness-toggle">handedness toggle </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/handedness-toggle-0.png" alt="A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left." loading="lazy" decoding="async" width="1000" height="257">
</a>
</li>
@@ -2008,20 +2024,6 @@ switch (currentThemeValue) {
</a>
</li>
<li class="post">
<a class="postlink" href="/moving-images/">
<h2 data-ha-exclude="" id="moving-images">moving images </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<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>
</ol>
</section>
@@ -2074,6 +2076,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/framer-accessibility/` was built on 2026-09-18T00:05:04.711Z -->
<!-- This page `/framer-accessibility/` was built on 2026-09-18T00:57:52.686Z -->
</body>
</html>