Description
This is a list of concerns we found when auditing VoiceOver support in Gutenberg. The audit was done using develop (1a06134), iPhone XS, iOS 13.1.3.
Concerns
2 Title Field Elements
When navigating by swiping right, there are 2 accessible elements pertaining to the title field. Please watch this video.
Content Field Scroll Bar Message
When selecting the content field, VoiceOver would speak information about the scrollbar. For example, it would speak “Horizontal scrollbar. 1 page. Vertical scrollbar. 1 page”. Not sure if this is intentional. It seems correct but I thought to just bring it up. Please watch this video.
Repetitive Button Hints
The hints of the Add Block, Undo, Redo, and Hide Keyboard buttons are repetitive and most probably unnecessary. For example, for the Add button:
- Label: Add Block ✔️
- Hint: Double-tap to add a block ❓
This goes against the Apple guidelines for accessibility hints. Quoting some of them:
If the results of a user’s action on a control or view are not clearly implied by its label, create a hint
Does not include the name of the action or gesture. A hint does not tell users how to perform the action, it tells users what will happen when that action occurs. Therefore, do not create hints such as “Tap to play the song,” “Tapping purchases the item,” or “Swipe to delete the item.”
With these, the “Add Block” label should be good and descriptive enough.
Some buttons with similar concerns:
- Move Block Up and Down buttons
- Remove Block button
Unlabeled Element
There is an accessible element below the last block. It does not have a label. But it can be activated, which creates a new block. It can probably be disabled for VoiceOver since there is an “Add block” button already.
Dismiss Using Escape Gesture
The editor cannot be dismissed using the VoiceOver global escape gesture (make a Z with 2 fingers). This escape works in most of our views but not for the editor.
Remove Block Button Label
The button has a good label. It can be enhanced by being more specific. For example, “Remove paragraph block at row 3”. This gives more confidence to the user that they will be removing the correct block. This WWDC video shows some similar examples of why specific labels can be useful.
Add Block Menu Selection
When the Add Block menu is shown, VoiceOver's behavior seems random. Sometimes, it would speak something about “Contacts”. Often, it would select an element behind the menu. Please watch this video.
Add Block Menu Dismissal
Sometimes I cannot dismiss the menu using the VoiceOver escape gesture. This happens often if the menu was just shown.
It might be useful to add a transparent dismiss button on top of the menu too. We do this for the Login dialog.
Add Block Menu Items Attributes
The menu items do not have the .button attribute.
Paragraph Block → Move Up Auto-selected
- Add 2 paragraph blocks
- Navigate and select the title field to start editing
- Navigate to the second paragraph block and edit it.
The Move Up button is automatically selected after starting to edit the paragraph contents. Weirdly, the text field is still being edited. This video shows this behavior.
Move Up and Down → The Other Block is Selected
When moving a block up, the block that replaces it is selected instead of the block that was moved. I'm not entirely sure if this is a problem. But it seems more useful to have the same block and its Move Up button to be reselected again. If that's the case, it would be faster for the user to move a block multiple times.
This video shows this behavior. In that video, observe that the “One” paragraph block is selected after the “Two” paragraph block is moved.
This probably only happens if moving from the second row to the first, which will cause the button to be disabled.
Separator Block → Small Hit Area
This is probably subjective but I found the hit area to select the separator block to be too small (vertically). It took me a few seconds to select it with VoiceOver. Here is a video of me moving my thumb up and down near the separator.
Spacer Settings → Header
The Spacer Settings header title can make use of the .header accessibility attribute.
Spacer Settings → Quiet Presentation
When a dialog is shown, VoiceOver would usually select the first element of the presented dialog. For the Spacer Settings' case, nothing is selected. VoiceOver just stays quiet. It may take a while for a blind user to realize that the dialog is already visible.
Here is a video showing this behavior. In the late part of that video, you'll see that when opening the accessibility shortcut dialog, VoiceOver speaks one of the elements. That is probably what we want here too.
Image Settings → Header
Like the Space Settings header described above, the Image Settings text can also have the .header accessibility attribute.
Image Settings → Quiet Presentation
Just like the Space Settings described above, the Image Settings dialog is also quietly presented. No elements are immediately selected.
More Block → Small Hit Area
| When Selected | When Not Selected |
|---|---|
 |
 |
When not selected, the Read More hit area is shorter. It's probably better to make the hit area the same as when it is not selected (see image above).
Video Block → Video Label
When a video block is selected and its video UI element is selected, VoiceOver would speak “Write caption... Horizontal scrollbar, 1 page Vertical scrollbar...”. This is a bit difficult to understand.
Video Block → Caption is Not Accessible
When navigating by swiping right, the Caption text field is never navigated to by VoiceOver. VoiceOver skips to the Move Up button.
Video Settings → Header
Like the Space Settings header described above, the Video Settings text can also have the .header accessibility attribute.
Video Settings → Quiet Presentation
Just like the Space Settings described above, the Video Settings dialog is also quietly presented. No elements are immediately selected.
List Block → Accessibility Value
| List Block | Paragraph Block |
|---|---|
 |
 |
Unlike the Paragraph Block, the List Block does not provide any information to VoiceOver about its contents.
Quote Block → Accessibility Value
| Quote Block | Paragraph Block |
|---|---|
 |
|
Unlike the Paragraph Block, the Quote Block does not provide any information to VoiceOver about its contents.
Gallery Block → Add Button Label
The Add Button's accessibility label is “false block”. That is most probably incorrect. The hint is also mentioning “Double-tap” which is not recommended by Apple.
Gallery Blocks → Settings → Adjustable Columns is Not Adjustable
When selecting the Adjustable Columns, VoiceOver says that the element is adjustable. However, swiping up or down does not change the value. Here is a video of me trying to do that.
Media & Text Block → Button Cannot Be Activated
There are these buttons in the Media & Text Block that are shown when selecting either the Media or Text sub-blocks. The button cannot be double-tapped with VoiceOver. It is also unclear what the purpose of the buttons are. They could probably use a better label or a hint.
Preformatted Block → 2 Text Fields
When navigating by swiping right, VoiceOver can navigate to 2 text fields. This video shows this behavior.
Accessibility Inspection → Hit Area Failures
When running an audit using the Accessibility Inspector, quite a few of the elements fail the Hit Area size check.
Suggestions
Image Block → Image Actions
After selecting an image block and then selecting the image, VoiceOver would say “Double-tap and hold to edit..”. The double-tap and hold is VoiceOver's standard gesture which skips the VoiceOver gestures. Another way this can be done is to use custom actions. We can then provide 2 actions:
- Edit
- View
Using custom actions would probably make both actions more discoverable. And we don't need to provide the double-tap instruction in the label.
All Blocks → Custom Actions
For a block that is currently not technically selected (i.e. no Move Up/Down, Trash buttons are shown) but selected by VoiceOver, we can provide custom actions. This may help speed up interaction.
For example, for the Image Block, we can have these as custom actions:
- Move Up
- Move Down
- Settings
- Trash
- Add Block