A few accessibility tweaks #4652
Conversation
Defined specific region roles for easier access to: - conversation settings: navigation role define by the component itself, we use a custom label here. - conversation messages - new message form Note: so far the call button and conversation settings are part of the main content, not the messages list. This could be tweaked further later on. The right sidebar is already recognized as "complementary". Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Added missing aria labels on some buttons. Improved aria labels for list items and list buttons to be uniquely identified by including the conversation or participant name. The click event for participant search is now optional, this prevents screen readers to say "clickable" when it's not. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Hide an extra "li" that was read as "one list item". Prevent saying "heading level 6" for h6 elements. Hide the already hidden file input dialog so one cannot tab to it. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
The screen reader now identifies those as lists and announces how many rows they contain. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
|
regarding the "conversation list navigation" region, it will only fully work once nextcloud-libraries/nextcloud-vue#1585 is merged and updated here. |
This way it makes it clearer that it's the message author. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Screen reader will qualify them as such. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Makes it possible to select results by tabbing over them and hitting enter. Removed avatar menu from search results. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
| @@ -31,7 +31,7 @@ | |||
| :author-id="actorId" | |||
| :display-name="actorDisplayName" /> | |||
| </div> | |||
| <div class="messages"> | |||
| <ul class="messages"> | |||
There was a problem hiding this comment.
The list is ol though, as it’s ordered, no?
There was a problem hiding this comment.
indeed, had the same thought.
technically doesn't make a difference for assistive technologies from what I read
There was a problem hiding this comment.
The only difference afaik is visual in default styles. Bullets in ul and umbers in ol
There was a problem hiding this comment.
Also when scrolling up new items would be added and therefor all numbers would change. sounds confusing?
| role="region" | ||
| :aria-label="t('spreed', 'Post message')" /> |
There was a problem hiding this comment.
Shouldn't this go within the newmessageform component?
There was a problem hiding this comment.
not this one: see I've defined a "role=region" which means that screen readers will announce this section as a region.
with a screen reader you have the option to jump directly to a specific region of the screen from anywhere.
There was a problem hiding this comment.
seems I had a separate PR for the other missing aria-label, see #4648
There was a problem hiding this comment.
Just sayinh that maybe those 2 lines should go here?
Aren't they going to end up on the newmessageform root element anyway?
There was a problem hiding this comment.
yes and no
We need to keep the aria-label here so that the region itself has a name. The screen reader will announce it "Entering post message region" when tabbing into it, even if you tab onto the file upload button first so we should not set the region on the post message field.
I agree that the field itself also needs an aria-label.
There was a problem hiding this comment.
I've cherry-picked my changes from the other PR here to make it more complete.
Please let me know whether you understood the region thing. I can demo it to you if you like.
| @@ -31,7 +31,7 @@ | |||
| :author-id="actorId" | |||
| :display-name="actorDisplayName" /> | |||
| </div> | |||
| <div class="messages"> | |||
| <ul class="messages"> | |||
There was a problem hiding this comment.
The only difference afaik is visual in default styles. Bullets in ul and umbers in ol
Signed-off-by: Vincent Petry <vincent@nextcloud.com>
- h2 for the date which groups messages - h3 for actor display name and quote actor - replaced h6 with span for the date indicators on the right side Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Signed-off-by: Vincent Petry <vincent@nextcloud.com>
These lis are used as containers for the actual list, so no need to have the screen reader say "list with one item" every time. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Signed-off-by: Vincent Petry <vincent@nextcloud.com>
See individual commit descriptions.
I originally tried to go further and add invisible text to make it say "Message from Alice: hello" but somehow the screen reader doesn't read it in once sentence.
Also I was hoping that ul/li would make navigation easier like making it read each row in the participant list or messages list, but it rather reads individual blocks inside a row. Maybe we'll need to introduce links there at some point... would make it possible to link to messages. In the conversation list we have links and it works well there.
Needs further separate research.