All too often, accessibility does not cross the mind of designers or developers until it is too late in the process. Approaching accessibility as a final checkbox in the entire process of a webpage and website development will result in exurbanite defects and adversely affect the final product.
Developers and designers must take on the responsibility of incorporating accessibility testing at the earliest phases of the build process when creating websites and applications to avoid making necessary changes to design, code, comps, and copy at the final development stages. Implementing accessibility end-to-end can be a challenging task. Still, if taken into account early, the result is a well-constructed UI that not only accommodates those living with disabilities but better serves all users.
Phase 1: Design
Let’s Start with Wireframes
Wireframes mark the beginning of the design phase. Accessibility should be included in this phase, but the amount of feedback provided must be limited and depend on how extensive the wireframes are. This is a good point to identify basic accessibility requirements such as:
- Headings
- Alternative text
- Descriptive links/button text
- Comparing the desktop & mobile DOM order
Remain conscious that much can change between wireframes and the beginning of the development phase to avoid the duplication of efforts. This phase serves as a good time to establish all accessibility requirements to initiate design comps with those in mind.
Moving on to Comps
Design comps are where the real accessibility work begins. At this point, you should have a good idea of what the page will look like and what content will be included within the page. In preparation for development, you need to layout all accessibility requirements, from design requirements such as heading levels, descriptive heading text, descriptive link text, and alt text for images, to more technical requirements, such as providing proper semantic HTML markup and keyboard support. The end of the design phase marks the point at which all design and development requirements should be identified and documented.
Phase 2: The Development Environment
Developers need to test for accessibility and should conduct basic accessibility testing as they build their code. Several automated tools can be integrated into the development process, such as the Nu HTML Checker and Axe. It is important to note that automated testing tools only catch approximately 50% of all accessibility issues. To ensure a higher percentage, manual keyboard testing and screen reader testing must be completed as well. Additionally, and if possible, the QA team should establish a cadence of the testing component by component in the dev environment. Testing each component at this phase will make for a smoother process of remediation and limit the number of issues found in the QA environment. It provides developers who are less experienced in accessibility the opportunity to start building their knowledge base before constructing all components and pages, limiting future remediation efforts.
Phase 3: The QA Environment
In most situations, this is the first time code can be tested by someone other than developers. This phase serves as the final code and content check before deployment. Perform accessibility tests with automated tools such as Axe and test keyboard and screen reader support. Microsoft Accessibility Insights is a great way to formalize the manual portion of the testing.
Phase 4: Production and Maintenance
Accessibility is a program, not a project. As long as changes are made to production sites, there is a need for accessibility testing. As soon as a single line of code is changed, there is the possibility that there will be accessibility issues, so it is important to integrate accessibility principles and testing into the continuous process of maintaining a web page.
Accessible Design is Comprehensive
Ensuring that accessibility is accounted for in all stages of the build process is essential in creating an accessible website. Designers, developers, and testers all play a key role. It is not enough to test for accessibility in the final stages of development or simply provide an “accessible” design. At Perficient, we have accessibility experts for each phase of the build process. For more information, contact our experience design and development experts today, download our guide, Digitally Accessible Experiences: Why It Matters and How to Create Them, and check out our Accessibility IQ for your website. Read more about the elements of accessible web design from our UX for Accessible Design series today.
