Label All Controls - Framer

Label All Controls in Framer

1. Open your project in Framer and navigate to the page containing the interactive elements you want to label.
2. Select the first control (button, link, icon, input field, image link). The right-hand properties panel will display its settings.
3. For Buttons:
   • Select the button → in the properties panel, enter a clear Label in the text field (e.g., “Contact Us”, “View Work”, “Submit Form”).
   • If using an icon-only button, scroll to Accessibility and fill in ARIA Label with a descriptive action (e.g., “Open Menu”).
4. For Links (text or frame links):
   • Select the link → confirm the visible text clearly describes the destination.
   • If the link is an icon or visual element without text, open Accessibility → add an ARIA Label that describes its purpose (e.g., “Go to Blog”).
5. For Inputs and Form Fields:
   • Select the input → open the Accessibility panel.
   • Enter a descriptive Label (e.g., “Email Address”, “Full Name”).
   • Avoid relying only on placeholder text—place a visible label above or beside the field when possible.
6. For Icon Buttons (hamburger menu, close icons, arrows):
   • Select the icon → open Accessibility.
   • Add an ARIA Label such as “Open Navigation”, “Close Modal”, “Next Slide”, or “Previous Slide”.
7. For Image Links:
   • Select the image → open Accessibility.
   • Set an Alt Text description that explains the image’s purpose (e.g., “View Portfolio”).
   • If the image is decorative, use empty alt text instead (alt field left blank).
8. For Components with interactions:
   • Select the component → open Accessibility.
   • Add or refine its ARIA Label so it clearly communicates its action or destination.
9. Repeat steps 2–8 for every interactive element on the page, ensuring each control has a clear, unique, descriptive label.
10. Use Preview mode and press Tab to verify assistive labels appear and each control is correctly announced.
11. Publish or update your project once all controls are properly labeled.