1493499 - Give the two Notes boxes prominent WAI-ARIA roles to make them discoverable for assistive technologies

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Editing, enhancement, P1)

Description

[Marco Zehe (:MarcoZ)]

What feature should be changed? Please provide the URL of the feature if possible.
==================================================================================
WYSIWYG editorWhen inserting a yellow note box into a document, the div that gets the CSS class should also get a role attribute with a value of "complementary". That would turn it into an Aside note for screen readers and other assistive technologies.

The red "scary note" box should get a role of "region" and an aria-label of a localized string along the lines of "Important Note" or similar.

In addition, existing pages should be updated with these roles to make them consistent.

What problems would this solve?
===============================
Screen readers and other assistive technologies could automatically indicate the presence of these boxes which are otherwise only indicated visually.

Who would use this?
===================
Blind MDN readers and users of other assistive technologies that make use of HTML or WAI-ARIA landmarks.

What would users see?
=====================
No difference, but they would hear that these boxes are special. Alternative assistive technologies might give their own visual representation of these landmarks.

What would users do? What would happen as a result?
===================================================
They would realise that these paragraphs are special and not part of the regular page content, but something they should pay special attention to.

Is there anything else we should know?
======================================
Only that the aria-label for the region is to be localizable. The roles themselves already have preexisting translations in international versions of assistive technologies.

Comment 1

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/c52f18d132d5ac705319962387b214656c3e3eb7
Bug 1493499, add aria roles to notes/warning boxes inside ckeditor (#5069)

Comment 2

[John Whitlock [:jwhitlock]]

CKEditor is updated so these boxes get these styles going forward, but existing Note and Warning boxes won't have them.

Comment 3

[Schalk Neethling [:espressive]]

(In reply to John Whitlock [:jwhitlock] from comment #2)
> CKEditor is updated so these boxes get these styles going forward, but
> existing Note and Warning boxes won't have them.

This is being added in a KumaScript PR, but will also not update *all* instances. Current instances that was not added by a macro, but rather via CKEditor will have to updated manually over time.

Comment 4

[John Whitlock [:jwhitlock]]

I've confirmed the styles applied with CKEditor have these new attributes. Work will be needed to update existing documents, but that is a big project and out of scope for this bug.