nitter icon indicating copy to clipboard operation
nitter copied to clipboard
verified publisher icon zedeus

Preferences page — form: label/input for/id relation missing

Open luce-carevic opened this issue 2 years ago • 0 comments

There is no for/id relation between some label and input.

Screenshort of the preferences form

Example:

<label for="theme">Theme</label> 
<select name="theme">[…]</select>

Should be :

<label for="theme">Theme</label> 
<select name="theme" id="theme">[…]</select>

Similar issue

In the link replacements section.

Screenshot — code of the link replacements section

Should be :

  • <input name="replaceTwitter" id="replaceTwitter" type="text" placeholder="Nitter hostname" value="" autofocus="">
  • <input name="replaceYouTube" id="replaceYouTube" type="text" placeholder="Piped hostname" value="" autofocus="">
  • <input name="replaceReddit" id="replaceReddit" type="text" placeholder="Teddit hostname" value="" autofocus="">

Even though associating labels implicitly can be OK, explicit labels are better supported by assistive technology. Consider adding a for/id liaison between label and input.

See:

  • https://www.w3.org/WAI/WCAG21/Techniques/html/H44
  • https://www.w3.org/WAI/tutorials/forms/labels/#associating-labels-implicitly

luce-carevic avatar Aug 29 '23 21:08 luce-carevic