Table of Contents
What is the label attribute
An HTML5's label attribute is 'for'
What happens when you mismatch the for with the input
If you mismatch this input, lets say your label's for is 'name' and you mismatch:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="og:url" content="https://www.exampleweb.com">
<title>Example webpage</title>
</head>
<body>
<main>
<label for="name">Name (required):</label>
<input
id="fullName"
name="fullName"
type="text"
placeholder="John Doe"
required
/>
</main>
</body>
</html>
HTML will treat the input like a seperate element therefore, clicking on the label will not put you on the input you have to click the input-box.
Why its bad to label for mismatch
Users on tiny mobile devices might find it annoying that you cant click the label to go to the input-box
This also confuses SR(Screen Readers) alot because the labels and input boxes are mismatched with the label's 'for'
It will also hurt SEO(Search Engine Optimization) because if users can not write a form they are more likely to leave this is gives Search Engines a negative impact for your website decreasing its Search Ranking
Even tho its best practice to also have the 'name' attribute in the input match the for mismatching this isnt best practice but it also is not as bad as 'for' mismatching
'for' mismatching also makes your webpage non-compliant with WCAG 2.1 Sucess Criterion 1.3.1 (Info and Relationships)
Top comments (0)