An Ounce of Prevention

There’s never been as much importance placed on building accessible websites as there is today. If one were to peek into our huddles, critiques, reviews or slack conversations you’d see a lot of dialogue around this idea; and with good reason. If the notion of equality – that is, an internet built with consideration for all users – doesn’t inspire you to comply with WCAG 2.0 guidelines, then an ADA lawsuit might force your hand.

While scanning with automated tools such as axe is an integrated part of our process at Fastspot, there is still much that can escape automated scans. Designers can save time and effort by getting things right from the get-go thereby avoiding unnecessary iteration.

Establishing Type With Best Practices in Mind

When we think about type atomically (this isn’t a new concept btw) before we start designing at the component level, we can make sure to avoid some accessibility pitfalls. I set up HTML type and header styles before every project. Not only does this allow me to develop (or follow) a client’s brand; but it also allows me to lay the groundwork for best practices as it relates to typography. Are we minimizing the use of all caps because that style is problematic to read? Is the body copy big enough to fill 80 characters within the WYSIWYG? Is the line-spacing adequate? Plot out your moves typographically with best practices in mind, and do it before you start designing components.

Designing Information to be Semantically Correct

Separating content from style and presentation transformed the web. This core principle and its proper implementation allows for assistive technologies that support a broad range of disabilities. Designing around this concept is not only materially honest but in my experience it is rare – solid copywriting that has an eye toward being “semantically correct” will give your design depth and set up development for success in ensuring accessibility. Instead of pushing pixels and adding embellishment, design your content devoid of look and feel.

Finding Beauty in Consistency and Simplicity

Providing site visitors with a foundation of understanding is part of any designer’s job: consistency and simplicity are not only beautiful, but they can help visitors with cognitive or visual impairment navigate - and understand your site easier. To that point, these simple steps can help all of us navigate easier, reduce technical debt and make the web a more inclusive place.

One way to facilitate consistency is to critique designs at the component level. Pulling out all of the components from their template (or page) and reviewing the system holistically allows us to pare down the superfluous, and reign in the design system. When we review at this level we can ask ourselves if we are being consistent with hover states, animations, text patterns and UI elements. If a search’s style and functionality differ from instance to instance we are not giving visitors a predictable experience. Not only can we ensure consistency, but we can give meaningful difference to UI elements that ask users to perform different tasks. Review your components independently of page design and refine.