Improve portal home accessibility #557
Conversation
| @@ -107,7 +109,7 @@ | |||
| <portlet-icon></portlet-icon> | |||
| </div> | |||
| </a> | |||
| <button aria-labelledby="goToApps-{{portlet.nodeId}} appTitle_portlet.title-{{portlet.nodeId}}" class="launch-app-button" ng-click="widgetCtrl.maxStaticPortlet(portlet)"> | |||
| <button aria-label="{{ portlet.widgetConfig.launchText ? portlet.widgetConfig.launchText : 'Launch full app' }}" class="launch-app-button" ng-click="widgetCtrl.maxStaticPortlet(portlet)"> | |||
There was a problem hiding this comment.
I think the intent of the aria-labelledby fanciness was to associate the name of the specific app to be launched with the launch button even in the case where there's no special launchText configured. Working from that intent, should the default aria-label in the new version reflect the name of the specific app to be launched rather than defaulting to 'Launch full app'?
There was a problem hiding this comment.
Any objections to defaulting to Launch {{ portlet.title }}?
There was a problem hiding this comment.
I think there (should be) different guidance for sighted vs screen-reader-facing text.
For sighted, "Don't repeat yourself" is decently good advice - the app card's title already visually associates with the launch button, so the launch button should observe the Thumperian Principle and say as little as possible if it has nothing interesting to say.
Contrastingly, non-sighted users will have difficulty visually associating the card title with the launch button on that card -- at best one would have to remember what card context you're in between the two elements; at worst it'll just be an out-of-context generic "click here" style link. So for the aria-label being as specific as possible, even at the risk of repetition of what's already in the card title, is the way to go.
MUMUP-2807
In this PR:
Overall this results in a smoother experience when using a screen reader, with clearer context when navigating by keyboard.