Update Working Example ARIA24

[JAWS-test2]

Related to: #1007

I have changed the following:

• frame (shadow) around the stars, so that contrast is sufficient
• contrast between yellow and gray in the star increased, thus contrast greater than 3:1
• all font icons marked with aria-hidden=true, and aria-label removed
• alternative text of the icons in the source code as text (class=sr-only), so that the text is also visible without CSS (see F87)

If these changes are accepted, I would also change the ARIA24 file to update the source code examples

[netlify]

✅ Deploy Preview for wcag2 ready!

Name	Link
🔨 Latest commit	951933a
🔍 Latest deploy log	https://app.netlify.com/sites/wcag2/deploys/67cb143457e03a0008c3a3de
😎 Deploy Preview	https://deploy-preview-1016--wcag2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[patrickhlauke]

ARIA24 wants to illustrate how adding role="img" and aria-label="..." works as a way to both "signal" that a container is actually using a font icon, and how to then also provide a programmatic text alternative for it. This proposed PR instead removes the aria-label and adds .sr-only additional containers directly after them. I believe this goes way beyond (in a very idiosyncratic way) what ARIA24 tried to actually show. (incidentally, if you're doing aria-hidden="true" on the spans with the font icon, you can probably then just save yourself adding the role="img" in the first place ... in essence, this rewrite guts the whole purpose of ARIA24 and simply suggests hiding the font icon from AT and having a visually-hidden container after it). To me, that goes beyond a small tweak, and should be its own technique or something ("Using visually-hidden content...")

The one positive aspect (if the current examples do fail) is the strengthening of the colour contrast for the stars. This could be tackled as a standalone separate PR.

[patrickhlauke]

As for the original #1007, it's a lengthy conversation that is worth re-examining, because I don't believe even this PR would have "fixed" the question there (I'm removing the "Fixes..." part of the original description from this for that reason, to avoid having #1007 auto-close if this is closed)

[bruce-usab]

Discussed on Backlog call 3/7. Lori agreed to review.

[mraccess77]

I agree with Patrick that any PR should not change the intent of ARIA24 which is to highlight how role img can be used to mark icon fonts for low vision users to avoid font replacement.

[ljoakley]

This has morphed into a total rewrite rather than an update. This technique adds hidden text, and it is addressing more than original issue. It is using HTML plus CSS rather than ARIA. This PR no longer closes #1007 and F87 is being revisited.

We would like to close this and open a separate PR to adopt the contrast between yellow and gray in the star, which improves the contrast greater than 3:1.

[patrickhlauke]

Discussed in today's backlog meeting. TF agrees to close this PR. Made a separate PR to address the contrast issue in the working example #4293