Current best practices for representing text edits in a screen reader?...

Thu Dec 7 10:20:10 UTC 2017

Hi, All:

The Paciello Group just posted an article regarding the similar issues
surrounding the <mark> tag:

https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/

They followed the same strategy I initially used, using CSS to add content
:before and :after the visually highlighted elements.

Cheers,

Tony

On 6 November 2017 at 16:55, Tony Atkins <tony at raisingthefloor.org> wrote:

> Hi, All:
>
> So, I tried a bunch more things.  Here is an updated chart of what did and
> didn't work:
>
>
> *Chrome:VO*
>
> *FF:VO*
>
> *Opera:VO*
>
> *Safari:VO*
>
> *FF:NVDA*
>
> *Chrome:NVDA*
>
> *IE11:NVDA*
>
> *Edge:NVDA*
>
> *Gmail*
>
> *del and ins tags*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *Y*
>
> *N*
>
> *N*
>
> *CSS :before and :after content*
>
> *Y*
>
> *N*
>
> *Y*
>
> *Y*
>
> *Y*
>
> *Y*
>
> *N*
>
> *Y*
>
> *N*
>
> *hidden + aria-hidden=false*
>
> *N*
>
> *N*
>
> *N*
>
> *Y*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *display:none + aria-hidden=false*
>
> *N*
>
> *N*
>
> *N*
>
> *Y*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *aria-label*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *0-clipping reader-only text using CSS*
>
> *Y*
>
> *Y*
>
> *Y*
>
> *Y*
>
> *Y*
>
> *Y*
>
> *Y*
>
> *Y*
>
> *N*
>
> *0pixel image with Alt Tags (* reads “image” as well).*
>
> *Y**
>
> *Y**
>
> *Y**
>
> *Y**
>
> *N*
>
> *Y**
>
> *Y**
>
> *Y**
>
> *Y**
>
> *0 pixel, ARIA labels (* reads “image”)*
>
> *Y**
>
> *Y**
>
> *Y**
>
> *Y**
>
> *N*
>
> *Y**
>
> *Y**
>
> *Y**
>
> *Y**
>
> *“title” attribute*
>
> *Y*
>
> *N*
>
> *Y*
>
> *Y*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *“speech” media*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *“about” attribute*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *aria labels, img*
>
> *Y*
>
> *N*
>
> *Y**
>
> *Y**
>
> *N*
>
> *Y*
>
> *Y*
>
> *N*
>
> *N*
>
> *aria labels, button*
>
> *Y*
>
> *Y*
>
> *Y**
>
> *Y*
>
> *N*
>
> *Y*
>
> *Y*
>
> *N*
>
> *N*
>
> *aria labels, span*
>
> *N*
>
> *N*
>
> *N*
>
> *Y**
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *aria labels, div*
>
> *N*
>
> *N*
>
> *N*
>
> *Y**
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *aria descriptions, img*
>
> *Y*
>
> *N*
>
> *Y*
>
> *Y*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *aria descriptions, button*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *aria descriptions, span*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *arial descriptions, div*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
> *N*
>
>
> I've updated my demo harness
> <http://the-t-in-rtf.github.io/diff-demo/oh-firefox-sake.html> if you'd
> like to try it yourself or are trying to figure out what a particular named
> approach I've referred to above means.
>
> Unfortunately, Firefox and Gmail are the limiting factors, and there is no
> single approach that works with both on both platforms.  At this point I'm
> deciding between:
>
>    1. Use styles to clip the screen-reader-only text to zero pixels.
>    This works in all browsers by itself, but the styles are stripped by Gmail,
>    which makes it visible as raw text.
>    2. Use a 0-pixel image with an "alt" or "aria-labelledby" attribute
>    (This doesn't work with FF+NVDA).
>    3. Pronounce leading and trailing characters like "plus" for adds and
>    "minus" for deletions.
>    4. Add visible parenthetical text before and after edits, as in "This
>    is the [begin delete]best[end delete] [begin insert]most recent[end insert]
>    approach I've tried".
>
> My best thought at the moment is to use the previous "clipped" approach
> (#1), but to write the announcements as editorial comments (#4) so that
> they display reasonably in GMail.
>
> Any other ideas or refinements are greatly appreciated.
>
> Thanks,
>
>
> Tony
>
> On 6 November 2017 at 14:03, Tony Atkins <tony at raisingthefloor.org> wrote:
>
>> Hi, All.
>>
>> I got a little further in testing my approach, this week with screen
>> readers and webmail clients like GMail.  Unfortunately my previous approach
>> doesn't work, as many clients strip "position" CSS information from emails:
>>
>> https://www.campaignmonitor.com/css/positioning-display/position/
>>
>> For now I am moving on to another approach I thought of, which is to use
>> labels.  Most combinations of screen reader and browser result in the the
>> label being read instead of the content, so I would label a leading and
>> trailing plus/minus sign.  Any other ideas very welcome.
>>
>> Cheers,
>>
>>
>>
>> Tony
>>
>> On 26 October 2017 at 12:57, Tony Atkins <tony at raisingthefloor.org>
>> wrote:
>>
>>> Hi, All.
>>>
>>> I finally upgraded my OS over lunch just to see if it changed anything.
>>> Firefox is still exactly the same.  Previously, the label behaviour was to
>>> read the label instead of the associated text, everything but Firefox now
>>> supports what I was hoping for, which is to read the (extra) information
>>> from the label, and then the labelled text.  Given that this does not work
>>> with NVDA, it's not really anything we can use versus the clipped but
>>> visible text approach.
>>>
>>> Cheers,
>>>
>>>
>>> Tony
>>>
>>> On 26 October 2017 at 11:29, Tony Atkins <tony at raisingthefloor.org>
>>> wrote:
>>>
>>>> Hi, Joseph:
>>>>
>>>> I think I'll call it "clownfishing"... ;)
>>>>
>>>> So, to help myself understand where the limitations were coming in, I
>>>> prepared this demo of a range of techniques:
>>>>
>>>> http://the-t-in-rtf.github.io/diff-demo/oh-firefox-sake.html
>>>>
>>>> I ran through this with VoiceOver (VO) on the Mac and NVDA on Windows.
>>>> The results were hugely varied, so I prepared a chart:
>>>>
>>>>
>>>> *Chrome:VO*
>>>>
>>>> *FF:VO*
>>>>
>>>> *Opera:VO*
>>>>
>>>> *Safari:VO*
>>>>
>>>> *FF:NVDA*
>>>>
>>>> *Chrome:NVDA*
>>>>
>>>> *IE11:NVDA*
>>>>
>>>> *Edge:NVDA*
>>>>
>>>> *del and ins tags*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *Y*
>>>>
>>>> *N*
>>>>
>>>> *CSS :before and :after content*
>>>>
>>>> *Y*
>>>>
>>>> *N*
>>>>
>>>> *Y*
>>>>
>>>> *Y*
>>>>
>>>> *Y*
>>>>
>>>> *Y*
>>>>
>>>> *N*
>>>>
>>>> *Y*
>>>>
>>>> *hidden + aria-hidden=false*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *Y*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *display:none + aria-hidden=false*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *Y*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *aria-label*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *N*
>>>>
>>>> *0-clipping reader-only text using CSS*
>>>>
>>>> *Y*
>>>>
>>>> *Y*
>>>>
>>>> *Y*
>>>>
>>>> *Y*
>>>>
>>>> *Y*
>>>>
>>>> *Y*
>>>>
>>>> *Y*
>>>>
>>>> *Y*
>>>>
>>>> Although IE11 support is IMO more of a "nice to have" at this point,
>>>> support for FireFox is a bit more to give up, and at least in El Capitan (I
>>>> know, shush), it doesn't work.  Can someone running Sierra or High Sierra
>>>> confirm whether the results are any better with Firefox and a newer version
>>>> of VoiceOver?  I'd also love to hear from someone familiar with JAWS or
>>>> Orca about how the page works for them.
>>>>
>>>> The good news is that I do have at least one approach that works in all
>>>> tested screen readers and browsers.  A small problem is that IE 11 does
>>>> actually announce that content inside of del and ins tags has been deleted
>>>> or inserted.  I've also read that JAWS has a "proofreading" mode with
>>>> similar announcements, although I don't see that in their current
>>>> documentation.  Again, input from JAWS users would be helpful there.
>>>>
>>>> In summary, at the moment I have a technique that works everywhere I've
>>>> tested, but there is risk of a small percentage of users getting double
>>>> announcements.  Any ideas to improve on what I have so far are welcome.
>>>>
>>>> Thanks,
>>>>
>>>>
>>>> Tony
>>>>
>>>> On 25 October 2017 at 20:06, Joseph Scheuhammer <clown at alum.mit.edu>
>>>> wrote:
>>>>
>>>>> On 2017-10-25 11:25 AM, Tony Atkins wrote:
>>>>> > When I sent this to the list, I was specifically hoping to hear from
>>>>> > you, and you haven't disappointed... ;)
>>>>>
>>>>> So ... I've been fished, huh?  :-)
>>>>>
>>>>> --
>>>>> ;;;;joseph.
>>>>>
>>>>> 'Call me hobophobic, but I don't think two vagrants should be allowed
>>>>> to marry.'
>>>>>                                - J. Tiedrich -
>>>>>
>>>>>
>>>>
>>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20171207/b7b19f1a/attachment.htm>