Page MenuHomePhabricator

Close and zoom buttons have no tooltips or speakable title (title attribute)
Closed, ResolvedPublic

Description

For accessibility and general helpfulness, the close and fullscreen buttons should have a title attribute which can be shown as a tooltip on hover or spoken when a screen reader is in use.


Version: unspecified
Severity: normal

Details

Reference
bz56471
Related Gerrit Patches:
mediawiki/extensions/MultimediaViewer : masterUse <button> instead of <div>
mediawiki/extensions/MultimediaViewer : masterAdd alt text attributes to all of the lightbox buttons

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 2:29 AM
bzimport added a project: MediaViewer.
bzimport set Reference to bz56471.
bzimport added a subscriber: Unknown Object (MLST).
brion created this task.Nov 1 2013, 12:47 PM

Change 105459 had a related patch set uploaded by Apsdehal:
Tooltips added to fullscreen and cloase button

https://gerrit.wikimedia.org/r/105459

Tgr added a comment.Jan 29 2014, 2:45 AM

Screen readers generally prefer alt over title. Also, I'm not sure we want the tooltips to show up, they are ugly, and meaning the buttons (these two anyway) are quite obvious. But even if we want them, then we should set both alt and title.

Change 105459 abandoned by Gilles:
Title properties added to some buttons in lbinterface

Reason:
I think that now almost all the buttons in the interface have a tipsy message.

https://gerrit.wikimedia.org/r/105459

Jdforrester-WMF moved this task from Untriaged to Backlog on the Multimedia board.Sep 4 2015, 6:38 PM
Restricted Application added subscribers: Matanya, Aklapper. · View Herald TranscriptSep 4 2015, 6:38 PM

Mass-removing the Multimedia tag from MediaViewer tasks, as this is now being worked on by the Reading department, not Editing's Multimedia team.

Jdlrobson set Security to None.
Danny_B moved this task from Unsorted to Tooltip on the Accessibility board.Jan 22 2016, 9:18 PM
dr0ptp4kt moved this task from 2014-15 Q4 to Triaged but Future on the Readers-Web-Backlog board.
Gilles removed a subscriber: Gilles.Nov 3 2016, 11:12 AM
Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptNov 24 2016, 7:13 PM
Sn1per claimed this task.Dec 8 2016, 2:07 AM
Sn1per added a comment.EditedDec 8 2016, 4:22 AM

It looks like tooltips have already been added in rEMMVea610f8256f96e5e7909991049298dc9866a15e3. Is this still an issue?

Tgr added a comment.Dec 8 2016, 5:00 AM

Huh, indeed. Maybe you could add popups for prev/next buttons, that seems to be the only missing one.

Sn1per added a comment.Dec 8 2016, 6:13 AM

Those were removed in rEMMV532819b5a0dca69409c4696dae3d18cbf6029389. I couldn't find an accompanying bug/task but I assume they were deemed to be excessive?

Tgr added a subscriber: Volker_E.Dec 8 2016, 6:54 AM

No clue. @MarkTraceur do you remember what that was about?

In any case, there should be an alt tag at least, or an ARIA role marking it as a button, or something; it is the most important control after closing, and it is not accessible at all now. Unfortunately I don't know much about accessibility so I hope someone can take this over. @TheDJ or @Volker_E maybe?

Change 326146 had a related patch set uploaded (by Sn1per):
Add alt text attributes to all of the lightbox buttons

https://gerrit.wikimedia.org/r/326146

Change 326146 merged by jenkins-bot:
Add alt text attributes to all of the lightbox buttons

https://gerrit.wikimedia.org/r/326146

Patch 326146 is a misconception and doesn't help. The alt attribute is only allowed on img and area tags and optional on (image) input (buttons) and will be ignored in accessibility tree.
@Tgr We should (partly) revert that change and go for something either using the Less helper .mixin-screen-reader-text() or a similar approach for visually hiding text for assistive technology.

Adding to above, title attribute might help as well.
In general we shouldn't redo semantics. Using semantic button for a button element is helpful for assistive technology as well. See http://www.powermapper.com/tests/screen-readers/attributes/index.html

Tgr added a comment.Dec 19 2016, 7:16 PM

Just rename alt to aria-label? That should be usable on any element.

title is user-visible and was removed at some point from the navigation controls, as @Sn1per said.

Ok, I seemingly have skipped the part about unwanted user visibility.
I'd recommend using button instead of div and go for text just visible to screen readers.

Jdlrobson removed Sn1per as the assignee of this task.Jan 9 2017, 9:43 AM
Jdlrobson removed a project: Patch-For-Review.
Jdlrobson added subscribers: Sn1per, Jdlrobson.

@Volker_E Probably useful to update the description with what is remaining on this task too.

Change 343441 had a related patch set uploaded (by Prtksxna):
[mediawiki/extensions/MultimediaViewer] Use <button> instead of <div>

https://gerrit.wikimedia.org/r/343441

Change 343441 merged by jenkins-bot:
[mediawiki/extensions/MultimediaViewer@master] Use <button> instead of <div>

https://gerrit.wikimedia.org/r/343441

Prtksxna closed this task as Resolved.Mar 28 2017, 3:08 PM
Prtksxna claimed this task.