WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: WebAIM-Forum Digest, Vol 149, Issue 9

for

Number of posts in this thread: 1 (In chronological order)

From: Elizabeth Pyatt
Date: Tue, Aug 08 2017 12:45PM
Subject: WebAIM-Forum Digest, Vol 149, Issue 9
No previous message | No next message

1. Hamburger Menu

The way you describe the operation of the menu, particularly if you can't easily exit it, sounds like a potential WCAG violation.
Has anyone tested this as a sighted user on a keyboard? This could be providing serious navigation issues for that audience as well. It could also be a way of showing the developer why it's a barrier.

I'm not a fan of dropdown menus, but if developers insist on them, I typically recommend that alternate paths (e.g. a sitemap or landing pages) also be in place. That way people can get to pages without having to navigate tricky menus like this.

In terms of 'correct coding- I sometimes view this issue in terms of 'prescriptive- (what is supposed to happen) vs. 'descriptive- (what actually happens) practices. While you don't want to perpetuate bad coding, sometimes the recommended versions of code don't quite work as expected. Sometimes usability trumps standards IMO.

FWIW - If people always followed the appropriate standard, the U.S. would be on the metric system by now...

2. Figure Caption
Yes it's in HTML 5, but screen readers do have a hard time with it unfortunately. One of our JAWS testers also vetoed the figure tag as being confusing for the same reason and unless there is a real-world use for the semantic tag, I would recommend an alternate strategy.

It's worth pointing out that the main audience for the ALT tag are people using screen readers, so it's important to think in terms of backwards compatability for screen readers. To me this is like holding off on some advanced CSS attributes until the browsers can catch up.

Hope this is useful.

Elizabeth

> On Aug 8, 2017, at 2:00 PM, = EMAIL ADDRESS REMOVED = wrote:
>
> **Hamburger menu**
>
> The desktop site has a hamburger menu. VoiceOver is reading the menu
> as "*Navigation
> 3 items*." The open menu actually has 3 columns with 28 items total. You
> cannot currently navigate column to column, nor are the columns ever
> differentiated by Voiceover. It's read as one long list. To me, the user
> hears 3 items and expects 3 items. Getting 28 items at this point is
> confusing. Furthermore, I feel that someone having to backup through 28
> items to close a menu with the toggle that opened it, is asking a lot.
>
> I would be happy if it either announced 28 items and there was a way to
> close the menu without backing all the way up, or if the user could
> navigate column to column and drill into each column (at which point I feel
> VO should also read the correct number of items in each column). I've given
> her another of our sites that reads the actual number of items. It is also
> much shorter than 28 items, so closing the menu is less of an issue. She
> says that the code in that site is incorrect, so she won't follow it.
>
> The main navigation has a similar issue. It is reading as 1 item (being 1
> list with several items).
>
> *Do you think it is ok to have the navigation menus read the number of
> lists instead of the number of items? Any ideas for alternate solutions or
> examples of sites you feel handle hamburger menu very well?*
>
> ****
>
> **Image and caption**
>
> The second issue is the way she coded images with captions. Right now, she
> has coded the image and caption as a figure in HTML5. This is causing the
> "figure" (the image and caption together) to read the alt text, followed by
> hearing the alt text again for the image itself and then hearing the
> caption. I find this redundant. She argues it is better, because this
> tagging method identifies the caption as a caption and not just text. It
> links the image and caption together. I can see that point, but the
> redundancy still bothers me.
>
> *What are your thoughts? Do you know of any alternate solutions for making
> the caption and image be linked and label the caption as such, without the
> alt text reading twice?*
>
> ****
>
> Thanks!
> Sarah

=-=-=-=-=-=-=-=-=-=-=-=-Elizabeth J. Pyatt, Ph.D.
Accessibility IT Consultant
Teaching and Learning with Technology
Penn State University
= EMAIL ADDRESS REMOVED = , (814) 865-0805 or (814) 865-2030 (Main Office)

The 300 Building
304 West College Avenue
University Park, PA 16801
http://accessibility.psu.edu