Accessibility testing is needed for {learnr} widgets

[jooyoungseo]

As this title suggests, {learnr} seems to lack web accessibility components. As {learnr} tutorials are increasingly being used in formal and informal educational settings, accessibility compliance is critical to ensure everyone's equal access.

Do you have any plans to improve accessibility for {learnr} widgets?

[gadenbuie]

In #704, I added a skip link and replaced key <div> elements with landmark elements for <main>, <article>, and <nav> content (further improved in #705).

[jooyoungseo]

Awesome! I see the improvement there for landmark/skip navigation! Thanks for your great work, @gadenbuie!

I still don't see any interactive control when using screen reader in the following example. I am not sure whether this is a good example though for a11y test.

---
title: "Hello, Tutorial!"
output: learnr::tutorial
runtime: shiny_prerendered
---

```{r setup, include=FALSE}
library(learnr)
```

## First Topic

### An Easy Exercise

This code computes the answer to one plus one,
change it so it computes two plus two:

```{r addition, exercise=TRUE}
1 + 1
```


This code computes the answer to one plus one,
change it so it computes two plus two:

```{r addition, exercise=TRUE}
1 + 1
```

[gadenbuie]

Thanks @jooyoungseo, and thank you for testing out the updates! I edited your small example to include at a level-2 and level-3 heading. The most important is the level-2 heading which will become part of the "topics" navigation landmark. Can you try the new example?

I'm sorry there hasn't been much visible movement on this issue until now. I've had a considerable amount of technical debt to work through to get to the point of being able to make these changes. Any problems you notice and can share will be very helpful!

I know that the code editor is a particular pain point. It's at least not a keyboard trap anymore – pressing escape while the editor is in focus allows Tab and Shift + Tab to move focus to the next or previous element. Beyond that, I think we would need to switch to a new code editor library to get real improvements. If you (or anyone else) happen to know of a library with better a11y support, I'd love to check it out. For example, CodeMirror is a library that has come up in my research and may be a good fit.

[jooyoungseo]

@gadenbuie -- Currently, landmark/skip navigation, and heading navigation are not the critical issues because we can simply fix/add semantics using aria roles. However, as you pointed out, the editor is the pain. I don't see any editable text box in the example above when using screen reader. As far as an accessible editor is concerned, I would suggest using Monaco editor used in VSCode, which is the most accessible code editor that I have tested. It has an a11y mode. You can find more info here.

[jooyoungseo]

CodeMirror used to be not that accessible, but it seems like it has improved a lot over the recent years. I have just tested it now, and it works much better than before. Yes, I think CodeMirror could be another good choice.

[gadenbuie]

Thanks @jooyoungseo! I'll read up on both and start thinking about how we could transition away from Ace.