fix(a11y): multiple choice quizzes

[bbsmooth]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

Closes #50194

Please note: I have only updated the challenges in Scientific Computing with Python at this point. Waiting for feedback before I continue with other courses.

This is an initial rough draft at adding a fieldset and legend to the MC quiz questions. This involves both updating the code that generates the questions and also the challenge files themselves.

My approach is that the legend should only contain the question itself and should not contain any extensive code examples in it. The majority of the work is putting any code examples before the question text and then making the question text refer to the code examples properly. For most challenges this was simply moving the question below the code example and rewording it slightly.

A few challenges needed more extensive rewriting, for example Conditional Execution. Because each answer option is itself a three line code example, and formatting (spacing) is crucial to the answer, I think it is better if we allow screen reader users to inspect them outside of the answer options. Another challenge that follows this pattern is Comparing and Sorting Tuples.

I also hacked up a method to allow us to visually hide the legend text with sr-only if we feel the question needs to appear before the code example. This will allow us to repeat the question in the legend for the sake of screen reader users.

[codesee-maps]

👀 Review this PR in a CodeSee Review Map

View the CodeSee Map of this change

Legend

[Sboonny]

We are removing the label, because it has changed, because people can push the PR to draft, if they need more time and tell people that PR is in progress, without the need for a member to add the label for contributors.

[truongductri01]

Is this ticket still open?
Would love to chat about the task

[bbsmooth]

I am open and waiting for initial feedback on this, so if you have any feel free to leave it.

[Sboonny]

I am open and waiting for initial feedback on this, so if you have any feel free to leave it.

About feedback, I am happy that you solved the issue with the legend contrast in the dark mode, and your work is nice 👍.

I am currently waiting until you're done fully before giving suggestions or anything, so I don't get in the way.

Outside the scope of the PR, can we make these changes easier to make in the future? I can't imagine how much effort you are putting and want to automate it or make it simpler to do in the future.

[bbsmooth]

@Sboonny I will be out this coming week so I won't be able to finish up right away. Please feel free to leave any comments, you won't get in the way. Especially if you think something can be done better then I'd rather know now instead of having to go back and fix everything after the fact. I'm especially interested in what you think of my method of marking the legend for sr-only. I'm guessing there is a better way to do it.

As for automating this process, I'm not sure how much more can be done. I've already made it so that the last p element in the question text will be used for the legend. For simple questions that don't have code examples then this will be adequate. For example, in the Machine Learning with Python module, it looks like both the Tensorflow and How Neural Networks Work courses are simple text questions with no code examples and thus nothing further needs to be done for these

But for more complex questions that have code examples we need to reword the simpler ones so that the legend refers to the code that precedes it. And for really complex questions we need to restructure them so that they are easier for screen readers to navigate (such as I did with the Conditional Execution challenge in the Python for Everybody course under the Scientific Computing with Python module). Another issue is that it is better if we don't have scrollable content in the labels. So if the answer options have code that can potentially scroll then we either need to move it out of the label or we need to allow the code to line wrap.

As for making this easier in the future for any news courses that use the video template, the best way to do that is to make sure we create them to be more accessible in the first place 🙂

[Sboonny]

nitpicks

[Sboonny]

Especially if you think something can be done better then I'd rather know now instead of having to go back and fix everything after the fact. I'm especially interested in what you think of my method of marking the legend for sr-only. I'm guessing there is a better way to do it.

To be honest, I didn't understand how big the issue was, and even now that I understand it better, I would have made generic legend text, which is worse than your current approach.

About a better approach, I can't think of any except changing the workflow itself, instead of Markdown, that is converted to XML or HTML, need to investigate that later, we can use the challenge editor as base for these types of changes to the text, and keep the page pure HTML without the markdown file, to get the best of both worlds.

The curriculum team can use a new challenge editor, that indicate how the page will be rendered and if there is bad practice, to create files with the same smooth experience as the markdown file, but with hints of how the steps look and what screen readers expect the page to look like.

This way your work won't be reverted, and you won't need to use JavaScript to change the layout, because the layout will still be fully under our management, and we simply be providing different templates for the people who developing the curriculum.

[Sembauke]

Hey @bbsmooth,
How is this going?

[bbsmooth]

@Sboonny @Sembauke I've been thinking about this PR for quite a while now and I don't think I'm happy with it. The MC quizzing format currently used by fCC does need to be fixed, but I'm not sure the way to go about this is for me to make a bunch of changes and decisions on my own in this PR. It think this needs to be a bigger effort with buy in from everyone. And you mentioned the challenge editor, which to be honest, I have never used. But if that is how the MC challenges are created then definitely that needs to be included into any fix we make for these.

I will leave this PR here for a reference, but I think it should be put on hold for now until we all have a more comprehensive understanding of what needs to be fixed to make these MC quizzes accessible.

However, I do think there are some small improvements that can be made immediately that will greatly enhance accessibility for now. I will open up separate PRs on those.

[naomi-lgbt]

And you mentioned the challenge editor, which to be honest, I have never used.

The existing challenge editor is essentially just an embedded text editor with buttons that run the step creation tools. Can make working on step-based challenges easier for newer contributors, but isn't directly related to multiple-choice challenges or a requirement for editing challenges in any way.

I believe Muhammed was proposing rebuilding the challenge editor in a way that makes catching these types of issues easier, but I think that's out of scope for the current conversation.

[Sboonny]

I agree with Bruce here, about a bigger effort and buy in, the new certification is published with the same HTML structure, mentioned in the linked issue.

And you mentioned the challenge editor, which to be honest, I have never used.

I believe Muhammed was proposing rebuilding the challenge editor in a way that makes catching these types of issues easier, but I think that's out of scope for the current conversation.

Although true, we need to discuss a way for the changes to not be reverted in future PRs, and a way to provide an accessible template for challenges like this one, so we stop repeating the same issue every time a certification with the same HTML structure is published.

[Sboonny]

I have resolved my nitpicks, because what I am worried about isn't related to them at all. if the nitpicks are an issue, we can discuss adding eslint rules for them, if that deemed needed in a different issue/pr.