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

drone build Mon Sep 14 18:17:56 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-15 01:17:56 +00:00
parent ef0db8e0be
commit 037a38a714
313 changed files with 4077 additions and 3792 deletions
Download Patch File Download Diff File Expand all files Collapse all files
feed.xml
+5 -7
View File
@@ -47,7 +47,7 @@
<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>
@@ -111,18 +111,16 @@
</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>