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

drone build Thu Sep 17 12:04:04 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-17 19:04:04 +00:00
parent a9398b8ae1
commit 38e4679b6f
313 changed files with 3579 additions and 3539 deletions
Download Patch File Download Diff File Expand all files Collapse all files
framer-accessibility/index.html
+14 -11
View File
@@ -1850,6 +1850,7 @@ switch (currentThemeValue) {
<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>
<h2 id="reading-order">Reading order</h2>
<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>
@@ -1877,7 +1878,7 @@ switch (currentThemeValue) {
<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 possible to clip out the browser default focus outline with certain padding settings. Review your site by tabbing through the page(s), and ensure that a full outline surrounds all interactable elements. If an outline is missing, consider adjusting the padding around that element.</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>
<h2 id="skip-links">Skip links</h2>
<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>
@@ -1979,43 +1980,45 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/moving-images/">
<h2 data-ha-exclude="" id="moving-images">moving images </h2>
<a class="postlink" href="/backend-accessibility/">
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </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">
<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">
</a>
</li>
<li class="post">
<a class="postlink" href="/screen-reader-optimizations/">
<h2 data-ha-exclude="" id="screen-reader-optimizations">screen reader optimizations </h2>
<a class="postlink" href="/core-css/">
<h2 data-ha-exclude="" id="core-css">core CSS </h2>
<ul class="postlist-tags">
<li>software</li>
<li>highlight</li>
</ul>
<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">
<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">
</a>
</li>
<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="/comparing-text-editors/">
<h2 data-ha-exclude="" id="comparing-text-editors">comparing text editors </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/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">
</a>
</li>
@@ -2072,6 +2075,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/framer-accessibility/` was built on 2026-09-17T15:18:57.506Z -->
<!-- This page `/framer-accessibility/` was built on 2026-09-17T19:03:47.682Z -->
</body>
</html>