misuse of aria-label is making mavo sites unusable by screen reader users

[msadecki1-chwy]

I believe an attempt to make mavo accessible to authors, by automatically using the property value as the accessible name for editable elements, is actually causing mavo sites to be inaccessible for all screen reader users who simply wish to read the content on mavo sites.

aria-label is a very powerful attribute that overrides the native "name" of an element that it is applied on. For most use cases the element's text content serves as the best accessible name. For input elements, the <label> element serves as the accessible name. However, for cases where the text content or label is not sufficient, aria-label can be used to provide an improved value by specifying a text string (but not without cost, this can have issues with i18n). aria-labelledby serves the same purpose, but takes and ID ref and uses the text content of the referenced element as the accessible name. The accessible name algorithm looks first for aria-labelledby, if not defined, it looks to aria-label, if not defined it looks to the element's text content (the order of precedence). Mavo automatically attaches aria-label to every element with a property attribute, using that value for the value of aria-label. This can have very negative consequences for screen reader users as I have demonstrated the issue in this codepen:
https://codepen.io/cptvitamin/full/raBPLRO

At the very least, aria-label should only be used in Edit mode, but even this is problematic. I would recommend using hidden or offscreen text to create labels for editable content.

Here are some screen shots of the accessible name as taken from DevTools on elements in the codepen: