Add context to "Add text or type / to add content" empty block prompt

[afercia]

Note: I think this is not strictly related to assistive technologies users, it's something potentially confusing for all users.

At the accessibility team, we're starting to get reports from a new testing round of our testers. To be honest, feedback is not great so far. For reference, @rianrietveld is maintaining a document with the reports, available at https://docs.google.com/spreadsheets/d/1jpkKjfTw7G-g2MMoJScIy2OJkFtGyTJ9gWhS14WSVhM/edit#gid=1664877467
The test setup is available at https://make.wordpress.org/accessibility/gutenberg-testing/

One of the first thing emerged is the default block placeholder "Add text or type / to add content" is very confusing for users. I can't disagree, as it doesn't exactly says what "slash" does.

Report from Shaun Everiss, on March 13, 2018
Gutenberg 2.3
Waterfox 56.0 (a Firefox fork)
NVDA 2018.1

The specific task was: add a table with 2 columns, 2 rows and add some data in the cells

Relevant feedback:

When in the main field, I got told what to type or that I could type "slash" each time I hit enter.

To me, this means users can't understand that pressing Enter creates a new paragraph. Each time they press Enter, they hear again the message "Add text or type / to add content" because a new paragraph has been created, but of course they can't see what happened.

When I hit slash, table wasn't included in the menu.

Right, the "slash menu" displays just 10 blocks by default, table is not included, and there are no instructions that typing something filters the list and new results appear.

To try to fix the first issue, I'd propose to change the text "Add text or type / to add content".

• it should be clear, even visually, that a new paragraph has been created
• "type / to add content" is not correct. When I type slash, I'm not adding content: I'm given the ability to change the block type

A more meaningful text that would hopefully help to make things clearer to everyone could be something like:

"New paragraph: add text or type / to change block type"

This way:

• it would be clear to everyone, even visually, that there's a new paragraph
• screen reader users would immediately understand that pressing Enter puts them in a new paragraph
• "type / to change block type" is exactly what the functionality does

About the "slash menu", we should try to clarify users can search for a block, but this should go in a separate issue.

[amandarush]

I would recommend the following text as a possibility for this: When the enter key is pressed, something like: "New paragraph added. Begin typing text, or press the slash key to change the kind of block you're working with." Followed by a short instruction for typing slash as a character, assuming this is different. I can see users, including myself, needing to type the occasional slash, as in "and/or". Hope this is helpful.

[afercia]

Discussed during today's accessibility bug scrub, agreed the text "Add text or type / to add content" should be used as the editable area description (with aria-describedby) while a proper aria-label should indicate what the input is about. This applies to all the blocks with an editable area though.

[afercia]

Also, a suggestion on the wording by @amandarush

I think the wording should be: use the / key to change the type of block you are editing. It’s a bit wordy but it makes more sense. Type / to add content just doesn’t make sense.

[afercia]

Also from @amandarush

using the / sign instead of the word "slash" spelled out, screen reader users who have their punctuation set to some or none will miss that.

So ideally the text should say "the forward slash key".

[tofumatt]

I don't think design feedback is needed here, it's a copy problem and reads like a critical NUX issue for non-sighted, keyboard users. The existing "Add text or type / to add content" is not very useful to anybody, so we can improve it for both sighted and non-sighted users.

I think we can start with a slight improvement and iterate, but as-is this is confusing to all and possibly a show-stopper for non-sighted users. Added to the Merge: Accessibility milestone.

[jasmussen]

For this one, can a good first step be to add a "Editor tips" section to the Keyboards Shortcuts modal? It could contain this:

---

Editor tips

• If you copied a link, you can select text and simply paste over it to make that text link to what was on your clipboard.
• On an empty line, you can type / to search for blocks to insert instead of text.
• On an empty line, you can type > to create a quote
• If you type ` before or after text, that text is converted into code.
• If you want to create a list, simply start a new line by writing - for a bulletted list, or 1. for a numbered list.
• Did you know that you can paste text directly from many popular formats, such as Markdown, Microsoft Word, Apple Pages and Google Docs? It's all converted to blocks.
• Did you know that you can paste bitmap data directly from your clipboard into an empty paragraph block? This data will be turned into an image that is uploaded. This is useful if you're taking screenshots.

---

See also #9076 which could be part of this.