Website accessibility goes beyond a pass or fail test – it is a mindset that helps to create a more inclusive world. From sitemap to launch, accessibility is permanently embedded into a project lifecycle and becomes an ongoing process that takes effort throughout the organization. So when, how and where does accessibility become a part of the website design and redesign lifecycle?
Accessibility Considerations in the Site Architecture phase
At the start of a website redesign project, a strategist begins by creating a sitemap which provides a complete overview of the logical structure of the site. This includes all the major sections and subpages in serialized format, helping users understand how to navigate the site as well as offering an alternative to preexisting complex navigation.
Accessibility During the Design phase
Once a designer begins to create the design and user experience, it is important that they reference the most current WCAG guidelines. Together with certified accessibility professionals and developers, the design should be considerate of how all visitors, no matter their disability, will interact with the site across device types.
Here are a few of the many ways that designers incorporate website accessibility into their process:
-
The page title describes the topic or purpose of the page. This is also an SEO best practice.
-
Heading levels are chosen so they convey their correct hierarchical order in the content, not for their visual styling. This also supports SEO best practices.
-
The navigation, the content's reading and focus order, as determined by the code order, should be logical and intuitive.
-
Linking text clearly describes the purpose or destination of the link. While placeholder text may be used in a design, the design should consider more descriptive link names, versus “click here”.
-
Information is conveyed by means other than just color alone
-
All text has a minimum color contrast against its background of at least 4.5 to 1 (3 to 1 for large text)
-
Linking text is distinguishable from non-link text by more than just color
-
Actionable elements have clear, visible focus when non-mouse users Tab or Arrow to them.
-
Users with low vision can magnify or zoom in on the content in the browser on any device, including desktop and mobile.
-
Form fields have a label that is always visible
Accessibility in the Prototype and CMS Build Phases
The developers ensure that the code used for a website build incorporates the latest accessibility standards and best practices,. Some of the many development considerations include:
-
Structure, information, and relationships conveyed through visual presentation (in headings, lists, menus, forms, etc.) must be programmatically determined
-
All linked, informative and decorative graphical elements have appropriate alternative text
-
Alternative text for actionable images, such as an image link, button or image map area, clearly identify the link destination or button purpose
-
When Interacting with a page with the keyboard, focus is always visible, managed when necessary and follow a logical order
-
All functionalities can be accomplished using only the keyboard
-
Data tables marked up convey the correct relationships between data cells and their associated column or row header cells
-
Layout tables contain only <td> cells and no other structural markup such as a <th> or <caption> tag
-
Form controls have visible labels and are programmatically associated
-
Error descriptions are programmatically associated with their form element
Testing the Site During the Quality Assurance Phase
A comprehensive accessibility test including manual and automated testing is incorporated very early into the project lifecycle to help the entire team catch critical accessibility issues before they become real-world problems. To be effective during the testing phase, a consistent testing methodology must be put in place.
-
Automated site testing - Specific tools are used to locate issues that can be found automatically and report those as a foundation for the work to come in the manual testing phase.
-
Manual site testing – Manually testing a site is just as important and includes a series of tests using different tools to find issues in the page or application. This might include touch capability, visual presentation, alternative text, audio and video, semantics and document structure, forms and more.
Once these assurance tests have been performed, the findings are then consolidated into a comprehensive and usable format to allows the project team to remediate the issues found based on recommendations provided.
Accessibility At the Launch Phase
When the website is ready to launch, it has already successfully passed through many accessibility checks. However, when the website moves from a development to a production (live) environment, it will need a round of manual and automated testing to ensure that there are no violations. At that point, a report should be provided to show that there are no known accessibility issues. Of course, since websites by nature are constantly changing, it’s important to have an ongoing accessibility plan in place to ensure that the site stays conformant. Through regular scans and a process to fix any issues, website owners can continue to offer a digital experience with users in mind.
Accessibility’s goal is not just to comply to guidelines and law, but to create compelling enjoyable and useful experience for everyone. It takes effort and expertise, but it pays off. Contact ZAG to learn more about the website redesign process and how we can help bring your vision to life.