| TheDJ | |
| Feb 9 2015, 11:17 AM |
| F38539: Screen_Shot_2015-02-09_at_8.08.19_PM.png | |
| Feb 9 2015, 2:39 PM |
Wether the label as such is directly visible or not, we should enforce that all interaction elements are constructed with a label. (or at least warn if in debug mode and we are not adding a label)
For instance, try figuring out what the (i) symbol does on the demo page right now, before clicking it. :)
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| NumberInputWidget: Add `aria-hidden` to buttons | oojs/ui | master | +2 -0 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | Volker_E | T88979 Provide and enforce labels for all interactive widgets like ButtonWidgets (icon), PopupButtonWidget… | |||
| Resolved | Volker_E | T194223 SelectFileWidget file input doesn't present a dedicated label | |||
| Resolved | matmarex | T94749 Provide labels for label-less buttons |
Do you mean adding an aria-label for buttons that don't have any text?
I am guessing by (i) you mean -
I mean label as the concept, not the technical way in which it is represented.
title=, <label> <button>content</button>, aria-label
Can all be good solutions, but there should be a label, and it should not be possible that you create an input element without a label. aria-label should be the last fallback for situations where we cannot otherwise create a label.
Hello Everyone,
I'm part of the group of senior CS students wanting to contribute to this project. we previously worked on issue T161612, and would like to contribute to this task next. So, any advice regarding what part of the code we should focus on for this task or any other advice would be greatly appreciated.
@JazielPauda Thanks for your interest!
The widgets in concern in this task in OOUI are the icon-only and indicator-only ButtonWidgets, both framed and frameless.
We've got ways to visually hide labels – but still making it readable/'visible' to screenreaders. In MW core's mediawiki.mixins.less there's .mixin-screen-reader-text() mixin.
My approach would be to
- add a similar mixin to OOUI's common.less,
@Volker_E are you talking about mediawiki/skins/Vector/components/common.less ?
We're currently featuring a misbehaviour on all
Currently, a button with only a title fails even in latest VoiceOver.
@Volker_E, just to clarify, our situation isn't the same as the one that you link to, right? The linked code is not a button with title but a button with an image that has a title:
<button> <img src='1234.png' title='This is image title'> </button>
Whereas, in case of a ButtonWidget with icon only (but with a title):
new OO.ui.ButtonWidget( { icon: 'help', title: 'Icon only, framed' } );
the markup has an anchor with a title with empty spans:
<a class="oo-ui-buttonElement-button" role="button" title="Icon only, framed" tabindex="0" aria-disabled="false" rel="nofollow"> <span class="oo-ui-iconElement-icon oo-ui-icon-help"></span> <span class="oo-ui-labelElement-label"></span> <span class="oo-ui-indicatorElement-indicator"></span> </a>
I am guessing this is worse?
Change 431635 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] NumberInputWidget: Add aria-hidden to buttons
Change 431635 merged by jenkins-bot:
[oojs/ui@master] NumberInputWidget: Add aria-hidden to buttons
Let's clarify scope: Changing this to be the parent task, providing labels sub-task in T94749 and enforcing will be handled in a task to be filed.
The last bits of this have actually been resolved in OOUI v0.29.3 and the demos follow-up patches. Have updated https://www.mediawiki.org/wiki/OOUI/Widgets/Buttons_and_Switches to reflect invisibleLabel: true config option.