First focus edit page

[Wagner3UB]

Fix part of this issue https://github.com/plone/volto/issues/5211

• Make the first focus more informative for assistive technologies.

quote: The blocks are created without proper identification. When read by a screen reader, they describe the content and the type of the input, but do not identify which block they belong to. This compromises navigation, as users move from input to input without being able to determine if they are within or outside the same block.

Expected behavior When entering a block, it should be identified and contain a minimum of necessary information to assist the user. This identification should correspond to the type of block found within the 'add block' tab. For example, a text block should be labeled with something like 'Editable Text Block: Type text...'. In another example, when accessing the Teaser block, it reads the content within the block as 'Please choose an existing content as the source for this element,' but no further information is provided on how the user should proceed after accessing the block.

[netlify[bot]]

✅ Deploy Preview for volto canceled.

Name	Link
🔨 Latest commit	8bc4ccddb7b1976e6803a7bf0aacbe407cefb38e
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/654e45bda454620008610b94

[Wagner3UB]

@ichim-david Any suggestions to improve ever more this first focus? I thought about using "aria-description" to put more information, but I'm not sure if it's more correct than using only "aria-label".

[ichim-david]

@ichim-david Any suggestions to improve ever more this first focus? I thought about using "aria-description" to put more information, but I'm not sure if it's more correct than using only "aria-label".

@Wagner3UB I've tried aria-describedby and its support is inconsistent from browser to browser https://a11ysupport.io/tech/aria/aria-describedby_attribute

EDIT: videos are mkv, download, rename and then play it locally as it seems the browser won't render them and github does not accept .mkv videos as upload

https://github.com/plone/volto/assets/152852/f0c7db9e-aee9-4470-8473-259a63524bec

https://github.com/plone/volto/assets/152852/7de276d2-036a-4362-a372-6af3f89777b9

https://github.com/plone/volto/assets/152852/d64c6216-fd14-4cf8-87fa-f649597725a5

What I noticed that worked was when enabled on an element with role button which we don't use on our input.

Gutenberg editor has all of the blocks set with role of "document", see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role https://wordpress.org/gutenberg/

It's kind of nice because you also get a warning when you go outside of the block area. I find it a bit strange though this notion of "document" although looking at the documentation they mention that it is used for widgets and you could say that a block is an application widget.

If you play with Gutenberg you get nice feedback suck as entering Block: Heading then when you go inside you get the text found inside it, then it says exiting Block: Heading region.

Unless we also make this kind of aria support to all of our blocks which would require a PLIP I don't know how useful this label "Content title" will be in the end.

Personally, I don't think people would know what content title means when it's read like "Welcome to plone 6, Content Title, edit text".

It would make more sense to add some description for the field that is read after reading the title, but the right technique would need to be applied in order for it to be read by the screen reader.