Accessibility

[simbleau]

Accessibility is hard. But having accessibility settings and features would go a long way in the journey of making Abridge unique. I don't know of any themes actually with appropriate support.

I'm currently doing some research on this, like how we can improve Abridge to fit accessibility settings.

So far my thoughts are, in order of priority:

• Move the table of contents on blogs to appear prior than the article in the DOM such that screen readers encounter the summary/Toc first, not last.
• Button to resize text up/down next to theme switch
• Ensure all text containers wrap instead of scroll
• High contrast toggle? I don't think this is necessary since Abridge is already high contrast by lighthouse standards. Not sure about accessibility standards. Apparently the Web Accessibility Toolbar on Firefox is unofficially endorsed as a proxy for testing most accessibility concerns.
• Search textbox focus is apparent when focused, and able to be focused by keyboard
• Ensure youtube/vimeo/etc. shortlinks do not autoplay by default, as this conflicts with readers.
• Support Click headings with [+] buttons to get hidden information . I'm unsure if Spoilers could be adapted, or if this could be a new markup, like #- for a collapsible heading (starting collapsed) and #+ for a collapsible heading (starting opened)

[Jieiku]

The accessibility does not look too difficult, some of it is a bit annoying but most of it should be easy to fix. I installed that Firefox tool and checked it out:

I will work on knocking some of this out, I was a bit leary of this firefox tool so I installed it into a new blank profile, but it seems to work good.

I also found a more authoritative page regarding accessibility: https://www.section508.gov/test/web-software/

[Jieiku]

It is unnecessary to install the firefox plugin, you can simply visit this url:

https://wave.webaim.org/report#/https%3A%2F%2Fabridge.netlify.app%2F

[simbleau]

Awesome find. I'll be devoting some attention to WASM and I have no issues owning that hat.

It matches my general research which is primarily K8s and Rust (hopefully GUIs in Rust in the future). If you are interested, there's a community I'm in that's open source and great professionally: https://xi.zulipchat.com - We generally give checkins and share knowledge in all aspects.

[Jieiku]

I have fixed 99% of what wave.webaim.org found, it now reports 0 errors and only a couple false positive alerts.

Toc DOM position - I am not sure this is necessary, I believe there is a way to flag a section to not be read by screen readers, maybe we should just do that for the Toc? (what do you think?)

Button to resize text up/down next to theme switch - I don't plan to implement this, you can hold down control and press plus or minus (or scroll the mouse wheel) in all major browsers to enlarge elements, the feature your describing is non standard and I do not think I have seen it on any sites.

Ensure all text containers wrap instead of scroll - I have zoomed way in and way out, the text never does that weird overlapping like the link you shared, so I think no issue here.

Contrast already passes all tools that I have tried for both AA and AAA standards.

Search textbox focus is apparent when focused, and able to be focused by keyboard - it is very apparent when it is focus, it gets a nice bright outline around it when focused, but I need to see about making it focus-able with keyboard.

youtube/vimeo links do not autoplay unless explicitly told to do so, there is a custom one that plays a video on a loop which results in far less bandwidth usage than using a gif image, this would be the only exception, and again that would only happen if the content creator explicitly chooses to add that content to their site: https://abridge.netlify.app/overview-rich-content/

Support Click headings with [+] buttons to get hidden information - I generally don't use these unless to organize a page with optional steps, like in instructions. Is there anywhere in abridge specifically that you would like to see these added? If I add any I would probably also add config.toml values for them, because In most places I don't care for this feature, it clutters the page if overused.

[simbleau]

Good points all around.

You are correct in that 'resize text' icon is not actually an issue - this actually is an issue for GUIs in software, not on the web, since the web offers zoom inherently.

I think preferentially I'd like to flag/label ToC to not be read. Make sense to me too. If that is not an option, we can move the DOM element containing the ToC above the

element in a wrapper and force it to float right.

Click + Headings I don't think are super important (they were bottom of my list). I am fine with ignoring them.

[Jieiku]

I just checked the search focus-ability with the link you sent:

I am able to press tab and get to the search field, but I am wondering if there should be a hotkey for the search, and if so what hotkey do most accessibility users use?

I will check on disable the screen reader for the Toc, I am positive I seen that option before.

EDIT: Will work on the screen reader Toc later today, wife is sleeping and I need to install a screen reader and actually test that my changes worked.

EDIT2: most screen readers I have installed so far simply don't work, will post back if I find something that actually works.

[Jieiku]

This one seems to work in chrome: https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn/

Now I can test these changes.

Adding aria-hidden="true" to the outer most tag containing the Table of Contents Index makes it so that the screen reader does not read it.

Feel free to post here if you think of anything else.

[Jieiku]

I checked out https://xi.zulipchat.com and it seems to be for a rust based text editor? but the github for that says not currently under active development, thats really too bad, sounds like a cool project.

[simbleau]

It was started for that reason but now it's a community and still active. :)