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

drone build Thu Sep 17 17:05:19 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-18 00:05:19 +00:00
parent 38e4679b6f
commit 2fa3327bdf
314 changed files with 3267 additions and 3391 deletions
Download Patch File Download Diff File Expand all files Collapse all files
framer-accessibility/index.html
+11 -12
View File
@@ -1874,6 +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>
<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>
@@ -1980,45 +1981,43 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </h2>
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="" id="accessible-image-modals">accessible image modals </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/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">
</a>
</li>
<li class="post">
<a class="postlink" href="/core-css/">
<h2 data-ha-exclude="" id="core-css">core CSS </h2>
<a class="postlink" href="/visual-site-builders-and-accessibility/">
<h2 data-ha-exclude="" id="visual-site-builders-and-accessibility">visual site builders and accessibility </h2>
<ul class="postlist-tags">
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/core-css.png" alt="A website mockup in dark mode with light pink accents. Everything is filler text such as the title &#39;This is my cool website&#39;, headers reading things like &#39;This is an h1&#39;, nav items &#39;Nav item 1&#39;, etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley." loading="lazy" decoding="async" width="1000" height="447">
<img 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">
</a>
</li>
<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="/moving-images/">
<h2 data-ha-exclude="" id="moving-images">moving images </h2>
<ul class="postlist-tags">
<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/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>
@@ -2075,6 +2074,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/framer-accessibility/` was built on 2026-09-17T19:03:47.682Z -->
<!-- This page `/framer-accessibility/` was built on 2026-09-18T00:05:04.711Z -->
</body>
</html>