NALA Accessibility
In today's ever-changing digital landscape, INCLUSION is a big cornerstone for any web application. Accessibility is incredibly important, yet often overlooked in traditional digital design and development education. Because of this, The A11Y Project strives to be a living example of how to create beautiful, accessible, and inclusive digital experiences.
As such, the A11y Project becomes an important partner in our quest to offer world-class web applications which cater to all users.
In order to test the accessibility of a web application's content, we have to first understand the WCAG standard. WCAG documents explain how to make web content more accessible to people with disabilities.
Enter Deque, a SaaS company, but most importantly, a leader in accessibility tools, services and training. Deque has created the axe-core library, which implements the WCAG standard to the letter, as well as maintains the project to include support for the latest WCAG renditions.
- @axe-core/playwright: this library offers a chainable API to assist in injecting, configuring, and analyzing axe from your Playwright automation harness
- axe-html-reporter: this library takes the AxeResults XML object generated by the @axe-core/playwright library & creates a comprehensive HTML report, listing violations, passes, incomplete and incompatible results
!Note: Currently, only the FEDS project has accessibility checks. In order to run the checks, use the command:
npx playwright test --headed --project=feds-live-chrome --config=./configs/feds.config.js -g @a11y
- Import the axe-core library:
const AxeBuilder = require('@axe-core/playwright').default; - Use AxeBuilder to analize your current page, or target component:
// Analyze page accessibility:
const a11yReport = await new AxeBuilder({ page })
// Specify the WCAG standard you want Axe to use to assert the page/component's A11y:
.withTags(features[0].wcagTags)
// Target a specific page container (else, it will analyze the entire page)
.include(Header.headerContainer._selector)
.analyze();
- Generate the A11y report using the resulted AxeResults XML:
await a11y.generateA11yReport(a11yReport, reportSummary, 'feds');
After running your A11y checks in NALA, your accessibility reports can be found in the /axe-reports folder:
Open the generated HTML files in your browser of choice in order to review the A11y report generated by axe-core:
🥳 Congratulations, you have generated your first A11y reports using the NALA framework! 🥂