Content last reviewed March 2024
hmrc / accessibility Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
Content last reviewed March 2024
The font size for the language switcher options do not increase on Android Chrome. Issue also on the HMRC design system example https://design.tax.service.gov.uk/hmrc-design-patterns/welsh-language-toggle/
This may also be the case for sign out link https://design.tax.service.gov.uk/hmrc-design-patterns/sign-out/
See on service https://github.com/hmrc/accessibility-audits/issues/97
Using play-frontend-govuk the skip link content is hard-coded to English and so does not get translated to Welsh.
Reported to plat-ui via Slack 9 April 2021
Going to investigate using a HMRC standard template to mirror/enhance the GOVUK one.
One possible solution in the short term is for teams to send a skiplink component (with appropriate translation) to the @skipLinkBlock
as an override - see https://github.com/hmrc/play-frontend-govuk/blob/master/src/main/twirl/uk/gov/hmrc/govukfrontend/views/layouts/govukTemplate.scala.html#L66-L71
We're seeing a few services employing page heading captions as per GDS pattern, but want to encourage use of the more accessible HMRC pattern.
However there is complexity in combining the h1 with a legend and the caption which we need to look into and provide a best practice example which will work with exsiting components or build a new one.
Recently updated GDS guidelines say not to use inputmode="decimal"
https://design-system.service.gov.uk/components/text-input/#asking-for-decimal-numbers
It looks like certain Samsung Android tablets in particular are the issue, especially where Samsung's own browser is used.
alphagov/govuk-design-system#1279 (comment)
Look at doing a quick verification of the findings and then making sure teams follow the new guidance.
Using the published patterns we are seeing error summaries being repeated on page load several times.
Noticed on
Voice Control on MacOs using Safari (v14.1) adds whitespace, what prevents the user from entering a valid option.
On video recording me trying to choose pounds from list of available currencies. When using Voice Control it adds space in the front, what prevents autocomplete to match the
existing option. If I type it without space works fine.
We tested with VoiceControl on iOS device, it works fine. It doesn't add space when user dictates it.
Raised this issue in autocomplete repo alphagov/accessible-autocomplete#494
Embedding an <aside>
element in another landmark may disable screen reader functionality allowing users to navigate through complementary content. See https://www.w3.org/TR/wai-aria-practices-1.1/examples/landmarks/complementary.html
Example of this on the design system https://design-system.service.gov.uk/patterns/start-pages/default/index.html
Seen in "Check your State Pension" https://docs.google.com/document/d/1sTAKzoInzTiMCQOryYWAVEBHbuqaT01VNGRba1hclJA/edit
The current disclosure control (aka details element) is not appearing in the Voiceover Rotor under Form Controls in Safari. Still appears in Chrome.
The older version (in Gov UK Elements) does, but requires some modification to ensure links inside the component's body do not receive focus. See https://gist.github.com/adamliptrot-oc/6db079ddd1cd46030418f62e9fab3839
Bug reported to Webkit:
Using this page as a testbed:
https://design-system.service.gov.uk/components/details/default/index.htmlWhen navigating to the element with Voiceover the following is announced:
"You are currently on a summary. To click this button press Control, Option, Space"
but the element does not appear in Voiceover's RotorExpected behaviour:
The element appears in the Form Controls section of the RotorActual behaviour:
The element does not appear in any section of the RotorSeen with Safari 13 and in Safari Tecnology Preview Release 105
Example page: https://design-system.service.gov.uk/components/file-upload/default/index.html
Note, in IE11 and Firefox, button text is "Browse..." and on Chrome it is "Choose file".
File dialog box opens if reading label text on IE11 with Dragon.
Windows Speech Recognition works fine in Chrome and opens File dialog box on IE11 inconsistently saying "click browse"
1st identified on [EU Exit] Route 1 service.
Potentially change code to use same method as "Add to list" pattern https://design.tax.service.gov.uk/hmrc-design-patterns/add-to-a-list/ (change pattern also on same page to compare)
Code from:
<a class="govuk-link" href="">
Change
<span class="govuk-visually-hidden"> xxx</span>
</a>
To:
<a class="govuk-link" href="">
<span aria-hidden="true">Change</span>
<span class="govuk-visually-hidden">Change xxx</span>
</a>
Example of issue in Chrome on JRS:
Talkback interacts with error summaries when using "Controls" to navigate - should only be cycling through tick boxes, radio buttons, switches, sliders (seek controls), text fields and buttons https://support.google.com/accessibility/android/answer/6006598?hl=en-GB
Seen on error summaries generated on ITSA Submission Service
It seems there is a bug in Voiceover for iOS 13.6 (issue continues on iOS 13.7 and iOS14.0.1) on iPads (not on iPhones) which means you can’t edit a currency field which has been pre-filled by tapping on the input (tapping on the label, or using the next/prev keyboard input navigation works).
iPad running iOS12.4 works as expected.
iPhones running iOS13.6 works as expected.
Empty currency fields are working as expected, but pre-filled ones are not editable.
The field is announced along with the contents and instructions to "double-tap to edit" but doing so just repeats the label.
The above seems to also be the case when using voice control to access the fields. (seems fixed on iPad OS14)
Test cases https://accessibility-training.herokuapp.com/examples/currency
A potential fix seems to be to add
.hmrc-currency-input__unit {
pointer-events: none;
}
which allows pass-through on the £ symbol.
Audit board to track testing of fix: https://github.com/hmrc/accessibility-audits-external/projects/29
Multiple issues with this feature.:
I have now seen on quite a few services media="screen"
is being set instead of media="all"
as per the design system page template https://design-system.service.gov.uk/styles/page-template/ for the main app css
.
Example in service [EU Exit] Merchandise In Baggage (MiB)/Merchandise Online Declaration Service (MODS)
Put together some guidance for people who are looking to get an audit.
Things to mention:
There is already some guidance on Confluence:
Document how accessible print to pdf is for screen-readers.
Would be useful to have a set of data to call on when asked.
For example, in VO Mac, text is readable, heading semantics are lost, links are preserved.
Error summary list elements have an incorrect ARIA role in them:
<li role="tooltip" data-journey="search-page:error:@error.key">
[code on GitHub]
That is not how tooltip
is intended for use, as explained here:
tooltip
roleA contextual popup that displays a description for an element.
The tooltip typically becomes visible, after a short delay, in response to a mouse hover, or after the owning element receives keyboard focus. The use of a WAI-ARIA tooltip is a supplement to the normal tooltip behavior of the user agent.
Used in this way, it adds nothing to the user experience. If anything, it adds negative value to the screen reader experience.
This has been an issue since ~2016, so it's long overdue to be addressed.
Remove it and advise teams to upgrade.
Find out where the article landmark is being added to servces from and remove it.
With a component which has hints for individual radio inputs associated via aria-describedby (see https://design-system.service.gov.uk/components/radios/#radio-items-with-hints), this masks an error tied to the fieldset via aria-describedby in Voiceover Mac.
The error message does not get announced when the hint aria is referenced from the inputs directly.
When moving direct to the input, the hint is read out but the error message is not.
Works as expected on NVDA and JAWS
Possible solution: Add error message id to the aria-describedby of the radio inputs alongside the hint id.
Example text for testing....
Issue: Skip link captures VoiceOver focus on page load.
Why: VoiceOver reads out the skip link content on page load, which means the page title is not read out. On error pages, the error may not be read out.
To resolve: It seems teams are using the pattern correctly and this looks to be a bug in VoiceOver.
Issue persists with Chrome and Safari Tech Preview and can also be replicated on:
and on external non-GOVUK sites:
Is not JavaScript-related as issue persists with JS disabled.
This is present on services using AF >= 3.11 and is a result of a change in how the css creates the arrow in Elements conflicting with the js from AF which polyfills the component on legacy browsers.
The double arrow is only present in the collapsed state
Services can fix this themselves by adding the following to their css:
details .arrow {
display: none!important;
}
Initially identified this on an audit https://hmrcdigital.slack.com/archives/G01EQBX3H53/p1605632709006300
Guidance stating role="group"
can be labelled using aria-labelledby
https://www.w3.org/TR/WCAG20-TECHS/ARIA17
After discussions with Adam, concluded it is not a WCAG 1.3.1: Info and Relationships fail if aria-labelledby
not present.
However, role="group"
is a viable alternative when it is difficult to employ the fieldset-legend technique - both are not required as per the design system example: https://design-system.service.gov.uk/components/date-input/default/index.html
Need to investigate / discuss and raise with GDS if a concern.
Users able to set language to welsh on the cookie page and accessibility statement page. After moving to the main service the header/footer still persist the Welsh whilst the page body shows English and lang=en not applied
One of the possible solutions to pass separate lang=en to the main
element, but other elements outside of main
will still violate WCAG 3.1.2 Language of parts such as breadcrumbs service name etc
Jira ticket created by plat-ui team https://jira.tools.tax.service.gov.uk/browse/PLATUI-1163
Raised an issue with the HMRC content style guide team due to lack of guidance:
hmrc/HMRC-content-style-guide#99
Service for audit.
Updating font size in Safari to 36px make h1
element smaller than it was. Decrease from 48px to 36px.
The possible issue that parent elements using a combination of em
and rem
units for font size, what leads Safari to inherit not correct value.
Instructions how set font size on MacOs:
Preferences > Advanced > Accessibility: set the font size to 36px (which is 200% of the standard 16px)
Style guide says to write "£6.5 million"
On Voicover iOS and Mac this reads as "6 pounds and fifty pence million"
Removing the space fixes this on the above but goes against the style guide.
GOV.UK Design System’s Bank details has the following guidance.
“Must be between 6 and 8 digits long”
“Must be between 8 and 11 characters long”
“Let users enter their sort code in whatever format is familiar to them. Allow additional spaces, hyphens and dashes.”
If the account number is not in the correct format
‘Enter a valid account number like 00733445’.
Any spaces which are added to the account number field will generate an error. This behaviour feels wrong, especially as some users need to break up strings of digits in order to read them properly. We should accept spaces in these fields and amend the hints and errors accordingly.
NVDA shows radio buttons differently in Chrome and Firefox when viewing the elements list dialog.
This issue seems to be present only in the dialog.
Using https://design-system.service.gov.uk/components/radios/default/index.html as a test case
With Chrome:
Note the additional "unlabelled" prefix (as well as the switch in order of information).
Issue has been reported as a bug to NV Access
nvaccess/nvda#11165
Observed on non-GOVUK services as well as in GovUK design patterns.
When moving through a form, if an input is focussed (causing the keyboard to display), when the submit button is reached the focus will move back to the last previously-focussed input.
A bug is open with Apple (although talks about external keyboard use which I can confirm, although this is happening since unpairing the keyboard too) https://bugs.webkit.org/show_bug.cgi?id=213238
Is the dl
GDS CYA pattern preferable over a pattern using ul
?
If so then Scaffold and possibly Play-UI will possibly need updating.
If the preference is for a ul
based pattern then that will need to be added to the HMRC patterns.
Increasing the font size on Chrome, Firefox or IE11 does not increase the size of the text.
GOV.UK Design System specifies font size in "em" and "px" as fallback. AF only has "px".
Seen on Vat View and Change https://docs.google.com/document/d/1ElwRokMTBHszYPdaJGPD3NoQCSAfgwnZ4zSPGnQHM7E/edit
Make the documentation a bit more user-friendly — especially the Definition documents.
Review the responsive table solution using css and aria developed in HMRC but which is not currently a pattern
https://github.com/Fenwick17/nhs-responsive-tables
Look at other options and come up with a recommendation for the Pattern Working Group
✅ Please tick the boxes below to show you’ve read the requirements.
Before raising this request for an in-house accessibility audit, we did the following things as a team:
Services pulling in play-language currently get the old pattern
https://github.com/hmrc/play-language/blob/b5a259d6d68c262b70ac7534899563a7648ba1dc/src/main/scala/views/language_selection.scala.html
This fails WCAG on several criteria
WCAG 3.1.2 Language of Parts
WCAG 2.4.4 Link Purpose (In Context)
WCAG 1.3.1 Info and Relationships
Plat-UI are looking at pulling play-language into the main play-frontend-hmrc and are investigating the possibility of doing the same for play-ui (incorporating the fixes in the process)
https://jira.tools.tax.service.gov.uk/browse/PLATUI-909
When a service hands off a journey temporarily to a microservice (such as Address Lookup), there is a possibility that even if the user remains active they can be timed out of the 'parent' service.
Currently a service only hands off a sign-out url to Address Lookup (and a timeout in seconds, normally 900). This means that even if the 'child' microservice has a timeout dialog and senses the user's inaction, the keep-alive url it pings will be that of the child microservice. As the timeout will be the same as the parent this means that if a user lingers long enough to trigger the timeout dialog on the child service, they will already have timed out of the parent service.
This can be alleviated by the child service also accepting the parent service's keep-alive url and pinging that in addtion to it's own.
It is likely that to fully fix this, the child service will need to ping the parent's keep-alive url on each page load in addition to when the dialog is shown.
This has been reported to the Address Lookup team, but other services will also need to be notified.
Heading level 2 with a class of h3-heading
isn’t doing anyone any favours and just looks confusing. It’s an out-dated classname and also the wrong size.
<h2 id="errorSummaryHeading" class="h3-heading">@Messages(errorHead)</h2>
[code on GitHub]
This has been an issue since ~2016, so it's long overdue to be addressed.
Change the class to heading-medium
and advise teams to upgrade.
Note: possibly related to #19.
Some pages leave the user focused in the location bar, rather than in the web content area on the skip link. This behaviour happens in some services, not all.
JAWS in particular will merge the visible and hidden copy from a change link and then mis-pronounce the result, for example instead of "Change first name" it will say "Changefirst name". This also shows up in the dialog listing links.
Placing the space inside or outside the visually-hidden copy does not seem to make any difference to how the phrase is spoken or displayed.
One solution is to move from the current code:
Change<span class="visually-hidden"> first name</span>
to one which keeps the phrasing together:
<span aria-hidden="true">Change</span><span class="visually-hidden">Change first name</span>
Is there a benefit to using css "speak-as" to assist users of AT in processing reference numbers and acronyms such as PAYE?
Is this property supported enough? Does it have bugs?
How will AT other than screen-readers interpret it? eg Braille displays
Will this make it easier to accurately remember a reference number without having to resort to character-by-character navigation?
Some examples https://liptrot.org/demos/speech/
Noticed on a few services recently but seems to be an iOS bug rather than code-related.
When navigating from one page to another, especially noticeable when submitting forms the VO focus remains in the general location of the submit button. This means the user is dropped part-way down the page on the subsequent page.
Seems similar to the old skip-link bug.
GOV.UK Design System’s Confirmation pages pattern has issues when a user sets their browser font size to 200% on iOS.
Link to code in HMRC Frontend https://github.com/hmrc/hmrc-frontend/blob/4f3eb41cc8db00b17b3b80328a4b562a93b6a0dd/src/components/header/template.njk#L59-L65
We are seeing more services, especially common microservices, not having a suitable service homepage link but are unable to have no link.
Issues identified https://github.com/hmrc/accessibility-audits-external/issues/876#issuecomment-742469485
Need to have further thought as currently a service name with and without a link look identical, there is no affordance to indicate one way or another, so the common pattern should really be held.
@adamliptrot-oc: I’ve been talking to Plat-UI around this issue where teams are finding it difficult to provide a landing page for their accessibility statements. I’ll add this into that discussion.
Some other random things created by other teams in HMRC – not specifically for testing this time but I wanted to flag some of these up
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.