{"action":"created","issue":{"url":"https://api.github.com/repos/dequelabs/axe-core/issues/176","repository_url":"https://api.github.com/repos/dequelabs/axe-core","labels_url":"https://api.github.com/repos/dequelabs/axe-core/issues/176/labels{/name}","comments_url":"https://api.github.com/repos/dequelabs/axe-core/issues/176/comments","events_url":"https://api.github.com/repos/dequelabs/axe-core/issues/176/events","html_url":"https://github.com/dequelabs/axe-core/issues/176","id":139384529,"number":176,"title":"Question: Radio inputs with the same name attribute value must be part of a group (false positive?)","user":{"login":"mdgbayly","id":493938,"avatar_url":"https://avatars.githubusercontent.com/u/493938?v=3","gravatar_id":"","url":"https://api.github.com/users/mdgbayly","html_url":"https://github.com/mdgbayly","followers_url":"https://api.github.com/users/mdgbayly/followers","following_url":"https://api.github.com/users/mdgbayly/following{/other_user}","gists_url":"https://api.github.com/users/mdgbayly/gists{/gist_id}","starred_url":"https://api.github.com/users/mdgbayly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mdgbayly/subscriptions","organizations_url":"https://api.github.com/users/mdgbayly/orgs","repos_url":"https://api.github.com/users/mdgbayly/repos","events_url":"https://api.github.com/users/mdgbayly/events{/privacy}","received_events_url":"https://api.github.com/users/mdgbayly/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2016-03-08T20:24:37Z","updated_at":"2016-03-10T17:57:56Z","closed_at":null,"body":"https://dequeuniversity.com/rules/axe/1.1/radiogroup\r\n\r\nWe have some markup with nested radio buttons that are generating the above error using the Chrome extension.  The only way we have found to resolve it is to add an identical aria-labelledby attribute to each radio button in the group referencing a common label.  However, our belief is that this does not give a good experience as we would like to include more contextual information for each radio button by using an aria-label or unique aria-labelledby attribute for each radio.\r\n\r\nThe example that demonstrates our issue is a slightly modified version of this WCAG role=\"radiogroup\" example, which has been modified to include additional input type=\"text\" fields in each sub group which matches our requirements.\r\n\r\nhttps://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA17/grouping-roles-example.html\r\n\r\nThe first version shown is the WCAG example with input type=\"text\" fields added. It is using span's with role=\"radio\" and interestingly this **passes** the aXe validation.\r\n\r\n```\r\n<div role=\"radiogroup\" aria-labelledby=\"alert2\">\r\n    <p id=\"alert2\">Send an alert when a charge exceeds $ 250</p>\r\n    <div>\r\n      <input type=\"text\" name=\"text1\" aria-label=\"text1\">\r\n      <span role=\"radio\" aria-labelledby=\"a2r1\" name=\"a2radio\" tabindex=\"0\" aria-checked=\"false\"></span>\r\n      <span id=\"a2r1\">Yes</span>\r\n    </div>\r\n\r\n    <div>\r\n      <input type=\"text\" name=\"text2\" aria-label=\"text2\">\r\n      <span role=\"radio\" aria-labelledby=\"a2r2\" name=\"a2radio\" tabindex=\"-1\" aria-checked=\"false\"></span>\r\n      <span id=\"a2r2\">No</span>\r\n    </div>\r\n</div>\r\n```\r\nHowever, if you change the example to use actual radio buttons which more closely matches our desired markup, it fails with the error listed in the title. If you remove the additional input type=\"text fields, then it successfully passes aXe validation.\r\n\r\n```\r\n<div role=\"radiogroup\" aria-labelledby=\"alert2\">\r\n    <p id=\"alert2\">Send an alert when a charge exceeds $ 250</p>\r\n    <div>\r\n      <input type=\"text\" name=\"text1\" aria-label=\"text1\">\r\n      <input type=\"radio\" aria-labelledby=\"a2r1\" name=\"a2radio\" tabindex=\"0\" aria-checked=\"false\"></input>\r\n      <span id=\"a2r1\">Yes</span>\r\n    </div>\r\n\r\n    <div>\r\n      <input type=\"text\" name=\"text2\" aria-label=\"text2\">\r\n      <input type=\"radio\" aria-labelledby=\"a2r2\" name=\"a2radio\" tabindex=\"-1\" aria-checked=\"false\"></input>\r\n      <span id=\"a2r2\">No</span>\r\n    </div>\r\n</div>\r\n```\r\n\r\nI understand that this markup might be questionable, given the nesting and different types of inputs in the role=\"radiogroup\" grouping element. I've seen other scenarios where aXe flags an error in situations like that due to unassociated inputs or something.  However, NVDA recognises the radio button grouping still in the second example.  Also it seems inconsistent at least that aXe does not treat the above two scenarios the same?\r\n"},"comment":{"url":"https://api.github.com/repos/dequelabs/axe-core/issues/comments/194977260","html_url":"https://github.com/dequelabs/axe-core/issues/176#issuecomment-194977260","issue_url":"https://api.github.com/repos/dequelabs/axe-core/issues/176","id":194977260,"user":{"login":"mdgbayly","id":493938,"avatar_url":"https://avatars.githubusercontent.com/u/493938?v=3","gravatar_id":"","url":"https://api.github.com/users/mdgbayly","html_url":"https://github.com/mdgbayly","followers_url":"https://api.github.com/users/mdgbayly/followers","following_url":"https://api.github.com/users/mdgbayly/following{/other_user}","gists_url":"https://api.github.com/users/mdgbayly/gists{/gist_id}","starred_url":"https://api.github.com/users/mdgbayly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mdgbayly/subscriptions","organizations_url":"https://api.github.com/users/mdgbayly/orgs","repos_url":"https://api.github.com/users/mdgbayly/repos","events_url":"https://api.github.com/users/mdgbayly/events{/privacy}","received_events_url":"https://api.github.com/users/mdgbayly/received_events","type":"User","site_admin":false},"created_at":"2016-03-10T17:57:56Z","updated_at":"2016-03-10T17:57:56Z","body":"OK - I'm sure you guys are right as you're way more clued into this than I am, but I'm still interested to understand why these are not valid from an accessibility/semantic HTML point of view.\r\n\r\nI see that aXe also flags the following with the same error.\r\nIt gives the following error summary:\r\n```\r\nSummary:\r\n\r\nFix any of the following:\r\n\r\nAll elements with the name \"a2radio\" do not reference the same element with aria-labelledby\r\nFieldset contains unrelated inputs\r\n```\r\nhttps://jsfiddle.net/3okf871L/2/\r\n\r\n```\r\n<div>\r\n    <p id=\"alert2\">Send an alert when a charge exceeds $ 250</p>\r\n    <fieldset>\r\n      <legend>\r\n        Mixed inputs\r\n      </legend>\r\n      <div>\r\n        <input type=\"text\" name=\"text1\" aria-label=\"text1\">\r\n        <input type=\"radio\" aria-labelledby=\"a2r1\" name=\"a2radio\" tabindex=\"0\" aria-checked=\"false\"></input>\r\n        <span id=\"a2r1\">Yes</span>\r\n      </div>\r\n\r\n      <div>\r\n        <input type=\"text\" name=\"text2\" aria-label=\"text2\">\r\n        <input type=\"radio\" aria-labelledby=\"a2r2\" name=\"a2radio\" tabindex=\"-1\" aria-checked=\"false\"></input>\r\n        <span id=\"a2r2\">No</span>\r\n      </div>\r\n    </fieldset>\r\n</div>\r\n```\r\nYet it seems valid to have 'unrelated inputs' in a fieldset according to the HTML5 spec:\r\n\r\nhttps://dev.w3.org/html5/spec-preview/the-fieldset-element.html\r\n\r\n```\r\n<fieldset>\r\n <legend>Display</legend>\r\n <p><label><input type=radio name=c value=0 checked> Black on White</label>\r\n <p><label><input type=radio name=c value=1> White on Black</label>\r\n <p><label><input type=checkbox name=g> Use grayscale</label>\r\n <p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>\r\n <datalist id=contrast>\r\n  <option label=Normal value=0>\r\n  <option label=Maximum value=100>\r\n </datalist>\r\n</fieldset>\r\n```\r\nCan you point me to something in WCAG or similar that you are using as the basis for your \r\n```\r\nFieldset contains unrelated inputs\r\n```\r\n\r\nI'm sure you're right - just trying to educate myself.\r\nThanks"}}