569 lines
32 KiB
HTML
569 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" itemscope itemtype="https://schema.org/FAQPage">
|
|
<head>
|
|
<title>ANDI - Accessibility Testing Tool - FAQ</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta charset="UTF-8">
|
|
<!-- Google Tag Manager -->
|
|
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
})(window,document,'script','dataLayer','GTM-5GQXH7Q');</script>
|
|
<!-- End Google Tag Manager -->
|
|
<!-- Google Analytics -->
|
|
<script>
|
|
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
|
ga('create', 'UA-25977386-2', {
|
|
cookieFlags: 'max-age=7200;secure;samesite=none'
|
|
});
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
|
<!-- End Google Analytics -->
|
|
<meta name="DCTERMS:coderOffice" content="DCS" />
|
|
<meta name="DCTERMS:coder" content="SSA" />
|
|
<meta name="DCTERMS:contentOffice" content="DCS" />
|
|
<meta name="DCTERMS:contentOwner" content="SSA" />
|
|
<meta name="description" content="ANDI 508 accessibility testing tool Help FAQ" />
|
|
|
|
<link href="help.css" rel="stylesheet" media="all" />
|
|
<link href="print.css" rel="stylesheet" media="print" />
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script><script src="help.js"></script>
|
|
|
|
|
|
<script>(window.BOOMR_mq=window.BOOMR_mq||[]).push(["addVar",{"rua.upush":"false","rua.cpush":"false","rua.upre":"false","rua.cpre":"false","rua.uprl":"false","rua.cprl":"false","rua.cprf":"false","rua.trans":"","rua.cook":"false","rua.ims":"false","rua.ufprl":"false","rua.cfprl":"false","rua.isuxp":"false","rua.texp":"norulematch","rua.ceh":"false","rua.ueh":"false","rua.ieh.st":"0"}]);</script>
|
|
<script>!function(e){var n="https://s.go-mpulse.net/boomerang/";if("False"=="True")e.BOOMR_config=e.BOOMR_config||{},e.BOOMR_config.PageParams=e.BOOMR_config.PageParams||{},e.BOOMR_config.PageParams.pci=!0,n="https://s2.go-mpulse.net/boomerang/";if(window.BOOMR_API_key="LERZW-HECFS-R8H4E-23UQ7-ERMQB",function(){function e(){if(!o){var e=document.createElement("script");e.id="boomr-scr-as",e.src=window.BOOMR.url,e.async=!0,i.parentNode.appendChild(e),o=!0}}function t(e){o=!0;var n,t,a,r,d=document,O=window;if(window.BOOMR.snippetMethod=e?"if":"i",t=function(e,n){var t=d.createElement("script");t.id=n||"boomr-if-as",t.src=window.BOOMR.url,BOOMR_lstart=(new Date).getTime(),e=e||d.body,e.appendChild(t)},!window.addEventListener&&window.attachEvent&&navigator.userAgent.match(/MSIE [67]\./))return window.BOOMR.snippetMethod="s",void t(i.parentNode,"boomr-async");a=document.createElement("IFRAME"),a.src="about:blank",a.title="",a.role="presentation",a.loading="eager",r=(a.frameElement||a).style,r.width=0,r.height=0,r.border=0,r.display="none",i.parentNode.appendChild(a);try{O=a.contentWindow,d=O.document.open()}catch(_){n=document.domain,a.src="javascript:var d=document.open();d.domain='"+n+"';void(0);",O=a.contentWindow,d=O.document.open()}if(n)d._boomrl=function(){this.domain=n,t()},d.write("<bo"+"dy onload='document._boomrl();'>");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"LERZW-HECFS-R8H4E-23UQ7-ERMQB";var i=document.currentScript||document.getElementsByTagName("script")[0],o=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!o)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),i.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="vht6pfix22vgcz6v4req-f-890320f0c-clientnsv4-s.akamaihd.net",i="false"=="true"?2:1,o={"ak.v":"39","ak.cp":"1204614","ak.ai":parseInt("728289",10),"ak.ol":"0","ak.cr":3,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"e82196","ak.r":35636,"ak.a2":n,"ak.m":"dsca","ak.n":"essl","ak.bpcip":"169.231.231.0","ak.cport":36836,"ak.gh":"23.214.170.79","ak.quicv":"","ak.tlsv":"tls1.3","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"bbr","ak.t":"1742070857","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==jKzCBOhU76wLfMK3b3//+DhYw6DP46XYsY9w7wd+R933pmhlCjgDfh2DE5u8ZdXfhELUSd93Nvpn6mFAKLA0rhJH3nN9YMxReLMSr6gSaMSSFubs3W+Kd/PhvVtSbAeDaXeNS6Zhb8c4w2qOy3/+VTXosWUDMTtvnG73eRRoJehB8N3bAXwojLHhMVCTu5zMUouM36Hm1qiE1EW2okgI8LBVQ6525wqIC0tUidgnQ/NIWZWe4ehua1CAErLkR8F2HoyFXqXlHUtF8+j1UajE2GMzSnNxp84+KSkWCkOrD425g4SPjh5mP8BbjDxVKwM+XWuv0TUVePBP5MdIcUOL6n/4SpLaV3lsChOqBLocCD8CVtHsgjdJR6FcsHf/STWjK1Rw0/Kbspov9IALUCHO6I+6HbNEJunmHRmaV4Twlpk=","ak.pv":"98","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head>
|
|
<body>
|
|
<a href="#skipnav" class="skipnav">Skip to Content</a>
|
|
<header>
|
|
<h1 class="toolName">ANDI</h1>
|
|
<nav id='navHeader'>
|
|
<a href="howtouse.html" class="howtouse">Tutorial</a>
|
|
<a href="modules.html" class="modules">Modules</a>
|
|
<a href="alerts.html" class="alerts">Alerts</a>
|
|
<a href="faq.html" class="faq">FAQ</a>
|
|
<a href="developerguide.html" class="developerguide">Developer Tips</a>
|
|
<a href="install.html" class="install">Install</a>
|
|
</nav>
|
|
<div id='pageTitle' class="faq">
|
|
<h2>Frequently Asked Questions</h2>
|
|
<p id='pageSummary'>
|
|
Here are some answers to common questions about ANDI.
|
|
</p>
|
|
<button id='tableOfContentsControl' aria-controls='tableOfContents'>View Table of Contents</button>
|
|
</div>
|
|
</header>
|
|
<main class="faq" id="skipnav" tabindex="-1" aria-label="main content">
|
|
<nav id='tableOfContents'>
|
|
<h3>Definitions</h3>
|
|
<ul>
|
|
<li><a href="#define-accessibleName">What is Accessible Name?</a></li>
|
|
<li><a href="#define-accessibleDescription">What is Accessible Description?</a></li>
|
|
</ul>
|
|
<h3>Troubleshooting</h3>
|
|
<ul>
|
|
<li><a href="#disabledFavoritesBar">Show favorites/bookmarks bar</a></li>
|
|
<li><a href="#wontLaunch">ANDI Not Working</a></li>
|
|
<li><a href="#csp">Content Security Policy (CSP) blocks ANDI</a></li>
|
|
<li><a href="#iframeFix">Iframe Workaround</a></li>
|
|
<li><a href="#cantInspect">ANDI Won't Find Something</a></li>
|
|
<li><a href="#differentOutput">ANDI's Output is different</a></li>
|
|
<li><a href="#displayIssue">ANDI Display Issues</a></li>
|
|
</ul>
|
|
<h3>Other Questions</h3>
|
|
<ul>
|
|
<li><a href="#hostYourOwn">How do I host my own ANDI?</a></li>
|
|
<li><a href="#mobileTesting">Can I use ANDI for Mobile Testing?</a></li>
|
|
<li><a href="#printReport">Can ANDI Print Reports?</a></li>
|
|
</ul>
|
|
<h3>Contact Development Team</h3>
|
|
<ul>
|
|
<li><a href="#contactUs-bug">Found a Bug</a></li>
|
|
<li><a href="#contactUs-feature">Feature Request</a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class="division">
|
|
<h2>Definitions</h2>
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-define-accessibleName" id='define-accessibleName'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<h3 id="lby-define-accessibleName" itemprop="name">What is Accessible Name?</h3>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p itemprop="text">
|
|
Accessible Name is the name of an HTML element
|
|
which will be spoken by screen readers and used by Assistive Technologies.
|
|
The accessible name is the result of the accessible name computation based on
|
|
the element's contents, HTML attributes, ARIA attributes, or programmatically associated elements.
|
|
<span class="brand">ANDI</span>, the accessibility testing tool, calculates the accessible name
|
|
and includes it in the <span class="brand">ANDI</span> output.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-define-accessibleDescription" id='define-accessibleDescription'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<h3 id="lby-define-accessibleDescription" itemprop="name">What is Accessible Description?</h3>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p itemprop="text">
|
|
Accessible Description is additional text related to an
|
|
HTML element which will be spoken by screen readers and used by Assistive Technologies.
|
|
The accessible description is the result of the accessible name computation based on
|
|
the element's HTML attributes and ARIA attributes.
|
|
<span class="brand">ANDI</span>, the accessibility testing tool, calculates the accessible description
|
|
and includes it in the <span class="brand">ANDI</span> output.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<h2>Troubleshooting</h2>
|
|
<section tabindex="-1" aria-labelledby="lby-disabledFavoritesBar" id='disabledFavoritesBar'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-disabledFavoritesBar"
|
|
itemprop="name">How to show favorites/bookmarks bar</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p>
|
|
If the browser toolbar or favorites/bookmarks menu is hidden, try this:
|
|
<span itemprop="text">Press F10, then select the bookmarks/favorites option to show bookmarks/favorites bar.</span>
|
|
<p>
|
|
If the favorites bar is disabled by the web application...
|
|
</p>
|
|
<div class="example">
|
|
<ol>
|
|
<li>If using IE, press CTRL + N to open a new window at the current (hidden) url.</li>
|
|
<li>If that doesn't work, if using IE, get the current URL and paste into a new window:
|
|
<ul style="font-size:12pt; margin:1em;">
|
|
<li>Right click on the page or press Shift + F10</li>
|
|
<li>Select "Properties"</li>
|
|
<li>Click next to Address (URL), press CTRL + A to select the full url</li>
|
|
<li>CTRL + C to copy the url</li>
|
|
<li>Open a new browser window paste the url into the address field, press enter</li>
|
|
</ul>
|
|
</li>
|
|
<li>Otherwise, ask the web application's development team to enable the toolbar.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr />
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-wontLaunch" id='wontLaunch'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-wontLaunch"
|
|
itemprop="name">ANDI isn't Working</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p>
|
|
If <span class="brand">ANDI</span> doesn't launch or doesn't finish loading, try these steps:
|
|
</p>
|
|
|
|
<details>
|
|
<summary>Check for Content Security Policy (CSP)</summary>
|
|
<p itemprop="text">
|
|
The page may have a "Content Security Policy (CSP) directive" which prevents outside scripts, like <span class="brand">ANDI</span>, from executing.
|
|
To determine if this is the issue, open the browser's Developer Tools (F12)
|
|
and attempt to launch <span class="brand">ANDI</span>.</p>
|
|
<p>
|
|
If the Dev Tools console shows an error message that says
|
|
<i>"Refused to load the script...because it violates the following Content Security Policy directive"</i>
|
|
then this is the issue.
|
|
</p>
|
|
<p>
|
|
If CSP is preventing <span class="brand">ANDI</span> from working, <a href="#csp">try the CSP workarounds</a> below.
|
|
</p>
|
|
</details>
|
|
<details>
|
|
<summary>Check for JavaScript error</summary>
|
|
<p>There could be a JavaScript error occurring, causing <span class="brand">ANDI</span> to freeze. Usually when this occurs, <span class="brand">ANDI</span> will partially load, but won't finish.</p>
|
|
<p>
|
|
Open the browser's Developer Tools (F12) and attempt to launch <span class="brand">ANDI</span>.
|
|
If the Dev Tools Console shows a JavaScript error that relates
|
|
to <span class="brand">ANDI</span>, then send a link to the test page or a screenshot of the console error message to <span class="brand">ANDI</span>'s development team
|
|
by <a href="https://github.com/SSAgov/ANDI/issues" target="_blank">creating an issue on the GitHub page</a>.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Check if favelets are blocked</summary>
|
|
<p>Your browser or organization could be preventing scripts (such as <span class="brand">ANDI</span>) from launching from a favorite/bookmark.</p>
|
|
<p>To determine if favelets/bookmarklets are blocked, try this:</p>
|
|
<div class="example">
|
|
<ul style="font-size:12pt; margin:1em;">
|
|
<li>Drag and Drop this link: <a onclick='alert("Drag and Drop the link to your favorites/bookmarks bar");return false;' rel="bookmark" href="javascript:void((function(){alert('Your browser is not blocking JavaScript in favorites/bookmarks')})());">Test Favelet</a> into your browser's favorites/bookmark bar.</li>
|
|
<li>Activate the favorite/bookmark you just created.</li>
|
|
<li>If you don't see an alert pop up, then your browser is blocking JavaScript in favorites/bookmarks, in which case you will not be able to use <span class="brand">ANDI</span> in this browser.</li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
<details>
|
|
<summary>Is the test page huge?</summary>
|
|
<p>
|
|
The test page may be very large and have many elements which takes
|
|
<span class="brand">ANDI</span> a longer than normal time
|
|
to analyze.
|
|
</p>
|
|
<p>
|
|
Try waiting a little longer. If you still have issues, <a href="https://github.com/SSAgov/ANDI/issues" target="_blank">create an issue on the GitHub page</a>.
|
|
</p>
|
|
</details>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr />
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-csp" id='csp'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-csp"
|
|
itemprop="name">Content Security Policy (CSP) blocks ANDI</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p itemprop="text">
|
|
A "Content Security Policy (CSP) directive" prevents outside scripts, like <span class="brand">ANDI</span>, from executing.
|
|
When you launch ANDI, if you get a warning about Content Security Policy, and ANDI doesn't load, here's some help.
|
|
</p>
|
|
<p>
|
|
Try these one of these workarounds:
|
|
</p>
|
|
<div class="example">
|
|
<ol>
|
|
<li><strong>Long-term Workaround:</strong> Ask the page owner to add the <span class="brand">ANDI</span> scripts to the "whitelist" of allowed scripts. When ANDI's scripts are "whitelisted", the scripts won't be blocked by the CSP.</li>
|
|
<li><strong>Immediate Workaround:</strong> Install a browser extension called Disable Content-Security-Policy or change a browser setting. (Instructions below). Note: It is the user's decision to disable CSP and the user's responsibility to re-enable CSP when testing with <span class="brand">ANDI</span> has concluded.</li>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<button class="expandButton disableCSP">How to disable CSP in Chrome</button>
|
|
|
|
<ol style="font-size:13pt; display:none;">
|
|
<li>Install the Disable Content-Security-Policy extension</li>
|
|
<li>Navigate to the test page</li>
|
|
<li>Open the extensions menu (puzzle icon) and activate/enable the Disable Content-Security-Policy extension</li>
|
|
<li>Refresh the test page</li>
|
|
<li>Launch <span class="brand">ANDI</span></li>
|
|
<li>When done testing, turn off the Disable CSP extension</li>
|
|
</ol>
|
|
</div>
|
|
<div class="example">
|
|
<button class="expandButton disableCSP">How to disable CSP in Edge</button>
|
|
<ol style="font-size:13pt; display:none;">
|
|
<li>Open Microsoft Edge and go to the Chrome Web Store.</li>
|
|
<li>Press the button to "Allow extensions from other stores"</li>
|
|
<li>Find and Install the Disable Content-Security-Policy extension from the Chrome Web Store</li>
|
|
<li>Navigate to the test page</li>
|
|
<li>Open the extensions menu (puzzle icon) and activate/enable the Disable Content-Security-Policy extension</li>
|
|
<li>Refresh the test page</li>
|
|
<li>Launch <span class="brand">ANDI</span></li>
|
|
<li>When done testing, turn off the Disable CSP extension</li>
|
|
</ol>
|
|
</div>
|
|
<div class="example">
|
|
<button class="expandButton disableCSP">How to disable CSP in Firefox</button>
|
|
<ol style="font-size:13pt; display:none;">
|
|
<li>In the address bar, enter "about:config"</li>
|
|
<li>Under Preference Name, select "security.csp.enable" to disable it</li>
|
|
<li>Navigate to the test page, launch <span class="brand">ANDI</span></li>
|
|
<li>When done testing with <span class="brand">ANDI</span>, re-enable the "security.csp.enable"</li>
|
|
</ol>
|
|
</div>
|
|
<div class="example">
|
|
<button class="expandButton disableCSP">Internet Explorer</button>
|
|
<ol style="font-size:13pt; display:none;">
|
|
<li>Internet Explorer does not enforce CSP</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr />
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-iframeFix" id='iframeFix'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-iframeFix"
|
|
itemprop="name">ANDI Causes Blank/White Space (Iframe Workaround)</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p itemprop="text">
|
|
If content gets removed or turns white/blank when <span class="brand">ANDI</span> is launched, the content is probably within an iFrame.
|
|
To test this content, the <a href="modules.html#iANDI">iframes Module</a> may not work because of the way the iframe was implemented. Try this workaround:
|
|
</p>
|
|
<div class="example">
|
|
<ol>
|
|
<li>Refresh the test page or close ANDI</li>
|
|
<li>Right click on your ANDI bookmark and select "Copy"</li>
|
|
<li>Find an element within the iframe that ANDI was not able to detect</li>
|
|
<li>Right click on that element and select "Inspect"</li>
|
|
<li>This opens Dev Tools and highlights the element you right-clicked on.</li>
|
|
<li>In Dev Tools, at the top, notice the "Elements" tab is selected. Change to the "Console" tab.</li>
|
|
<li>Now paste the ANDI script that you copied in step 2 and press Enter. NOTE: If this is your first time pasting in the console, the browser may ask you to type "allow pasting".</li>
|
|
<li>This will allow ANDI to detect the content within the iframe.</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr />
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-cantInspect" id='cantInspect'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-cantInspect"
|
|
itemprop="name">ANDI isn't finding an element</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p>
|
|
If you launched <span class="brand">ANDI</span> and it isn't finding something on the page, try these steps:
|
|
</p>
|
|
<details itemprop="text">
|
|
<summary>Refresh ANDI</summary>
|
|
<p><span class="brand">ANDI</span> doesn't keep track of dynamic events and changing content.</p>
|
|
<p>
|
|
If the page content changed after <span class="brand">ANDI</span> was launched,
|
|
<span class="brand">ANDI</span> doesn't know that the content changed. Refresh <span class="brand">ANDI</span>.
|
|
</p>
|
|
</details>
|
|
<details>
|
|
<summary>Are you using the right ANDI Module?</summary>
|
|
<p>A <a href="modules.html">different module</a> may need to be selected to detect the element.</p>
|
|
<p>
|
|
By default, <span class="brand">ANDI</span> will detect "focusable elements".
|
|
If <span class="brand">ANDI</span> doesn't detect a focusable element,
|
|
either the element isn't focusable (and therefore probably an accessibility issue) or
|
|
<span class="brand">ANDI</span> is having a problem detecting the element.
|
|
</p>
|
|
</details>
|
|
<details>
|
|
<summary>Is the element is in an iframe?</summary>
|
|
<p>By default, <span class="brand">ANDI</span> cannot detect elements within an iframe, but there are workarounds.</p>
|
|
<p>
|
|
Expand the ANDI Module selection dropdown. If you see "iframes", that means the page has content within an iframe.
|
|
Read about how to use the <a href="modules.html#iANDI">iframes Module</a>.
|
|
</p>
|
|
<p>If the iframes module isn't working because the iframe content doesn't load when <span class="brand">ANDI</span> is launched or goes to a blank white screen, follow this <a href="#iframeFix">iframe workaround</a>.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Is the element is in a shadow DOM?</summary>
|
|
<p><span class="brand">ANDI</span> is not able to detect elements within a shadow DOM. There are no work arounds.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Try the Next/Previous Element Buttons</summary>
|
|
<p>
|
|
If mouse hover is not able to inspect an element,
|
|
try the <a href="howtouse.html#NextElement">Next or Previous Element buttons</a>.
|
|
The application may have used CSS to make the visible element be different
|
|
from the keyboard accessible element.
|
|
</p>
|
|
</details>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr />
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-differentOutput" id='differentOutput'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-differentOutput"
|
|
itemprop="name">Why is ANDI's Output different from the screen reader's?</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p>
|
|
<span class="brand">ANDI</span>'s Output may occasionally be different from a screen reader's output.
|
|
Here are some reasons why the Output may differ:
|
|
</p>
|
|
<div class='example'>
|
|
<ul>
|
|
<li itemprop="text">
|
|
<span class="brand">ANDI</span>, the accessibility testing tool,
|
|
uses the DOM (Document Object Model) to calculate the Output
|
|
according to the <a href="https://w3c.github.io/accname/" target="_blank">Accesible Name Computation</a>.
|
|
Whereas, screen readers rely on more layers than just the DOM.
|
|
Layers such as the browser's <a href="http://www.w3.org/TR/core-aam-1.1/#intro_aapi" target="_blank">Accessibility API</a>,
|
|
the accessibility tree, the DOM, their own "tutor text" phrasings.
|
|
</li>
|
|
<li>
|
|
Some screen reader software has guessing algorithms to assist its users.
|
|
Guessing makes up for missing or improper accessibility coding.
|
|
However, screen readers should not be guessing when explicit accessibility coding is present.
|
|
Since <span class="brand">ANDI</span> is an accessibility testing tool, it doesn't guess.
|
|
Instead, its Output is a direct result of programmatic associations.
|
|
</li>
|
|
<li>
|
|
When humans write complex software (such as screen readers and accessibility testing tools),
|
|
bugs happen. Let's squash them!
|
|
If you are think there is a bug the ANDI Output, please reach out to our development team
|
|
by <a href="https://github.com/SSAgov/ANDI/issues" target="_blank">creating a github issue</a>.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr />
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-displayIssue-pageLooksBad" id='displayIssue-pageLooksBad'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-displayIssue-pageLooksBad"
|
|
itemprop="name">ANDI is causing display issues</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
|
|
<p itemprop="text">
|
|
If after launching <span class="brand">ANDI</span>, the page looks strange,
|
|
you may have to bear with it for your testing.
|
|
<span class="brand">ANDI</span> has to manipulate some CSS in order to
|
|
force itself to appear on the page - This can sometimes cause display
|
|
interference.
|
|
</p>
|
|
<p>
|
|
In the wild wild west of the web, there is a lot of variance in design and CSS - some good, some... creative.
|
|
<span class="brand">ANDI</span> forces itself at the top of the page and wraps the test page content within a scrollable container.
|
|
To accomplish this feat, <span class="brand">ANDI</span> does some calculations, makes some assumptions, and gives it a shot.
|
|
</p>
|
|
<p>
|
|
If mouse hovering is continually making <span class="brand">ANDI</span> block view of the test page,
|
|
use the next previous element buttons which should always keep
|
|
<span class="brand">ANDI</span> out of the way.
|
|
You can also try <a href="howtouse.html#MiniMode">Mini Mode</a>.
|
|
</p>
|
|
<p>
|
|
If <span class="brand">ANDI</span> is still blocking the test page,
|
|
it may be due to the responsive design of the test page reacting
|
|
to the space that <span class="brand">ANDI</span> is filling.
|
|
Try maximizing the browser window, Zooming out, or switching to a larger resolution.
|
|
</p>
|
|
<p>
|
|
If elements become obscured to the point that you can't test the content
|
|
behind "floating" elements, you may have to engage ANDI's advanced
|
|
setting, <a href="howtouse.html#LinearizePage">linearize page</a>.
|
|
</p>
|
|
<p>
|
|
If portions of the test page turn white, it may be due to an
|
|
iframe-related issue. Read <a href="#cantInspect">"the element is in an iframe" under "ANDI isn't finding an element"</a>.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<h2>Other Questions</h2>
|
|
<section tabindex="-1" aria-labelledby="lby-hostYourOwn" id='hostYourOwn'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-hostYourOwn"
|
|
itemprop="name">How do I host my own ANDI?</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p itemprop="text">
|
|
To host your own copy of ANDI, make a few simple changes in the andi.js file:
|
|
</p>
|
|
<div class="example">
|
|
<ol>
|
|
<li><a href="https://github.com/SSAgov/ANDI" target="_blank">Download ANDI's source code from GitHub</a>.</li>
|
|
<li>Determine if you are going to host ANDI on a server (<code>https://[ALTERNATE_HOST]/andi/</code>) or locally (<code>file://C:/WS/repos/[ALTERNATE_HOST]/andi/</code>).</li>
|
|
<li>In the andi.js file:
|
|
<ul style="margin-left:5%;">
|
|
<li>modify the <code>host_url</code> to point to the location that you decided in step 2.</li>
|
|
<li>(optional) modify the <code>jqueryDownloadSource</code> location to a custom jquery location.</li>
|
|
</ul>
|
|
</li>
|
|
<li>If you are hosting on a server, upload the modified ANDI source code to the server that you decided in step 2. If you are running locally, skip this step.</li>
|
|
<li>Create a new bookmark called "my ANDI" or whatever you choose to name it.</li>
|
|
<li>Modify the bookmark's launch script to point to your instance of ANDI:
|
|
<textarea readonly aria-label="favelet launch script" style="width:90%" onfocus="this.select();">javascript:void((function(){andiHost='https://[ALTERNATE_HOST]';andiScript=document.createElement('script');andiScript.src=andiHost+'andi/andi.js';document.body.appendChild(andiScript);function andiCSPcheck(){if (typeof andiVersionNumber === 'undefined')alert('This page has a Content Security Policy that blocks scripts like ANDI. For help, visit the ANDI Help FAQ page.');window.open(andiHost+'andi/help/faq.html#csp');};document.addEventListener('securitypolicyviolation',andiCSPcheck);setTimeout(function(){document.removeEventListener('securitypolicyviolation',andiCSPcheck),100});})());</textarea>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr />
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-mobileTesting" id='mobileTesting'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-mobileTesting"
|
|
itemprop="name">Can I use ANDI for mobile accessibility testing?</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p itemprop="text">
|
|
<span class="brand">ANDI</span> does not run on mobile browsers.
|
|
However, <span class="brand">ANDI</span> can be used test accessibility
|
|
on small screen sizes.
|
|
</p>
|
|
<p>
|
|
Mobile testing can be simulated in a desktop browser using developer tools (F12)
|
|
with the Toggle Device Toolbar feature (Ctrl + Shift + M).
|
|
This feature will adjust the screen resolution to that of a mobile or tablet device.
|
|
Once this mode is engaged, <span class="brand">ANDI</span> can be used to test accessibility
|
|
on smaller screen sizes.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr>
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-printReport" id='printReport'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-printReport"
|
|
itemprop="name">Can ANDI scan an entire site and export reports?</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p itemprop="text">
|
|
<span class="brand">ANDI</span> is a tool for performing manual inspection of web content.
|
|
It does not have and will never have the capability to run a site-wide scan and produce an exportable report.
|
|
</p>
|
|
<p>
|
|
There are many other tools that offer this capability.
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<hr>
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-awesome" id='awesome'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<details>
|
|
<summary id="lby-awesome"
|
|
itemprop="name">Why is ANDI so awesome?</summary>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p itemprop="text">
|
|
Thanks for asking. You made us smile!
|
|
</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
<div class="division">
|
|
<h2>Contact ANDI's Development Team</h2>
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-contactUs-bug" id='contactUs-bug'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<h3 id="lby-contactUs-bug" itemprop="name">Where do I file an ANDI bug?</h3>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p>
|
|
Uh oh! You found a bug in <span class="brand">ANDI</span>?
|
|
<span itemprop="text">Please <a href="https://github.com/SSAgov/ANDI/issues" target="_blank">create an issue on the GitHub page</a>.
|
|
Be sure to provide a link to a page with the issue, sample code, or embedded screenshots.</span>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<!--==========================-->
|
|
<section tabindex="-1" aria-labelledby="lby-contactUs-feature" id='contactUs-feature'
|
|
itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
|
|
<h3 id="lby-contactUs-feature" itemprop="name">I have an ANDI feature request!</h3>
|
|
<div class='details' itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
|
|
<p>
|
|
That's wonderful!
|
|
<span itemprop="text">If you have an idea for how to make <span class="brand">ANDI</span> better,
|
|
please <a href="https://github.com/SSAgov/ANDI/issues" target="_blank">create an issue on the GitHub page</a>
|
|
and explain away.</span>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<footer>
|
|
<a href='#skipnav'>Back To Top</a>
|
|
<a href="/privacy/" class="privacy">Privacy</a>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|