Improving accessibility of highlighted code samples

I’m at a Dagstuhl seminar about programming language usability and a researcher named Ameer Armaly (a screen reader user himself) presented an interesting technique he invented for making code skimmable by screen reader users by turning function & class declarations into headings (screen reader users can already jump to specific headings without having to read linearly). Do keep in mind that visually impaired users do not currently have any kind of syntax highlighting and have to read code linearly. This helps mitigate that.

It would be great if we could add this to Prism, at least as a plugin (since not all languages can utilize it). We could use aria-level="N" instead of actual heading elements, to avoid clashing with existing CSS for headings.

There are still some challenges to tackle before implementing. Ameer told me that JAWS doesn't deal well with aria-level="N" where N > 6. I don't know if that holds true for other screen readers, but if it does, that means we have to use small Ns, which could mess up the outline of the rest of the page. In theory that could be mitigated by wrapping the <pre> with a sectioning element, but those are not implemented either. :(

CCing @ljwatson who may be able to provide useful feedback.

No file, test, or entry point is named. Start by reviewing Prism's plugin architecture and the accessibility constraints described here, then determine whether the proposed heading approach can be specified and tested across supported screen readers; done requires an agreed implementation scope and accessibility behavior.