<metaproperty="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.">
<buttonclass="close-dialog"autofocus=""aria-label="close the image modal">×</button>
<imgclass="modal-img"src="/img/framer.png"alt="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."loading="lazy"decoding="async"width="841"height="532">
</dialog>
<imgclass="hero"src="/img/framer.png"alt="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."loading="lazy"decoding="async"width="841"height="532">
<p>This is a work in progress post originally written for a colleague beginning to explore <ahref="https://framer.com"target="_blank"rel="external">Framer</a>, a visual site designer with CMS. It walks through some major web accessibility topics, first generally and then as they relate to Framer, with links to relevant resources.</p>
<h2id="accessible-from-the-beginning">Accessible from the beginning</h2>
<p>Accessibility <strong>must</strong> be built from the start of a project. Retrofitting a project to be accessible requires far more effort than designing for accessibility from the start. Building with accessibility in mind prevents time consuming and expensive reworks.</p>
<h2id="definitions">Definitions</h2>
<ul>
<li><strong>Assistive technology (AT):</strong>"technology used by individuals with (varying levels and kinds of) disabilities in order to perform functions that might otherwise be difficult or impossible. It is an umbrella term for a wide variery of tools, including tools that enable access to information on the Web. ... Keyboards, screen readers, braille displays, voice recognition software, switch controls, and screen magnifiers are examples of high-tech assistive technology. Operating system and browser accessibility display modes (such as dark mode, and Windows High Contrast Mode) are also a form of assistive technology." (Sara Souiedan, <ahref="https://practical-accessibility.today"target="_blank"rel="external">Practical Accessibility</a> - content gated behind paid course)
<li>See <ahref="https://tetralogical.com/blog/2021/12/24/browsing-with-assistive-technology-videos/"target="_blank"rel="external">Browsing with Assistive Technology</a> for an overview of some common methods/uses of AT.</li>
<li><strong>Screen readers (SR):</strong> A type of AT aimed at Blind/low vision users which reads aloud page content. Notably, SRs do not simply read page content in order; they have complex shortcuts which allow users to summarize links on a page, skip headline-by-headline, move to landmark sections, and more.</li>
<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>
<h2id="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 <ahref="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>
<h3id="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 <ahref="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>
<h2id="reading-order">Reading order</h2>
<p>The order of elements in an HTML document is referred to as the <strong>reading order</strong>. 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:</p>
<ol>
<li>Those elements are presumably in visual order for a reason! A different reading order may make them confusing or totally unfollowable.</li>
<li>Low vision or partially sighted users who rely on both screen visuals and SRs will suffer if the visual content does not match the audio content.</li>
</ol>
<h3id="reading-order-in-framer">Reading order in Framer</h3>
<p>Reading order is maintained in Framer in two ways:</p>
<ol>
<li>When layouts are applied effectively via the "Layout" section in the right-hand sidebar, the visual order of the elements guides the reading order.</li>
<li>In the absence of the above, the order of the elements in the left-hand sidebar determines reading order. Notably, reading order seems to go from bottom to top in this case rather than the intuitive top to bottom.</li>
<p>Following from reading order, we reach the concept of keyboard navigation. The ability to navigate the web without a mouse is core to several forms of AT as well as improving quality of life for savvy internet users - and anyone filling out web forms. Using the <code>TAB</code> key to move through a webpage navigates through the reading order, landing on every interactable element it finds. What is an interactable element? There are four kinds:</p>
<ol>
<li><strong>Links</strong> bring a user to a new page (or sometimes a different section of the same page)</li>
<li><strong>Buttons</strong> perform an action without changing pages</li>
<li><strong>Form controls</strong> allow user input</li>
<li>Any element with the <strong><code>tabindex</code></strong> attribute set can be tabbed to. Notably, if tabindex is set, interacting with the element should always do something. Use tabindex <em>extremely</em> sparingly and with intention.</li>
</ol>
<h3id="keyboard-navigation-in-framer">Keyboard navigation in Framer</h3>
<p>Links, buttons, and form controls are tabbable by default. When tagged as the correct HTML element, they will function as expected.</p>
<p><ahref="https://www.framer.com/help/articles/tab-order-customization/"target="_blank"rel="external">Framer supports adding the tabindex attribute</a>. If you <em>must</em> do this for some reason, make sure to set its value to 0 - Framer defaults to 1. 0 will maintain the reading order established by layout and the left-hand sidebar; 1 will place the tabbable element first in the tabbing order.</p>
<h2id="keyboard-focus">Keyboard focus</h2>
<p>When navigating with a keyboard, there should always be visual indication on the screen of where we have navigated to. This indication is referred to as <strong>focus</strong> or the <strong>focus indicator</strong>. Browsers have default focus stylings, usually an outline around the element, but focus can - and frequently should - be customized with CSS. Default focus outlines may not have very high contrast against the elements in your website, and, unless you are testing with many browsers, you can't easily confirm that all default focus indication works well with your color scheme. Additionally, default focus may clash with your site and impact how elements like your forms look in use.</p>
<h3id="keyboard-focus-in-framer">Keyboard focus in Framer</h3>
<p>Framer does not currently allow for customizing keyboard focus in the editor. It must be done using <ahref="https://www.framer.com/help/articles/how-to-add-custom-code/"target="_blank"rel="external">custom CSS</a>.</p>
<p>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.</p>
<h2id="skip-links">Skip links</h2>
<p>Skip links allow keyboard users to bypass large repeated blocks of content (such as a top nav). Without a skip link, a keyboard user will not stay long on a site - after moving to a new page, they may realize they have to tab through the entire nav again and leave.</p>
<p>Skip links are generally invisible to mouse users, and only appear when tabbing around a page. To see an example, open <ahref="https://webaim.org/"target="_blank"rel="external">WebAIM (Web Accessibility in Mind)</a> and hit the <code>TAB</code> key. Notice the red box that appears in the upper left that reads "skip to main content."</p>
<h3id="skip-links-in-framer">Skip links in Framer</h3>
<p>Skip links in Framer require custom code, both React and CSS.</p>
<h2id="text-alternatives">Text alternatives</h2>
<p>Text alternatives - alternative text, captioning, audio descriptions, etc. - are the most commonly thought of form of web accessibility. You likely need no further explanation of what they are and why they matter, but they can be rather daunting to write. I recommend reading <ahref="https://adrianroselli.com/2024/05/my-approach-to-alt-text.html"target="_blank"rel="external">Adrian Roselli's approach to writing alt text</a>.</p>
<h3id="text-alternatives-in-framer">Text alternatives in Framer</h3>
<p>Text alternatives can be easily set by double clicking on the media item in question to open the editing dialog.</p>
<h2id="color">Color</h2>
<p>There are a couple areas to consider when it comes to color:</p>
<ol>
<li><strong>Light and dark modes</strong> are both accessibility needs, and a site that only offers one limits access of some potential users.</li>
<li><strong>Color contrast</strong> will improve users' abilities to view and read your site. WebAIM covers <ahref="https://webaim.org/articles/contrast/"target="_blank"rel="external">color contrast as it relates to WCAG</a>. While you can use <ahref="https://webaim.org/resources/contrastchecker/"target="_blank"rel="external">WebAIM's contrast checker</a>, I recommend finding a more fully-featured color design tool that incorporates contrast checking, luminance comparison, color vision simulation, and more. My personal tool of choice is <ahref="https://atmos.style/"target="_blank"rel="external">Atmos</a>.</li>
<li>Ensuring that <strong>color alone is not used to communicate meaning</strong> helps users with various color deficiencies or certain AT users access your content and understand what is going on. For example, a form that highlights inputs in red when they are improperly filled in should <em>also</em> provide error messages.</li>
</ol>
<h3id="color-in-framer">Color in Framer</h3>
<p>Regarding item 1, Framer supports <ahref="https://www.framer.com/academy/lessons/light-dark-mode"target="_blank"rel="external">light and dark modes for your color styles</a>. Items 2 & 3 are handled independently of Framer.</p>
<h2id="responsive-design">Responsive design</h2>
<p>A huge percentage of web browsing comes from mobile devices or tablets - and that's not to mention ultrawide monitors. Our websites <strong>must</strong> take this into account.</p>
<h3id="responsive-design-in-framer">Responsive design in Framer</h3>
<p>Read about <ahref="https://www.framer.com/blog/design-responsive-websites/"target="_blank"rel="external">how to design responsive websites in Framer</a>.</p>
<h2id="forms">Forms</h2>
<p>Accessible forms can be <em>hard</em>. They bring in challenges relating to labeling, validation, reading order, and color design.</p>
<ol>
<li><strong>Labeling:</strong> all form controls should have associated labels. Note that placeholder text does not constitute a label! Best practice is that labels be visible, but in some cases (for example a search bar which can be widely visually understood via placeholder text and a magnifying glass icon) you may want an invisible label. <ahref="https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text"target="_blank"rel="external">Invisible labels can be achieved in several ways</a>.</li>
<li><strong>Validation:</strong> thankfully, form control attributes can control validation for many common scenarios such as email, phone number, etc. It’s also possible to control whether an input is required.</li>
<li><strong>Reading order:</strong> it’s important to ensure that tabbing through your form follows the same order as the visual items.</li>
<li><strong>Color:</strong> as discussed earlier, ensure that errors are not communicated solely by color!</li>
</ol>
<h3id="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>
<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>
<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><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>
<li>Links should have <strong>anchor text</strong> that accurately represents what they point to (review this document for examples - note how links encapsulate the content they lead to).
<ul>
<li>Counterexample: a newspaper page with many "continue reading" links. In this case, you would use the title or aria-label attributes to give a better programmatic name to the link that isn't visible to sighted users. Framer doesn't support the title attribute, so use <ahref="https://www.framer.com/help/articles/improving-accessibility-with-aria-labels/"target="_blank"rel="external">aria-label</a> (found under "Accessibility" in the right-hand sidebar).</li>
</ul>
</li>
<li>Links should always be <strong>visibly indicated as links</strong> - underlines are traditional, and traditional is understandable by users. If you choose otherwise, ensure you aren't <ahref="#color">distinguishing only by color</a>!
<ul>
<li>If your links are underlined, avoid underlining other text elements to avoid confusion.</li>
</ul>
</li>
<li>Some users need <strong>reduced or removed animations</strong>. There is a setting in Framer to <ahref="https://www.framer.com/help/articles/reduced-motion-settings/"target="_blank"rel="external">allow reduced motion support</a>. It's turned off by default.</li>
</ul>
</article>
<navaria-label="pagination">
<olclass="pagination post-pagination">
<liclass="older">
<ahref="/pink-lime-and-grey-shawl/">
<iclass="fa-solid fa-hand-point-left"aria-hidden="true"></i> pink, lime, and grey shawl
<imgsrc="/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">
<imgsrc="/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">
<imgsrc="/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">
