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

New issue

Open

opened 2023-08-29 17:26:58 -04:00 by luce-carevic · 0 comments

luce-carevic commented

2023-08-29 17:26:58 -04:00

(Migrated from github.com)

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

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:

There is no for/id relation between some label and input. <img width="637" alt="Screenshort of the preferences form" src="https://github.com/zedeus/nitter/assets/6073336/37fda735-ae67-43ce-8bcd-08d84ace00bf"> **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. <img width="510" alt="Screenshot — code of the link replacements section" src="https://github.com/zedeus/nitter/assets/6073336/95488a22-4872-41f1-bd74-b8194b20d6bc"> 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

This discussion has been locked. Commenting is limited to contributors.