WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Do any of the web accessibility developer tools visually show ARIA landmarks?

for

From: Jim Allan
Date: Feb 10, 2012 11:15AM

See also wwww.jimthatcher.com/favlets one of the reveals ARIA information
nicely

Jim
On Feb 10, 2012 11:36 AM, "Vincent Young" < <EMAIL REMOVED> > wrote:

> I know FAE will outline the navigation roles, but I don't think much of
> anything else. For a potential hack, if you are using a DOM inspector with
> scripting capability, such as Firebug on Firefox, throw this in:
>
> var elements = document.getElementsByTagName("*");
> for(var i = 0; i < elements.length; i++) {
> var el = elements[i];
> var role = el.getAttribute("role");
> if(role !== null) {
> el.style.backgroundColor = "rgba(214, 105, 13, 0.4)";
> el.style.border = "4px dashed #d6690d";
> el.innerHTML = el.innerHTML + '<span
>
> style="padding:5px;margin:5px;display:inline-block;background:#0bf4f7;border:
> 2px dotted #059799; font-size:18px; font-family: arial, helvetica,
> sans-serif; font-weight:bold; text-transform:lowercase; color: #333;">' +
> role + "</span>";
> }
> }
>
> The native browser DOM inspectors should have this. You have time to check
> if this is anywhere on their road map? I created a feature request for
> Chris Pederick's Web Developer Toolbar Add-on for Mozilla/Webkit:
>
> http://chrispederick.com/forums/viewtopic.php?pid=9675#p9675
>
> On Fri, Feb 10, 2012 at 7:21 AM, Steve Faulkner < <EMAIL REMOVED>
> >wrote:
>
> > Hi Birkir,
> > the following tools visualize ARIA landmarks:
> >
> > Juicy Studio Accessibility Toolbar (firefox)
> >
> >
> https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/
> >
> > web accessibility toolbar
> > http://www.paciellogroup.com/resources/wat-ie-documentation.html
> >
> > regards
> > stevef
> > On 10 February 2012 15:14, Birkir R. Gunnarsson <
> > <EMAIL REMOVED>
> > > wrote:
> >
> > > I am encouraging a web developer to add ARIA landmarks to the website.
> > > He is interested, but he is doing it incorrectly so the landmarks
> > > never get added.
> > > Are there any tools out there that show the landmarks as a screen
> > > reader would see them, to assist him in getting it right, without me
> > > hving to constantly review it with a screen reader (of course I can
> > > always tell him to just download NVDA, but if there is some plug in
> > > that can do this, that'd probably be less daunting).
> > > Thanks
> > > -B
> > >