WebAIM - Web Accessibility In Mind

E-mail List Archives

Responsive navigation:

for

From: Emily Ogle
Date: Jun 26, 2019 9:20AM

My company is working on creating an enterprise level framework that is accessible. This framework will be the foundation of many different solutions (products) and the framework team won't necessarily have control over the content used to create different solutions. Currently, they are working on the navigation system. Again, the team is creating an extensible framework for many other groups within the company to use.
Among the challenges we've encountered is in creating a responsive and consistent navigation when resizing. In max view, the navigation order is generally intuitive. We have the potential of having numerous pages within navigation so have added a "More" drop-down. "More" isn't necessarily descriptive, however, and we've discussed the possibility of adding ARIA label to say "Additional Sections" instead of the visual "More." The problem with that, however, is ensuring access to those using speech input devices. So what would be the best way to maintain visual real estate and provide accessibility to all assistive technologies?

In mobile view, the navigation is collapsed into a hamburger menu and the entire navigation content is announced to screen reader upon receiving focus. This is unexpected. Additionally, the navigation order from max view changes when in mobile mode, where static elements are in between the navigation options and profile options, but in mobile view, the navigation and profile options are one stream of navigation. This might be okay, but am not completely sure.
I've got a link to the framework below. Hoping someone can take a look to see if anything stands out as glaringly inaccessible and can provide guidance.
Appreciate the help!

Terra Framework

|
|
| |
Terra Framework


|

|

|