I received some useful feedback from someone who uses a screenreader about a notebook that I shared (mastodon thread here), which was interesting because, while it's pretty jumbled right now, screenreaders can look into the iframe and read some of a page on Observable!
But on the other hand, the inspector is a stumbling block for screenreaders right now:
The collapsed / expanded states are not accessible: it's a div with click events attached to it. Ideally this would include an aria-expanded attribute, as well as role=button (it could be a button element, but I think that would run into nesting rules pretty quickly)
The special ƒ is not accessible to screenreaders - they read the unicode description of it. I think maybe this would be something where it'd be good to have an aria-description, and possibly include the f as a css ::after or something that isn't read as part of the page content.
I received some useful feedback from someone who uses a screenreader about a notebook that I shared (mastodon thread here), which was interesting because, while it's pretty jumbled right now, screenreaders can look into the iframe and read some of a page on Observable!
But on the other hand, the inspector is a stumbling block for screenreaders right now:
role=button(it could be a button element, but I think that would run into nesting rules pretty quickly)ƒis not accessible to screenreaders - they read the unicode description of it. I think maybe this would be something where it'd be good to have an aria-description, and possibly include the f as a css::afteror something that isn't read as part of the page content.