CODEWITHSUNDEEP
htmlw3c-validationwai-aria
QualiT
QualiT

Reputation: 1955

Validation error on Nu HTML Checker: "Bad value radio for attribute type on element input."

I am getting this error

Error: Bad value radio for attribute type on element input.

when trying to validate the following HTML on https://validator.w3.org/nu/#file

<fieldset>
<p class="city" id="citypref">Generally, I would prefer to live in...</p>
<br>
<label for="la" id="laLabel">
<br>
<input type="radio" name="city" id="la" value="la" aria-required="false" aria-labelledby="laLabel" role="radiogroup" >Los Angeles, California</label>
<br>
<label for="boston" id="bostonLabel">
<input type="radio" name="city" id="boston" value="boston" aria-required="false" aria-labelledby="bostonLabel" role="radiogroup" >Boston, Massachusetts</label>
<br>
<label for="both" id="bothLabel">
<input type="radio" name="city" id="both" value="both" aria-required="false" aria-labelledby="bothLabel" role="radiogroup" >Both</label>
<br>
<label for="neither" id="neitherLabel">
<input type="radio" name="city" id="neither" value="neither" aria-required="false" aria-labelledby="neitherLabel" role="radiogroup" >Neither</label>
<br>
</fieldset>

Any tips?

Upvotes: 0

Views: 2647

Answers (2)

Ibrahim
Ibrahim

Reputation: 6098

It seems that https://validator.w3.org/ is not yet equipped with the following codes: 

aria-required="false"
aria-labelledby="neitherLabel"
role="radiogroup"

As soon as you delete them, your code will pass without any problems.

W3 website provided examples on how to use the previous 3 codes on this page: https://www.w3.org/TR/WCAG20-TECHS/ARIA2.html. This is one of the examples that they provided:

<form action="#" method="post" id="alerts1">
<label for="acctnum" data-required="true">Account Number</label>
<input size="12" type="text" id="acctnum"
  aria-required="true" name="acctnum" />

<p id="radio_label" data-required="true">Please send an alert when balance exceeds $3,000.</p>

<ul  id="rg" role="radiogroup" aria-required="true" aria-labelledby="radio_label">
<li id="rb1" role="radio">Yes</li>
<li id="rb2" role="radio">No</li>
</ul>
</form>

When I copied their own example and pasted it on their validator, it failed to pass, and gave me the same error message that you are receiving.

Therefore, I would suggest contacting them directly to ask them to add the previous 3 codes to their validator database as a valid usage.

Update:

Check out Steve's answer for clarification.

Upvotes: 1

Steve Faulkner
Steve Faulkner

Reputation: 2640

It seems that https://validator.w3.org/ is not yet equipped with the following codes

It implements the conformance requirements for use of ARIA in HTML defined in https://www.w3.org/TR/html-aria/ which prohibits role=radiogroup on input type="radio". It defines what the valid role values are for all elements. No input elements allow role="radio". Only role="menuitemradio" is allowed for input type="radio".

Another answer incorrectly suggested ul role="radiogroup" and li role="radio" instead. But ARIA in HTML prohibits role="radiogroup" for ul and prohibits role="radio" for li.

Note there are some roles and property attributes introduced in ARIA 1.1 that the validator does not recognise. This is being worked on.

If you have an issue with the w3c validator suggest filing an issue

Upvotes: 5

Related Questions