Share responsibility for accessibility
Teams are frequently structured such that a UI engineer or front-end developer is the most knowledgable resource around accessible user interfaces. Due to this, when it comes time to implement an accessible component, the developer will collaborate with designers and work to ensure everything from the keyboard interactions to the layout and colors are beneficial for users and are compliant with standards, such as WCAG 2.0.
Despite this current environment of concentrated knowledge and responsibility, it’s important for teams to work on bringing this knowledge upstream, into the design process. Approaching accessibility as a design-team effort is the foundation of an efficient workflow. Even more importantly, it reduces two potential sources of conflict:
Finding design flaws that require rework. This creates friction between front-end developers and visual or UX designers, where each party make concessions and compromises that may lead to a less cohesive overall design.
Backpedaling on responsibility to meet business or time priorities. Because front-end lives at the midpoint of many processes, time crunches or business dilemmas can grab focus and lead to concessions against original project goals.
Starting to consider accessibility upstream in the process alleviates these problems, reducing pressure on front-end developers to catch and escalate issues. It means they no longer need to be the sole voice for accessibility across all disciplines within a project.
Build an accessible foundation through design
At what point should accessibility begin to be considered? In reality, no time is too soon. Every part of the design process presents a significant opportunity for contributions.
Provide a fundamental type system. Choose readable typefaces and lay out a consistent methodology for hierarchy of weights and sizes. Take the extra step of consolidating this into a set web guidelines to accompany the typical print document.
Take a stance on color contrast. A color palette is more than a set of swatches with CMYK and hex numbers. Color combinations are of course a consideration during the identity design process. The next step is to consider color contrast ratios between color pairs to provide recommendations of colors suitable and unsuitable for text and background pairing.
User experience design
Define patterns up front. A consistent experience is frequently an accessible experience. Users can more easily navigate a consistent set of patterns, and reusable components can be build right once and keep providing benefits. It is risky to design flows one at a time and retroactively attempt to consolidate similarities.
Prefer simplicity. It is substantially easier to maintain a consistent experience when it is composed of simple patterns. Not only are complex patterns difficult to understand and implement for accessibility, they can also be a sign of over-designing solutions for one-off situations.
Define and maintain a consistent and navigable architecture. Then create affordances to ease exploration and discovery within this system.
Collaborate with UX early and often to reduce visual complexity. Visual solutions are limited in their ability to address pattern-level or interactive problems.
Reinforce with visual applications. Not everything can be handled at the level of a brand. When a project gets into its details, a visual designer can do substantially more than make things look good. Reinforcing UX patterns with appropriate visual delineation and hierarchy will benefit users.
January 5, 2017 — I’ll be giving a talk about Front-End development practices for Nerd Interface.
A practical and reusable technique for improving the accessibility and styling of block-level links and buttons.
Used thoughtfully, animation can inform a user of change or hint at how to interact with an interface. Here is a set of guidelines for using animation cleanly and clearly, while reducing disruption to users.