List known validation errors/warnings

[hannalaakso]

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

• Review and list existing / known issues -> resulting list
• 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.

[aliuk2012]

Linked to alphagov/govuk-design-system#677

[hannalaakso]

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)

[hannalaakso]

Known validation errors / warnings

⬇️ Something to point users back to until we can document the below as per #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: #1591

Flagged by

Axe Chrome extension

Next steps

#1591

▶️ Date input, details

Message

A group created with role=group is missing a name

Explanation / issue raised

govuk-frontend/src/govuk/components/date-input/template.njk

Line 80 in b57ade9

{#- We override the fieldset's role to 'group' because otherwise JAWS does not

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

govuk-frontend/src/govuk/components/header/template.njk

Line 34 in b57ade9

The <image> element is a valid SVG element. In SVG, you would specify

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 #1604 (comment)

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.

[36degrees]

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.

[jpveooys]

Hi,
The above list seems to be missing #2472 for the accordion.

[36degrees]

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.