Accessibility Auditing: Include section of content with imperfect accessibility

[damon314159]

Describe your suggestion

The links and assignments on this lesson provide the learner with a variety of tools (mostly within DevTools) to highlight accessibility features which could be improved upon. Since the lesson page itself has very good accessibility (scoring 100 on Lighthouse for both mobile and desktop) these tools don't pick up on anything if the learner tries them out. The DevTools pane continues to show "no issues", which makes it hard to tell if anything happened at all.

I believe a section on the page akin to the below example would not only resolve the above concern, but also provide an exercise in putting what the learner has read about into practice.

Example:

Exercise

Below is a <div> element containing a few accessibility mistakes. See if you can use what you've learnt to identify them. Think about how you might rectify them if it were your own project's page.

Hint: There is a low contrast ratio, an image without alt text, and a button without an accessible name
<The div itself would go here>

I can see a potential hang-up in this idea, in that it would potentially be confusing for those learners who rely on assistive technologies. Though I think this could be helped by keeping the accessibility mistakes mild enough to not be too inconvenient, while also being detectable. It would be a relatively tricky line to walk. The example I gave above would need tweaking to that effect, but I defer this to someone with more experience.

Path

Ruby / Rails, Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-accessibility-auditing

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

(Optional) Discord Name

Damon

(Optional) Additional Comments

I would like to work on this issue, but as mentioned in the description I do not have the experience in this area to navigate all the nuance in picking an appropriate example, so I would need help.

[CouchofTomato]

@codyloyd Would really value your input here mate

[Asartea]

I don't think including bad accessibility content in the page itself is worth the trade-off; I'd personally prefer it to be hosted on one of the code-sharing platforms, both to make editing easier and to ensure the friction generated is minimal