When constructed correctly the dialog container itself will likely not have a tabindex -1, 0 or set -- this rules out use of the focusable elements module in ANDI for inspecting the dialog structure. It would be great to have something that supports inspection of other structures like this.

Many pages have dynamic content such as menus. When you click on the menu ANDI doesn't recognize the new focusable items. The user might need to switch modules and hope the menu doesn't close to get ANDI to see the new content. Clicking the "refresh ANDI' button often closes the new content on the page. It might be useful for ANDI to create some DOM mutation observers and automatically see these changes.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

John,

This is a feature request.

Would it be possible to add a feature that shows all of the screen reader text on the page--e.g., a printed version of what a screen reader would say for the entire page? I think that would be very useful, especially when reviewing accessibility with stakeholders, etc. Maybe open another browser tab with this text? That would allow the user to print it out.

Craig

This error pops up in the console for me sometime when I'm using ANDI.

Stacktrace:
Uncaught TypeError: Cannot read property 'left' of undefined
at AndiLaser.drawLaser (andi.js:1565)
at HTMLAnchorElement. (andi.js:676)
at HTMLAnchorElement.handle (jquery.min.js:2)
at HTMLAnchorElement.dispatch (jquery.min.js:2)
at HTMLAnchorElement.y.handle (jquery.min.js:2)
at HTMLAnchorElement.sentryWrapped (helpers.ts:77)

Here's what a photo of the line described above from Sentry:

function AndiLaser(){
	//Draws a laser. Pass in an object containing properties top and left, AKA the result of jQuery offset().
	this.drawLaser = function(fromHereCoords, toHereCoords, targetObject){
		if(browserSupports.svg){
			$("#ANDI508-laser").attr("x1",fromHereCoords.left).attr("y1",fromHereCoords.top)
							   .attr("x2",  toHereCoords.left).attr("y2",  toHereCoords.top);
			$("#ANDI508-laser-container").css("cssText","display:inline !important");
			$(targetObject).addClass("ANDI508-laserTarget");
		}
	};
	//Removes the lasers by hiding the laser container.

The global UI is in English. It could be very useful to provide a customization setting to switch language in French, german, swedish, italian, chinese, standard arabic (more complicated right-to-left language...), etc.

L'interface utilisateur globale est en anglais. Il pourrait être très utile de fournir un paramètre de personnalisation pour changer de langue en français, allemand, suédois, italien, italien, chinois, arabe standard (langue plus compliquée de droite à gauche...), etc.

Die globale Benutzeroberfläche ist in Englisch. Es könnte sehr nützlich sein, eine Anpassungseinstellung zur Verfügung zu stellen, um die Sprache auf Französisch, Deutsch, Schwedisch, Italienisch, Chinesisch, Standard arabisch (komplizierte Sprache von rechts nach links....), etc. umzustellen.

We would like to use Andi to test our Intranet pages but are concerned that our secured content might be compromised. Is it safe to use for our internal content? Also, how often is the software updated? Do users get notifications?

Thanks,

Gerardo

It looks like you have quite a few Help Wanted issues in your repo. You can feature these on Code.gov and reach a larger audience by adding specific tags to your Help Wanted issues.

Here are the specifics - https://github.com/GSA/code-gov/blob/master/HelpWanted.md
And, an example - https://github.com/GSA/code-gov-web/issues/417

Let me know if you have questions,
Cheers!
Joe

It may be useful to apply a style to a page like changing all content to display block to force a linear view of the page. This can help to check the reading order without using assistive technology.

ANDI should take into account computed font size and font weight (bold or 700) in computing whether contrast is sufficient or not. Here is a page with a ratio of 4.48 which correctly fails for small but also fails for the others which it should pass.

https://labs.levelaccess.com/index.php/Contrast_with_different_font_sizes

Before CBP can purchase/continue to use any software/hardware products we need the manufacture (SSA.GOV) to verify the lifecycle date/extend the lifecycle date (the day you plan on transitioning away from the product).

This would be the month day and year of the announced end date to determine when you (SSA.GOV) will be transitioning from ANDI. If you could confirm that you will support ANDI until 9/1/2021 (in an email), or the date month and year you will support ANDI to that would be great. Thank you.

Hi,

Is it possible to change languages of this tool ?
If not, is there a way to contribute ?

thanks
Best regards.

MS Edge now has additional features for bookmarks … the ability to import a file is handy … the instructions https://www.ssa.gov/accessibility/andi/help/install.html for MS Edge are tricky, since developers generally have a bunch of browsers, each with their distinct set of bookmarks … so the import process is not ideal.

What can be easily done … a HTML file can be imported into MS Edge … this can be provided as a download, or instructions to self-create a bookmark file could be provided … the HTML for that file should be something like …

<!DOCTYPE NETSCAPE-Bookmark-file-1>
<DL><p>
    <DT><A HREF="javascript:void((function(){andiScript=document.createElement('script');andiScript.setAttribute('src','https://www.ssa.gov/accessibility/andi/andi.js');document.body.appendChild(andiScript)})());">ANDI SSA</A>
</DL><p>

To import the bookmark file, in MS Edge …

• Click on the ellipses (Alt X)
• Settings
• Import from another browser
• Import from file
• Select file
• Success is indicated by a message "All done!"
• Favorite is placed in a folder with the HTML file's name.

Hope this helps.

It seems like my instance of Chrome refuses to recognize or run javascript in a bookmarklet. I have javascript enabled, but nothing seems to work. I tried a workaround by running the script through an html link and get an error saying "Uncaught TypeError: Cannot read property 'appendChild' of null" in the console. Even if I could get that to work, it wouldn't open in the proper page. The only thing that has worked is an embedded link, but again, I can't add that to the web pages I'm testing.

Please help.

ANDI seems to be incorrectly reporting a number of contrast errors on the following page: stemability | Activities

In particular, it doesn't seem to be recognizing the dark gray background color for a number of items with a white foreground color. It incorrectly reports the background as being white in those instances. Am I missing something?

For what it's worth, the aXe extension doesn't flag these as errors.

The name attributes must match for radio button groups to be created correctly to support keyboard navigation. While the arrow keys can be used to test this it might be useful to include the name attribute in the element shown with ANDI > Focusable elements.

The links/button mode doesn't seem to address the button element, input type button/submit/reset, or ARIA buttons. These items are not listed in this mode but are addressed by the Focusable elements mode. Suggest changing the mode to just "links".

Hey Andi is cool to use!
Andi Rocks.txt

ANDI currently does not account for tables constructed following the WAI-ARIA table design pattern.

Also see WAI-ARIA table example.

Issue# 42 was about our need to load ANDI locally, as we did for its WAT predecessor, so that our 6 Trusted Testers certified by OAST who are inmates at a prison can use ANDI, a requirement to recertify. We were given an instruction URL that seemed to require some kind of Javascript patch.

When I submitted issue# 44 for help with that, I was told, "We spoke with the Trusted Tester Team and they would be happy to help you resolve this. Please reach out to them." With this, issue# 44 was closed on 04/22/19.

I have sent numerous emails and left voicemails to the Trusted Tester Team over the past month without response. Since my understanding is that SSAgov is responsible for ANDI, could I trouble someone there to help us? We need ANDI.

Cheers,
Peter Shikli
503-570-6831

ANDI gives the following message "dangerText box has no accessible name, associated , or [title]. warning[alt] attribute is meant for , use [aria-label] on this element."

While alt is not valid and ANDI should flag that -- it should not suggest using aria-label and instead say provide an accessible name through properties allowed by the accessible name calculation such as label, title or ARIA. Some agencies may want to use ANDI but may not agree on the recommendations provided by ANDI.

hello 👋 , Thanks for this promising a11y tool. 👍

I've noticed a little bug 🐛

The bug
🤔 It seems that HANDI doesn't analyse code rendered in the ShadowDOM (see: WebComponents)

references

• MDN Using Shadow DOM
• MDN Webcomponents

This page has two examples where background images and colors are used. When it is run background colors disappear to not just the images.

http://mraccess77.github.io/examples/bg.html

Disagreement with a website and how ANDI iframes vs Frames favelet pick up iframes. The Twitter Timeline iFrame is in the tab order, you can use the focusable elements module in ANDI to get Accessible Name and Description for the iframe, but for some reason it isn’t showing up in the iframes module even though it is quite clearly an <iframe> element. Possibly a bug?
Website: http://cap.mil/

ANDI iframe.docx

The ANDI help pages use only the color red to indicate hypertext. Not only is the underline removed, the help page's style moves away from the typical blue hypertext. The red chosen has a 4.5:1 contrast ration and thus meets the technical minimum threshold for color contrast, yet people who are colorblind often can't see red at all.

Elements with role of link are not shown in the links mode -- they are shown under the Focusable Elements mode. Is this by design?

We have a half dozen Trusted Testers certified by OAST and are looking to recertify to V5. ANDI is to replace the previous WAT tools required for that. Whereas we were able to load and use WAT to audit downloaded website copies, we cannot do so with ANDI because, as I understand it, ANDI makes an online call to https://www.ssa.gov/accessibility/andi/andi.js to operate.

Our problem is that Access2online is a joint-venture company run from inside a state prison. We have taught our inmates to do accessibility audits on local website copies, but prison rules prohibit inmates from live, unmonitored internet access. This is why they cannot use ANDI.

Is there a workaround, patch, setting, or adjustment we can make to operate ANDI without live internet access as we could with WAT?

We would like to continue to offer these hands-on job skills with a future to our inmates as part of their release preparation.

It would be helpful if ANDI warned the user if a server side image map was found via the ismap attribute.

ICT Testing baseline has checks for aria-hidden on decorative images. It would be great if ANDI could assist with that. Thanks

ANDI does not currently account for data grids constructed following the ARIA grid design pattern.

See also:

• Data grid examples
• Advanced data grid examples

The ANDI toolbar was working the other day and now does not show up correctly in Chrome or Firefox -- haven't tried IE. It looks like the CSS isn't being applied correctly.

I would like to download the code to run on a network that is not connected to the Internet. What do I need to download and what modifications would I need to make to the code to allow it to work?

It would be useful to turn on the hide content > reveal all functions when using the focusable functions including tab order -- however, when you switch ANDI modules it closes what was shown by the prior module.

My group loves this tool! We use it to make it easier for accessibility testers without as much of a programming background to check names and attributes. It's part of our suite of bookmarklets, along with Accessibility-Bookmarklets.org, Paul Adam, Tota11y and a few others.

We would love to be able to create bookmarklets that take us directly to a specific module, like Tables or Links. We have a set of bookmarklets shared by the team, organized by what they're used for, so it would be great to point someone directly to a specific module. We would love a parameter we can pass in the URL that selects the starting module.

A mode that shows content marked with ARIA live regions can be helpful to determine when ARIA live regions are used on the page without using assistive technology.

Images that are used as part of image maps and need alternative text do not show up with the graphics/image module.

I like this project! It is similar to a11y.css but ANDI seems to have better navigation. Likely because ANDI is javascript and a11y is only css.

That being said, I think the "installation" instructions could be simplified to just start with, copy/paste the snippet. This should work in any browser.

It would be nice if the snippet was in the github readme as well.

I've noticed in some places the parent element is shown -- for things like groupings. This is really helpful. For other elements like role of tab -- there is no way with ANDI to confirm that role of tablist was used as an ancestor without switching to the structure view and turning on roles.

In this tab example it would be helpful to know if an ancestor had the tablist role.
https://labs.levelaccess.com/index.php/ARIA_Tab_Role

In general inspection of ARIA structures is tricky with ANDI as not all properties are shown. I understand that this makes the tool more complicated. So another approach might be some sort of ARIA validator like this that might help automatically detect if the structure is correct or not.
http://whatsock.com/training/matrices/visual-aria.htm

When the structure module is opened the heading feature is automatically selected. When I select the reading order feature which shows numbers the heading feature is still active. I would like to use the next and prior buttons to move through the reading order -- but instead the move through headings. For some of us finding the numbers of the screen is difficult and being able to navigate next through the reading order would be helpful when we can't find the numbers easily.

It's weird that the "|<" and ">|" buttons are located nowhere near the number of issues found and that there's no indication of which issue you're currently looking at (e.g. "6/30")

Consider a simple extension for Chrome and Firefox that would load ANDI as an alterantive to the bookmarklet/Favlet approach. Option 2: have someone else create such an extension which should be very simple to toggle ANDI on and off.

Will ANDI test for the Parsing requirement (WCAG Level A SC 4.1.1)?

There is a Parsing bookmarklet available (originally developed in 2012). I'm not aware of any plans to update the bookmarklet.

Additional info is on this Parsing Criterion page.

ANDI is a great tool and there have been many recent improvements to make it the master tool. There remain a few ARIA related items such as support for aria-activedescendant that might be useful where this type of thing is implemented with radiogroup, tree, tablist, grid, etc.

See the first example on this page for a structure that uses aria-activedescendant.
https://labs.levelaccess.com/index.php/ARIA_Radio_and_Radiogroup

While testing sites, I've noticed that ANDI usually moves the page down which allows the tester to see any issues towards the top of the page. However, there have been several instances where ANDI appears on the page as an overlay and obscures the top of the page, even in mini-mode. This has happened with pages both with and without iFrames.

An example of this occurrence can be seen here: www.stonehill.edu

Please let me know if I can provide additional information.

I followed the instructions to add ANDI to Chrome, but the javascript is not running.

javascript:void((function(){andiScript=document.createElement('script');andiScript.setAttribute('src','https://www.ssa.gov/accessibility/andi/andi.js');document.body.appendChild(andiScript)})());

There are 5 implied aria live region roles that are live regions without use of aria-live -- these are status, log, alert, timer, and marquee. Consider showing these when aria-live feature is activated. Thanks

Since ANDI does not test iFrames it would be very helpful for ANDI to at least provide the url of iFrames on the page so that the user could navigate to those pages separately and attempt to run ANDI on those pages individually.

Area elements used in image maps don't appear to be shown by ANDI images/graphics but are shown in focusable elements. However, no border appears with mouse hover in the focusable elements module. Tabbing or using next/previous in focusable elements mode does highlight the area elements.

when I run ANDI in an application there are multiple buttons on the screen called “View Form” ANDI identified the ids for these as Duplicate ids – however the markup shows the ids as viewFormButton_0, viewFormButton_1, viewFormButton_2 etc. These should not be identified as duplicate ids because the developer has added the -0, -1, -2 to make them each unique.

Although issue #42 Offline Usage by Prison Inmates by pshikli was closed on Mar 14, the prison's IT folks are unable to implement the recommendation given.

The recommendation was that since our Trusted Testers are limited to our own intranet because they are inmates at a state prison for women, our organization should host our own instance of ANDI via instructions for hosting our own ANDI found here: https://www.ssa.gov/accessibility/andi/help/install.html#hostYourOwn.

The prison's IT group reports that in order to host the offline version on the network, they would have to build a web server and change the javascript to point to the offline web server instead of what it currently points to. Although they are quite familiar with sysadmin and security, none of the IT team are javascript programming experts.

Are there instructions or resources available to do this part? We have a half dozen inmates who are certified Trusted Testers unable to get recertified without ANDI.

I am getting the following error from tANDI: ARIA grid has no [role=row] rows.

The grid created using Telerik Kendo UI correctly has <div class="k-grid-aria-root role="grid"> and every row has role="row".

I can get around this via F12 by changing the grid role to role="row" but this is not correct.