WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alerts for edits and deletions (wasFocus on adding/removing items)

for

From: Birkir R. Gunnarsson
Date: Mar 26, 2015 8:17PM

Weird, I am pretty sure the cfollowing will work:
CSS:

.clipped {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
overflow: hidden;
width: 0;
}

...
<div class="clipped" aria-live="assertive" aria-atomic="true">Alert
message goes here</div>

Make sure message only gets injected by JavaScript that removes the item.
- If the entire page has to reload, the aria-live announcement gets lost.
- If you simply change CSS properties, say from display: none to using
the clipped class, no content is updated so there is no announcement.
Cheers
-B


On 3/26/15, Lynn Holdsworth < <EMAIL REMOVED> > wrote:
> Apologies Jonathan, I should have been clearer. I mean that we had
> problems getting VoiceOver on iOS to read out messages that were
> contained in ARIA alerts, status messages or live regions when we used
> the Snook method to hide content off-screen.
>
> More info on the Snook method here:
> http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
>
> Best, Lynn
>
> On 26/03/2015, Jonathan Avila < <EMAIL REMOVED> > wrote:
>>> iOS devices don't seem to speak ARIA messages when the containing
>>> element
>>> is hidden.
>>
>> I just created a quick test for input and links with aria-labelledby and
>> aria-describedby content that is not displayed via display:none and both
>> were announced by VoiceOver on iOS when swiping to the control.
>>
>> The ARIA spec allows for these properties to reference content that can be
>> hidden although I don't think it's a good idea. For example, while this
>> information is announced on tab by Windows screen readers it isn't seen in
>> the virtual cursor or browse mode cursor.
>>
>> Jonathan
>>
>> --
>> Jonathan Avila
>> Chief Accessibility Officer
>> SSB BART Group
>> <EMAIL REMOVED>
>> Phone 703.637.8957
>> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>>
>>
>>