WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Visually indicating accessibility error as a screen reader user

for

Number of posts in this thread: 7 (In chronological order)

From: Birkir R. Gunnarsson
Date: Wed, Mar 27 2013 7:32AM
Subject: Visually indicating accessibility error as a screen reader user
No previous message | Next message →

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

From: Tony Olivero
Date: Wed, Mar 27 2013 11:35AM
Subject: Re: Visually indicating accessibility error as a screen reader user
← Previous message | Next message →

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 ADDRESS 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
> > > >

From: Lucy Greco
Date: Wed, Mar 27 2013 11:51AM
Subject: Re: Visually indicating accessibility error as a screen reader user
← Previous message | Next message →

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


From: Birkir R. Gunnarsson
Date: Wed, Mar 27 2013 2:30PM
Subject: Re: Visually indicating accessibility error as a screen reader user
← Previous message | Next message →

Hi

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.
-B

On 3/27/13, Lucy Greco < = EMAIL ADDRESS 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
>
>
>

From: Jonathan C. Cohn
Date: Wed, Mar 27 2013 9:05PM
Subject: Re: Visually indicating accessibility error as a screen reader user
← Previous message | Next message →

Hi,

I have found the JAWS keystroke insert-shift-F1 to be quite useful. It describes the current element with jaws focus and all of its parents. This includes the attributes like class and id, so can be fairly useful.

Jonathan Cohn
= EMAIL ADDRESS REMOVED =
(703) 573-6956
http://www.linkedin.com/in/JCCohn




On Mar 27, 2013, at 9:32 AM, Birkir R. Gunnarsson 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
> > >

From: Alastair Campbell
Date: Thu, Mar 28 2013 11:10AM
Subject: Re: Visually indicating accessibility error as a screen reader user
← Previous message | Next message →

Birkir R. Gunnarsson wrote:
> 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.

Using screenshots is a common way of highlighting where issues are, I
generally use graphics software, but another way would be using
browser tools.

If you can use something like firebug you could highlight particular
areas by adding CSS. For example, if it has an ID:
#aParticularElement {outline: 2px red solid;}

I seem to remember that firebug had some work done to make it
accessible, although I'm not sure on it's current status. If you know
CSS (or are prepared to learn) that's probably the easiest way to
highlight things.

With an element highlighted in the HTML, move across to the styles
pane, and add the outline to the element styles.

You could then screenshot the browser (alt-prt sc on windows) and
paste into Word (or whatever).

Just don't leave any dodgy tabs open at the same time!

hth,

-Alastair

From: Patrick Dunphy
Date: Thu, Mar 28 2013 11:27AM
Subject: Re: Visually indicating accessibility error as a screen reader user
← Previous message | No next message

Similar to the previous comment, I sometimes use a plug in called awesome
screenshot.. it allows you to choose the entire screen or just a specific
selection as well as annotate it before saving.

Hope that helps.
On Mar 28, 2013 1:10 PM, "Alastair Campbell" < = EMAIL ADDRESS REMOVED = > wrote:

> Birkir R. Gunnarsson wrote:
> > 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.
>
> Using screenshots is a common way of highlighting where issues are, I
> generally use graphics software, but another way would be using
> browser tools.
>
> If you can use something like firebug you could highlight particular
> areas by adding CSS. For example, if it has an ID:
> #aParticularElement {outline: 2px red solid;}
>
> I seem to remember that firebug had some work done to make it
> accessible, although I'm not sure on it's current status. If you know
> CSS (or are prepared to learn) that's probably the easiest way to
> highlight things.
>
> With an element highlighted in the HTML, move across to the styles
> pane, and add the outline to the element styles.
>
> You could then screenshot the browser (alt-prt sc on windows) and
> paste into Word (or whatever).
>
> Just don't leave any dodgy tabs open at the same time!
>
> hth,
>
> -Alastair
> > > >