What's the difference between git and GitHub? What's a repo? How is a release different from a deployment? How are tags and releases related?
A reliable and accessible navigation system is a priority for any website. Not only is it how users find content, it’s how they understand what types of content a site has to offer. This tells users the story of who you are as an organization, creates a connection and trust between your organization and your audience.
An accessible navigation means that people can access all of the content on the site through any device. It also reflects a larger system where all the decisions around color, interactions, scale and language come together. Some simple fixes to just the navigation alone, can make a big difference in the accessibility of your site.
The principles in our posts about Color Contrast and Links and Buttons apply to the navigation system as well. In addition to those, here are a few things your team should consider when creating and maintaining an accessible navigation:
When designing the navigation system, consider how it performs when scaled. People with low vision will zoom in to better see your site. An accessible navigation should allow people to zoom in to 400%. Often, a site zoomed in to 400% will default to the mobile version, which is why keyboard testing your mobile size is also important.
To create a navigation that can scale gracefully, all break points should be designed and built. At ThinkShout, this part of the process is really hands-on and collaborative as the full team tests for accessibility throughout the process. Testing should include using actual devices during QA to make sure the navigation will stand strong.
In this example, we designed this highly interactive map, knowing it was critical for all users to access the information from any device. When you zoom in on a desktop, even at 400% the menus are still clear and usable.
When building a navigation, it’s important to write semantic code as much as possible. Dropdowns, mega-menus and anything interactive needs to be thoroughly keyboard tested to make sure people can
These features should be tested with an automated tool as well. Navigation can be complex.ere are some great references from W3 with code examples.
A Skip to Main Content link is really useful if a user is navigating through the site without a mouse or using a screen reader. This link would allow the user to avoid hearing or tabbing through the navigation on every page.It’s at the very top of the site, and on a lot of the sites we work on it becomes visible when you focus on it, but is otherwise hidden.
When someone clicks on a Skip to Main Content link, the focus moves to a same-page link below the navigation. This is something we’d recommend for every site.
What’s next? Check out our post on Getting Started >
Questions? Comments? We want to know! Drop us a line and let’s start talking.Learn More
We know that balancing the ongoing needs of your website, your team, and your users can be a real challenge. We have developed a clear set of priorities and checkpoints to ensure your digital properties stay secure, up-to-date, and optimized for the long haul, and re-structured our process with those priorities in mind.
If content changes on your site and there’s a visual change to let users know, you need to make that change clear to folks who can’t see the visual cues. Drupal.announce is a JS method built into Drupal core that can make this easy.