Orphaned Labels on Default Themes

Go down

Orphaned Labels on Default Themes Empty Orphaned Labels on Default Themes

Post by kjSage on June 16th 2020, 8:04 pm

I've noticed, since a friend convinced me to try forumotion boards a few days ago, there are quite a few orphaned labels of inputs (mostly textinputs, but a few tadio/checkboxes). From what I can tell it's happening on just about every forumotion board I can find, on default templates. This support board included.

Example, on the "post a new topic" page:
Code:
<label>Title of the topic</label>

<input class="inputbox medium" type="text" name="subject" value="" maxlength="128" title="The length of the title for this topic must be ranging between 3 and 128 characters" onkeypress="if (event.keyCode==13){return false}">

As you can see, the label above has no for attribute, and the corresponding input has no ID, which is used to point the label at that specific input. Without the label either having a proper ID (or being wrapped around the input entirely), when browsing with a screenreader, the user is informed there's a label, but that label leads nowhere. In that case, it's about the same as not having a label at all.

This can be seen on quite a few pages, most notably the new post/message page and the edit profile page. And on the edit profile page, most of the radio buttons are surrounded by a label, but the label of the actual option itself goes nowhere. And the text inputs aren't hooked up to the labels at all, either.

Ex:
Code:
<label>Display a notification when new replies are written :</label>
<label><input type="radio" name="post_prevent" value="1" checked="checked">Yes</label>

<label>Board Language :</label>
<select name="language"> -snipped- </select>

MDN's guide to label usage: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
kjSage
kjSage
New Member

Posts : 3
Reputation : 1
Language : English

View user profile https://kjsage.forumotion.com

Back to top Go down

Orphaned Labels on Default Themes Empty Re: Orphaned Labels on Default Themes

Post by SLGray on June 16th 2020, 8:12 pm

So there is an issue with screen readers?


Orphaned Labels on Default Themes Slgray10
Orphaned Labels on Default Themes Ssshfm13

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 47971
Reputation : 3373
Language : English
Location : United States

View user profile https://help.forumotion.com/

skouliki likes this post

Back to top Go down

Orphaned Labels on Default Themes Empty Re: Orphaned Labels on Default Themes

Post by kjSage on June 16th 2020, 8:58 pm

Yes. The labels that lack a for attribute (and inputs without the corresponding ID) make it impossible for screen readers to know the context of what the input is for.

So for the topic title, for example, you'd want the label to have a for attribute and the input to have an ID.
Code:
<label for="topictitle">Title of the topic</label>
 
<input id="topictitle" class="inputbox medium" type="text" name="subject" value="" maxlength="128" title="The length of the title for this topic must be ranging between 3 and 128 characters" onkeypress="if (event.keyCode==13){return false}">
kjSage
kjSage
New Member

Posts : 3
Reputation : 1
Language : English

View user profile https://kjsage.forumotion.com

Back to top Go down

Orphaned Labels on Default Themes Empty Re: Orphaned Labels on Default Themes

Post by SLGray on June 16th 2020, 9:05 pm

When I tested it in my browser, I did not see any issue with the reader view.  When I clicked the new post button, the new post page loaded correctly.


Orphaned Labels on Default Themes Slgray10
Orphaned Labels on Default Themes Ssshfm13

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 47971
Reputation : 3373
Language : English
Location : United States

View user profile https://help.forumotion.com/

Back to top Go down

Orphaned Labels on Default Themes Empty Re: Orphaned Labels on Default Themes

Post by kjSage on June 16th 2020, 9:09 pm

Ahh I don't mean the "reader mode" that some browsers come with. I mean when using a screen reader software (NVDA/Jaws on desktop, voiceover/talkback on iphone/android) that the context is lost for non-sighted users. Basically, the label is there to tell the user what the input is for as most screen readers won't read placeholder/title text that's attached to an input.
kjSage
kjSage
New Member

Posts : 3
Reputation : 1
Language : English

View user profile https://kjsage.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum