E-mail List Archives

Re: Visually indicating accessibility error as a screen reader user


From: Birkir R. Gunnarsson
Date: Mar 27, 2013 2:30PM


Tony, interesting idea definitely.
If one could put a div around the object, add an ARIA region with an
aria-label, or even a vissible label, then apply some type of visual
highlight, be it a color (color would be neat in that one could use
two or 3 color codes indicating the severity of the error), finally
take a screen shot it would be interesting.
Definitely let us know if you try something that works, I will do likewise.
May be this could be included in some of the accessibility checker
software and toolbars out there in future.

On 3/27/13, Lucy Greco < <EMAIL REMOVED> > wrote:
> Hello:
> I have always used screen shots in my reports on web sites. However I
> have not encountered the types of things we are talking about here to look
> at. I tend to do things like bring up the links list and screen shot
> that to show what I am finding. However I would really like a tool that
> can show what you're talking about. I am mostly a user tester and would
> not like to have to code a solution like this. So if there's a way to do
> these kinds of things please let me know. I would love to become more of
> an independent tester and not have to rely on the sited person that works
> with me as much Lucy
> Lucia Greco
> Web Access Analyst
> IST-Campus Technology Services
> University of California, Berkeley
> (510) 289-6008 skype: lucia1-greco
> http://webaccess.berkeley.edu
> Follow me on twitter @accessaces
> -----Original Message-----
> [mailto: <EMAIL REMOVED> ] On Behalf Of Tony Olivero
> Sent: Wednesday, March 27, 2013 10:35 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Visually indicating accessibility error as a screen
> reader user
> Birkir,
> I know the reports we often get from sighted testers have screenshots
> with annotations.
> One possibility, and I'm admittedly just throwing this out it is
> untested, if you can use the browser's javascript console to somehow
> add the callout to the page then it would be uncluded in a screenshot.
> You'd have to figure out a way to do this, but maybe adding a layer on
> a positive Z access with a style rule, changing the background to a
> pronounced color, and making the text a number? You'd have to either
> prepend or append this to the element in question. That way you could
> use the same number in your report to call out the error visually.
> Just my immediate thoughts. I've wondered about this from time to time
> myself though so perhaps we can find a solution.
> Tony
> On 3/27/13, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
>> Good morning, yea clan of the webwise.
>> I was working on an accessibility audit last night (yes, it happens,
>> occasionally, may be more than I'd like to admit).
>> I found myself writing 2 or 3 sentences describing the location of a
>> link that did not have keyboard support (well, a div to be
>> semantically correct).
>> Of course I had to describe it from a screen reader perspective, i.e.
>> part of this list with these other objects/links, I could not visually
>> describe or indicate it, as I do not know where or how it appears on
>> the screen visually without sighted assistance, as far as I know,
>> which sometimes is not very far.
>> It made me wonder what sighted testers do in this situation and if
>> there is a tool or method that could replicate this for the
>> zero-sighted.
>> Do you take a screen shot indicating problematic areas, either by
>> color or label (I create case numbers in a spreadsheet and it would be
>> ideal to be able to add those to a screenshot).
>> Is there another/better way to do this?
>> Is there a screen reader accessible best practice in this scenario?
>> We certainly do have to improvize sometimes. One of these days it
>> would be fun to try and start a website with tips, tricks,
>> accessibility evaluation of tools and other info for blind web
>> accessibility testers, but that's a whole other can of worms, when I
>> have a little bit more time to spare. :)
>> Cheers
>> -B
>> >> >> >>
> > > > > > >