Overcoming NCDOT web accessiblity challenges, from design to development
- Date:
- June - August 2019
- Skillset:
- Manual auditing, Triaging of issues, User Interface Design, Documentation
Establishing the (ongoing) Section 508 compliance roadmap
The North Carolina Department of Transportation (NCDOT) redesigned their websites in 2018, taking the dated table layout 
to a modern and responsive design . The redesign created a cohesive and responsive UI for the state-wide family of websites. Unfortunately, despite an improved visual UI, the site failed basic accessibility tests.
This is one of the main reasons that accessibility should be incorporated into design initially. Accessibility remediation and planning is possible, but tricky when a design and intrastructure is already in place.
The purpose of this audit and training effort was to fix that oversight.
An important note before we begin: To establish an initial baseline, automated testing tools were used. Automated testing only identifies on average ⅓ of issues. Manual testing is very important and was a vital part of this project.
Goal:
Establish a baseline accessibility level and prioritize issues into categories with severity
Occurrence and severity of the different accessibility issues were accounted for when prioritizing. Severity increased based on the number of disabilities affected and based on whether issues presented user flow blockers. Occurrence was a specific consideration in fixing template-related bugs. Fixing a single template issue would result in fixing many at once.
The starting score: 67 (based on Google Lighthouse) and 147 issues (based on Axe Devtools)
Goal:
Work with the team to establish expectations on remediation and for knowledge-base training
Accessibility is an ongoing process. With this in mind my role on the project would focus on planning for team self sufficiency, while remediating low effort/high impact issues. Two Agile sprints would consist of baseline meeting and Q&A, phase one remediation, team review, phase two remediation, and final touchpoint/training.
Documentation would be an important milestone. How to test, related WCAG success criteria, how to remediate, and how to design/develop for accessibility would need to be addressed.
Establishing scope and conducting the accessibility audit
Why not test the entire site?
The NCDOT website consists of several subsites and pages based on templates and reusable components. Sites like this are constantly adding new content but rarely change the underlying CMS structure. By identifying a representative set of pages the audit process takes less time and is more effective.
The audit scope would be broken down into: ✍️
- core tasks and user flows
- high trafic pages
- navigation
- core features such as search/search results
- templated components
Automatic testing
The different areas within scope were tested with various automatic tools. Findings were verified (automatic tools are getting better but very often will flag false posititives) and categorized by page and component.
- a spreadsheet was created to organize and group issues
- severity levels and occurrence data were added to the NCDOT ticketing system
- issues were assigned a severity level and development/design fix difficulty
Manual testing
Manual testing consists of navigating and interacting with content using assistive technology and access tools. This testing process for the project included the NVDA screen reader, keyboard, and using browser development tools to verify element accessibility api info. Web extensions were utilized to optimize identifying some ARIA-related and name/role/value issues.
Some of the focus areas include:
- Keyboard navigation and operation
- Screen readers: NVDA and Talkback
- Color contrast
- Javascript-injected content and focus management, especially regarding dialogs
- table header and scope associations
- image text alternatives
- heading and landmark structure
- form interaction, labels, instructions, and error notifications
Focusing remediation on components
Components associated with key functionality such as date pickers and dynamically populated dropdowns received prioritization. This also included custom controls which have a native alternative that is often replaced in favor of less accessible, but visually branded elements.
Header navigation
- Logical focus order
- Duplicated across screen sizes instead of using CSS, causing confusion for users, especially those using assistive technology or keyboards
- List structure
- Improper use of implicit lists and custom elements hindered accessibility for screen reader users
- Color contrast
- White links on orange and light green backgrounds failed WCAG contrast guidelines, impacting readability for low-vision users.
Top-of-page/hero content
- Image alt text
- Missing alt attributes for images in dynamically updated CMS content. Manual alt text entry required, increasing risk of non-compliant descriptions.
- Link text
- Overuse of “Learn More” link text hinders accessibility, especially for screen reader users.
- Location selector
- Third-party auto-complete element lacks accessibility controls, requiring significant resources to improve or replace.
Repeatable card components
- Image alt text
- Decorative images with unhelpful alt text create accessibility barriers.
- Heading levels
- Incorrect or missing heading levels hinder content understanding and navigation for users.
Dialogs, Third-party, and SharePoint elements
- Dialogs
- Lack of focusability and proper structure prevented assistive technology users from accessing dialog content.
- Alerts
- Missing ARIA roles caused important information to be inaccessible to screen reader users.
Using ARIA roles and attributes, we can improve the accessibility of components by providing additional semantics.
Key takeaways and project outcomes:
This project focused on improving the accessibility of a single NCDOT site within a single sprint. Given the complex structure of NCDOT’s digital ecosystem, with shared frameworks, components, and unique site-level elements, a phased approach is necessary to address accessibility comprehensively.
Goals were successfully met. Baseline metrics centered on achieving a Google Lighthouse score above 80 and reducing Axe Devtools automatic findings by 50%.
Through rigorous testing and collaboration with the QA team, accessibility remediation tasks were validated and knowledge transfer facilitated. This project serves as a foundation for ongoing accessibility improvements across the NCDOT platform.
Melanie contributed a great deal to improving our website’s load time, performance, and accessibility. The results were effective and immediate - faster page loads across the board, and forms and interactions were available to everyone regardless of capability.
- Patrick Doran, NCDOT UX and Web Services Manager