Tutorial: Testing your content for accessibility

[westnz]

Details

• Content type (Online Workshop, Lesson, Course, Tutorial, or Lesson Plan): Tutorial
• Content title: Testing your content for accessibility
• Topic description: Improving accessibility on your site
• Audience (User, Developer, Designer, Contributor, etc.): User
• Experience Level (Beginner, Intermediate, Advanced, Any): Intermediate

Learning Objectives

What is accessibility, and why is it important? (50%) Tools to test your content for accessibility. (50%)

Related Resources and Other Notes

Automation Code

//tutorial

[github-actions[bot]]

Tutorial Development Checklist

• [ ] Tutorial created and announced to the team for Q/A review
• [ ] Tutorial reviewed and ready to publish
• [ ] Tutorial submitted and published to WPTV
• [ ] Tutorial published on WPTV
• [ ] Tutorial captioned
• [ ] Tutorial created on Learn.WordPress.org
• [ ] Tutorial post reviewed for grammar, spelling, etc.
• [ ] Tutorial published on Learn.WordPress.org
• [ ] Tutorial announced to Marketing Team for promotion

[ironnysh]

Hi @westnz :-)

[westnz]

Looking forward to collaborating with you on this video lesson @ironnysh!

[ironnysh]

Hi @westnz, a quick question before I start with the practical side: are all the plugins I mentioned in the outline "cleared"?

• Accessibility Checker
• Editoria11y Accessibility Checker
• Sa11y
• WP Tota11y ~~- Late edition: WP Accessibility~~

[westnz]

Hey @ironnysh They are all in the Plugins Directory so will be cleared 👍 Thank you!

[ironnysh]

Hi @westnz, the first draft of the script for the second lesson (the practical tutorial) is ready in this Google Doc. 🥳

Looking forward to your feedback!

PS, I'm still working on the first, theoretical lesson, and hope to finish it this week.

[westnz]

Fantastic work! I left some comments on the doc.

To clarify, the theoretical 'intro' lesson will be used in both User and Developer learning pathways. You mentioned this in the other GitHub Issue:

What if we stick to the "traditional" division of Developer vs. User used in the Learning Pathways? This way, both audiences share the same intro, but the practical part of the tutorial changes:

[ironnysh]

Thank you! :-) I fixed them and left a few questions there.

That was my initial plan, but I'm worried that a standard overview of A11Y would be too technical (for users) and possibly boring (for both), so I thought about going with a slightly more contentious angle: an opinionated “manifesto” instead of an impersonal best practice checklist. What do you think?

[westnz]

an opinionated “manifesto” 😆

It might not be the best route for our international open-source community.

Maybe you could spruce up the impersonal best practice checklist?

[ironnysh]

@westnz, do you have examples of theoretical, best practice type of intros to topics?

I watched #2279, for example, and even that is very hands-on (which is great, but not sure if it's easily reproducible in the context of A11Y).

Another option is to make it more “tangible” using audiovisual effects—I'll prepare a doc with a few potential routes and share it with you, cool?

[westnz]

Thanks @ironnysh

Could you please create a different GitHub Issue for this video lesson?

I wonder if we are thinking of the same thing when we talk about theoretical best practices. For the user, I am probably thinking more of practical best practices they could implement and why it is important:

1. ALT text
2. Color contrast
3. Keyboard accessibility
4. Accessible forms
5. Responsive design
6. Correct headings etc.

Looking forward to the potential routes you mentioned.

Here is a talk I attended at WCAsia (6:42:27): https://www.youtube.com/watch?v=yd9Gc0L-N2s&list=PL1pJFUVKQ7ETpYuALlCQPikuKEuihFsvU&index=2

[ironnysh]

Could you please create a different GitHub Issue for this video lesson?

Done.

I wonder if we are thinking of the same thing when we talk about theoretical best practices

I think we are :-) Thanks for the video—very helpful!

[westnz]

Hey @ironnysh Can I please confirm that we can go ahead and record this video now?

[ervanyuff]

Hi team, I would like to be involved in recording this video

[ironnysh]

-- @westnz, yes, let's do this :-)

-- @ervanyuff, thanks for taking this on!

[vinciunaite]

Hey, just dropping a comment so I can stay in the loop with this

[westnz]

Hey @ervanyuff I hope you are well. What is the typical estimated timeframe for the completion of a video of this nature? I realize video editing can be a very time-consuming process.

[ervanyuff]

Hi @westnz, editing usually takes two to three days depending on the complexity of the video. For this video, I will complete it within 2 days. I will inform you as soon as the video is ready

[westnz]

That is helpful feedback. Thank you 🦾

[westnz]

https://github.com/WordPress/Learn/assets/89751452/7ccb053a-bd39-495d-88e6-5b1942e04ec0

[westnz]

This has been a true team effort. Script: @ironnysh Narration: @westnz Video editing: @ervanyuff

Thank you for everyone's contributions! Great work, Ronny and Ervan.

The video will now move into the review phase.

[joedolson]

Notes:

• At 1:52, you state "try using a brighter background color or darker text color", but the visible warning is the opposite of that "a darker background color or brighter text color". While technically either approach is equally valid, it could be confusing to users to see one thing and hear another.
• At 2:20, the slide shows the text "unordered heading levels", and you say "incorrect heading levels". The spoken text is accurate; the visible text isn't. Heading levels are always ordered, the order just isn't always correct.
• The comment at 4:26 regarding the robustness of the free version of Accessibility Checker is confusing; the statement "when we tested the plugin, there were a few issues that still needed to be updated" is lacking sufficient context to make sense. I'm not clear whether you're saying that it caught things you needed to fix, that it didn't catch things you knew were errors, or that there were bugs in the plugin.

Other than these minor issues, this seems like a sound introduction.

[westnz]

Thank you so much for the review @joedolson

[amberhinds]

Hi @westnz thanks for making this tutorial! Here's some feedback:

• When you show the Outline tool it would be important to know this tool only works for core heading blocks. It currently does not include headings from non-core blocks which could result in false positives or confusion for users. Because of this limitation, it might be worthwhile to show the HeadingsMap browser extension as an alternative which will actually show all the headings on the page.
• When you talk about fixing color contrast can you actually show how to do that? Many people won't know what you mean by "fix these" and it might be helpful to demonstrate how to do that.
• There's a typo on the slide at 4:49 - additonal should be additional
• It seems like the list at 0:56 should match the list at the end of the video. For example, the list at 0:56 does not include color contrast ,which is actually the most common accessibility problem on the web and which you talk about in the video.

I'm also curious if there's anything I can help with RE Accessibility Checker. I didn't understand the meaning of "issues that still needed to be updated" - was there an issue you found in the plugin?

[SteveJonesDev]

@westnz, I'm just jumping in here echoing the same thing @joedolson and @amberhinds mentioned. I created and lead the development of the Accessibility Checker. If you could share some of the issues you noticed that would be very helpful. I could prioritize those and get my team working on them right away.

[westnz]

Thank you very much for the feedback, @amberhinds and @SteveJonesDev.

@ironnysh, would you mind responding to what issues we noticed with the Accessibility Checker? I tried to make the content evergreen by not mentioning specific things, but I will update it.

[ironnysh]

Thanks for your feedback, @joedolson and @amberhinds!

-- @amberhinds & @SteveJonesDev, I didn't run into issues per se, more like false negatives (or, as @joedolson said, “it didn't catch things you knew were errors”). Happy to provide more concrete details but as this is a bit off-topic, it's probably better to continue elsewhere (How's Slack?)

[amberhinds]

Slack is great. Please do send examples of what it missed. Thanks!

[westnz]

Thumbnail

[westnz]

//published