Problem/Motivation
Core has several instances of aria-live for announcing UI changes aurally.
- ckeditor
- edit
- file
- toolbar
- user
We plan to add more instances of aria-live elements to further exposes state changes to users who interact with Drupal through audio.
Just like string translation, we don't want each individual module developing a scheme to handle audio announcements. This type of functionality should be provided as a utility through Drupal because it is a common method of building aural UIs.
Proposed resolution
We should consolidate the existing aria-live implementations into a Drupal library and provide an API.
Remaining tasks
Review the proposed patch.
User interface changes
No UI changes.
API changes
We will introduce a new API for improving accessibility of page state changes.
Comments
Comment #1
jessebeach commentedAlright! Let's get a patch going!
This patch introduces
Drupal.announce. It very simply accepts a string to be read by an audio UA. You can also set a second priority parameter. Here are a couple examples:It's that easy! You can even test it out in the Developer console. It's right there to use once you apply this patch.
There is no dependency on jQuery for this patch. I put the method on the
Drupalobject indrupal.jsand we don't assume jQuery is available in this file.Comment #2
jessebeach commentedComment #3
jessebeach commentedHmm, the
Drupalobject isn't available by default to anonymous users. Gonna have to rethink where this code lives and how it gets to the page.Comment #4
mgiffordPatch applies nicely locally.
I didn't have enough experience getting to the console easily, but with Jesse's help I was able to verify that it worked in Safari with VoiceOver & Chrome with http://www.chromevox.com
With Safari, it's not as obvious where the console is, it's now:
"the speech bubble tab at the top of the sidebar on the left side of the screen and then click on the Current Log entry in the sidebar."
This is definitely something that needs to be available for everyone, but I quite like the centralization of this function.
I like the parameter priority too:
Sometimes ARIA docs are horrible to read, but that looks like a reasonably clear one. Nice choice.
Comment #5
jessebeach commentedRegarding #3, the
Drupalobject not loading on the default front page for an anonymous user is expected. I was being derpy at that moment. If a module needsDrupal.announce, it will declare thedrupallibrary as a dependency. At the moment, there's no need for this library on the front page for an anonymous user, so it isn't loaded.There's nothing to change here. I'm setting this to needs review to get some eyes on it.
Ideally we'd get this simple API in and then start converting modules that need it during code freeze.
Comment #6
mgiffordSounds great! This is a very useful step ahead. Centralizing this functionality makes it so much easier for people to implement to ensure that rich internet applications are accessibile.
Comment #7
jessebeach commentedchanging the title a smidge.
Comment #8
jessebeach commentedso derpy today :/ Too excited about the possibilities.
Comment #9
jessebeach commentedComment #10
jessebeach commentedComment #11
seutje commentedAny particular reason this is the only line with double quotes?
Does this depend on #1754166: Add classList polyfill for IE?
Comment #12
jessebeach commentedseutje, for this patch, I can just as easily use
classNameinstead of classList. I'm not doing anything but assigning a class to an element that was just created.I fixed the double-quote issue you mentioned and the classList issue.
Is anything blocked on #1754166: Add classList polyfill for IE? I can give it a review if so.
Comment #13
seutje commentedI don't have any more concerns with it, but it is still marked "Needs Documentation" and "Needs tests".
regarding #1754166: Add classList polyfill for IE, the way #1252178: Add Modernizr to core went in, it's not blocked anymore, but would need to depend on Modernizr and carry its own feature-test, I guess
Comment #14
jessebeach commentedI added this method to the JavaScript testing plan tracker - http://drupal.org/node/1777342
I've updated the comments to indicate how this function could be used with a simple example.
Removing the tags.
The iron is hot. Let's strike!
Comment #15
dcmouyard commentedThe patch in #14 looks good. As long as the tests pass, this is RTBC.
Great work Jesse and seutje!
Comment #16
nod_just want to know why we're not using setAttribute before this gets committed.
Comment #18
jessebeach commentedI chatted with nod_ and his suggestion to use
setAttributecut the code in half.I tested back to IE7. All works well.
Comment #19
jessebeach commentedSmall correction to two comments.
Interdiff from #14 to #19 provided.
Comment #21
effulgentsia commentedRe-uploading #19 so that the interdiff isn't the last bot-tested patch on this issue. Also, seems odd for a JS only patch to cause Simpletest failures, so let's see if bot comes back happier this time.
Comment #23
effulgentsia commentedOh, right, locale scans js files for translatable strings, and this issue adds another one, so the test's use of a magic number broke. This makes that test more robust to such incidental changes.
Comment #24
jessebeach commentedI had a feeling it was the '@count' in the comment. Nice catch!
Comment #25
jessebeach commentedThe test fail is fixed. I put in nod_'s recommendation to use
setAttributeinstead ofsetAttributeNode. All blockers have been addressed. I'm putting this back to RTBC.Comment #26
nod_+1 rtbc
Comment #27
dries commentedCommitted to 8.x. Thanks!
Comment #28
mgiffordThis is really great! So happy that @Jesse was inspired to do this. Makes so much sense, but I hadn't heard anyone even discuss this before a week ago when this issue got going.
Comment #29
jessebeach commented@mgifford, we talked about it in Toronto. I just finally had time to get around to it! My arc of my todo list is long, but it bends towards getting things done.
Comment #30
mgiffordThat's great. Thanks for coming to the sprint and following it up!
Comment #32
mgiffordHopefully we'll see this implemented here:
#1855036: ARIA and accessibility improvements in entity (content) translation settings page
#1272990: Make tabledrag warning message show when row weights are enabled, and add WAI-ARIA live region
Where else would this be useful?
Comment #33
wim leersA change record for this should be created; this is a new API that Drupal developers should be aware of!
Comment #34
wim leersComment #35
wim leersChange notice created: https://drupal.org/node/2014521.
Comment #36
wim leersChange notice created: https://drupal.org/node/2014521.
Comment #37
wim leersComment #37.0
wim leersUpdated issue summary.
Comment #38
BarisW commentedJust wondering, could this be backported to D7? Doesn't seem very complex.
Comment #39
mgiffordComment #40
mgiffordWe can try. We've got a few years of D7 left, so it could be good!
Comment #41
mgiffordAdding tags.
Comment #42
andrewmacpherson commentedComment #47
klonosThis is what we ended up using in Backdrop: https://patch-diff.githubusercontent.com/raw/backdrop/backdrop/pull/3557...
I hope it helps with the D7 backport. Thanks for everyone that has worked on this issue ❤️
Comment #49
quietone commentedThis was committed