E-mail List Archives
Thread: Associating Errors From Wave Plug-in to the HTML Source
Number of posts in this thread: 12 (In chronological order)
From: Kelly Ford
Date: Thu, Dec 27 2018 5:03AM
Subject: Associating Errors From Wave Plug-in to the HTML Source
No previous message | Next message →
Hi,
I don't use the Wave plug-in for browsers that often but was trying to
compare results with someone else who was using the tool. I'm trying to
figure out how to locate the relevant part of the HTML for the errors that
the plug-in flags. I'm wondering if someone has a pointer on how you do
this with JAWS, NVDA or another screen reader.
When I run the tool on a page, I get the resulting page text marked up with
the notes about different items that the plug-in has flagged. For example
using the tool on www.acb.org <http://www.acb.org>; , I get an error
indicating that there is a missing form label on the edit box. This appears
in the way the screen readers present the page immediately after the edit
box as:
ERRORS: Missing form label
This is fine but short of searching through all the page source, which is
shown after the page content, is there a way to quickly find the source HTML
leading to this error. As it stands now I know I can look for an input
entry in the HTML but was hoping there might be a faster way such as a
numbering scheme to say error 1 in the page text is error 1 in the HTML but
am not finding that.
Related to this, the same page flags 11 errors for 11 broken aria references
in the section where I can check what I want to view. There is then a
string of numbers from 1-11 immediately after this. This is not in the page
text but in the details section. Again short of searching through the page
source, how do I use these numbers to find the errors?
Any pointers are appreciated.
Thank you,
Kelly
From: Jared Smith
Date: Thu, Dec 27 2018 9:08AM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | Next message →
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
From: Birkir R. Gunnarsson
Date: Thu, Dec 27 2018 11:41AM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | Next message →
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 ADDRESS 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.
From: KellyFord
Date: Fri, Dec 28 2018 9:19AM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | Next message →
HiJared,
When you say that activating a button in the side bar should cause the code
in the code section to get highlighted, I have a question or two.
Are the buttons supposed to be the graphics that get numbered starting at 1
up to how many items are listed for a given category? For example, if I'm
told there are 16 H2 elements on the page, first there is a checkbox and
then graphics with alt text of numbers 1-16. Or are the buttons someplace
else?
Kelly
From: KellyFord
Date: Fri, Dec 28 2018 9:32AM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | Next message →
Also,
After you fix the fact that many items are tagged with alt text of 1, won't
there still be an issue finding the right items in the code. There will be
potentially multiple items with the same number. If the page has five
heading 2 and five heading 3,as I understand how this works, the H2 items
get numbers 1 to x and then the h3 items get numbers again 1 to x, where x
is the total number of items in that category.
Kelly
-----
Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
KellyFord
Sent: Friday, December 28, 2018 10:19 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Associating Errors From Wave Plug-in to the HTML
Source
HiJared,
When you say that activating a button in the side bar should cause the code
in the code section to get highlighted, I have a question or two.
Are the buttons supposed to be the graphics that get numbered starting at 1
up to how many items are listed for a given category? For example, if I'm
told there are 16 H2 elements on the page, first there is a checkbox and
then graphics with alt text of numbers 1-16. Or are the buttons someplace
else?
Kelly
From: Jared Smith
Date: Fri, Dec 28 2018 12:34PM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | Next message →
Kelly Ford wrote:
> Are the buttons supposed to be the graphics that get numbered starting at 1
> up to how many items are listed for a given category?
The individual icons in the sidebar are not buttons - clicking them
provides a visual highlighting of the relevant location in the page,
but making all of these many icons into buttons would render the
sidebar (and thus all of WAVE) very difficult to use on most pages. I
was instead referring to the WAVE icons in the page itself.
> After you fix the fact that many items are tagged with alt text of 1, won't
> there still be an issue finding the right items in the code.
My hope is that by making the relevant area in the Code panel
navigable that this will make it much easier to find. You could
activate the relevant icon button within the page (for instance a
missing alt text icon adjacent to the site logo), then quickly
navigate to the Code panel region and then Tab to the appropriate
element within the code for that icon (the HTML code for the site
logo).
We're working on a design and UX update to WAVE, so some of these
interactions will be changing. We're committed to ensuring that WAVE
is highly accessible and have received very positive feedback from
screen reader users (it's one of only a few accessibility testing
tools that is itself accessible), but understand that exploring the
Code panel can be rather difficult to do programmatically or with a
keyboard.
Thanks,
Jared
From: Kelly Ford
Date: Sun, Dec 30 2018 9:10AM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | Next message →
Hi,
Here is what I'm hoping in some fashion will be possible.
1. I start reading through the waved-marked view of the web page with the
JAWS VPC mode on or the equivalent mode in NVDA, Narrator, VoiceOver or
other screen readers. To be clear, this is the text of the web page, not
the source.
2. I encounter indication of an error. This is where I would like a fast
way to jump to the relevant section of the page source.
I would agree 100% and more that most of the tools in this space are
difficult to use from an accessibility perspective. They require extensive
screen reader gymnastics to me.
One last item, would you consider marking up the source part of the wave
view of a web page with some landmark or other indication. Right now the
fastest way I've found to get to it is to use a screen reader's search
feature and search for the word code. BTW, I'm not sure what the link code
is supposed to do. Each time I activate it, Chrome stops responding.
Kelly
From: Jared Smith
Date: Sun, Dec 30 2018 10:12AM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | Next message →
Kelly -
What you asked for is precisely what we're planning. The Code panel
will also be a region/landmark to allow quicker access to it.
I can't speak to Chrome not responding. I'm not able to duplicate that here.
Thanks,
Jared
From: JP Jamous
Date: Sun, Dec 30 2018 11:55AM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | Next message →
Kelly,
If you are using JFW, try switching to NVDA and try it. Sometimes, you get
either the browser or the screen reader crashing. This will help you
diagnose the problem since Jared is not able to duplicate it.
Jared,
Is it possible to have the WAVE icon show up in the Chrome context menu or
is that a browser restriction? I like how in Firefox, I just press the
Applications key and the menu item is there. I dislike where Chrome
typically places its extension buttons. Not user friendly from a UX
prospective.
Secondly, is it possible to have the WAVE extension results load in a new
browser tab? This can be quite convenient to switch between tabs using CTRL
+ Tab key, while inspecting the page using a DOM inspector. It can be more
productive based on my experience with WAVE.
Keep up the outstanding work with WAVE.
--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------
From: KellyFord
Date: Sun, Dec 30 2018 12:29PM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | Next message →
Chrome stops responding for me whether I use JAWS, NVDA or Narrator in
Chrome when I activate the code link.
From: Jared Smith
Date: Sun, Dec 30 2018 4:38PM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | Next message →
> Is it possible to have the WAVE icon show up in the Chrome context menu or
> is that a browser restriction?
It is already. Just ensure that you don't have anything selected
within the page and the "WAVE this page" item should appear in the
context menu. There is also a default shortcut key of Control + Shift
+ U (Command + Shift + U on Mac). If this doesn't work, it may need to
be defined in the Keyboard Shortcuts settings for Extensions (also
available at chrome://extensions/shortcuts).
> Secondly, is it possible to have the WAVE extension results load in a new
> browser tab?
This isn't optimal because in many cases you may want to evaluate a
dynamic state of the page, and re-loading the page in a new tab would
negate this. You can, however, duplicate the tab (there is an option
for Duplicate in the Window menu) and then run WAVE there. I will,
however, look into an option for doing this automatically with the
WAVE extension in cases where this functionality is desired.
Thanks,
Jared
From: JP Jamous
Date: Sun, Dec 30 2018 5:26PM
Subject: Re: Associating Errors From Wave Plug-in to the HTML Source
← Previous message | No next message
Jared,
For the latter one, the goal was to be able to go through the list of errors
and switch over to the original window that has the page and change the DOM
markup. This would enable evaluators to modify the markup and hear how it
sounds with a screen reader or look visually.
If using the duplicate window does not make the WAVE report disappear, I am
fine with that.
--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------