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

more notes about framer
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
inherentlee
2026-09-17 12:03:26 -07:00
parent 91c7f14113
commit 776218805a
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/posts/2026/2026-09-08-framer-accessibility.md
+3 -1
View File
@@ -31,6 +31,8 @@ Notably, `<div>`s and `<span>`s are not semantic and convey no meaning. They are
Semantic HTML elements can be applied to any Framer element using the "Accessibility" section in the right-hand sidebar. Read about [using semantic tags for navigation and footers](https://www.framer.com/help/articles/semantic-tags-navigation-footer/) - this applies to far more than the two elements mentioned.
While Framer allows you to set the `<span>` tag on elements, avoid this unless you are *only* utilizing it for styling.
## Reading order
The order of elements in an HTML document is referred to as the **reading order**. 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:
@@ -68,7 +70,7 @@ When navigating with a keyboard, there should always be visual indication on the
Framer does not currently allow for customizing keyboard focus in the editor. It must be done using [custom CSS](https://www.framer.com/help/articles/how-to-add-custom-code/).
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.
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.
## Skip links