WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Associating Errors From Wave Plug-in to the HTML Source

for

From: Birkir R. Gunnarsson
Date: Dec 27, 2018 11:41AM

In Firefox, you can simulate a right click on the page where the error
is displayed (in Jaws, Jaskey-9) from the menu you can press arrow up
once or twice until you get to "inspect element", then press enter.
Now you should be placed in the HTML DOM tree in the developer tools
with focus on the element where you brought up the right click menu.
You can use arrow keys up/down to explore that node, its children or
its siblings. That way you can usually quickly locate the code that is
causing the issue.
Sometimes when you are on an element that is not focusable and does
not have a role, this does not work. In that case find the nearest
link/button/input and repeat the exercise. You won't be at the exat
place you want to be, but you're usually not far from it either.

You can use shift-f10 from here to bring up a context menu and from
there you can select "copy HTML" and "copy outer HTML" if you want to
explore the HTML in a text editor.
I have Ed Sharp (Ed #) on my machine and paste the HTML there. Then I
press ctrl-a to select the entire HTML snippet and ctrl-enter to
remove all the leading spaces. I find the code easier to explore that
way.
I wrote a detailed guide for using Jaws with Firebug with the older
Firefox browsers and posted it to http://www.bats.fyi but I have yet
to write an updated version (Firebug is no longer compatible with
Firefox, or at least I have not gotten it to work).
Hope this helps a bit and you can at least play with this approach.
-B

On 12/27/18, Jared Smith < <EMAIL REMOVED> > wrote:
> Kelly -
>
> WAVE has a code panel at the bottom of the page that will show the
> WAVE icons with their relevant code. The icons in the code panel
> should indicate the icon name/type (such as "ERROR: Missing form
> label"), but there seems to be a bug where all of the icons have
> alt="1". Yikes! I'll fix this soon. Activating a button in the sidebar
> or within the page will visually highlight the respective location
> within the code, but it doesn't set focus to it.
>
> When designing this functionality we chose not to have the icons
> change focus when activated. Because each icon is represented three
> times (details panel, within the page, and in the code panel), having
> focus change between them would quickly become rather difficult and
> confusing, not to mention that pages would then have numerous, often
> hundred of new buttons to navigate. We decided to have keyboard
> interactivity centralized within the functionality of the sidebar and
> within the page itself (each icon is keyboard focusable there).
>
> I think I'll add some new functionality where if an icon is activated,
> then the relevant portion of code within the Code panel region would
> then be keyboard navigable, though not focused directly. In other
> words, you could find the relevant icon within the page or sidebar,
> activate it, then jump to the Code panel region and navigate directly
> to the relevant code area. I'll test and if this functionality makes
> sense will push an update with this functionality soon.
>
> Thanks for helping prompt an improvement to this functionality.
>
> Jared Smith
> WebAIM.org
> > > > >


--
Work hard. Have fun. Make history.