drone build Mon Sep 14 18:17:56 PDT 2026
This commit is contained in:
@@ -16,7 +16,7 @@
|
||||
<meta property="og:site_name" content="hello hello">
|
||||
<meta property="og:url" content="https://leecat.art/framer-accessibility/">
|
||||
|
||||
<meta property="og:image" content="/img/framer.png">
|
||||
<meta property="og:image" content="https://leecat.art/img/framer.png">
|
||||
<meta property="og:image:alt" content="A screenshot of the Framer projects page showing part of the tile for a very rudimentary project titled Accessibility Test. It has a huge title that just reads Title, a basic form, and some pictures of my dog as notable features.">
|
||||
|
||||
|
||||
@@ -1846,7 +1846,7 @@ switch (currentThemeValue) {
|
||||
<li><strong>Web Content Accessibility Guidelines (WCAG):</strong> "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." (Sara Souiedan, Practical Accessibility again)</li>
|
||||
</ul>
|
||||
<h2 id="semantic-html">Semantic HTML</h2>
|
||||
<p>Most HTML elements are semantic, that is, they convey meaning. Labeling something an <code><h1></code> doesn't just style it like a header; it also means that assistive tech 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>Most HTML elements are semantic, that is, they convey meaning. Labeling something an <code><h1></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><div></code>s and <code><span></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 "Accessibility" 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>
|
||||
@@ -1910,18 +1910,16 @@ switch (currentThemeValue) {
|
||||
</ol>
|
||||
<h3 id="forms-in-framer">Forms in Framer</h3>
|
||||
<ol>
|
||||
<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>
|
||||
</ol>
|
||||
<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.
|
||||
<ul>
|
||||
<li>If you want an invisible label, you will need to write custom CSS.</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li><strong>Validation:</strong> In the "Input" 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>
|
||||
</ol>
|
||||
</li>
|
||||
<li><strong>Validation:</strong> In the "Input" section of the right-hand sidebar, there is a dropdown for input type. There is also a toggle for whether the input is required.
|
||||
<ul>
|
||||
<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 "Submit" 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>
|
||||
</ul>
|
||||
<ol>
|
||||
</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>
|
||||
</ol>
|
||||
@@ -1981,43 +1979,45 @@ switch (currentThemeValue) {
|
||||
<ol id="postlist">
|
||||
|
||||
<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="/screen-reader-optimizations/">
|
||||
<h2 data-ha-exclude="" id="screen-reader-optimizations">screen reader optimizations </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'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/crow.jpg" alt="Image unrelated to post. A crow poses on driftwood against a whitish sky." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/backend-accessibility/">
|
||||
<h2 data-ha-exclude="" id="backend-accessibility">backend accessibility </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>
|
||||
|
||||
</ul>
|
||||
<img src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<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="/my-favorite-git-flag/">
|
||||
<h2 data-ha-exclude="" id="my-favorite-git-flag">my favorite git flag </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/shelf-mushrooms.jpg" alt="Picture unrelated to post. Creamy beige shelf mushrooms on a mossy tree trunk." 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 'This is my cool website', headers reading things like 'This is an h1', nav items 'Nav item 1', 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>
|
||||
@@ -2074,6 +2074,6 @@ switch (currentThemeValue) {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/framer-accessibility/` was built on 2026-09-12T17:51:00.657Z -->
|
||||
<!-- This page `/framer-accessibility/` was built on 2026-09-15T01:17:35.300Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user
