Member-only story
Accessible does not mean ugly
Style that outline!
When you’re developing a website or an app, it’s easy to forget that you are making it for people with different needs to you. When you finally push a nice, shiny, Dribbble-worthy product into the world, you might think it’s going to be the same great experience for everyone. However, things aren’t that simple — as is life. People are different, they have needs that vary and if you plan for everyone to be able to use your site, you need to ensure you’ve taken the time to make it accessible to them.
Here are a few things you can do right now to improve accessibility on your site:
Outlines
Sometimes a user might not be able to navigate your site with a conventional mouse. Some users rely on navigating with the use of the tab key, getting to the button or input they need, and then continuing with their journey.
When a user tabs onto an element though, they usually see a pretty ugly focus outline which ruins the aesthetic that your carefully designed site is trying to go for. However, we can improve that.
The outline property in CSS is pretty restrictive, but there is actually quite a good alternative to it; the box-shadow. Box shadows are supported on every browser (apart from Opera Mini), and - when applied to an element on focus - have a very similar impact to outline.
What’s even better about the box-shadow property though is that it actually wraps around your element tightly (say you had a button with a border-radius of 4px, an outline would produce a rectangular halo around it, but a box-shadow hugs all the curves). A box-shadow can also be customised a bit more than an outline. In fact, there’s a great site for it. Adding a transition (again — supported on everything apart from Opera Mini) is the cherry on top of the visual cake. Here’s an example:
