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

• Voiceover Mac
• JAWS 18 on Chrome reads "There is a problem" 3 times, then the error message, then the page title
• NVDA on Firefox reads title, then error summary, then title, then error summary

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.html

When 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 Rotor

Expected behaviour:
The element appears in the Form Controls section of the Rotor

Actual behaviour:
The element does not appear in any section of the Rotor

Seen with Safari 13 and in Safari Tecnology Preview Release 105

https://bugs.webkit.org/show_bug.cgi?id=211284

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

Voiceover

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.

Voice control

The above seems to also be the case when using voice control to access the fields. (seems fixed on iPad OS14)

To test

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.:

• the link does not declare it as a collapsed/expanded section and so when this is clicked on the screen reader user is not alerted to the expanded form
• the form is not styled in accordance to the design system
• on error, there is no error summary
• HTML code errors are introduced in the form of multiple labels for each input field
• this feature does not work if JavaScript is disabled and the user is redirected to a page that is also inaccessible, e.g. no h1 on https://www.staging.tax.service.gov.uk/contact/problem_reports_nonjs?service=pensionannualallowancecalculatorfrontend

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:

• when to get an audit (not the week before going live)
• what to audit (provide user journeys and user information)
• what to expect (there will most likely be work to do)
• reacting to the audit results (💥)

There is already some guidance on Confluence:

• Get an accessibility audit before public beta
• Many services have their own guidance pages as well (not sure why)

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.

Problem

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 role

A 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.

~ Accessible Rich Internet Applications (WAI-ARIA) 1.2

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.

Solution

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:

• the GOVUK Design System pages
• the GOVUK Prototype Kit

and on external non-GOVUK sites:

• The A11y Project
• WebAim

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.

Setting flag to welsh translates partially main service

Problem

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

Solution

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

Reported alphagov/govuk-design-system-backlog#49 (comment)

WCAG 1.4.11 Non-text Contrast
WCAG 2.4.7 Focus Visible

Workaround fix:

.hmrc-header.hmrc-header--with-additional-navigation .hmrc-sign-out-nav__link:focus {
    color: #0B0C0C;
}

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.

Account number

“Must be between 6 and 8 digits long”

International bank account details

“Must be between 8 and 11 characters long”

Sort code

“Let users enter their sort code in whatever format is familiar to them. Allow additional spaces, hyphens and dashes.”

Error message

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 Firefox:

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:

• Made sure each page of our service contains valid HTML.
• Made sure each page of our service is free from WCAG errors.
• Tested each page of our service with at least one screen reader, to make sure it was usable.

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

E.g. https://design-system.service.gov.uk/patterns/dates/default/index.html

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.

Problem

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.

Solution

Change the class to heading-medium and advise teams to upgrade.

Problem

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.

Service name link

Link to code in HMRC Frontend https://github.com/hmrc/hmrc-frontend/blob/4f3eb41cc8db00b17b3b80328a4b562a93b6a0dd/src/components/header/template.njk#L59-L65

Problem

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

Solution

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.

Manuals content from GOV.UK

• https://www.gov.uk/hmrc-internal-manuals/business-income-manual/bim51420
• https://www.gov.uk/hmrc-internal-manuals/compliance-handbook/ch10100
• https://www.gov.uk/hmrc-internal-manuals/compliance-handbook/ch290110
• https://www.gov.uk/hmrc-internal-manuals/denatured-alcohol/dnalc2150
• https://www.gov.uk/hmrc-internal-manuals/employment-status-manual/esm3535
• https://www.gov.uk/hmrc-internal-manuals/employment-status-manual/esm3660
• https://www.gov.uk/hmrc-internal-manuals/employment-status-manual/esm7060
• https://www.gov.uk/hmrc-internal-manuals/inheritance-tax-manual/ihtm44021
• https://www.gov.uk/hmrc-internal-manuals/national-insurance-manual/nim24050
• https://www.gov.uk/hmrc-internal-manuals/national-insurance-manual/nim38501

Specialist content

• https://www.gov.uk/government/publications/vat-notice-70022-making-tax-digital-for-vat/vat-notice-70022-making-tax-digital-for-vat
• https://www.gov.uk/government/publications/vat-notice-733-flat-rate-scheme-for-small-businesses/vat-notice-733-flat-rate-scheme-for-small-businesses
• https://www.gov.uk/guidance/exemptions-from-climate-change-levy
• https://www.gov.uk/guidance/help-and-support-for-self-assessment
• https://www.gov.uk/guidance/changes-to-tax-relief-for-residential-landlords-how-its-worked-out-including-case-studies
• https://www.gov.uk/guidance/stamp-duty-land-tax-transactions-that-dont-need-a-return
• https://www.gov.uk/guidance/trading-and-moving-from-northern-ireland-to-ireland-in-a-no-deal-brexit
• https://www.gov.uk/guidance/umbrella-companies-offering-to-increase-your-take-home-pay-spotlight-45
• https://www.gov.uk/guidance/payroll-what-to-do-if-your-business-merges-or-changes-ownership
• https://www.gov.uk/government/publications/excise-notice-197a-excise-goods-holding-and-movement/excise-notice-197a-excise-goods-holding-and-movement

Other

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

• https://community.hmrc.gov.uk/knowledgebase/article/KA-01245/en-us
• https://community.hmrc.gov.uk/knowledgebase/article/KA-01000/en-us
• https://community.hmrc.gov.uk/knowledgebase/article/KA-01207/en-us
• http://www.hmrc.gov.uk//courses/SYOB3/syob_3_exps/html/syob_3_exps_menu.html?utm_source=HMRC-DSBA-SBF&utm_campaign=DSBA-SBF&utm_medium=Forum
• https://community.hmrc.gov.uk/forums/customerforums/bre
• https://www.gov.uk/guidance/tax-professional-development-programme
• https://www.gov.uk/government/publications/your-charter/your-charter
• https://www.gov.uk/government/news/hmrc-tips-on-avoiding-self-assessment-tax-scams
• https://www.gov.uk/government/publications/hmrc-monthly-performance-report-september-2019/hmrc-monthly-performance-update-september-2019