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

2026-09-17 19:04:04 +00:00
parent a9398b8ae1
commit 38e4679b6f
313 changed files with 3579 additions and 3539 deletions
@@ -51,6 +51,7 @@
 &lt;p&gt;Notably, &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;s and &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;s are not semantic and convey no meaning. They are used for styling alone.&lt;/p&gt;
 &lt;h3 id=&quot;semantic-html-in-framer&quot;&gt;Semantic HTML in Framer&lt;/h3&gt;
 &lt;p&gt;Semantic HTML elements can be applied to any Framer element using the &amp;quot;Accessibility&amp;quot; section in the right-hand sidebar. Read about &lt;a href=&quot;https://www.framer.com/help/articles/semantic-tags-navigation-footer/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;using semantic tags for navigation and footers&lt;/a&gt; - this applies to far more than the two elements mentioned.&lt;/p&gt;
+&lt;p&gt;While Framer allows you to set the &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; tag on elements, avoid this unless you are &lt;em&gt;only&lt;/em&gt; utilizing it for styling.&lt;/p&gt;
 &lt;h2 id=&quot;reading-order&quot;&gt;Reading order&lt;/h2&gt;
 &lt;p&gt;The order of elements in an HTML document is referred to as the &lt;strong&gt;reading order&lt;/strong&gt;. While visual styling can change the flow of elements in a page, SRs will follow reading order. It&#39;s important for your reading order to match the visual flow of elements on the page for two reasons:&lt;/p&gt;
 &lt;ol&gt;
@@ -78,7 +79,7 @@
 &lt;p&gt;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 &lt;strong&gt;focus&lt;/strong&gt; or the &lt;strong&gt;focus indicator&lt;/strong&gt;. 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&#39;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.&lt;/p&gt;
 &lt;h3 id=&quot;keyboard-focus-in-framer&quot;&gt;Keyboard focus in Framer&lt;/h3&gt;
 &lt;p&gt;Framer does not currently allow for customizing keyboard focus in the editor. It must be done using &lt;a href=&quot;https://www.framer.com/help/articles/how-to-add-custom-code/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;custom CSS&lt;/a&gt;.&lt;/p&gt;
-&lt;p&gt;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.&lt;/p&gt;
+&lt;p&gt;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.&lt;/p&gt;
 &lt;h2 id=&quot;skip-links&quot;&gt;Skip links&lt;/h2&gt;
 &lt;p&gt;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.&lt;/p&gt;
 &lt;p&gt;Skip links are generally invisible to mouse users, and only appear when tabbing around a page. To see an example, open &lt;a href=&quot;https://webaim.org/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;WebAIM (Web Accessibility in Mind)&lt;/a&gt; and hit the &lt;code&gt;TAB&lt;/code&gt; key. Notice the red box that appears in the upper left that reads &amp;quot;skip to main content.&amp;quot;&lt;/p&gt;