Improve Console screen-reader accessibility. #11602
Conversation
- Add aria-label for Console History entries. - Add aria-label and aria-labelledby to Console Request 'wrench' menu.
| <ul | ||
| class="dropdown-menu" | ||
| role="menu" | ||
| aria-labelledby="consoleRequestOptions" |
There was a problem hiding this comment.
This attribute lets us to refer to another element on the screen, which will describe the element to screen readers using an aria-label attribute.
cjcenizal
added
Team:Platform-Design
| @@ -9,7 +9,7 @@ | |||
| ng-mouseenter="history.viewingReq = req" | |||
| ng-mouseleave="history.viewingReq = history.selectedReq" | |||
| ng-dblclick="history.restore(req)" | |||
| title="{{ req.description }}" | |||
| aria-label="{{:: 'Request: ' + history.describeReq(req) }}" | |||
There was a problem hiding this comment.
should this use aria-labelledby? ...If there is visible text labeling the element, use aria-labelledby instead..
There was a problem hiding this comment.
Hm, I think this is correct as-is. Based on my understanding,aria-labelledby is used to point to another element on the screen which contains text that labels the element, e.g. an input element which is labeled by a label element.
In this case, we technically don't even need aria-label because the element already contains text which is self-descriptive. But I thought that the text might lack a little context, so I created an aria-label so we can prepend the word "Request", just to make it a little clearer. What do you think of this?
There was a problem hiding this comment.
i did some digging, my notes below for reference. i'm not going to nit too much, there's room for opinions with the request prefix.
https://github.com/w3c/aria/blob/master/aria/aria.html#L9578:
relevant portions:
The purpose of aria-labelledby is the same as that of aria-label. It provides the user with a recognizable name of the object
and
If the interface is such that it is not possible to have a visible label on the screen, authors should use aria-label and should not use aria-labelledby
| <a class="editor_action" dropdown-toggle href="#"> | ||
| <i class="fa fa-wrench"></i> | ||
| <a | ||
| id="consoleRequestOptions" |
There was a problem hiding this comment.
is the plan to move ids towards camel case?
There was a problem hiding this comment.
I don't know if there's a formal plan for this but we're using camel case pretty much everywhere (e.g. test subject selectors, even CSS class names), so I think it makes sense to be consistent by applying camel case to IDs too.
There was a problem hiding this comment.
Want me to add a note to the HTML style guide?
cjcenizal
deleted the
11520/improvement/console-screen-reader-accessibility
branch
- Add aria-label for Console History entries. - Add aria-label and aria-labelledby to Console Request 'wrench' menu.
- Add aria-label for Console History entries. - Add aria-label and aria-labelledby to Console Request 'wrench' menu.
Partially addresses #11520. Extracts some work from #11548.