Label All Controls - Elementor

Label All Controls in Elementor

1. Open your WordPress dashboard and navigate to the page you want to edit, then click Edit with Elementor.
2. Select the first control on the page (button, form field, icon box, image link, or menu trigger). The Elementor panel on the left will update to show its settings.
3. For Form fields (Elementor Form widget):
   • Click the form → choose the field under the Form Fields list.
   • Set a clear Label (e.g., “Email Address”, “Full Name”).
   • Ensure the Placeholder is not used as the only label—labels must remain visible.
   • Open the Advanced tab → Attributes → confirm no aria-labels overwrite your visible label unless intentionally set.
4. For Buttons:
   • Select the button → under the Content tab, edit the Text field.
   • Use clear action labels such as “Submit Form”, “View Services”, or “Next Step”.
5. For Icon Buttons or Icon Lists:
   • Select the icon widget → Content tab.
   • Add a descriptive Title or Text label.
   • If using icons alone, go to Advanced → Attributes and add aria-label="Open Menu" or similar.
6. For Image links:
   • Select the image → Content → set Alt Text in the Media Library.
   • If the image acts as a button, write alt text based on action (e.g., “Go to Portfolio”).
7. For Nav Menu widgets:
   • Select the menu → under Content, confirm all menu item labels match your site’s navigation naming.
   • Click the hamburger icon element (mobile) → Advanced → Attributes → add aria-label="Open Navigation Menu".
8. For Custom HTML or shortcode elements:
   • Select the HTML widget → review the markup.
   • Add aria-label attributes or visible text labels for any interactive elements inside your custom code.
9. Repeat steps 2–8 for every interactive control across the page to ensure each element has a unique, descriptive label.
10. Click Update to save your changes, then preview the page and test with a screen reader or accessibility inspector to verify that all controls are announced correctly.