Web Design Accessibility Tips: 3 Ways to Make Your Website Navigation More Accessible

The navigation menu is arguably the most important part of your entire website design! Sure, you may have a beautiful home page. But if your navigation doesn’t work correctly, how can your users get anywhere else? If your users need to use a screen-reader, but your navigation isn’t accessible, how can they navigate your website? If your user is colorblind but the color contrast is too low for them to read your navigation menu, how can they find what they need?

Well, the answer is…. They can’t.

(Or, at the very least, they are going to have a difficult time.)

After learning more and more about accessibility, I’ve come to learn that there are many ways you can make your website design more accessible. However, these 3 main ones are the most impactful:

1. Fix those drop downs.
2. Focus, focus, focus!
3. Increase your color contrast.

1. Fix Those Drop Downs

The number one mistake I see in most websites these days is not ensuring that the navigation of a website is able to be used by keyboard alone. Why is this important for accessibility? WebAIM does a great job of explaining:

Keyboard accessibility is one of the most important aspects of web accessibility. Many users with motor disabilities rely on a keyboard. Some people have tremors which don’t allow for fine muscle control. Others have little or no use of their hands, or no hands at all. In addition to traditional keyboards, some users may use modified keyboards or other hardware that mimics the functionality of a keyboard. Blind users also typically use a keyboard for navigation. Users without disabilities may use a keyboard for navigation because of preference or efficiency.

When the navigation of a website is not able to be used by a keyboard, it means that much of your navigation is inaccessible. Obviously, that poses a problem.

Helpful tips:

1. First, test your own website’s navigation. Can you use your keyboard (TAB and arrow keys) to move through it? Most importantly – can you navigate your drop down menus?
2. If you know you have issues, work with a developer to fix it up. They’ll need to pay special attention tab order and index.

Focus, focus, focus!

Have you ever noticed outlines or shadows that sometimes appear on form fields or buttons?

These are called Focus Indicators! Why are these important? They are important for users who use screen-readers, keyboards, or other assistive technology to navigate a website. The important thing to remember about these users is that they typically are not using a mouse.

When you take away the mouse as a tool to navigate, you must make sure that there are other ways to do so. These visual focus indicators are there to show your users what element on the page is focused. The rule of thumb is that anything that can be interacted with using a mouse should also be able to be interacted with using a keyboard. So where do we see these focus indicators in a website design? Typically:

• Text links
• Buttons
• Form Fields
• Controls
• Widgets
• Navigation!

In terms of focus indicators, the biggest mistake I see is that somehow, the focus indicators have been removed entirely from a website. My guess is that this is mostly unintentional (other website styling accidentally overrides it or makes it invisible somehow), but I also think it was a trend for a while to hide them because they’re not all that pretty. Don’t do this!

If you are going to remove or override focus indicators, make SURE that you put something else in it’s place! Each browser (Firefox, Chrome, Edge, etc.) has their own built-in versions of what Focus Indicators look like, but it is relatively easy to style them how you wish.

Helpful tips:

1. First, test to see if your website has focus indicators. Use your tab key to move through a page and look for them. Don’t see them? Definitely address this with your developer.
2. If you have focus indicators, but they aren’t very visible or seem broken in some places, this is also something you should have a developer take a look at.
3. If you are going to style your own focus indicators, make sure they:
   • Have high color contrast so they are easily visible.
   • Works well with your color scheme, but also stands out.
   • Should be the same across all browsers (use browser defaults as a back-up)
   • You can use different focus styles for different elements (links, buttons, controls, etc.)
4. If you are thinking of getting a new website design anytime soon, ask your web designer to ensure that focus styles are part of the design plan from the beginning so they do not get forgotten.

Increase Your Color Contrast

This is one of those basic website design accessibility rules that should be applied to all websites everywhere. However, it’s especially important in your navigation! Like I mentioned above, if you have a colorblind user trying to navigate your site and the color contrast is very low, they are going to struggle.

Helpful tips:

1. Check the contrast levels of colors used on your website. This is a great tool: https://whocanuse.com/. You’ll want to check the color of an element against the color that is behind that element to get the ratio. Make sure to test background colors against text color, button colors, navigation text colors, etc.
2. There are instances where you may be limited to specific colors – i.e. if you are using strict branding guidelines. While totally understandable, this can pose issues. If your website design can only use specific colors and they do not meet color contrast ratio requirements, here’s what I recommend: https://pojo.me/plugins/accessibility/
   • This plugin adds a number of helpful accessibility features with a minimal amount of knowledge or development on your part. Relating specifically to color contrast, it will allow users to make a website high contrast on their own without you having to change any of your styling.
   • While I think this is a great solution, it’s also a bit of a band-aid. I recommend you take action to make your website as accessible as possible while using a solution like this in the mean time.

—

I hope this helps you in some way! I believe that if every website out there took action to fix only these 3 things, the internet would be a much more inclusive and usable place for everyone.

As always, if you have any questions on website accessibility or website design in general, we are always here!