ABOUT KOA11Y-GUI TOOL

Koa11y is a desktop application that uses Pa11y & allows you to automatically detect accessibility issues on web pages. It provides a friendly and helpful report with tips for fixing any issues found. Simply enter a page’s URL and select the standards format (Section 508, WCAG 2.0) and click Run. The app generates an HTML/CSV/JSON/XML/Markdown page detailing test results.

For more details, visit https://github.com/open-indy/Koa11y

KOA11Y-GUI TOOL-USAGE & TESTING

1.  Download & Unzip Koa11y application from https://open-indy.github.io/Koa11y/

OR

https://github.com/open-indy/Koa11y/releases/download/v3.0.0/WIN_Koa11y_3.0.0.zip

2. Launch the Koa11y application from the extracted folder
3. Enter the web page URL
4. Enter the file name with which the test report has to be saved on the computer
5. Select the reporter format [html, csv, json, xml, markdown]
6. Enter the required Output Folder path where test report has to be generated on the computer
7. Select the required Standards Format [WCAG 2.0 A, WCAG 2.0 AA, WCAG 2.0 AAA, Section 508] as per your project requirement
8. Choosing WCAG2-AAA generates more errors as this is strict relative to WCAG2-AA or WCAG2-A
9. Select Section508 for compliance requirement against US government & federal website standards
10. Click on RUN button to start the web accessibility testing
11. After few seconds/minutes, the test report will be generated as per details provided in above step#4, step#5 and step#6 details
12. The generated .html test report is interactive i.e., we can click on Errors or Warnings or Notices to show/hide those accessibility issues

IF IMAGE ACCESSIBILITY ALSO HAS TO BE CONDUCTED, FOLLOW BELOW STEPS:

1. Enter the web page URL
2. Enter the file name with which the test report has to be saved on the computer
3. Select the reporter format [html, csv, json, xml, markdown]
4. Enter the required Output Folder path where test report has to be generated on the computer
5. Select the required Standards Format [WCAG 2.0 A, WCAG 2.0 AA, WCAG 2.0 AAA, Section 508] as per your project requirement
6. Under Image Accessibility, click on the button ‘Copy the console code’
7. Open chrome dev tools in the web page visited & paste the above code in ‘Console’ tab and press ENTER
8. Copy the code which is now generated in the console
9. Paste the above copied code in the Koa11y window in the textbox under Image Accessibility
10. Click on RUN button to start the image accessibility testing
11. Select Yes or No as per the heading ‘Is the text under image descriptive?’
12. Click on Continue button, after step#11 is completed for all images
13. After few seconds/minutes, the test report will be generated as per details provided in above step#3, step#4, step#5 and step#11 details

PRACTICE APPLICATION:

https://scout-app.io/

LIGHT-HOUSE BY GOOGLE

ABOUT LIGHT-HOUSE

Lighthouse is an open-source, automated tool from Google, to help you improve the quality of web pages. You can run it on any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. Lighthouse accessibility audits can be included as part of a continuous integration pipeline. Besides returning a report with the calculated scores for each metric, Google Lighthouse offers a list of specific improvement suggestions to enhance your results.

Lighthouse is available automatically in Chrome, with no setup or extensions to install, and can be used to test both local sites and authenticated pages.. One disadvantage of using Lighthouse in the browser is that only one page can be audited at a time, which makes the process cumbersome for sites with a large number of pages. Audits must also be re-run manually if a page needs to be rechecked, such as when a bug is fixed.

LIGHT-HOUSE TOOL USAGE

To run Lighthouse in Chrome DevTools, follow below steps:

1. Lighthouse can be accessed by opening Chrome Developer Tools and choosing the Lighthouse tab at the top
2. Navigate to the URL you want to audit
3. Click the Lighthouse tab in chrome developer tools
4. Select the checkbox ‘Accessibility’
5. Select the device type ‘Desktop’
6. Click Analyze page load
7. Click Run audit
8. After 30 to 60 seconds, Lighthouse gives you a report on the page
9. Lighthouse runs its audits against the currently-focused page, then opens up a new tab with a report of the results
10. To generate a test report, click on 3 vertical dots on the page, then click Save as JSON or HTML
11. The report includes a list of any accessibility issues that were found and which elements failed each accessibility test. Each issue also includes a brief description of the problem and links to more information regarding those issues in Google’s Lighthouse documentation.
    1. Navigation mode analyzes a single page load
    2. Timespan mode analyzes an arbitrary period of time, typically containing user interactions
    3. Snapshot mode analyzes the page in a particular state
12. To learn more about navigation mode, timespan mode & snapshot mode, visit https://github.com/GoogleChrome/lighthouse/blob/HEAD/docs/user-flows.md
13. Lighthouse also has something called Lighthouse Viewer, which is intended to allow the user to share the accessibility audit by either downloading a JSON file from the audit page that can be used in the viewer
14. Lighthouse Viewer is accessible at https://googlechrome.github.io/lighthouse/viewer/
15. Open Lighthouse Viewer & drag the JSON file generated in above step#10 onto the Viewer, or click anywhere in the Viewer to open your file navigator and select the file.
16. To compare any 2 lighthouse test reports (.json format), visit https://googlechrome.github.io/lighthouse-ci/difftool/
17. Command line run: shell lighthouse –output json –output-path <path/for/output.json>

For more details, visit https://developer.chrome.com/docs/lighthouse/overview

LIGHT-HOUSE TOOL CLI COMMANDS

To run Lighthouse using Node & CLI, follow below steps:

1. To install the Node module, visit https://nodejs.org/en/download
2. Install Lighthouse using npm install -g lighthouse
3. To run an audit, run any of these commands:
   
   1. lighthouse <url>
   2. lighthouse <url> –verbose
   3. lighthouse <url> –output-path=”C:\Users\Kiran\Downloads\testReport.html”
   4. lighthouse <url> –view // opens test report in the browser after test is completed
   5. lighthouse <url> –only-categories=accessibility // generates only accessibility audit test report
4. To see all the other options available, run this command: lighthouse –help
5. Use the above reporter command to integrate LightHouse with Jenkins for CI/CD/CT testing

PROS

• Built into Chrome devtools.
• Can analyze more than just accessibility. Also analyzes factors such as SEO, performance and best practices.

CONS

• Not as robust as some of the other tools listed. Lighthouse does use axe-core for accessibility audit, but it does not run the full set of about 70 tests that the axe extension does.
• It is possible to get a 100% accessibility rating on Lighthouse and still have a site which is largely not accessible

PRACTICE APPLICATION:

https://scout-app.io/