Improve accessiblility of the info, success, warning and error macros

Development
,
#1

These macros are currently distinguished only by their background and text colors (Loading...). This is an accessibility bug. See:

I suggest adopting one of the following measures to fix this:

  1. Add an icon with an alternative text and a title attribute.
  2. Add a text that comes before the macro content, in bold for instance. “Warning:”, “Information:”, something like this.
  3. Both.

Feel free to suggest icons to use, or other measures we could implement.

See also the issue that started this discussion: Refactor note, tip, info, success, warning, error macros · Issue #97 · xwikisas/xwiki-pro-macros · GitHub

See also the (kind of) related issue of the title not being separated from the rest of the content, as it could interact with what is decided for this present issue: Loading...

#2

I’m fine with 1. and 2. (and OK for both too) but my preference goes to 1..

#3

+1 for 1
-0 for 2 as it seems quite space consuming
-0 for 3 for the same reason

#4

+1, if by ‘title’ you mean the title attribute, whose value is shown on hover.

Thanks,
Marius

#5

Yep, I mean this.

#6

Where would this icon be placed in the box? Depending on its position, adding visible text can still be space efficient. I think the idea of using the Confluence style is good, but maybe we can change it slightly to fit a box header efficiently.

-1 for 2
+1 for 3
+0 for 1 since having visible labels next to icons can be important for people that are not tech savvy, but this is still a big improvement.

Sidenote: I’m currently working on expanding on the accessibility options from the user profile and this idea of ‘visible icon label’ could be an interesting toggle :eyes:

Thank you!
Lucas C.

#7

Where would this icon be placed in the box?

I was envisioning top left (maybe top right for RTL languages).

#8

:+1:

#9

Implementing a solution for XWIKI-21452: Macros info, success, warning and error are only distinguished by colors. I’ll use the option 1. since this is the one that received the most positive feedback :slight_smile:

  1. Add an icon with an alternative text and a title attribute.

Thanks!
Lucas C.

1 Like
#10

Unrelated to the icons, but for assistive technologies, would it be enough to provide an aria role or different tag for the whole box? Something like an <aside> tag or provide a role="complementary".

Also +1 for 1 (yay, my first vote), but 2 is also feasible with proper css;

1 Like
#11

Yes, it’s enough for assistive technologies to just provide extra info as atributes.
However, for generic accessibility (and WCAG conformance), this is not enough since it does not help the users with partial vision. A lot of partial vision users do not use AT, just because they don’t know about it, it’s too complex for them or “I don’t need it I can still see”.

One rule of thumb I figured out regarding accessibility is that it’s best to keep what you ‘show’ in UIs the same between AT and visuals.

PS: Just finished proposing a UI for those icons on XWIKI-21452: Macros info, success, warning and error are only distinguished by colors by Sereza7 · Pull Request #2590 · xwiki/xwiki-platform · GitHub , you’re welcome to provide some feedback :wink:

1 Like