Accessibility: A Starting Point To Designing For All

Accessibility: A Starting Point To Designing For All

Consulting is a fast-paced and rewarding environment, in stark contrast to the iterative and perfection-chasing product design environment. But one thing is constant and should be a top priority: Accessibility. Trying to come up with the coolest and innovative design tends to leave accessibility considerations behind. As a designer I had to break the habit of light grays on white (a contrast visibility no-no). I’m still hurting from my break-up with small fonts — yeah, I was one of THOSE.

Due to the fact that I work on Fintech, medical & government solutions, WCAG/ADA compliance is a top priority. Coming from a specialized background of product design & development, needless to say I had a lot of research to do. I am by no means an authority on accessibility but I want to share a basic foundation for anyone who wants to get started on a path to designing for all.

You may ask, “How can I execute my amazing designs if standards limit my color, focus states, animations, etc.”. I know… I know… simple answer: GET OVER YOURSELF. This shouldn’t cramp your style that bad hot shot. Designing for accessibility doesn’t block innovation or creativity. All it does is require you to work within some boundaries — boundaries that can actually make you think OUTSIDE the box. I like to use the chef competition tv show Chopped as an example. Consider accessibility as the secret ingredient — a crucial component that should be integrated flawlessly to the end-product, not something sloppily thrown on just to meet the requirement.

After all, the goal is to come up with solutions that caters to the wider audience — and serve the information efficiently and dependably. With that said, here are some things to consider:

Contrast… Contrast… Contrast

One of the considerations to always start with is contrast — that’s making sure your text stands out from its background. The goal is to have a 4.5 to 1 ratio for a AAA rating (WCAG). For text 14px or smaller, bold is recommended as well as if the text overlays imagery (along with other ways to provide contrast from the background).

Using plugins to check contrast ratio is one way to validate compliance.

 
 

With the same background, which option would you choose for more contrast?

Source: W3C

Custom Focus States

For keyboard users, focus states should be clear and recognizable. Although some browsers have default focused states — it’s highly recommended to design a custom solution for this.

 
 

MailChimp uses custom focus states to really make forms stand out (Chrome)

 
 

Chase uses default browser focus states (Chrome)

Source: W3C

Inputs: set users up for success

When it comes to asking users to input information, no need to be cute… be CLEAR. Let users know up front what information they will need to provide — as well as success criteria. Rule of thumb is to not rely on color to indicate errors alone, utilize text to describe the error and added visual cues.

Focus states, form criteria, hide/show password, etc. are all good things to consider.

Source: W3C

Opt for clicks instead of hovers

For users with motor disabilities, trying to land on that small icon or hovering to expose navigation will be a daunting task. In cases of main navigation and key functions, opt for clicks as the main interaction. You definitely do NOT want to hide things behind a hover. See example below (I’ve created some mockups to illustrate):

Mockup: Example of showing functionality on hover. User has no idea of function without hovering.

Mockup: A possible solution — lighter gray to hint of functionality, becomes pronounced on hover.

Alt text for images are your friends

Visually impaired users rely on screen readers to navigate and ‘read’ the website so it’s important that when the focus is on an image, an alt text should be in place as a backup. The goal is to establish context to the image at hand.

Source: WebAim

Color cannot be the only way to distinguish important information

Let’s say the website was black and white… how else would you convey content of importance? Since color can’t be the solution (text color, color blocking, etc.), other ways to convey importance like iconography, underlines and div lines can be used.

Source: UCLA

Consistency is the key

For cognitive impairments, being able to identify each section clearly can be a challenge if consistency is not considered. Are functions clearly presented? Are labels clear? Are sections divided by section headers?

The goal is to have a solution that is a breeze to navigate and content that is easily recognizable and processed. Site nomenclature can fall into this as well, no need to get too creative — make it CLEAR.

Can’t make it accessible? Make an alternate solution

If a certain component is created to be interactive in a way that cannot be accessible (interactive experiences, maps, animations, etc.), then consider making a screen reader-friendly alternative. An alternative to videos are links to transcripts, perhaps describing the experience to those users can be a good starting point.

The Wrap-Up

The major takeaway here is that these ‘limits’ really aren’t limits at all. They’re an opportunity to come up with more creative ways to design interactions. Best part about it — you end up with a design that reaches a wider audience and will get kudos from any steering committee.

If you found this helpful, don’t hesitate to give me a shout and feel free to share and use your social currency.

UX Challenge? This Is How I Tackle It

The saying goes, “there are more ways than one to skin a cat” — sorry Peta. Whether large engagements or smaller projects, having a tight UX process can set yourself up for a smooth ride. Processes come in many flavors — and depending on budget, scope and timeline… you’ll most likely have to create a plan that is tailored to your client/project. The following is my specific approach when a UX challenge is thrown at me.

First thing is to understand the challenge fully and to identify the key factors (ex: client/project, budget, timelines, business requirements, user expectations, etc.). Putting a heavy emphasis on a thorough Discovery phase can help shine a light on the main challenge.

My UX approach… and then some:

  1. Discovery — I gather high-level information & requirements to help build a strategy. Typically, interviews with stakeholders, competitive analysis/landscape, surveys, review analytics (key metrics, heat maps), etc. What are the main pain points and collect data regarding wants/needs. Creating personas (ideally based on field research) and user journeys help shape the experience and keep goals front and center. Personas and user journeys are key deliverables in this phase, they point us in the right direction and function as a key reference point if/when the project begins to veer off. Main goal is to see how the current solution is failing and how we can solve it. For new products, what are the business goals and value proposition for our users. The goal here is to HORDE. Horde all the info you possibly can so you can synthesize the information over coffee and your choice of “brain-enhancing” supplement.
     
  2. Form Theory / Blueprint — Equipped with the data from Discovery, I can start to formulate ideas on how to solve identified challenges. This can be hashed out via collaborative white boarding with a team to low-fidelity wireframes and prototypes. Prototypes can focus on specific tasks or to test and solve for more challenging interactions. This phase can definitely happen alongside Discovery as the techniques in both work together effectively.
     
  3. Testing / Validation — With the various materials and prototypes created, testing out the specific solutions becomes easier. The main focus is to listen thoughtfully and gather information. Whether testing out an entire flow or specific touch point, prototyping is an incredible tool that sheds light on how a user interacts with the solution. Surveys/Interviews, direct observations and A/B testing can be ways to test usability. Budget and time will determine how deep this can go.
     
  4. Refinement — Now that we gathered some crucial information, was the theory correct? What have we discovered? Possibly some expected and some unexpected. This is the crucial cycle where we pivot and make the appropriate changes to optimize and test again. OCD types need to practice some restraint here… you have to ship SOMETHING. Pinch it off and move one, there can always be a phase 2.
     
  5. Design — Once functional requirements have been addressed and tested, and wireframes/prototypes have been validated… design can begin. Referencing brand guidelines, mood boards, and initial concepts, high-fidelity comps are created and iterated upon. Clickable prototypes, animations/transitions, personalizations, and CTAs are fleshed out and tested in this phase. Using tools like InVision or Axure can help create interactive prototypes to review with stakeholders. For the interaction designers in the room, time to show off your animation skills to really sell the idea. This is the time for fancy footwork.
     
  6. Production / Deployment — Once concepts are tested and approved, content and digital assets are prepared for development. Redlines and spec exports are created as well as constant communication with development ensures expected results. Again with skinning the cat — dealer’s choice on tool (Sketch Measure, Craft, Zeplin, etc.). QA-ing is key, don’t be self conscious about coming off like a nit-picky asshole. Throw in your project management software of choice for clear communication and accountability and voilà — it’s a wrap.

With the approach above, I’ve shipped countless solutions big and small. For the UX specialists out there, I would love to hear your thoughts on this and perhaps share your specific workflow. After all, UX is an evolving field where research methods and tools are constantly improved upon. For those getting their feet wet in the field, I hope the above can help you structure your engagements. Your process should become second nature, you want all your brain power focused on solving your client’s challenges — not scrambling to cram process in at the last moment.

The great thing about UX — there’s a wealth of resources out there from amazing people. Get out there and have some fun.