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

Tony Atkins tony at raisingthefloor.org
Mon Nov 6 15:55:24 UTC 2017


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: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20171106/c02de94a/attachment.html>


More information about the fluid-work mailing list