Accessibility changes

[mbgower]

Added 5 images and all new content to the Accessibility tab for code snippet.
Removed the Screen Reader testing material from the Usage page, and made one minor editorial that seemed acceptable during the playback.

Closes #

{{short description}}

Changelog

New

• {{new thing}}

Changed

• {{change thing}}

Removed

• {{removed thing}}

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/carbon-design-system/carbondesignsystem/xDwrek2g8CenLeCZxYQp7Tu395fk
✅ Preview: https://carbondesignsystem-git-fork-mbgower-494883-carbon-design-system.vercel.app

[github-actions]

DCO Assistant Lite bot All contributors have signed the DCO.

[mjabbink]

@mbgower Thanks for tackling this! This is great. The next steps are for the design team to provide some feedback or do the design detailing on them illustrations and they need to span 8-columns in the page layout. Can you connect with @aagonzales to see who can support you on these improvements. Much thanks.

[mbgower]

thanks @mjabbink
Yeah, I wasn't sure if it was supposed to be 8. I'll adjust.
FYI, up until now we've been having these rewrites reviewed by CAG during handoffs.
@laurenmrice has looked over the ones we've done to date.

I thought I'd try this way to see if we could accelerate the changes. Here's what I'm doing this time (tracked in our internal system):

• propose to get access to do our own PR
• create a branch with our suggested changes
• walk through the PR as part of hand off
• if possible, implement the accessibility page as part of PR?
• potential opportunity for knowledge share on rudiments of github/PR to a11y designers

[mbgower]

I have read the DCO document and I hereby sign the DCO.

[tay1orjones]

recheck

[laurenmrice]

@mbgower

• I see the revised images! ✅
• Question: For any time we reference a keyboard function like Space, Enter, Tab, etc should we style them as code in markdown like we do on the Usage tab for the Interactions section for consistency? We typically do this for all components.
• Also I understand that the word "Labelling" is technically correct and is the preferred spelling in the UK, while "Labeling" is the preferred spelling in the US. Not sure if it matters from a content perspective but wanted to note it here.

[mbgower]

I will update the keys to make them like code.
It's funny you mentioned "labelling". I noticed that yesterday.
the specification uses aria-labelledby, etc.
I'll double check IBM Style and update non-technical uses accordingly.

[laurenmrice]

Looks good to me 🎉

[mjabbink]

Seeing this now brings up wether mixing the two type of beginning and endings together. I did not think of that yesterday. I have a solution below that would allow (at least in this case) to maintain that little vertical straight segment and the beginning/ending of the large arch.

It requires some shifting to the right on the code snip and reducing the largest arch down.

[laurenmrice]

@mjabbink Thanks Mike, I will change this in the next iteration of Code snippet. 👍

[mjabbink]

or you can divide the code field into 4 units and use that to place the arch?

[mjabbink]

or just use a small one and start the next tab from the center of the code field?

[mjabbink]

Not sure if the little straight segment is going to be a major pain all the time or only on occasion. Otherwise maybe the purple half circle might be better (as long as arrows are vertical or horizontal).

[mbgower]

@mjabbink All great things to chew on. With a long horizontal target, there is more flexibility here than on some other components. As Lauren says, if we keep that in mind for other components we're updating images for, we can go back and choose which one seems to work better for other components

[mjabbink]

@mbgower I recommend adding the “why” or “benefit”. I feel like if we say statement like this then we should follow up with why we do it or the benefit to the users.

Current
What Carbon provides
Carbon bakes keyboard operation into its components, as well as many other accessibility considerations. Could be an opportunity to educate.

Suggestion
What Carbon provides
Carbon bakes keyboard operation into its components, as well as many other accessibility considerations. This allows for... benefits, advantages... the why.