Text fragments read in the wrong order using Voiceover

[petertgiles]

(spun off from #4619)

❌ Current behaviour (issue)

When we use the hidden tag to hide part of the string for screen readers the text fragments are read out-of-order for MacOS voiceover. We're not sure if the issue affects other tools, too.

How to reproduce

1. Environment - local, probably all
2. Which browser and/or Assistive Technology? MacOS Voiceover, not sure about others
3. Step-by-step instructions explaining how to reproduce the problem.
   1. Visit the homepage at https://uat-talentcloud.tbs-sct.gc.ca/en
   2. Find the "apply now" button in the "Browse Opportunities for the Indigenous community" section
   3. The read text will be "to the Indigenous Apprenticeship Program Apply now"

✔ Expected behaviour (fix)

The read text should be "Apply to the Indigenous Apprenticeship Program now"

Acceptance Criteria

A set of assumptions which, when tested, verify that the accessibility requirement was met.

• Investigate an alternative strategy for specifying screen-reader-only text.
• Text fragments for screen readers using the hidden tag a read out in the expected order using MacOS Voiceover

[esizer]

So, this is likely a bug with data-h2-visibility="base(invisible)". We are using a common approach for this producing the fllowing css:

[data-h2] [data-h2-visibility*="base(invisible)"] {
    height: 1px;
    left: -100vw;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 1px;
 }

This is a bug with VoiceOver and absolutely positioned items or off screen elements (negative margin/location). Though, there does not seem to be a reliable fix as mentioned in #4586 (comment)

No one seems to know the fix 😢

[brindasasi]

should we check in other screen reader tools may be ? ( other than voice over )

[esizer]

should we check in other screen reader tools may be ? ( other than voice over )

This is not an issue with NVDA or JAWS. Regardless, we should try to avoid hidden text if possible.

https://www.scottohara.me/blog/2023/03/21/visually-hidden-hack.html

[RM-1978]

Many apologies for the delay. I agree with Eric for multiple reasons including creating a consistent screen reading experience across users. I also feel that we should evaluate the text we are hiding to ensure that it is not integral to site operation for visual, non-verbal learners folks as well.

[esizer]

I also feel that we should evaluate the text we are hiding to ensure that it is not integral to site operation for visual, non-verbal learners folks as well.

Sadly, I think we have a lot of integral text hidden 😢 It would be great to have a content review to avoid this kind of thing and craft text that fits within the design constraints without needing to hide it from visual users as well.

[RM-1978]

Solution:
Remove hidden text and replace "Apply Now" button text with more descriptive text: " Apply IT Apprenticeship Program for Indigenous Peoples".

[mnigh]

Solution: Remove hidden text and replace "Apply Now" button text with more descriptive text: " Apply IT Apprenticeship Program for Indigenous Peoples".

@RM-1978 was this a typo? should it not be the following: Apply to the IT Apprenticeship Program for Indigenous Peoples

[mnigh]

Apply now text removed in #7223.