Label form fields, name icon links and declare the page language
Three quick accessibility fixes: every form field needs a label, every link needs readable text, and every page should declare its language.
The problem
Form fields have no label, icon-only links have no accessible name, or the <html> element has no lang attribute.
How to spot it
- Screen readers announce "edit text" or just "link".
- Clicking a field's label text does not focus the field.
Why it matters
Labels and link text are how assistive technologies, voice control and many users understand what a control does. The language declaration makes screen readers pronounce text correctly and helps translation tools.
What happens if you leave it
Forms and navigation become unusable for some visitors, which can lose enquiries and create legal risk in some jurisdictions.
How to fix it
-
Form fields: connect a visible label to each input:
<label for="email">Email address</label> <input id="email" name="email" type="email" autocomplete="email">Placeholder text is not a label.
-
Icon-only links and buttons: add an accessible name:
<a href="https://www.facebook.com/acme" aria-label="Acme on Facebook"><svg aria-hidden="true">…</svg></a> -
Language: set it once on the root element, for example
<html lang="en">or<html lang="bn">.
Common mistakes
- Using a placeholder instead of a label.
- Generic link text such as "click here" repeated across the page.
How to check the fix worked
Tab through the page with the keyboard and use a screen reader (VoiceOver, NVDA or TalkBack) on your contact form. Re-run the audit.
References and further reading
Related tutorials
Make pages display properly on phones (viewport meta tag)
Without a viewport tag, phones show your desktop layout zoomed out. One line in the page head fixes it, provid...
Add alt text and dimensions to images
Describe meaningful images for screen readers and search engines, mark decorative ones correctly, and set widt...