Considerations for Inclusive and Accessible Design
Inclusive design is a core value and a practice that requires us to recognize exclusion and understand when it happens. Building inclusive and accessible digital products requires a holistic approach that incorporates a range of best practices and web accessibility guidelines throughout the design and development phases. Accessibility best practices provide a framework of constraints and considerations that improves the overall user experience for everyone.
User needs are variable. Using a broader perspective on the needs of users helps you to design experiences for individuals without barriers. When designing for inclusivity, design for a broader range of users and use cases that provide a positive universal user experience.
Flexibility therefore is the key to ensuring that your website is accessible to everyone.
Content Structure
All great websites start with great content. Use a clear and coherent writing style for copy. A content strategy audit will help define the type of content that will engage your audience. Create a heading hierarchy that is easy to understand and improves scannability so readers can easily find the content they want. The heading hierarchy should provide a structure for reading order. Content will have the same reading and accessibility experience for everyone regardless of device or means of access. Disable stylesheets to validate if read and visual order are properly implemented. Test for keyboard only input to ensure your tab indexing is correct.
Best Practices and Considerations
The UK Government’s Digital Services office produced a series of ‘Dos and Don’ts’ posters on designing for accessibility that have been translated into several different languages and are available under the Creative Commons license on the Gov.UK Accessibility Blog. Highlighted best practices include the implementation of markup structures and navigation regions to help users deal with internal and external links and landmarking within pages.
The use of the “role” tag is required to keep menus and buttons accessible. The “role” tag will provide additional context and provide landmarking. For example, for vertically styled menu containers, use role=”menu”. For a horizontally styled menu container, use role=”menubar”. All menu items are labeled with role=”menuitem”.
Simplified Menu Example:
Simplified Link Example:
Keyboard navigation has become standardized with most browsers, with [tab] to move forward, [shift+tab] to move backwards and enter as a button click. Run a keyboard test throughout the design phase and address any tab order issues with content and read order.
Evaluation
Evaluate a site for accessibility throughout the design and development process. Conduct a proper accessibility audit on the current site to see what areas need to be improved upon and what changes need to be implemented. Set a baseline accessibility score that you will strive to achieve when planning and designing the site.
Use the a11y checklist to measure the site’s compliance. At a minimum, test site structures and content with screen readers and make sure that all video is closed captioned and the audio is transcribed. Color schemes should be high contrast. Avoid using color blind or color deficiency hue and tint combinations (red-green or blue-yellow).
Bob Ross once got a letter from a colorblind fan, sure that he’d never paint, so Bob did a whole episode in gray: https://t.co/5oQPKXGxsO
— Jake Hawken (@geeksthenewcool) February 10, 2017
Web content that is designed for individuals with disabilities is more open and accessible to everyone. Using inclusive and accessible best practices in designing online content for maximum reach benefits all users. One of the caveats of the Accessible UX Manifesto is that “universal accessibility must be a goal, not a target.”