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

small style and word fixes to framer accessibility

Browse Source
This commit is contained in:
inherentlee
2026-09-12 10:53:25 -07:00
parent 1a0898c214
commit a3b9d20dfb
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/posts/2026/2026-09-08-framer-accessibility.md
+3 -3
View File
@@ -23,7 +23,7 @@ Accessibility **must** be built from the start of a project. Retrofitting a proj
## Semantic HTML ## Semantic HTML
Most HTML elements are semantic, that is, they convey meaning. Labeling something an `<h1>` 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 [list of semantic HTML elements](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements). Most HTML elements are semantic, that is, they convey meaning. Labeling something an `<h1>` 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 [list of semantic HTML elements](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements).
Notably, `<div>`s and `<span>`s are not semantic and convey no meaning. They are used for styling alone. Notably, `<div>`s and `<span>`s are not semantic and convey no meaning. They are used for styling alone.
@@ -120,9 +120,9 @@ Accessible forms can be *hard*. They bring in challenges relating to labeling, v
### Forms in Framer ### Forms in Framer
1. **Labeling:** follow the pattern that Framer uses in its basic form for labeling. This will nest the form control inside the label. 1. **Labeling:** follow the pattern that Framer uses in its basic form for labeling. This will nest the form control inside the label.
- If you want an invisible label, you will need to write custom CSS. - If you want an invisible label, you will need to write custom CSS.
1. **Validation:** 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. 1. **Validation:** 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.
- 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. - 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.
1. **Reading order:** follow the guidance for reading order discussed earlier. 1. **Reading order:** follow the guidance for reading order discussed earlier.
1. **Color:** since visual feedback for required feeds does not exist by default, this only becomes a concern if you write custom CSS. 1. **Color:** since visual feedback for required feeds does not exist by default, this only becomes a concern if you write custom CSS.