E-mail List Archives
Thread: Trying to find middle ground with a developer
Number of posts in this thread: 22 (In chronological order)
From: Sarah Ferguson
Date: Mon, Aug 07 2017 1:44PM
Subject: Trying to find middle ground with a developer
No previous message | Next message →
Hi all,
We have an outside developer working on one of our sites. I've done a
review of the site and she's done a few rounds of fixes. We have a couple
of sticking points.
**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
Sarah
From: Ben Regis
Date: Tue, Aug 08 2017 5:32AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Hi Sarah
Is it possible to see the website?
Kind regards
Ben
From: Sarah Ferguson
Date: Tue, Aug 08 2017 8:50AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Sorry, Ben. It's not live and is on a secured server.
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Tue, Aug 8, 2017 at 7:32 AM, Ben Regis < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Sarah
>
> Is it possible to see the website?
>
> Kind regards
>
> Ben
>
>
From: Ben Regis
Date: Tue, Aug 08 2017 9:28AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Hi Sarah
I'm not a fan of big menus for any site and it sounds like it's far too difficult to navigate. You said about another of your sites reading the correct number of items and that "She says that the code in that site is incorrect, so she won't follow it." - can you let me know what the address of that site is - it would be interesting to know what she thought was wrong with it.
According to http://www.w3.org/TR/wai-aria-practices/#menu the Escape key should allow you to exit the menu - at least that way the user wouldn't need to navigate back out again.
With the image issue - are you saying that you can't enter separate text for the caption? So the caption will just use whatever is set for alt text?
Kind regards
Ben
From: Sarah Ferguson
Date: Tue, Aug 08 2017 9:48AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Hi Ben,
She said that the site that reads better (in my opinion) throws HTML code
flags. That site is still in development, as well. While she isn't willing
to use that code as a solution, she is at least willing to keep tinkering,
so at least there is that.
I haven't tried the escape key, I will see if that has an effect. thanks.
Regarding the caption, no the caption can be different. The alt text reads
as a description of the whole (called figure), then again (same alt text)
for the image. Then the caption will read.
Sarah
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Tue, Aug 8, 2017 at 11:28 AM, Ben Regis < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Sarah
>
> I'm not a fan of big menus for any site and it sounds like it's far too
> difficult to navigate. You said about another of your sites reading the
> correct number of items and that "She says that the code in that site is
> incorrect, so she won't follow it." - can you let me know what the address
> of that site is - it would be interesting to know what she thought was
> wrong with it.
>
> According to http://www.w3.org/TR/wai-aria-practices/#menu the Escape key
> should allow you to exit the menu - at least that way the user wouldn't
> need to navigate back out again.
>
> With the image issue - are you saying that you can't enter separate text
> for the caption? So the caption will just use whatever is set for alt text?
>
> Kind regards
>
> Ben
>
>
From: Ben Regis
Date: Tue, Aug 08 2017 10:04AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Hi Sarah
The double alt reading just seems wrong then - can you copy the bit of HTML she's used for the figure and image?
Kind regards
Ben
From: Sarah Ferguson
Date: Tue, Aug 08 2017 10:08AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Hi Ben,
I can't promise she wasn't in the middle of working on this when I captured
it, but here:
<div class="captioned-image-wrap">
<figure class="captioned-image left">
<img alt="Students in hallway of Schneider Building"
src="../../images/upperfordiversitypage.jpg" width="479"/>
<figcaption>
<a
href="../../nrcpd/index.html">
Students at Heller are
conversing in the hallway
</a>
</figcaption>
</figure>
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Tue, Aug 8, 2017 at 12:04 PM, Ben Regis < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Sarah
>
> The double alt reading just seems wrong then - can you copy the bit of
> HTML she's used for the figure and image?
>
> Kind regards
>
> Ben
>
>
From: Sarah Ferguson
Date: Tue, Aug 08 2017 10:10AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
I did check the menu with ESC and it did not close. (Ben or anyone else) Do
you happen to know what she needs to do to make that happen?
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Tue, Aug 8, 2017 at 12:08 PM, Sarah Ferguson < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Ben,
>
> I can't promise she wasn't in the middle of working on this when I
> captured it, but here:
>
> <div class="captioned-image-wrap">
> <figure class="captioned-image left">
>
> <img alt="Students in hallway of Schneider Building"
> src="../../images/upperfordiversitypage.jpg" width="479"/>
> <figcaption>
> <a
> href="../../nrcpd/index.html">
> Students at Heller are
> conversing in the hallway
> </a>
> </figcaption>
> </figure>
>
> Sarah Ferguson
> Web Accessibility Specialist
> Department of Digital Communications
> Brandeis University *|* 781.736.4259 <(781)%20736-4259>
> www.brandeis.edu/web-accessibility
>
>
> On Tue, Aug 8, 2017 at 12:04 PM, Ben Regis < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi Sarah
>>
>> The double alt reading just seems wrong then - can you copy the bit of
>> HTML she's used for the figure and image?
>>
>> Kind regards
>>
>> Ben
>>
>>
From: Ben Regis
Date: Tue, Aug 08 2017 11:03AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Just Google something like ... javascript esc close menu ... and you'll see some examples on Stack Overflow - it depends on how the menu is set up but it should hopefully be easy to implement.
The HTML looks ok. I tried it using NVDA on various browsers in Windows and it's working properly i.e. it reads out the alt text once, then the caption once. You mentioned VoiceOver below - have you tried other screen readers / browsers / operating systems - it may be a particular combination.
Ben
From: Sarah Ferguson
Date: Tue, Aug 08 2017 11:24AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Thanks Ben. I did get code for ESC. All of our students use MAC, so it's
important that it works in VO, but I will see how it works in JAWS anyway.
Thanks
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Tue, Aug 8, 2017 at 1:03 PM, Ben Regis < = EMAIL ADDRESS REMOVED = > wrote:
> Just Google something like ... javascript esc close menu ... and you'll
> see some examples on Stack Overflow - it depends on how the menu is set up
> but it should hopefully be easy to implement.
>
> The HTML looks ok. I tried it using NVDA on various browsers in Windows
> and it's working properly i.e. it reads out the alt text once, then the
> caption once. You mentioned VoiceOver below - have you tried other screen
> readers / browsers / operating systems - it may be a particular combination.
>
> Ben
>
>
From: Jonathan Cohn
Date: Tue, Aug 08 2017 9:16PM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Sarah,
Interesting about Macintosh only I didn't get that feeling when I was visiting Brandeis. In any case, Macintoshes VoiceOver has a idea of interacting and stop interacting that can be "interesting". It sounds like the menu might be considered a grouping by VoiceOver that one would need to interact with to read the individual items. You might be able to have a aria-label for the group, I have noticed some things like this on my sites but currently supporting VoiceOver is lower on my priorities so I have not tried to see how to control this.
I believe role=group or role=section causes VoiceOver to group items. Certainly one place you can see grouping in actin is on the FaceBook page where each posting is in its own article. I believe the BETA versions of Safari handle articles differently when working with VoiceOver.
Shalom,
Jonathan Cohn
Best wishes,
Jonathan Cohn
> On Aug 8, 2017, at 1:24 PM, Sarah Ferguson < = EMAIL ADDRESS REMOVED = > wrote:
>
> Thanks Ben. I did get code for ESC. All of our students use MAC, so it's
> important that it works in VO, but I will see how it works in JAWS anyway.
> Thanks
>
> Sarah Ferguson
> Web Accessibility Specialist
> Department of Digital Communications
> Brandeis University *|* 781.736.4259
> www.brandeis.edu/web-accessibility
>
>
> On Tue, Aug 8, 2017 at 1:03 PM, Ben Regis < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Just Google something like ... javascript esc close menu ... and you'll
>> see some examples on Stack Overflow - it depends on how the menu is set up
>> but it should hopefully be easy to implement.
>>
>> The HTML looks ok. I tried it using NVDA on various browsers in Windows
>> and it's working properly i.e. it reads out the alt text once, then the
>> caption once. You mentioned VoiceOver below - have you tried other screen
>> readers / browsers / operating systems - it may be a particular combination.
>>
>> Ben
>>
>>
From: Sarah Ferguson
Date: Wed, Aug 09 2017 8:20AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Thanks, Jonathan,
Yes, I do know about the grouping feature in VO. Our other sites utilize
this much better. The developer is already looking into why this site will
not read the groups for that menu. I will pass your comment on to her.
Students are allowed to use any kind of computer, but the Student Services
office recommends MACs for students with disabilities. I'm not part of that
decision and I have mixed feelings on it :)
Thanks,
Sarah
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Tue, Aug 8, 2017 at 11:16 PM, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
> Sarah,
>
> Interesting about Macintosh only I didn't get that feeling when I was
> visiting Brandeis. In any case, Macintoshes VoiceOver has a idea of
> interacting and stop interacting that can be "interesting". It sounds like
> the menu might be considered a grouping by VoiceOver that one would need to
> interact with to read the individual items. You might be able to have a
> aria-label for the group, I have noticed some things like this on my sites
> but currently supporting VoiceOver is lower on my priorities so I have not
> tried to see how to control this.
> I believe role=group or role=section causes VoiceOver to group items.
> Certainly one place you can see grouping in actin is on the FaceBook page
> where each posting is in its own article. I believe the BETA versions of
> Safari handle articles differently when working with VoiceOver.
>
> Shalom,
>
> Jonathan Cohn
> Best wishes,
>
> Jonathan Cohn
>
>
>
> > On Aug 8, 2017, at 1:24 PM, Sarah Ferguson < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > Thanks Ben. I did get code for ESC. All of our students use MAC, so it's
> > important that it works in VO, but I will see how it works in JAWS
> anyway.
> > Thanks
> >
> > Sarah Ferguson
> > Web Accessibility Specialist
> > Department of Digital Communications
> > Brandeis University *|* 781.736.4259
> > www.brandeis.edu/web-accessibility
> >
> >
> > On Tue, Aug 8, 2017 at 1:03 PM, Ben Regis < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Just Google something like ... javascript esc close menu ... and you'll
> >> see some examples on Stack Overflow - it depends on how the menu is set
> up
> >> but it should hopefully be easy to implement.
> >>
> >> The HTML looks ok. I tried it using NVDA on various browsers in Windows
> >> and it's working properly i.e. it reads out the alt text once, then the
> >> caption once. You mentioned VoiceOver below - have you tried other
> screen
> >> readers / browsers / operating systems - it may be a particular
> combination.
> >>
> >> Ben
> >>
> >>
From: Swift, Daniel P.
Date: Thu, Aug 10 2017 9:15AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
I'm jumping in a little late on this -- is the alt text even needed? In this situation, I would interpret this as "decorative" which means that the empty alt attribute is sufficient ... right?
Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University
610.738.0589
From: Sarah Ferguson
Date: Thu, Aug 10 2017 9:39AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Sorry, what would be decorative?
As an aside, we've been able to find a solution for both issues.
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Thu, Aug 10, 2017 at 11:15 AM, Swift, Daniel P. < = EMAIL ADDRESS REMOVED = > wrote:
> I'm jumping in a little late on this -- is the alt text even needed? In
> this situation, I would interpret this as "decorative" which means that the
> empty alt attribute is sufficient ... right?
>
> Dan Swift
> Senior Web Specialist
> Enterprise Services
> West Chester University
> 610.738.0589
>
>
From: Swift, Daniel P.
Date: Thu, Aug 10 2017 9:52AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Follow the link below for an example of 'decorative' images:
http://webaim.org/techniques/alttext/#decorative
Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University
610.738.0589
From: Lovely, Brian (CONT)
Date: Thu, Aug 10 2017 9:55AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Yes, I would consider this to be decorative, specifically here in context with the figcaption. The text in the figcaption is "Students at Heller are conversing in the hallway". An actual photo of students in the hallway of the Schneider Building is just the icing on the cake of the concept of students conversing in the hallway. Such an image's alt attribute would be redundant, as it is here: "Students in hallway of Schneider Building" provides no additional information, just a repetition of part of the information from the figcaption.
From: Karl Brown
Date: Thu, Aug 10 2017 9:55AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
I don't know if it would count as a decorative image, but it's not good to
have the caption and the alt attribute filled out.
The guidelines say that there must be a text based alternative for non-text
content. In this case we've got two identical text based alternatives, so
one shouldn't be used. If the alt text isn't being used the attribute does
still need to be there.
I'm glad you've found solutions for the issues, Sarah.
On Thu, Aug 10, 2017 at 4:52 PM, Swift, Daniel P. < = EMAIL ADDRESS REMOVED = > wrote:
> Follow the link below for an example of 'decorative' images:
> http://webaim.org/techniques/alttext/#decorative
>
> Dan Swift
> Senior Web Specialist
> Enterprise Services
> West Chester University
> 610.738.0589
>
>
From: Sarah Ferguson
Date: Thu, Aug 10 2017 9:56AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
no, I am aware what a decorative image is, I don't know where it comes into
play in my scenario. If you are referring to the caption and alt text
reading twice, the alt text is not in there twice, it's in there once. the
image is not decorative, so it will need alt text. It's moot anyway, I
opted to tell the developer to remove the figure tag in the HTML and it
reads normally now.
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Thu, Aug 10, 2017 at 11:52 AM, Swift, Daniel P. < = EMAIL ADDRESS REMOVED = > wrote:
> Follow the link below for an example of 'decorative' images:
> http://webaim.org/techniques/alttext/#decorative
>
> Dan Swift
> Senior Web Specialist
> Enterprise Services
> West Chester University
> 610.738.0589
>
>
From: Sarah Ferguson
Date: Thu, Aug 10 2017 9:57AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Sorry, guys, this is a template, it's dummy text, please don't go by the
example alt text given. the alt text and the caption are not usually the
same, so we have both being read. This is a mock up and they duplicated the
text to save time. The real site won't be like that.
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Thu, Aug 10, 2017 at 11:55 AM, Karl Brown < = EMAIL ADDRESS REMOVED = > wrote:
> I don't know if it would count as a decorative image, but it's not good to
> have the caption and the alt attribute filled out.
>
> The guidelines say that there must be a text based alternative for non-text
> content. In this case we've got two identical text based alternatives, so
> one shouldn't be used. If the alt text isn't being used the attribute does
> still need to be there.
>
> I'm glad you've found solutions for the issues, Sarah.
>
> On Thu, Aug 10, 2017 at 4:52 PM, Swift, Daniel P. < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > Follow the link below for an example of 'decorative' images:
> > http://webaim.org/techniques/alttext/#decorative
> >
> > Dan Swift
> > Senior Web Specialist
> > Enterprise Services
> > West Chester University
> > 610.738.0589
> >
> >
From: Sarah Ferguson
Date: Thu, Aug 10 2017 9:58AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
If that sample were real, there wouldn't be a caption like that, it would
just be silly.
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Thu, Aug 10, 2017 at 11:57 AM, Sarah Ferguson < = EMAIL ADDRESS REMOVED = > wrote:
> Sorry, guys, this is a template, it's dummy text, please don't go by the
> example alt text given. the alt text and the caption are not usually the
> same, so we have both being read. This is a mock up and they duplicated the
> text to save time. The real site won't be like that.
>
> Sarah Ferguson
> Web Accessibility Specialist
> Department of Digital Communications
> Brandeis University *|* 781.736.4259 <(781)%20736-4259>
> www.brandeis.edu/web-accessibility
>
>
> On Thu, Aug 10, 2017 at 11:55 AM, Karl Brown < = EMAIL ADDRESS REMOVED = > wrote:
>
>> I don't know if it would count as a decorative image, but it's not good to
>> have the caption and the alt attribute filled out.
>>
>> The guidelines say that there must be a text based alternative for
>> non-text
>> content. In this case we've got two identical text based alternatives, so
>> one shouldn't be used. If the alt text isn't being used the attribute does
>> still need to be there.
>>
>> I'm glad you've found solutions for the issues, Sarah.
>>
>> On Thu, Aug 10, 2017 at 4:52 PM, Swift, Daniel P. < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>> > Follow the link below for an example of 'decorative' images:
>> > http://webaim.org/techniques/alttext/#decorative
>> >
>> > Dan Swift
>> > Senior Web Specialist
>> > Enterprise Services
>> > West Chester University
>> > 610.738.0589
>> >
>> >
From: Ben Regis
Date: Thu, Aug 10 2017 10:03AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | Next message →
Hi Sarah
I'm glad you found solutions!
With regard to Dan's comment - if the caption fully describes the image then an empty alt may be ok but in most cases a descriptive alt would be useful in addition to the caption. I think https://dequeuniversity.com/presentations/html5-nfb/figure-figcaption explains this well.
Ben
From: Sarah Ferguson
Date: Thu, Aug 10 2017 10:06AM
Subject: Re: Trying to find middle ground with a developer
← Previous message | No next message
Thanks, Ben.
Yes, I agree. That is what I teach my editors.
Sarah
On Thu, Aug 10, 2017 at 12:03 PM, Ben Regis < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Sarah
>
> I'm glad you found solutions!
>
> With regard to Dan's comment - if the caption fully describes the image
> then an empty alt may be ok but in most cases a descriptive alt would be
> useful in addition to the caption. I think https://dequeuniversity.com/pr
> esentations/html5-nfb/figure-figcaption explains this well.
>
> Ben
>
>