diff --git a/results/aria-allowed-attr.json b/results/aria-allowed-attr.json index 89418d7..88f6f76 100644 --- a/results/aria-allowed-attr.json +++ b/results/aria-allowed-attr.json @@ -64,5 +64,7 @@ "dl_aria-multiselectable": "The issue with the code snippet is that the `aria-multiselectable` attribute is not allowed for the `dl` element's role. \n\nThe correct version of the code snippet would be:\n\n<`div` `role`=\"listbox\" `aria-multiselectable`=\"true\">", "form_aria-expanded_style": "The issue with the code snippet is that the `aria-expanded` attribute is not allowed for the `form` element's role. This attribute is typically used for elements that can be expanded or collapsed, such as a menu or a tree. \n\nThe correct version of the code snippet would be: \n\n<`form` `style`=\"--menu-open-height: 133px;\">", "hr_role=\"presentation\"": "The issue with the code snippet is that the `aria-orientation` attribute is not allowed for the `hr` element with `role=\"presentation\"`. \n\nThe correct version of the code snippet would be: \n\n<`hr` `role`=\"separator\" `aria-orientation`=\"vertical\"> \n\nThis code snippet uses the `role=\"separator\"` attribute which is appropriate for the `hr` element, and the `aria-orientation` attribute is allowed for this role.", - "div_aria-required": "The issue with the code snippet is that the `aria-required` attribute is not allowed for a `div` element. The correct version of the code snippet would be to use a different element that allows the `aria-required` attribute, such as an `input` element: ``" + "div_aria-required": "The issue with the code snippet is that the `aria-required` attribute is not allowed for a `div` element. The correct version of the code snippet would be to use a different element that allows the `aria-required` attribute, such as an `input` element: ``", + "md-input-container_aria-invalid_aria-readonly": "The issue with this code snippet is that `md-input-container` element does not have a role attribute defined, so it is not clear what role the element is fulfilling. Therefore, it is not possible to determine which ARIA attributes are allowed or not allowed for this element.\n\nThe correct version of the code snippet should include a role attribute that defines the role of the `md-input-container` element. For example, if the element is a form field container, the role attribute should be set to \"form\". The corrected code snippet would be:\n\n", + "a_aria-selected": "The issue with the code snippet is that the `aria-selected` attribute is not allowed for the `a` element's role. The correct version of the code snippet would be to use a different element with a role that allows for the `aria-selected` attribute, such as a `button` element with `role=\"tab\"`:\n\n```\n\n```" } diff --git a/results/aria-allowed-role.json b/results/aria-allowed-role.json index 10e84c7..36e59ef 100644 --- a/results/aria-allowed-role.json +++ b/results/aria-allowed-role.json @@ -94,5 +94,7 @@ "article_role=\"tabpanel\"": "The issue with the code snippet is that the `role` attribute value is set to \"tabpanel\" which is not appropriate for an `article` element. The correct value for the `role` attribute should be \"article\". The corrected code snippet is: <`article` `aria-hidden`=\"true\" `role`=\"article\" `style`=\"width: 385px;\" `tabindex`=\"-1\">", "iframe_role=\"dialog\"": "The issue in the code snippet is that the `role` attribute is set to \"dialog\", which is not appropriate for an `iframe` element. The correct role for an `iframe` element is \"presentation\" or \"none\" depending on the specific use case. \n\nThe correct version of the code snippet is:\n<`iframe` `aria-label`=\"...\" `role`=\"presentation\" `src`=\"...\" `style`=\"border: none; height: 100%; width: 100%; visibility: hidden;\" `title`=\"...\">", "progress_role=\"presentation\"": "The issue with the code snippet is that the `role` attribute is set to \"presentation\" which means that the element is not intended to be perceivable by assistive technologies. This can cause accessibility issues for users who rely on assistive technologies to access the content. \n\nThe correct version of the code snippet should include a more appropriate `role` attribute value. For a progress bar, the `role` attribute value should be set to \"progressbar\" to indicate that the element is a progress bar and provide the necessary information to assistive technologies. \n\nThe corrected code snippet is: ``", - "h4_role=\"button\"": "The issue with the code snippet is that the `h4` element is not a valid interactive element and should not have a `role` attribute with a value of \"button\". \n\nThe correct version of the code snippet should use a valid interactive element such as `button` or `a` with a `role` attribute of \"button\". For example: \n\n \n\nor \n\nHeading Text" + "h4_role=\"button\"": "The issue with the code snippet is that the `h4` element is not a valid interactive element and should not have a `role` attribute with a value of \"button\". \n\nThe correct version of the code snippet should use a valid interactive element such as `button` or `a` with a `role` attribute of \"button\". For example: \n\n \n\nor \n\nHeading Text", + "img_role=\"group\"": "The issue with this code snippet is that the `role` attribute value is set to \"group\" which is not appropriate for an `img` element. The correct value for `role` attribute for an `img` element is \"img\". \n\nThe corrected code snippet is: `\"banner36c5523f085f34d5995783d65cb8bce4a\"`", + "a_role=\"group\"": "The issue with the code snippet is that the value of the `role` attribute, which is \"group\", is not appropriate for an anchor element (``). The `role` attribute is used to define the purpose of an element for assistive technologies, and \"group\" is not a valid role for an anchor element.\n\nThe correct version of the code snippet should be:\n\n\n\nIn this corrected version, the `role` attribute is set to \"button\", which is a valid role for an anchor element that triggers an action. This will ensure that assistive technologies correctly interpret the purpose of the element." } diff --git a/results/aria-roles.json b/results/aria-roles.json index 5640515..677f43a 100644 --- a/results/aria-roles.json +++ b/results/aria-roles.json @@ -27,5 +27,6 @@ "div_role=\"bar\"": "The issue with the code snippet is that the `role` attribute is set to an invalid value \"bar\". The correct values for `role` attribute are predefined and should be used according to their intended purpose. \n\nThe corrected version of the code snippet is: \n\n```html\n
\n
\n
\n```\n\nIn this corrected version, the `role` attribute is set to \"button\", which is a valid value according to its intended purpose.", "div_role=\"spinner\"": "The issue with the code snippet is that the value \"spinner\" is not a valid value for the role attribute. According to the W3C specification, valid values for the role attribute include \"button\", \"checkbox\", \"dialog\", \"listbox\", \"menu\", \"progressbar\", \"radio\", \"slider\", \"spinbutton\", \"status\", and \"tablist\", among others.\n\nThe correct version of the code snippet would be: <`div` `role`=\"progressbar\"><`div`> \n\nHere, the role attribute has been updated to use the valid value \"progressbar\", which accurately describes the function of the element.", "section_role=\"filters\"": "The issue with the code snippet is that the value assigned to the role attribute, \"filters\", is not a valid value. According to the W3C Accessibility Guidelines, valid values for the role attribute include \"button\", \"checkbox\", \"combobox\", \"link\", \"listbox\", \"menu\", \"progressbar\", \"radio\", \"scrollbar\", \"slider\", \"spinbutton\", \"switch\", \"tab\", \"textbox\", and \"toolbar\".\n\nA correct version of the code snippet could be: <`section` `role`=\"navigation\">, assuming that the section contains navigation elements. If the section contains a list of filters, a correct version could be: <`section` `role`=\"listbox\">. It is important to choose the correct value for the role attribute to ensure that the element is properly identified by assistive technologies.", - "section_role=\"Past Event Video\"": "The issue with the code snippet is that the value \"Past Event Video\" is not a valid value for the role attribute. The correct values for the role attribute are predefined by the WAI-ARIA specification and should be used to ensure proper accessibility. \n\nThe correct version of the code snippet is: <`section` `role`=\"region\" `aria-label`=\"Past Event Video\">. \n\nIn this corrected version, the role attribute is set to \"region\" which is a valid value for the role attribute. Additionally, the `aria-label` attribute is used to provide a descriptive label for the section, which will improve accessibility for users of assistive technologies." + "section_role=\"Past Event Video\"": "The issue with the code snippet is that the value \"Past Event Video\" is not a valid value for the role attribute. The correct values for the role attribute are predefined by the WAI-ARIA specification and should be used to ensure proper accessibility. \n\nThe correct version of the code snippet is: <`section` `role`=\"region\" `aria-label`=\"Past Event Video\">. \n\nIn this corrected version, the role attribute is set to \"region\" which is a valid value for the role attribute. Additionally, the `aria-label` attribute is used to provide a descriptive label for the section, which will improve accessibility for users of assistive technologies.", + "p_role=\"input\"": "The issue with this code snippet is that the `role` attribute has an invalid value. The value \"input\" is not a valid role for a `

` element. The correct value for the `role` attribute depends on the purpose of the element. \n\nA possible correct version of the code snippet could be: `

`. In this case, the `role` attribute has been changed to \"textbox\", which is a valid role for an element that accepts user input." } diff --git a/results/scrollable-region-focusable.json b/results/scrollable-region-focusable.json index 58428a6..42e9ae6 100644 --- a/results/scrollable-region-focusable.json +++ b/results/scrollable-region-focusable.json @@ -27,5 +27,6 @@ "div_aria-live": "The issue with the code snippet is that it only contains an `aria-live` attribute which is used to indicate that the content within the element may change dynamically and should be announced by assistive technology. However, it does not provide any keyboard accessibility for the scrollable content within the `div` element. \n\nThe correct version of the code snippet should include the `role` attribute with a value of `\"region\"` to indicate that the `div` element is a container for content, and the `tabindex` attribute with a value of `-1` to make it focusable by keyboard. Additionally, the `aria-label` attribute should be added to provide a descriptive label for the content within the `div` element. \n\nThe updated code snippet is:\n\n
\n \n
", "table_thead_tr_th_th_style_th_style_tbody_tr_td_td_style_td_style": "The issue with the code snippet is that the scrollable content within the table is not accessible by keyboard. This means that users who rely on keyboard navigation or assistive technologies may not be able to access all the content.\n\nTo fix this issue, the table should have a `role` attribute set to `\"grid\"`, and each cell should have a `role` attribute set to `\"gridcell\"`. Additionally, the table should have appropriate `aria-label` or `aria-labelledby` attributes to provide context for the content.\n\nHere is the corrected version of the code snippet:\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
", "nav": "The issue with the code snippet is that it does not provide keyboard accessibility for scrollable content within the `