Finding the right stuff to do
Let’s talk about interactions. Type, color, and interactions are the meat and potatoes of a site. Without those we would have a blank white screen when someone navigates to a website.
With color and type, we can create hierarchy of where the user should look first and what the user should be reading. All the better to creating a clear and accessible site. Great! But what about buttons, controls, and UI elements. Using our scouting skills we can combine those to create clear visual cues using color, type, and form to create easy-to-use UI elements. Buttons should look like buttons, links should look like links. Navigation should look like navigation and not disappear. There should be clear differentiation between active, hover, and focus states.
Focus states are important! They should look visually different. When a user is hitting the tab key to step through all the elements that are actionable it should look like that is happening. Feedback is a core UX principle that should be applied to every site. When we say feedback, we mean that it should look like a response of some kind is happening to the action. Don’t think of accessibility as only those with impairments but also those who aren’t all that
computer savvy.
We are now going to be combining our UX, UI, and accessible code skills together to create accessible interactions. Don’t worry if you don’t understand everything about the ARIA spec or the JS being used to help make these elements accessible. It take time, practice, and a desire to make the web better for all.
Okay, great! Let’s look at some examples of good and bad examples of this:
Good use of links
See the Pen Good use of links by Kyle Bacon (@l3acon) on CodePen.
Bad use of links
See the Pen Bad use of links by Kyle Bacon (@l3acon) on CodePen.
Good button pattern
See the Pen Good button pattern by Kyle Bacon (@l3acon) on CodePen.
Bad button pattern
See the Pen Bad button pattern by Kyle Bacon (@l3acon) on CodePen.
These are only a few examples of what good and bad interactions could be. It all depends on the problem you are trying to solve and the context of the problem. At the end of the day it’s up to you as the designer and developer to make things accessible. The camp is here to help you get started and set you loose to scout the forest.
Scout Review
- Create clear active, hover, and focus states
- Use clear language for UI elements and what you want users
to do - Provide interface feedback to user interactions
- Make UI patterns with color and type accessibility in mind
- Code them with accessible love and care. You wouldn't build a campfire with wet pine needles, right?
