diff --git a/src/posts/2026/2026-09-08-framer-accessibility.md b/src/posts/2026/2026-09-08-framer-accessibility.md index 48ff3ecb..aabd0e63 100644 --- a/src/posts/2026/2026-09-08-framer-accessibility.md +++ b/src/posts/2026/2026-09-08-framer-accessibility.md @@ -31,6 +31,8 @@ Notably, `
`s and ``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 `` 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