Orphaned Labels on Default Themes

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

So there is an issue with screen readers?

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}">

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.

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.