govuk-frontend
govuk-frontend copied to clipboard
alphagov
List known validation errors/warnings
Description
Once we've finished the WCAG 2.1 compliance work, we should consider increasing visibility of any known validation errors with our code due to accessibility, legacy etc fixes. This would help users to know which errors/warnings are known / expected.
An example would be the role attribute we add to <header>, <footer>, <button> for older browsers that don't support HTML5 elements, and the src on SVG issue.
Checklist
- [x] Review and list existing / known issues -> resulting list
- [x] Triage list with team to decide which ones need to be investigated / fixed and which ones should be documented in the Design System / somewhere as known issues.
This could be useful https://stevefaulkner.github.io/Articles/On%20HTML%20belts%20and%20ARIA%20braces%20(The%20Default%20Implicit%20ARIA%20semantics%20they%20didn%E2%80%99t%20want%20you%20to%20know%20about).html (thanks @leekowalkowski-hmrc)
Known validation errors / warnings
⬇️ Something to point users back to until we can document the below as per https://github.com/alphagov/govuk-frontend/issues/1687.
▶️ Button - disabled
Message
Attribute aria-disabled is unnecessary for elements that have attribute disabled
Explanation / issue raised
aria-disabled allows JAWS 15 announce that the button is "unavailable". For JAWS 16+ disabled attribute is sufficient to enable this behaviour.
Flagged by
https://validator.w3.org
Next steps
Wont-fix
▶️ Checkboxes, radios with label as heading
Message
Element h1 not allowed as child of element legend in this context.
Explanation / issue raised
Valid as of HTML 5.2, but living standard does not (yet?) recognise it as valid
Flagged by
https://validator.w3.org
Next steps
Wont-fix
▶️ Checkboxes, radios with conditional reveal
Message
Elements must only use allowed ARIA attributes
Explanation / issue raised
See #979. This pattern has been through a lot of user research by different service teams and we have not had any feedback to suggest that this is not working for real users of assistive technologies. We will ask the community for more research with real users of assistive technologies to understand if there are any barriers. We know that users of the screen reader JAWs and VoiceOver on Mac (Checkboxes only) are not helped by aria-expanded, so based on the feedback we get from the community we can try to understand if removing these attributes entirely will cause barriers.
Update: See #1991 We'll update this explanation when the epic has been completed.
Flagged by
Axe Chrome extension
Next steps
We will (1) not remove these aria attributes, pending more feedback from user research (2) document this as a known issue (3) consider approaching the ARIA working group to suggest broadening the scope of aria-expanded.
Update: See #1991 We'll update this explanation when the epic has been completed.
▶️ Checkboxes, radios with conditional reveal
Message
Radio inputs with the same name attribute value must be part of a group
Explanation / issue raised
We have an issue to investigate this: https://github.com/alphagov/govuk-frontend/issues/1591
Flagged by
Axe Chrome extension
Next steps
https://github.com/alphagov/govuk-frontend/issues/1591
▶️ Date input, details
Message
A group created with role=group is missing a name
Explanation / issue raised
https://github.com/alphagov/govuk-frontend/blob/b57ade99ac353a944620d818c1f89e1005935181/src/govuk/components/date-input/template.njk#L80
Flagged by
Siteimprove Chrome extension
Next steps
Wont-fix
▶️ Date input
Message
The group role is unnecessary for element fieldset.
Explanation / issue raised
We have an issue to investigate this: #1590
Flagged by
https://validator.w3.org
Next steps
#1590
▶️ Footer
Message
The contentinfo role is unnecessary for element footer
Explanation / issue raised
To support IE8-10 which have no or partial support for HTML5.
Flagged by
https://validator.w3.org
Next steps
Wont-fix while we support older IE
▶️ Header
Message
The banner role is unnecessary for element header.
Explanation / issue raised
To support IE8-10 which have no or partial support for HTML5.
Flagged by
https://validator.w3.org
Next steps
Wont-fix while we support older IE
▶️ Header
Message
Attribute src not allowed on element image at this point.
Explanation / issue raised
https://github.com/alphagov/govuk-frontend/blob/b57ade99ac353a944620d818c1f89e1005935181/src/govuk/components/header/template.njk#L34
Flagged by
https://validator.w3.org
Next steps
Fixed as of GOV.UK Frontend v3.13.0 (#2229)
▶️ Header
Message
Possible misuse of aria-label
Explanation / issue raised
#1340
Flagged by
https://validator.w3.org
Next steps
Fixed in v4.0.0 (#2427)
▶️ Button - disabled link
Message
Color contrast is insufficient
Explanation / issue raised
Non-text contrast of non-active elements
Flagged by
Axe Chrome extension
Next steps
Wont-fix? The problem is inherent in the wider design pattern with things "greyed out" to indicate their unavailability. We discourage their use as much as possible.
▶️ Button - disabled warning
Message
Color contrast is insufficient
Explanation / issue raised
Non-text contrast of non-active elements
Flagged by
Siteimprove Chrome extension
Next steps
Wont-fix?The problem is inherent in the wider design pattern with things "greyed out" to indicate their unavailability. We discourage their use as much as possible.
▶️ Details
Message
<dl>elements must only directly contain properly-ordered<dt>and<dd>groups,<script>or<template>elements
Explanation / issue raised
Valid as of HTML 5.2
Flagged by
Webhint
Next steps
Wont-fix
▶️ Page template
Message
All page content must be contained within landmarks
Explanation / issue raised
See https://github.com/alphagov/govuk-frontend/issues/1604#issuecomment-539524177
Flagged by
Axe
Next steps
Wont-fix
▶️ Footer - Crown Copyright Logo
Message
Ensure the contrast between foreground and background meets WCAG 2 AA contrast ratio thresholds
Explanation / issue raised
Colour contrast issue flagged. We don't believe this is a WCAG fail as it meets the 3:1 ratio for non-text content / meaningful graphics.
Flagged by
Axe
Next steps
#2134
▶️ Function.prototype.bind polyfill - CWE-749
Message
Reported in #2751.
Line 125 of the Function.prototype.bind polyfill is flagged as Common Weakness Enumeration 749, as use of the Function constructor may allow for aribtrary code execution.
Explanation / issue raised
We use this polyfill to account for functionality that is unavailable in Internet Explorer 8. As a polyfill, this code is only executed by browsers that require it, limiting the scope of exploitation to legacy browsers which (with the exception of IE8) are not supported by GOV.UK Frontend.
The polyfill was not authored by the Design System team and is derived from Polyfill.io. Their version of the code is here.
Flagged by
Unknown
Next steps
We intend to remove polyfills like this one soon, as part of our plan to reduce IE support generally. We're unlikely to fix this in the interim.
Added a new entry to the table for details:
<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script> or <template> elements
HTML 5.2 permits <div> as a descendant of <dl> – previous versions do not.
Thanks to @MalcolmVonMoJ for flagging.
When we complete this we can document and close the conditional reveal related issues:
- https://github.com/alphagov/govuk-frontend/issues/979
- https://github.com/alphagov/govuk-frontend/issues/989
- https://github.com/alphagov/govuk-frontend/issues/935
It would be good to link to these known issues from the 'research' section for relevant components.
Thanks @nickcolley. I've documented https://github.com/alphagov/govuk-frontend/issues/979 as it's a warning documented by Axe. https://github.com/alphagov/govuk-frontend/issues/979 and https://github.com/alphagov/govuk-frontend/issues/935 are bugs, I don't think we meant to document those within this particular card.
Closing as we're going to publish the list as documentation as part of https://github.com/alphagov/govuk-design-system/issues/1048
Reopening this as users might search for these errors/warnings under open issues in this repo. Close when https://github.com/alphagov/govuk-frontend/issues/1687 is done.
Would be good to consider getting this published properly at some point, had reports from a user that it's not very easy to use as a reference right now.
With Hanna’s list being inside a comment, it isn’t especially easy to read (scrolling horizontally is a pain) and it’d be good to surface the reported bugs, as I didn’t know where to look for them (apologies if there is a big link somewhere obvious :slightly_smiling_face: ).
As discussed above the table is hard to use, especially with regards to horizontal scrolling. I've tried to add some inline styles / HTML to the table to limit the column widths to reduce the need to scroll horizontally but Github markdown strips out any inline styles / col attributes so I don't see a way to control the column widths. We're basically asking too much of the Github table format and should look to publish these differently.
Hi, The above list seems to be missing https://github.com/alphagov/govuk-frontend/issues/2472 for the accordion.
All of these issues are now listed in a public GitHub Project – I plan to raise a pull request to update links to this issue to point to the new project and then close this issue.