Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
Over on the Blind Accessibility Testers Society (Blind Bats!), Tim Harshbarger posted a great guide on how you can do many of the main activities on CodePen, like creating and editing Pens, changing their settings, commenting, sharing, and more.
Not only is this guide useful, but it gave us some great feedback on things we can make better. I tried posting my comments below over on their blog, but there was some token issue, so I'm posting here and hoping they find it. Some of the stuff is fixed, and some of it I'd love feedback on in order to get to fixing.
In the HTML section, the button label is "Open Settings". In both the CSS and JS sections, your screen reader will either think there is no label on the button or that the label of the button is "unlabeled 0".
After the buttons, you will find an edit field. This is where you will enter your HTML, CSS, or JS code. There are a few things you should know about the edit field. First, it is not labelled. If you navigate the page by edit or textfields, all 3 fields will be unlabelled.
We'd love to get these "edit fields" labeled. We use CodeMirror editors. The way it works is that we output the code onto the page in
<pre> tags, then CodeMirror does all it's fancy stuff to turn these into editors. So the question is what we should label.
- The hidden
<textarea>that gets created as a part of CodeMirror?
- The parent
<div class="CodeMirror">that wraps the CodeMirror editor internals?
- Something else? All of them?
Would love advice here.
I figure once we know which thing to label, we could create a connection between the editor and the header with an
aria-labeledby attribute on the editor, and and
id on the header, yeah? For now I put it on the
<pre>, which ultimately gets removed from the page I think. My suspicion is that it would be cool if CodeMirror saw that
aria-labeledby and moved it to the editable region when it builds itself.
just click the Save button in the banner region at the top of the page. You may or may not hear a confirmation of the save.
What is a good way to handle this? Is there a way to announce changes like this without moving focus or anything like that?
Also, it sounds like the way we handle "modals" might leave something to be desired. Like for the delete Pen:
It works a bit differently from the other links in this section. When you click it, an h1 will appear after the content info region asking you if you want to delete this pen.
Should we be attempting to announce this better? Move focus? Trap focus?
We have an Accessibility "Known Issue" area on our public Trello board you can check out.