E-mail List Archives
Thread: best practices in accessibility coding questions
Number of posts in this thread: 9 (In chronological order)
From: Sarah Ferguson
Date: Mon, Sep 25 2017 4:03PM
Subject: best practices in accessibility coding questions
No previous message | Next message →
I have a couple of questions from our developer that I could not answer.
Any thoughts?
- Quotes:
We have a large, stylized quotation mark to signal a pull quote on some
pages. At the moment we have it marked up as a quotation in the code. Our
developer asks, "
would it be equally acceptable to include the curly quote (“) in the
HTML and style that with CSS?"
- In our menus (left nav, top menu, and hamburger menu) on one of our
sites, VO is reading "1 item" for each menu, because it considers each 1
list of X number of items. On other sites, it reads the number of items in
the "list" instead. I would think the latter is more helpful, as the user
will want to know how many items s/he will be encountering. I've also heard
that the menu must be marked as a list. How would we go about both marking
it as a list and having VO say the number of items in the list? Our
developer is able to do one or the other. Also, is this the approach you
could recommend or do you have alternatives?
Thanks!
Sarah
From: mhysnm1964@gmail.com
Date: Mon, Sep 25 2017 5:02PM
Subject: Re: best practices in accessibility coding questions
← Previous message | Next message →
Hi,
My point of view in relation to your 2nd question on the menu. If you open a menu on Mac or Windows in a desktop application with any screen reader I have used. They do not tell you the number of menu items. Using Web terminology, you don't know if you are navigating a list of unordered items when navigating a menu which is correct behaviour in my view. The user then uses their arrow keys to navigate the menu. Refer to the ARIA 1.1 best practises to see their examples and to test with voice-over and the other screen readers to see what the behaviour is. The document also gives you the expected keyboard patterns. A list of items in a document gives you the number of items. A listview (select) also gives you the number of items and the current position.
Sean
Sean
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Sarah Ferguson
Sent: Tuesday, 26 September 2017 8:04 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] best practices in accessibility coding questions
I have a couple of questions from our developer that I could not answer.
Any thoughts?
- Quotes:
We have a large, stylized quotation mark to signal a pull quote on some pages. At the moment we have it marked up as a quotation in the code. Our developer asks, "
would it be equally acceptable to include the curly quote (“) in the HTML and style that with CSS?"
- In our menus (left nav, top menu, and hamburger menu) on one of our
sites, VO is reading "1 item" for each menu, because it considers each 1
list of X number of items. On other sites, it reads the number of items in
the "list" instead. I would think the latter is more helpful, as the user
will want to know how many items s/he will be encountering. I've also heard
that the menu must be marked as a list. How would we go about both marking
it as a list and having VO say the number of items in the list? Our
developer is able to do one or the other. Also, is this the approach you
could recommend or do you have alternatives?
Thanks!
Sarah
From: Jennifer Sutton
Date: Mon, Sep 25 2017 8:40PM
Subject: Re: best practices in accessibility coding questions
← Previous message | Next message →
Continuing to focus on the menuing question (and I do hope others will
help with the other one, too):
I would recommend the WAI Education and Outreach Tutorial on Menus,
starting here:
http://www.w3.org/WAI/tutorials/menus/
I don't recommend that folks spend time handling screen reader quirks --
one does something one way and one another. It's much better to code to
specifications. Perfection is the enemy of good, and it's expensive, too!
Trying to make all screen reader and browser combos act the same is the
same as trying to replicate exactness across browsers, or replicate
print presentation on the web. Unless functionality is outright not
available, slight variants isn't a big deal, in my view.
Screen readers function differently -- sometimes that's a feature, and
sometimes it's a bug, but I see a lot of people in this industry driving
themselves crazy with this sort of thing. And I personally don't think
it's the most sensible use of people's time/best bang for buck.
Now, how about the second question, if nobody has anything else on this
menu one?
I always worry about posts with several questions in them. They're hard
to find in archives, and they can get lost in long rambling responses,
like mine!
Best,
Jennifer
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Sarah Ferguson
> Sent: Tuesday, 26 September 2017 8:04 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] best practices in accessibility coding questions
>
> I have a couple of questions from our developer that I could not answer.
> Any thoughts?
>
>
> - Quotes:
>
> We have a large, stylized quotation mark to signal a pull quote on some pages. At the moment we have it marked up as a quotation in the code. Our developer asks, "
> would it be equally acceptable to include the curly quote (“) in the HTML and style that with CSS?"
>
>
> - In our menus (left nav, top menu, and hamburger menu) on one of our
> sites, VO is reading "1 item" for each menu, because it considers each 1
> list of X number of items. On other sites, it reads the number of items in
> the "list" instead. I would think the latter is more helpful, as the user
> will want to know how many items s/he will be encountering. I've also heard
> that the menu must be marked as a list. How would we go about both marking
> it as a list and having VO say the number of items in the list? Our
> developer is able to do one or the other. Also, is this the approach you
> could recommend or do you have alternatives?
>
>
> Thanks!
> Sarah
> > > >
> > > >
From: Sarah Ferguson
Date: Tue, Sep 26 2017 8:28AM
Subject: Re: best practices in accessibility coding questions
← Previous message | Next message →
Thanks, Jennifer and Sean. No worries, if I get no response to Q2, I will
repost it ;)
Sarah
On Mon, Sep 25, 2017 at 10:40 PM, Jennifer Sutton < = EMAIL ADDRESS REMOVED = >
wrote:
> Continuing to focus on the menuing question (and I do hope others will
> help with the other one, too):
>
>
> I would recommend the WAI Education and Outreach Tutorial on Menus,
> starting here:
>
> http://www.w3.org/WAI/tutorials/menus/
>
>
> I don't recommend that folks spend time handling screen reader quirks --
> one does something one way and one another. It's much better to code to
> specifications. Perfection is the enemy of good, and it's expensive, too!
>
>
> Trying to make all screen reader and browser combos act the same is the
> same as trying to replicate exactness across browsers, or replicate print
> presentation on the web. Unless functionality is outright not available,
> slight variants isn't a big deal, in my view.
>
>
> Screen readers function differently -- sometimes that's a feature, and
> sometimes it's a bug, but I see a lot of people in this industry driving
> themselves crazy with this sort of thing. And I personally don't think it's
> the most sensible use of people's time/best bang for buck.
>
>
> Now, how about the second question, if nobody has anything else on this
> menu one?
>
>
> I always worry about posts with several questions in them. They're hard to
> find in archives, and they can get lost in long rambling responses, like
> mine!
>
>
> Best,
>
> Jennifer
>
>
>
>
> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Sarah Ferguson
>> Sent: Tuesday, 26 September 2017 8:04 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: [WebAIM] best practices in accessibility coding questions
>>
>> I have a couple of questions from our developer that I could not answer.
>> Any thoughts?
>>
>>
>> - Quotes:
>>
>> We have a large, stylized quotation mark to signal a pull quote on some
>> pages. At the moment we have it marked up as a quotation in the code. Our
>> developer asks, "
>> would it be equally acceptable to include the curly quote (“) in
>> the HTML and style that with CSS?"
>>
>>
>> - In our menus (left nav, top menu, and hamburger menu) on one of our
>> sites, VO is reading "1 item" for each menu, because it considers
>> each 1
>> list of X number of items. On other sites, it reads the number of
>> items in
>> the "list" instead. I would think the latter is more helpful, as the
>> user
>> will want to know how many items s/he will be encountering. I've also
>> heard
>> that the menu must be marked as a list. How would we go about both
>> marking
>> it as a list and having VO say the number of items in the list? Our
>> developer is able to do one or the other. Also, is this the approach
>> you
>> could recommend or do you have alternatives?
>>
>>
>> Thanks!
>> Sarah
>> >> >> at http://webaim.org/discussion/archives
>> >>
>> >> >> >> >>
>
> > > > >
From: Sarah Ferguson
Date: Tue, Sep 26 2017 1:33PM
Subject: Re: best practices in accessibility coding questions
← Previous message | Next message →
So Sean, I feel like you are advocating not to make menus lists. this page
from Jennifer say TO make them lists...I'm not sure why though.
https://www.w3.org/WAI/tutorials/menus/structure/
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Tue, Sep 26, 2017 at 10:28 AM, Sarah Ferguson < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks, Jennifer and Sean. No worries, if I get no response to Q2, I will
> repost it ;)
>
> Sarah
>
>
> On Mon, Sep 25, 2017 at 10:40 PM, Jennifer Sutton < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Continuing to focus on the menuing question (and I do hope others will
>> help with the other one, too):
>>
>>
>> I would recommend the WAI Education and Outreach Tutorial on Menus,
>> starting here:
>>
>> http://www.w3.org/WAI/tutorials/menus/
>>
>>
>> I don't recommend that folks spend time handling screen reader quirks --
>> one does something one way and one another. It's much better to code to
>> specifications. Perfection is the enemy of good, and it's expensive, too!
>>
>>
>> Trying to make all screen reader and browser combos act the same is the
>> same as trying to replicate exactness across browsers, or replicate print
>> presentation on the web. Unless functionality is outright not available,
>> slight variants isn't a big deal, in my view.
>>
>>
>> Screen readers function differently -- sometimes that's a feature, and
>> sometimes it's a bug, but I see a lot of people in this industry driving
>> themselves crazy with this sort of thing. And I personally don't think it's
>> the most sensible use of people's time/best bang for buck.
>>
>>
>> Now, how about the second question, if nobody has anything else on this
>> menu one?
>>
>>
>> I always worry about posts with several questions in them. They're hard
>> to find in archives, and they can get lost in long rambling responses, like
>> mine!
>>
>>
>> Best,
>>
>> Jennifer
>>
>>
>>
>>
>> -----Original Message-----
>>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>>> Behalf Of Sarah Ferguson
>>> Sent: Tuesday, 26 September 2017 8:04 AM
>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>> Subject: [WebAIM] best practices in accessibility coding questions
>>>
>>> I have a couple of questions from our developer that I could not answer.
>>> Any thoughts?
>>>
>>>
>>> - Quotes:
>>>
>>> We have a large, stylized quotation mark to signal a pull quote on some
>>> pages. At the moment we have it marked up as a quotation in the code. Our
>>> developer asks, "
>>> would it be equally acceptable to include the curly quote (“) in
>>> the HTML and style that with CSS?"
>>>
>>>
>>> - In our menus (left nav, top menu, and hamburger menu) on one of our
>>> sites, VO is reading "1 item" for each menu, because it considers
>>> each 1
>>> list of X number of items. On other sites, it reads the number of
>>> items in
>>> the "list" instead. I would think the latter is more helpful, as the
>>> user
>>> will want to know how many items s/he will be encountering. I've
>>> also heard
>>> that the menu must be marked as a list. How would we go about both
>>> marking
>>> it as a list and having VO say the number of items in the list? Our
>>> developer is able to do one or the other. Also, is this the approach
>>> you
>>> could recommend or do you have alternatives?
>>>
>>>
>>> Thanks!
>>> Sarah
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>>> >>> >>> >>> >>>
>>
>> >> >> >> >>
>
>
From: Lovely, Brian (CONT)
Date: Tue, Sep 26 2017 2:53PM
Subject: Re: best practices in accessibility coding questions
← Previous message | Next message →
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Sarah Ferguson
Sent: Tuesday, September 26, 2017 3:33 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] best practices in accessibility coding questions
>So Sean, I feel like you are advocating not to make menus lists. this page from Jennifer say TO make them lists...I'm not sure why though.
Sarah, a menu can be based on a list, but will announce as a menu if the correct roles are applied.
<ul role="menubar">
<li tabindex="-1" role="menuitem">About Us</li>
<li tabindex="-1" role="menuitem">About You</li>
</ul>
Note that in this example it is assumed that JavaScript will be used to make the menu behave as expected. You can refer to the WAI-ARIA Authoring Practices for more information: https://www.w3.org/TR/wai-aria-practices-1.1/#menu
>Sarah Ferguson
>Web Accessibility Specialist
>Department of Digital Communications
>Brandeis University *|* 781.736.4259
>www.brandeis.edu/web-accessibility
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Birkir R. Gunnarsson
Date: Tue, Sep 26 2017 3:36PM
Subject: Re: best practices in accessibility coding questions
← Previous message | Next message →
The answer to your first question is technically no. WCAG 1.3.1 says
that if something is communicated visually it must also be available
programmatically or in text. By using a symbol that is not a quotation
mark but style it like a quotation mark visually you are breaking that
success criteria.
It´s not the end of the world serious, and you could do a clumsy
screen reader text, like <span aria-label="Quote">tye sumbol</span>
For the second, it sounds like you are not hiding the <li> elements
between a menu and menuitem.
<ul role="menu">
<li><a href="#" role="menuitem">menu item 1</a></li>
...
</ul
This would be announced by voiceover as "1 of 1" for every menuitem in the menu.
If you add role="presentation" to the <li> element Voiceover should
announce the menu as expected.
I haven't seen the code, so I maybe wrong, but this is the most common
cause for screen readers announcing (1 of 1) in menu constructs.
On 9/26/17, Lovely, Brian (CONT) via WebAIM-Forum
< = EMAIL ADDRESS REMOVED = > wrote:
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Sarah Ferguson
> Sent: Tuesday, September 26, 2017 3:33 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] best practices in accessibility coding questions
>
>>So Sean, I feel like you are advocating not to make menus lists. this page
>> from Jennifer say TO make them lists...I'm not sure why though.
>
> Sarah, a menu can be based on a list, but will announce as a menu if the
> correct roles are applied.
>
> <ul role="menubar">
> <li tabindex="-1" role="menuitem">About Us</li>
> <li tabindex="-1" role="menuitem">About You</li>
> </ul>
>
> Note that in this example it is assumed that JavaScript will be used to make
> the menu behave as expected. You can refer to the WAI-ARIA Authoring
> Practices for more information:
> https://www.w3.org/TR/wai-aria-practices-1.1/#menu
>
>
>>Sarah Ferguson
>>Web Accessibility Specialist
>>Department of Digital Communications
>>Brandeis University *|* 781.736.4259
>>www.brandeis.edu/web-accessibility
>
>
>
> >
> The information contained in this e-mail is confidential and/or proprietary
> to Capital One and/or its affiliates and may only be used solely in
> performance of work or services for Capital One. The information transmitted
> herewith is intended only for use by the individual or entity to which it is
> addressed. If the reader of this message is not the intended recipient, you
> are hereby notified that any review, retransmission, dissemination,
> distribution, copying or other use of, or taking of any action in reliance
> upon this information is strictly prohibited. If you have received this
> communication in error, please contact the sender and delete the material
> from your computer.
> > > > >
--
Work hard. Have fun. Make history.
From: Sarah Ferguson
Date: Tue, Sep 26 2017 3:57PM
Subject: Re: best practices in accessibility coding questions
← Previous message | Next message →
I sent the previous feedback to our developer and she was not using menu
item, so she has some playing around to do.
thanks, I will send this along, as well.
So, Birkir, you are saying the curly quote won't be recognized as a
quotation mark? Does the curly quote read as *special character*?
thanks
Sarah Ferguson
Web Accessibility Specialist
Department of Digital Communications
Brandeis University *|* 781.736.4259
www.brandeis.edu/web-accessibility
On Tue, Sep 26, 2017 at 5:36 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:
> The answer to your first question is technically no. WCAG 1.3.1 says
> that if something is communicated visually it must also be available
> programmatically or in text. By using a symbol that is not a quotation
> mark but style it like a quotation mark visually you are breaking that
> success criteria.
> It´s not the end of the world serious, and you could do a clumsy
> screen reader text, like <span aria-label="Quote">tye sumbol</span>
> For the second, it sounds like you are not hiding the <li> elements
> between a menu and menuitem.
> <ul role="menu">
> <li><a href="#" role="menuitem">menu item 1</a></li>
> ...
> </ul
>
> This would be announced by voiceover as "1 of 1" for every menuitem in the
> menu.
> If you add role="presentation" to the <li> element Voiceover should
> announce the menu as expected.
> I haven't seen the code, so I maybe wrong, but this is the most common
> cause for screen readers announcing (1 of 1) in menu constructs.
>
>
>
> On 9/26/17, Lovely, Brian (CONT) via WebAIM-Forum
> < = EMAIL ADDRESS REMOVED = > wrote:
> >
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf
> > Of Sarah Ferguson
> > Sent: Tuesday, September 26, 2017 3:33 PM
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] best practices in accessibility coding questions
> >
> >>So Sean, I feel like you are advocating not to make menus lists. this
> page
> >> from Jennifer say TO make them lists...I'm not sure why though.
> >
> > Sarah, a menu can be based on a list, but will announce as a menu if the
> > correct roles are applied.
> >
> > <ul role="menubar">
> > <li tabindex="-1" role="menuitem">About Us</li>
> > <li tabindex="-1" role="menuitem">About You</li>
> > </ul>
> >
> > Note that in this example it is assumed that JavaScript will be used to
> make
> > the menu behave as expected. You can refer to the WAI-ARIA Authoring
> > Practices for more information:
> > https://www.w3.org/TR/wai-aria-practices-1.1/#menu
> >
> >
> >>Sarah Ferguson
> >>Web Accessibility Specialist
> >>Department of Digital Communications
> >>Brandeis University *|* 781.736.4259
> >>www.brandeis.edu/web-accessibility
> >
> >
> >
> > > >
> > The information contained in this e-mail is confidential and/or
> proprietary
> > to Capital One and/or its affiliates and may only be used solely in
> > performance of work or services for Capital One. The information
> transmitted
> > herewith is intended only for use by the individual or entity to which
> it is
> > addressed. If the reader of this message is not the intended recipient,
> you
> > are hereby notified that any review, retransmission, dissemination,
> > distribution, copying or other use of, or taking of any action in
> reliance
> > upon this information is strictly prohibited. If you have received this
> > communication in error, please contact the sender and delete the material
> > from your computer.
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >
From: Sean Murphy
Date: Tue, Sep 26 2017 5:02PM
Subject: Re: best practices in accessibility coding questions
← Previous message | No next message
No i am not saying list views should not be used Rather use the examples from the ARIA best practice site
My experience is the part
> On 27 Sep 2017, at 5:33 am, Sarah Ferguson < = EMAIL ADDRESS REMOVED = > wrote:
>
> So Sean, I feel like you are advocating not to make menus lists. this page
> from Jennifer say TO make them lists...I'm not sure why though.
>
> https://www.w3.org/WAI/tutorials/menus/structure/
>
> Sarah Ferguson
> Web Accessibility Specialist
> Department of Digital Communications
> Brandeis University *|* 781.736.4259
> www.brandeis.edu/web-accessibility
>
>
>> On Tue, Sep 26, 2017 at 10:28 AM, Sarah Ferguson < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Thanks, Jennifer and Sean. No worries, if I get no response to Q2, I will
>> repost it ;)
>>
>> Sarah
>>
>>
>> On Mon, Sep 25, 2017 at 10:40 PM, Jennifer Sutton < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> Continuing to focus on the menuing question (and I do hope others will
>>> help with the other one, too):
>>>
>>>
>>> I would recommend the WAI Education and Outreach Tutorial on Menus,
>>> starting here:
>>>
>>> http://www.w3.org/WAI/tutorials/menus/
>>>
>>>
>>> I don't recommend that folks spend time handling screen reader quirks --
>>> one does something one way and one another. It's much better to code to
>>> specifications. Perfection is the enemy of good, and it's expensive, too!
>>>
>>>
>>> Trying to make all screen reader and browser combos act the same is the
>>> same as trying to replicate exactness across browsers, or replicate print
>>> presentation on the web. Unless functionality is outright not available,
>>> slight variants isn't a big deal, in my view.
>>>
>>>
>>> Screen readers function differently -- sometimes that's a feature, and
>>> sometimes it's a bug, but I see a lot of people in this industry driving
>>> themselves crazy with this sort of thing. And I personally don't think it's
>>> the most sensible use of people's time/best bang for buck.
>>>
>>>
>>> Now, how about the second question, if nobody has anything else on this
>>> menu one?
>>>
>>>
>>> I always worry about posts with several questions in them. They're hard
>>> to find in archives, and they can get lost in long rambling responses, like
>>> mine!
>>>
>>>
>>> Best,
>>>
>>> Jennifer
>>>
>>>
>>>
>>>
>>> -----Original Message-----
>>>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>>>> Behalf Of Sarah Ferguson
>>>> Sent: Tuesday, 26 September 2017 8:04 AM
>>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>>> Subject: [WebAIM] best practices in accessibility coding questions
>>>>
>>>> I have a couple of questions from our developer that I could not answer.
>>>> Any thoughts?
>>>>
>>>>
>>>> - Quotes:
>>>>
>>>> We have a large, stylized quotation mark to signal a pull quote on some
>>>> pages. At the moment we have it marked up as a quotation in the code. Our
>>>> developer asks, "
>>>> would it be equally acceptable to include the curly quote (“) in
>>>> the HTML and style that with CSS?"
>>>>
>>>>
>>>> - In our menus (left nav, top menu, and hamburger menu) on one of our
>>>> sites, VO is reading "1 item" for each menu, because it considers
>>>> each 1
>>>> list of X number of items. On other sites, it reads the number of
>>>> items in
>>>> the "list" instead. I would think the latter is more helpful, as the
>>>> user
>>>> will want to know how many items s/he will be encountering. I've
>>>> also heard
>>>> that the menu must be marked as a list. How would we go about both
>>>> marking
>>>> it as a list and having VO say the number of items in the list? Our
>>>> developer is able to do one or the other. Also, is this the approach
>>>> you
>>>> could recommend or do you have alternatives?
>>>>
>>>>
>>>> Thanks!
>>>> Sarah
>>>> >>>> >>>> archives at http://webaim.org/discussion/archives
>>>> >>>>
>>>> >>>> >>>> >>>> >>>>
>>>
>>> >>> >>> >>> >>>
>>
>>
> > > >