[Accessibility] Make message view more voiceover friendly?

[BillCarsonFr]

Hi,

While doing some KIF testing, i played around with accessibility and noticed that the message view could be more screen reader friendly.
By default the reader reads labels by labels, it's a bit annoying when you scan the discussion.

What do you think about the following approach:

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    ...
    cell.isAccessibilityElement = true
    cell.accessibilityLabel = String(format: NSLocalizedString("%@ said: %@", comment: ""),message.senderDisplayName, message.text)
    ...
}

Also the Accessory Button is missing some proper Label and Hint.
I wonder if anybody as experience in accessibility and could share some experience.

[jessesquires]

Thanks @BillCarsonFr - great idea! I have experience with accessibility and can certainly help with this.

Your suggestion in this example for accessibilityLabel will be difficult with regard to other (non-English) languages. The "X said Y" format doesn't necessarily hold for different languages. For this library, we should opt for something a bit simpler.

[BillCarsonFr]

I just check on some messaging apps:

• WhatsApp is:
  "Your message: (message)"
  "Buddy message: (message)"
• Messenger is : ' (sender name) : (message)'

Telegram message view is not accessible at all (why...?)

So '(senderDisplayName) : (text)' should be fine.

It would also be interesting to read incoming message when they arrive.

[jessesquires]

Awesome! Thanks for checking that! I agree, the Messenger format is best.

[BillCarsonFr]

Thx Jesse.
I will look more into details (media message, empty displayName, cell top/bottom labels, date..) and propose a pull request soon.

[BillCarsonFr]

So for the accessory button, i propose:
label : 'Share media'
BTW? How do you do for all translation? a raw google translate then wait for contributions?

Now for the bubbles it's not that simple.

1. If we stay as it is now, voiceover will read:

• cell top label
• bubble top label
• bubble container
• cell bottom label

So if the cell is complete, with the senderDisplay name in the top label, you have all information, but it's annoying to have to swipe between each of these.
And there is an issue if the top label is not the senderName, in this case there is no way to know who sent the message.

2. If i put the full cell as accessible with the 'sender: message' accessibility label, voiceover will focus the full cell, so it's easier to navigate, a swipe will go to the next message and you always have information on the sender and the message (even if bubble top label is empty).

But the cell top label is not read. Actually it's hard to know what to do with this label, is there any semantic attached to it?. Maybe we could just add the label text to the accessibility string.

I am not sure about the generic approach here.
As the cell top label doesn't have a clear semantic (?) maybe it should be read by itself (heading trait?).
For the bubble top label, as it should by default contain the sender displayName but is optional, maybe we should skip it (not accessible) as it will be read by the bubble container (sender: message).
The bottom label is treated as the top, it's accessible on its own.

With this approach, on the sample app, the message view is read:

• Jesse Squires : Welcome to JSQMessages ...
• Steve Wozniak : It is simple ..
• Jesse Squires : It even has data ... (notice that here there is no bubble top label with the sender name)
• Today 15:13, heading. (this is a top label)
  -..

To sum-up

Actual	Full bubble	read top and bottom cell, but not bubble top
Jesse Squires	Jesse Squires : Welcome to JSQMessages	Jesse Squires : Welcome to JSQMessages
Welcome to ...	Steve Wozniak : It is simple	Steve Wozniak : It is simple
Steve Wozniak	Jesse Squires : It even has data	Jesse Squires : It even has data
It is simple	(the date is not read)	Today 15:13 , heading
It even has... (we don't know the sender)
Today 15:13
------------	-------------	-------------
5 swipes	2 swipes	3 swipes

Notice that we could also read the date with the bubble.

What do you think?
Is it worth it to provide a bubble default reading behaviour, knowing that depending on what you put in the label you will probably need to adapt?

[jessesquires]

Thanks @BillCarsonFr ! This is great info.

I think the "full cell" with "sender: message" is the best approach. All 3 cell labels are optional, so we should not rely on clients setting these.

[BillCarsonFr]

Here is proposed PR

#886

[eliburke]

Closed with the merge of #886. Thanks @BillCarsonFr !