Folder status "box" character not readable by screen readers / not color blindness friendly

[ProactiveServices]

When the UI is zoomed to a high enough level the folder status text, e.g. "Up to Date", is replaced by a "box" character. This is not pronounceable by some screen readers, such as NVDA. I have very little HTML/CSS experience but I assume there are methods that can be employed so that screen readers are still given text to read out in this circumstance.

[calmh]

Yes, this should be solvable with some suitable atrribute

[kluppy]

I would go a step further and say using the same character and changing the colour is also a problem for colour blind people.
Maybe we should make the "Out of Sync" symbol ◻ (◻) and the "Stopped" symbol ⛔ (⛔)
Or something similar.
In terms of the screen reader I think adding role="status" to the entire panel and role="img" aria-label="Out of Sync" to the icon span might work but I could be way off.

[calmh]

Fully agreed. We have limited space but there's no excuse to not provide at least some iconage plus suitable screen reader attributes.

[uok]

you can simply use any icon from the already included icon font. The "box" was added (see 2aac1cd) before font-awesome was there to show a block on smaller screen resolutions which could be colored differently.

[ProactiveServices]

bootstrap.css already has some screen reader CSS classes so maybe adding one of these in should do the trick for this specific bug. As I understand it, they're hidden unless the content is being processed by a screen reader.

[derekriemer]

To be clear, I've heard NVDA report "out of sync" before. Is there a different character?

[derekriemer]

When I zoom it, I hear
"symbol 2 5 f c"
Since I'm totally blind, I might have to have someone describe the color change necessary.
Thanks.

[derekriemer]

If someone can find a suitable icon, I could add this.

[derekriemer]

Also, the same bug can be confirmed on the dropdowns towards the top (Actions, help, and language).

[uok]

Do you just want to replace the unicode character with an icon? You can use <span class="visible-xs"><span class="fa fa-stop"></span></span> which is a simple square icon.

[derekriemer]

The same thing is reported with a screen reader on the drop down menus if the display is zoomed in. Is this icon visually the same (For example, the language and actions menus)? I'm asking here because I'm totally blind, so if I replace the icons when I add labels, I want to make sure I add the roper icons. Alternatively, I could leave the unicode symbol and hide that span from screen readers, and put aria-label on the whole panel.

[calmh]

They're the same type of icons yes, so that the menu reduces from being icon+word to just the icon at small widths (or high zoom I guess). Would adding a proper alt/title attribute to the icons make them understandable to screen readers?

(As an aside, is there a rule or convention for the screen "width" presented by screen readers? I would expect it to not matter for the purpose of speaking the page, but unfortunately the page does get less readable as elements are removed or simplified at small widths...)

[uok]

My guess is that on smaller screens (or equally higher zoom levels) the text is hidden also from screen readers. I think an aria-label on the icon with the current status text could help here

[derekriemer]

We could add an aria-label to this. The issue is that this wouldn't solve the issue for those who are color blind.

[derekriemer]

Is that still a problem?

[AudriusButkevicius]

Yes, the code around this are:

https://github.com/syncthing/syncthing/blob/master/gui/default/index.html#L271

Has a bunch of characters in the "visible-xs" class with no aria labels.

[madduck]

What needs to be done for this to make it into the next release? I am colourblind myself, and it's indeed impossible to tell green from red boxes.

[calmh]

I expect that this section and the corresponding ones for devices need to be rewritten to be more accessible. That would mean reasonable aria tags for screen readers and maybe symbols in addition to the colors.

[uok]

Gentlemen @madduck @derekriemer
I have added the accessibility features in PR #5381- please test if this is to your visual/audible liking.