Spectrum: General Accessibility

[LukePettway]

I saw an announcement for Spectrum earlier today and decided to check it out. I'm an accessibility advocate, so one of the things I generally like to do is open up NVDA (a desktop based screen reader) and check out web applications. Overall I think there are some things that could be done to make the app more accessible. Some of the general things I noticed:

1. Lack of focus: There doesn't seem to be any visual indicator to show a user what is focused. Ideally there would be a focus ring of some kind that visually shows a user what element they are currently focused on.

2. Tab Order/Focus on non-essential items: Tabbing through the application itself is a bit confusing. There isn't a clear order to the priority of what gets focus. It also seems that tabbing through each room in a chat focuses each user profile image. That's probably expected but does require a lot of tabbing on the users part to move between each chat room.

3. Controls with image announce image name: In any of the controls that contain an icon, NVDA was reading the image along with the label, here is an example: logo graphic clickable home.

4. Buttons without text: Some buttons have no text at all, such as the submit button in the input field where you type in a message. Another instance of this is the heart button.

5. Missing Alt attributes: There are a couple places where images have no alt text which causes assistive devices to read out the entire image name. I noticed this on the avatar images for each thread.

I'd be happy to help out in any way possible to help make Spectrum more accessible. Most of these fixes are fairly minor ones, with many just need a few minor tweaks to their markup or styling.

[brianlovin]

cc @AgtLucas who has also been helping us uncover some of the areas we're behind in the a11y arena - thanks so much for digging in here!

If you have time, we'd love to ship some improvements here even if they are quick wins :)

[LukePettway]

@brianlovin I'd love to take a shot at fixing some of these. Some of them will probably require Design/UX folks to chime in, primarily the focus state for various elements. Focusing also opens up a new discussion about how to best handle navigating through a thread. I know in Slack you use the arrow keys to step through each chat message and another hotkey to step out and back to the list of threads.

[brianlovin]

Happy to provide design feedback along the way :)

[brianlovin]

Re: keyboard shortcuts - not sure how best to handle this, as we'll also probably want some way to quickly navigate threads as well when you're viewing the inbox.

[AgtLucas]

Nice to see more people interesting in improving Spectrum A11Y!

@LukePettway let's have a chat, we could split tasks, what do you think? :)

[LukePettway]

@AgtLucas Absolutely. Is there a separate channel we can use for this discussion?

[brianlovin]

https://spectrum.chat/spectrum/open might work well for this :)

[AgtLucas]

@LukePettway @brianlovin I've started a thread there: https://spectrum.chat/spectrum/open?thread=985b9238-d87e-4356-94a0-26485d016a3d :)

I'll update that thread with some videos I did testing Spectrum with VoiceOver, I send them last year to @brianlovin.

[mikeyil]

Great punch list @LukePettway

[brianlovin]

Closing this after #2752