The Shift-Left Approach for Web App Accessibility Testing(WireFrames)
Sanjeev Sinha, Web Accessibility Specialist
Shift Left is a practice intended to find and prevent defects early in the software delivery process. The idea is to improve quality by moving tasks to the left as early in the lifecycle as possible. Shift Left testing means testing earlier in the software development process.
The accessibility testing journey starts with Feature’s UX design. When UX finalize the Wireframe for the application they must include the following information also in wireframes
- Text Size, Color Contrast of each HTML elements according to WCAG 2.2 or latest guidelines
- Tab order of the elements (Natural Tabbing orders)
- Button Text
- Tooltip text
- Page title
- Element type
- Form Elements role
- Error text and color
- Live regions and text (if any)
The deliverable from UX is Wireframe of Page, or component(s) in a Page, which QA should test for the above scenarios. The following sample wireframe diagram for the Login screen addresses the Accessibility attributes required by the development team.
This diagram will also be used by the QA team for feature/Regression testing for accessibilities.
Once This feature is picked up from product Backlog in sprint Testing must verify according to Wireframe accessibility parameters for the features.
Regression Testing will include a full scan of the application having WCAG in mind. Violations with severity and occurrences must be reported to Jira Board with priority and severity which should include the fix required(if possible).
Each page must be given a percentage based upon conformance to WCAG guidelines, and the overall percentage of compliance should be calculated. If any of the pages are lower than the company standards, violations must be addressed to increase compliance. Currently, we are using Level Access: Assistant Tool for guided accessibility testing, which provides a dashboard for each module and App Report Dashboard.
This Shift Left approach will reduce the cost and resources for ADA(section 508), as we can address most of the accessibility issues during UX design. Using wireframe to address accessibilities (a11y) will be beneficial for new pages, and also to address violations of existing web apps with violations for better communication within the team.