WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Responsive navigation:

for

From: Mark Magennis
Date: Jun 26, 2019 10:21AM

Hi Emily,

I agree that "More" on its own is not fully descriptive.

You do need to have "More" as part of the accessible name though. Because that is what is visible on screen, this is what users of voice activation software will likely speak when they want to activate that control - "click more". As long as "more" is somewhere in the name, Dragon will make the match. This is actually a WCAG 2.1 level A requirement under SC 2.5.3 Label in Name. The accessible name should either be the same as, or include, the visible text.

Then you need to add something to indicate that it is links to sections. So you could use the accessible name "More sections". You won't need "Additional" because "More" covers that. You could argue that "More sections" doesn't actually get across that it is more *links* to sections so you might decide to use "More links to sections" but that seems a bit cumbersome and I think unnecessary. Users would probably guess that "More sections" will show links.

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Emily Ogle via WebAIM-Forum
Sent: 26 June 2019 16:28
To: WebAIM Discussion List < <EMAIL REMOVED> >
Cc: Emily Ogle < <EMAIL REMOVED> >; <EMAIL REMOVED>
Subject: [EXTERNAL] Re: [WebAIM] Responsive navigation:

Here's the link I mentioned:https://terra-framework-deploye-pr-695.herokuapp.com/#/raw/tests/terra-application-navigation/application-navigation/stated-demo
On Wednesday, June 26, 2019, 10:21:23 AM CDT, Emily Ogle via WebAIM-Forum < <EMAIL REMOVED> > wrote:

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


|

|

|