E-mail List Archives

Search E-mail List Archives for

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

From: Angela French
Date: Thu, Nov 01 2012 4:14PM
Subject: Please test our modal popups on test page
No previous message | Next message →

Hello,
I now have a test page with public access and would be very grateful if you'd take a look. Specifically, I'm concerned about any accessibility issues on the modal popups. Here is the link: http://168.156.9.250/ibestprograms/ and some questions I thought of are listed below.

The demo content and data on the page consists of:

* 5 select lists

* Search and Reset buttons

* Results table (the only data available for this demo is shown by default). The table consist of 6 columns. The Institution, I-BEST Programs, Contact and Offerings columns have links which open a modal popup.



My questions:

1. Can the modal popups be perceived?

2. Can you tell when you have reached the end of the content in the modal popup? Or is the content in the popup indistinct from the following content on the parent page?

3. Can you exit the popup via the "close" link or via keyboard?

4. Having exited from the popup, are you returned to the exact spot in the main content where you left off before activating the popup?

5. In the Contact popup, can you activate the email link?

6. In the Offering popup, a table is presented with 5 columns and 2 rows. Some of the data cells contain an icon of a checkmark. If you are able to view the source code for this table, you will see that Bootstrap uses some odd code (at least it is to me!) : <div style="text-align:center;"><i class="icon-ok"></i></div>. The CSS for this is a background image so I'm assuming there is no way for this checkmark icon to be perceivable.

Again, many thanks!

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com/

From: Lucy Greco
Date: Thu, Nov 01 2012 4:24PM
Subject: Re: Please test our modal popups on test page
← Previous message | Next message →

hello:
when i click the link jaws 13 does not indacate that any thing
happend. how ever as i new to look i found the content at the bottom
of the page. the close did remove the content but i did not test the
mailto link

On 11/1/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
> I now have a test page with public access and would be very grateful if
> you'd take a look. Specifically, I'm concerned about any accessibility
> issues on the modal popups. Here is the link:
> http://168.156.9.250/ibestprograms/ and some questions I thought of are
> listed below.
>
> The demo content and data on the page consists of:
>
> * 5 select lists
>
> * Search and Reset buttons
>
> * Results table (the only data available for this demo is shown by
> default). The table consist of 6 columns. The Institution, I-BEST
> Programs, Contact and Offerings columns have links which open a modal
> popup.
>
>
>
> My questions:
>
> 1. Can the modal popups be perceived?
>
> 2. Can you tell when you have reached the end of the content in the
> modal popup? Or is the content in the popup indistinct from the following
> content on the parent page?
>
> 3. Can you exit the popup via the "close" link or via keyboard?
>
> 4. Having exited from the popup, are you returned to the exact spot in
> the main content where you left off before activating the popup?
>
> 5. In the Contact popup, can you activate the email link?
>
> 6. In the Offering popup, a table is presented with 5 columns and 2
> rows. Some of the data cells contain an icon of a checkmark. If you are
> able to view the source code for this table, you will see that Bootstrap
> uses some odd code (at least it is to me!) : <div
> style="text-align:center;"><i class="icon-ok"></i></div>. The CSS for this
> is a background image so I'm assuming there is no way for this checkmark
> icon to be perceivable.
>
> Again, many thanks!
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED =
> http://www.checkoutacollege.com/
>
> > > >


--
Lucia Greco
Web Access Analyst
IST-Campus Technology Services
University of California, Berkeley
(510) 289-6008
http://webaccess.berkeley.edu

From: Bryan Garaventa
Date: Thu, Nov 01 2012 5:55PM
Subject: Re: Please test our modal popups on test page
← Previous message | Next message →

Regarding the offering modals
Focus doesn't move to the beginning of the content when it appears.
The beginning and ending boundaries of the dialog are not conveyed.
The background content is not hidden from screen reader users.
The Close icon is not keyboard accessible.
Table checkmark icons have no textual equivalents for screen readers.

Contact modal:
The email is fine.

Returned when closed, yes

Why is role=tooltip on the body tag of the offering iframe document?


----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 01, 2012 3:14 PM
Subject: [WebAIM] Please test our modal popups on test page


> Hello,
> I now have a test page with public access and would be very grateful if
> you'd take a look. Specifically, I'm concerned about any accessibility
> issues on the modal popups. Here is the link:
> http://168.156.9.250/ibestprograms/ and some questions I thought of are
> listed below.
>
> The demo content and data on the page consists of:
>
> * 5 select lists
>
> * Search and Reset buttons
>
> * Results table (the only data available for this demo is shown by
> default). The table consist of 6 columns. The Institution, I-BEST
> Programs, Contact and Offerings columns have links which open a modal
> popup.
>
>
>
> My questions:
>
> 1. Can the modal popups be perceived?
>
> 2. Can you tell when you have reached the end of the content in the
> modal popup? Or is the content in the popup indistinct from the following
> content on the parent page?
>
> 3. Can you exit the popup via the "close" link or via keyboard?
>
> 4. Having exited from the popup, are you returned to the exact spot
> in the main content where you left off before activating the popup?
>
> 5. In the Contact popup, can you activate the email link?
>
> 6. In the Offering popup, a table is presented with 5 columns and 2
> rows. Some of the data cells contain an icon of a checkmark. If you are
> able to view the source code for this table, you will see that Bootstrap
> uses some odd code (at least it is to me!) : <div
> style="text-align:center;"><i class="icon-ok"></i></div>. The CSS for
> this is a background image so I'm assuming there is no way for this
> checkmark icon to be perceivable.
>
> Again, many thanks!
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED =
> http://www.checkoutacollege.com/
>
> > >

From: Angela French
Date: Thu, Nov 01 2012 6:11PM
Subject: Re: Please test our modal popups on test page
← Previous message | Next message →

Bryan,
Thank you for testing.

Where in the modal content is the focus when the modal first appears? I think that this maybe something that can be fixed with javascript. (In looking at it again, it appears the developer put focus on the email. I'll get that changed. I think he must have done that for keyboard users.)

If the ending boundary is not convey, what are you experiencing? Does the screen reader keep reading the parent content page? Or are you just left wondering "what now?" Do you have any suggestions on an appropriate indicator for ending boundary? Are you thinking of some text?

How did you close the box? When I keyboard tested, I used the escape key which returned me to the parent content.

Regarding the role="tooltip". I'm not sure if that is something that Bootstrap inserts on its modal boxes, or something my developer put in. I'm not the developer. I'm on the development team and tasked with reviewing usability/accessibility.


>Subject: Re: [WebAIM] Please test our modal popups on test page
>
>Regarding the offering modals
>Focus doesn't move to the beginning of the content when it appears.
>The beginning and ending boundaries of the dialog are not conveyed.
>The background content is not hidden from screen reader users.
> The Close icon is not keyboard accessible.
>Table checkmark icons have no textual equivalents for screen readers.
>
>Contact modal:
>The email is fine.
>
>Returned when closed, yes
>
>Why is role=tooltip on the body tag of the offering iframe document?
>
>
>----- Original Message -----
>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>To: < = EMAIL ADDRESS REMOVED = >
>Sent: Thursday, November 01, 2012 3:14 PM
>Subject: [WebAIM] Please test our modal popups on test page
>
>
>> Hello,
>> I now have a test page with public access and would be very grateful if
>> you'd take a look. Specifically, I'm concerned about any accessibility
>> issues on the modal popups. Here is the link:
>> http://168.156.9.250/ibestprograms/ and some questions I thought of are
>> listed below.
>>
>> The demo content and data on the page consists of:
>>
>> * 5 select lists
>>
>> * Search and Reset buttons
>>
>> * Results table (the only data available for this demo is shown by
>> default). The table consist of 6 columns. The Institution, I-BEST
>> Programs, Contact and Offerings columns have links which open a modal
>> popup.
>>
>>
>>
>> My questions:
>>
>> 1. Can the modal popups be perceived?
>>
>> 2. Can you tell when you have reached the end of the content in the
>> modal popup? Or is the content in the popup indistinct from the following
>> content on the parent page?
>>
>> 3. Can you exit the popup via the "close" link or via keyboard?
>>
>> 4. Having exited from the popup, are you returned to the exact spot
>> in the main content where you left off before activating the popup?
>>
>> 5. In the Contact popup, can you activate the email link?
>>
>> 6. In the Offering popup, a table is presented with 5 columns and 2
>> rows. Some of the data cells contain an icon of a checkmark. If you are
>> able to view the source code for this table, you will see that Bootstrap
>> uses some odd code (at least it is to me!) : <div
>> style="text-align:center;"><i class="icon-ok"></i></div>. The CSS for
>> this is a background image so I'm assuming there is no way for this
>> checkmark icon to be perceivable.
>>
>> Again, many thanks!
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> = EMAIL ADDRESS REMOVED =
>> http://www.checkoutacollege.com/
>>
>> >> >> >
>>>

From: Angela French
Date: Thu, Nov 01 2012 6:14PM
Subject: Re: Please test our modal popups on test page
← Previous message | Next message →

To anyone who is testing for me, can you please tell me what AT/version you used?

Thanks, Angela French

>Subject: Re: [WebAIM] Please test our modal popups on test page
>
>Regarding the offering modals
>Focus doesn't move to the beginning of the content when it appears.
>The beginning and ending boundaries of the dialog are not conveyed.
>The background content is not hidden from screen reader users.
> The Close icon is not keyboard accessible.
>Table checkmark icons have no textual equivalents for screen readers.
>
>Contact modal:
>The email is fine.
>
>Returned when closed, yes
>
>Why is role=tooltip on the body tag of the offering iframe document?
>
>
>----- Original Message -----
>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>To: < = EMAIL ADDRESS REMOVED = >
>Sent: Thursday, November 01, 2012 3:14 PM
>Subject: [WebAIM] Please test our modal popups on test page
>
>
>> Hello,
>> I now have a test page with public access and would be very grateful if
>> you'd take a look. Specifically, I'm concerned about any accessibility
>> issues on the modal popups. Here is the link:
>> http://168.156.9.250/ibestprograms/ and some questions I thought of are
>> listed below.
>>
>> The demo content and data on the page consists of:
>>
>> * 5 select lists
>>
>> * Search and Reset buttons
>>
>> * Results table (the only data available for this demo is shown by
>> default). The table consist of 6 columns. The Institution, I-BEST
>> Programs, Contact and Offerings columns have links which open a modal
>> popup.
>>
>>
>>
>> My questions:
>>
>> 1. Can the modal popups be perceived?
>>
>> 2. Can you tell when you have reached the end of the content in the
>> modal popup? Or is the content in the popup indistinct from the following
>> content on the parent page?
>>
>> 3. Can you exit the popup via the "close" link or via keyboard?
>>
>> 4. Having exited from the popup, are you returned to the exact spot
>> in the main content where you left off before activating the popup?
>>
>> 5. In the Contact popup, can you activate the email link?
>>
>> 6. In the Offering popup, a table is presented with 5 columns and 2
>> rows. Some of the data cells contain an icon of a checkmark. If you are
>> able to view the source code for this table, you will see that Bootstrap
>> uses some odd code (at least it is to me!) : <div
>> style="text-align:center;"><i class="icon-ok"></i></div>. The CSS for
>> this is a background image so I'm assuming there is no way for this
>> checkmark icon to be perceivable.
>>
>> Again, many thanks!
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> = EMAIL ADDRESS REMOVED =
>> http://www.checkoutacollege.com/
>>
>> >> >> >
>>>

From: Angela French
Date: Thu, Nov 01 2012 6:16PM
Subject: Re: Please test our modal popups on test page
← Previous message | Next message →

Lucy,
Can you tell me what AT/version you used?
Thanks, Angela FRench

>-----Original Message-----
>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Lucy Greco
>Sent: Thursday, November 01, 2012 3:25 PM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] Please test our modal popups on test page
>
>hello:
> when i click the link jaws 13 does not indacate that any thing happend. how
>ever as i new to look i found the content at the bottom of the page. the close
>did remove the content but i did not test the mailto link
>
>On 11/1/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>> Hello,
>> I now have a test page with public access and would be very grateful
>> if you'd take a look. Specifically, I'm concerned about any
>> accessibility issues on the modal popups. Here is the link:
>> http://168.156.9.250/ibestprograms/ and some questions I thought of
>> are listed below.
>>
>> The demo content and data on the page consists of:
>>
>> * 5 select lists
>>
>> * Search and Reset buttons
>>
>> * Results table (the only data available for this demo is shown by
>> default). The table consist of 6 columns. The Institution, I-BEST
>> Programs, Contact and Offerings columns have links which open a modal
>> popup.
>>
>>
>>
>> My questions:
>>
>> 1. Can the modal popups be perceived?
>>
>> 2. Can you tell when you have reached the end of the content in the
>> modal popup? Or is the content in the popup indistinct from the
>> following content on the parent page?
>>
>> 3. Can you exit the popup via the "close" link or via keyboard?
>>
>> 4. Having exited from the popup, are you returned to the exact spot in
>> the main content where you left off before activating the popup?
>>
>> 5. In the Contact popup, can you activate the email link?
>>
>> 6. In the Offering popup, a table is presented with 5 columns and 2
>> rows. Some of the data cells contain an icon of a checkmark. If you
>> are able to view the source code for this table, you will see that
>> Bootstrap uses some odd code (at least it is to me!) : <div
>> style="text-align:center;"><i class="icon-ok"></i></div>. The CSS for
>> this is a background image so I'm assuming there is no way for this
>> checkmark icon to be perceivable.
>>
>> Again, many thanks!
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> = EMAIL ADDRESS REMOVED =
>> http://www.checkoutacollege.com/
>>
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>>
>
>
>--
>Lucia Greco
>Web Access Analyst
>IST-Campus Technology Services
>University of California, Berkeley
>(510) 289-6008
>http://webaccess.berkeley.edu
>>>messages to = EMAIL ADDRESS REMOVED =

From: Lucy Greco
Date: Thu, Nov 01 2012 6:19PM
Subject: Re: Please test our modal popups on test page
← Previous message | Next message →

i used jaws 13 and windos 7 i.e. 9

On 11/1/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Lucy,
> Can you tell me what AT/version you used?
> Thanks, Angela FRench
>
>>-----Original Message-----
>>From: = EMAIL ADDRESS REMOVED = [mailto:webaim-forum-
>> = EMAIL ADDRESS REMOVED = ] On Behalf Of Lucy Greco
>>Sent: Thursday, November 01, 2012 3:25 PM
>>To: WebAIM Discussion List
>>Subject: Re: [WebAIM] Please test our modal popups on test page
>>
>>hello:
>> when i click the link jaws 13 does not indacate that any thing happend.
>> how
>>ever as i new to look i found the content at the bottom of the page. the
>> close
>>did remove the content but i did not test the mailto link
>>
>>On 11/1/12, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>>> Hello,
>>> I now have a test page with public access and would be very grateful
>>> if you'd take a look. Specifically, I'm concerned about any
>>> accessibility issues on the modal popups. Here is the link:
>>> http://168.156.9.250/ibestprograms/ and some questions I thought of
>>> are listed below.
>>>
>>> The demo content and data on the page consists of:
>>>
>>> * 5 select lists
>>>
>>> * Search and Reset buttons
>>>
>>> * Results table (the only data available for this demo is shown
>>> by
>>> default). The table consist of 6 columns. The Institution, I-BEST
>>> Programs, Contact and Offerings columns have links which open a modal
>>> popup.
>>>
>>>
>>>
>>> My questions:
>>>
>>> 1. Can the modal popups be perceived?
>>>
>>> 2. Can you tell when you have reached the end of the content in
>>> the
>>> modal popup? Or is the content in the popup indistinct from the
>>> following content on the parent page?
>>>
>>> 3. Can you exit the popup via the "close" link or via keyboard?
>>>
>>> 4. Having exited from the popup, are you returned to the exact spot
>>> in
>>> the main content where you left off before activating the popup?
>>>
>>> 5. In the Contact popup, can you activate the email link?
>>>
>>> 6. In the Offering popup, a table is presented with 5 columns and
>>> 2
>>> rows. Some of the data cells contain an icon of a checkmark. If you
>>> are able to view the source code for this table, you will see that
>>> Bootstrap uses some odd code (at least it is to me!) : <div
>>> style="text-align:center;"><i class="icon-ok"></i></div>. The CSS for
>>> this is a background image so I'm assuming there is no way for this
>>> checkmark icon to be perceivable.
>>>
>>> Again, many thanks!
>>>
>>> Angela French
>>> Internet Specialist
>>> State Board for Community and Technical Colleges
>>> 360-704-4316
>>> = EMAIL ADDRESS REMOVED =
>>> http://www.checkoutacollege.com/
>>>
>>> >>> >>> list messages to = EMAIL ADDRESS REMOVED =
>>>
>>
>>
>>--
>>Lucia Greco
>>Web Access Analyst
>>IST-Campus Technology Services
>>University of California, Berkeley
>>(510) 289-6008
>>http://webaccess.berkeley.edu
>>>>>>messages to = EMAIL ADDRESS REMOVED =
> > > >


--
Lucia Greco
Web Access Analyst
IST-Campus Technology Services
University of California, Berkeley
(510) 289-6008
http://webaccess.berkeley.edu

From: Bryan Garaventa
Date: Thu, Nov 01 2012 6:42PM
Subject: Re: Please test our modal popups on test page
← Previous message | Next message →

Focus is on the body tag, meaning that it has no focus anywhere after the
modal is activated.

JS can be used to set focus via focus() if the focused element is
focusable, E.G via tabindex=-1 on a static element such as <div
tabindex="-1" class="offscreen">Modal Start</div>, and the end should
include the opposite text for the end of the dialog.

If you use aria-hidden on the child nodes of the body tag, you can hide all
of the background content from screen readers, which prevents confusion.

Arrowing past simply stops at the bottom of the page, which is normal. It's
cleaner to hide the background though, so everything above the dialog is
hidden.

Escape is a convention for closing, but not always intuitive. The Close icon
is in a div at the end, but this has no markup to make it keyboard
accessible.
E.G

<DIV style="FLOAT: left" idËoxClose
jQuery18207462105235303944="29">close</DIV>

To make it keyboard accessible, you would need to add something like
role="button" and tabindex="0", then add a keyDown handler to trigger using
Return (13).

Tested using JAWS13 in IE8.


----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, November 01, 2012 5:11 PM
Subject: Re: [WebAIM] Please test our modal popups on test page


> Bryan,
> Thank you for testing.
>
> Where in the modal content is the focus when the modal first appears? I
> think that this maybe something that can be fixed with javascript. (In
> looking at it again, it appears the developer put focus on the email.
> I'll get that changed. I think he must have done that for keyboard users.)
>
> If the ending boundary is not convey, what are you experiencing? Does the
> screen reader keep reading the parent content page? Or are you just left
> wondering "what now?" Do you have any suggestions on an appropriate
> indicator for ending boundary? Are you thinking of some text?
>
> How did you close the box? When I keyboard tested, I used the escape key
> which returned me to the parent content.
>
> Regarding the role="tooltip". I'm not sure if that is something that
> Bootstrap inserts on its modal boxes, or something my developer put in.
> I'm not the developer. I'm on the development team and tasked with
> reviewing usability/accessibility.
>
>
>>Subject: Re: [WebAIM] Please test our modal popups on test page
>>
>>Regarding the offering modals
>>Focus doesn't move to the beginning of the content when it appears.
>>The beginning and ending boundaries of the dialog are not conveyed.
>>The background content is not hidden from screen reader users.
>> The Close icon is not keyboard accessible.
>>Table checkmark icons have no textual equivalents for screen readers.
>>
>>Contact modal:
>>The email is fine.
>>
>>Returned when closed, yes
>>
>>Why is role=tooltip on the body tag of the offering iframe document?
>>
>>
>>----- Original Message -----
>>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>>To: < = EMAIL ADDRESS REMOVED = >
>>Sent: Thursday, November 01, 2012 3:14 PM
>>Subject: [WebAIM] Please test our modal popups on test page
>>
>>
>>> Hello,
>>> I now have a test page with public access and would be very grateful if
>>> you'd take a look. Specifically, I'm concerned about any accessibility
>>> issues on the modal popups. Here is the link:
>>> http://168.156.9.250/ibestprograms/ and some questions I thought of are
>>> listed below.
>>>
>>> The demo content and data on the page consists of:
>>>
>>> * 5 select lists
>>>
>>> * Search and Reset buttons
>>>
>>> * Results table (the only data available for this demo is shown
>>> by
>>> default). The table consist of 6 columns. The Institution, I-BEST
>>> Programs, Contact and Offerings columns have links which open a modal
>>> popup.
>>>
>>>
>>>
>>> My questions:
>>>
>>> 1. Can the modal popups be perceived?
>>>
>>> 2. Can you tell when you have reached the end of the content in
>>> the
>>> modal popup? Or is the content in the popup indistinct from the
>>> following
>>> content on the parent page?
>>>
>>> 3. Can you exit the popup via the "close" link or via keyboard?
>>>
>>> 4. Having exited from the popup, are you returned to the exact
>>> spot
>>> in the main content where you left off before activating the popup?
>>>
>>> 5. In the Contact popup, can you activate the email link?
>>>
>>> 6. In the Offering popup, a table is presented with 5 columns and
>>> 2
>>> rows. Some of the data cells contain an icon of a checkmark. If you
>>> are
>>> able to view the source code for this table, you will see that Bootstrap
>>> uses some odd code (at least it is to me!) : <div
>>> style="text-align:center;"><i class="icon-ok"></i></div>. The CSS for
>>> this is a background image so I'm assuming there is no way for this
>>> checkmark icon to be perceivable.
>>>
>>> Again, many thanks!
>>>
>>> Angela French
>>> Internet Specialist
>>> State Board for Community and Technical Colleges
>>> 360-704-4316
>>> = EMAIL ADDRESS REMOVED =
>>> http://www.checkoutacollege.com/
>>>
>>> >>> >>> >>
>>>>>>> > >

From: Angela French
Date: Fri, Nov 02 2012 10:45AM
Subject: Re: Please test our modal popups on test page
← Previous message | Next message →

Bryan (and others) - regarding the complete hiding of content on the main page. I don't think this will be possible for us. In the example of the Contact modal box - the text "Contact Information" is actually part of the main page. The data (the person's name, phone, email) is pulled in dynamically and is presented in an iframe.

We've made some changes/improvements. Could it please be tested again? I don't know if we can make it perfect. The use of Bootstrap, and the time constraints we are under, make some changes problematic. My main concern is making the modal content perceivable, and that the functionality of the modal does not create any barriers in the use of the application by users of AT or keyboard.

http://168.156.9.250/ibestprograms/

Thank you,
Angela French


>Subject: Re: [WebAIM] Please test our modal popups on test page
>
>Focus is on the body tag, meaning that it has no focus anywhere after the
>modal is activated.
>
>JS can be used to set focus via focus() if the focused element is focusable,
>E.G via tabindex=-1 on a static element such as <div tabindex="-1"
>class="offscreen">Modal Start</div>, and the end should include the
>opposite text for the end of the dialog.
>
>If you use aria-hidden on the child nodes of the body tag, you can hide all of
>the background content from screen readers, which prevents confusion.
>
>Arrowing past simply stops at the bottom of the page, which is normal. It's
>cleaner to hide the background though, so everything above the dialog is
>hidden.
>
>Escape is a convention for closing, but not always intuitive. The Close icon is
>in a div at the end, but this has no markup to make it keyboard accessible.
>E.G
>
><DIV style="FLOAT: left" idËoxClose
>jQuery18207462105235303944="29">close</DIV>
>
>To make it keyboard accessible, you would need to add something like
>role="button" and tabindex="0", then add a keyDown handler to trigger using
>Return (13).
>
>Tested using JAWS13 in IE8.
>
>
>----- Original Message -----
>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>Sent: Thursday, November 01, 2012 5:11 PM
>Subject: Re: [WebAIM] Please test our modal popups on test page
>
>
>> Bryan,
>> Thank you for testing.
>>
>> Where in the modal content is the focus when the modal first appears? I
>> think that this maybe something that can be fixed with javascript. (In
>> looking at it again, it appears the developer put focus on the email.
>> I'll get that changed. I think he must have done that for keyboard users.)
>>
>> If the ending boundary is not convey, what are you experiencing? Does the
>> screen reader keep reading the parent content page? Or are you just left
>> wondering "what now?" Do you have any suggestions on an appropriate
>> indicator for ending boundary? Are you thinking of some text?
>>
>> How did you close the box? When I keyboard tested, I used the escape key
>> which returned me to the parent content.
>>
>> Regarding the role="tooltip". I'm not sure if that is something that
>> Bootstrap inserts on its modal boxes, or something my developer put in.
>> I'm not the developer. I'm on the development team and tasked with
>> reviewing usability/accessibility.
>>
>>
>>>Subject: Re: [WebAIM] Please test our modal popups on test page
>>>
>>>Regarding the offering modals
>>>Focus doesn't move to the beginning of the content when it appears.
>>>The beginning and ending boundaries of the dialog are not conveyed.
>>>The background content is not hidden from screen reader users.
>>> The Close icon is not keyboard accessible.
>>>Table checkmark icons have no textual equivalents for screen readers.
>>>
>>>Contact modal:
>>>The email is fine.
>>>
>>>Returned when closed, yes
>>>
>>>Why is role=tooltip on the body tag of the offering iframe document?
>>>
>>>
>>>----- Original Message -----
>>>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>>>To: < = EMAIL ADDRESS REMOVED = >
>>>Sent: Thursday, November 01, 2012 3:14 PM
>>>Subject: [WebAIM] Please test our modal popups on test page
>>>
>>>
>>>> Hello,
>>>> I now have a test page with public access and would be very grateful if
>>>> you'd take a look. Specifically, I'm concerned about any accessibility
>>>> issues on the modal popups. Here is the link:
>>>> http://168.156.9.250/ibestprograms/ and some questions I thought of are
>>>> listed below.
>>>>
>>>> The demo content and data on the page consists of:
>>>>
>>>> * 5 select lists
>>>>
>>>> * Search and Reset buttons
>>>>
>>>> * Results table (the only data available for this demo is shown
>>>> by
>>>> default). The table consist of 6 columns. The Institution, I-BEST
>>>> Programs, Contact and Offerings columns have links which open a modal
>>>> popup.
>>>>
>>>>
>>>>
>>>> My questions:
>>>>
>>>> 1. Can the modal popups be perceived?
>>>>
>>>> 2. Can you tell when you have reached the end of the content in
>>>> the
>>>> modal popup? Or is the content in the popup indistinct from the
>>>> following
>>>> content on the parent page?
>>>>
>>>> 3. Can you exit the popup via the "close" link or via keyboard?
>>>>
>>>> 4. Having exited from the popup, are you returned to the exact
>>>> spot
>>>> in the main content where you left off before activating the popup?
>>>>
>>>> 5. In the Contact popup, can you activate the email link?
>>>>
>>>> 6. In the Offering popup, a table is presented with 5 columns and
>>>> 2
>>>> rows. Some of the data cells contain an icon of a checkmark. If you
>>>> are
>>>> able to view the source code for this table, you will see that Bootstrap
>>>> uses some odd code (at least it is to me!) : <div
>>>> style="text-align:center;"><i class="icon-ok"></i></div>. The CSS for
>>>> this is a background image so I'm assuming there is no way for this
>>>> checkmark icon to be perceivable.
>>>>
>>>> Again, many thanks!
>>>>
>>>> Angela French
>>>> Internet Specialist
>>>> State Board for Community and Technical Colleges
>>>> 360-704-4316
>>>> = EMAIL ADDRESS REMOVED =
>>>> http://www.checkoutacollege.com/
>>>>
>>>> >>>> >>>> >>>
>>>>>>>>>>> >> >> >
>>>

From: Bryan Garaventa
Date: Fri, Nov 02 2012 11:45AM
Subject: Re: Please test our modal popups on test page
← Previous message | No next message

Since you are using jQuery, all that you need do to make the background
hidden in this case, is run the following statement:

$('body > *').not('#colorbox').attr('aria-hidden', 'true');

Then when the dialog closes, run:

$('body > *').not('#colorbox').attr('aria-hidden', 'false');

The string '#colorbox' prevents the modal from being hidden at the same
time.

You also have an H1 tag at the bottom of the page, which is non-intuitive.
This should be before the dialog content in the reading order, and
preferably this is what focus would be set to when it opens.

'Modal Start' is a link, which is confusing because it doesn't do anything,
also this is within the iframe, which only constitutes part of the modal,
and should be on the outer page at the top of the modal container tag as a
Div or Span, so it isn't in the tab order as an active element.

Plus, if 'Modal Start is added, 'Modal End' should also be added at the
bottom of the container to denote the boundaries. This is valuable in this
case, because the modal contains content inside the iframe and outside of it
as well, so it can't be assumed that the frame content is the only modal
content.


----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, November 02, 2012 9:45 AM
Subject: Re: [WebAIM] Please test our modal popups on test page


> Bryan (and others) - regarding the complete hiding of content on the main
> page. I don't think this will be possible for us. In the example of the
> Contact modal box - the text "Contact Information" is actually part of the
> main page. The data (the person's name, phone, email) is pulled in
> dynamically and is presented in an iframe.
>
> We've made some changes/improvements. Could it please be tested again? I
> don't know if we can make it perfect. The use of Bootstrap, and the time
> constraints we are under, make some changes problematic. My main concern
> is making the modal content perceivable, and that the functionality of the
> modal does not create any barriers in the use of the application by users
> of AT or keyboard.
>
> http://168.156.9.250/ibestprograms/
>
> Thank you,
> Angela French
>
>
>>Subject: Re: [WebAIM] Please test our modal popups on test page
>>
>>Focus is on the body tag, meaning that it has no focus anywhere after the
>>modal is activated.
>>
>>JS can be used to set focus via focus() if the focused element is
>>focusable,
>>E.G via tabindex=-1 on a static element such as <div tabindex="-1"
>>class="offscreen">Modal Start</div>, and the end should include the
>>opposite text for the end of the dialog.
>>
>>If you use aria-hidden on the child nodes of the body tag, you can hide
>>all of
>>the background content from screen readers, which prevents confusion.
>>
>>Arrowing past simply stops at the bottom of the page, which is normal.
>>It's
>>cleaner to hide the background though, so everything above the dialog is
>>hidden.
>>
>>Escape is a convention for closing, but not always intuitive. The Close
>>icon is
>>in a div at the end, but this has no markup to make it keyboard
>>accessible.
>>E.G
>>
>><DIV style="FLOAT: left" idËoxClose
>>jQuery18207462105235303944="29">close</DIV>
>>
>>To make it keyboard accessible, you would need to add something like
>>role="button" and tabindex="0", then add a keyDown handler to trigger
>>using
>>Return (13).
>>
>>Tested using JAWS13 in IE8.
>>
>>
>>----- Original Message -----
>>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>>To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>>Sent: Thursday, November 01, 2012 5:11 PM
>>Subject: Re: [WebAIM] Please test our modal popups on test page
>>
>>
>>> Bryan,
>>> Thank you for testing.
>>>
>>> Where in the modal content is the focus when the modal first appears? I
>>> think that this maybe something that can be fixed with javascript. (In
>>> looking at it again, it appears the developer put focus on the email.
>>> I'll get that changed. I think he must have done that for keyboard
>>> users.)
>>>
>>> If the ending boundary is not convey, what are you experiencing? Does
>>> the
>>> screen reader keep reading the parent content page? Or are you just
>>> left
>>> wondering "what now?" Do you have any suggestions on an appropriate
>>> indicator for ending boundary? Are you thinking of some text?
>>>
>>> How did you close the box? When I keyboard tested, I used the escape
>>> key
>>> which returned me to the parent content.
>>>
>>> Regarding the role="tooltip". I'm not sure if that is something that
>>> Bootstrap inserts on its modal boxes, or something my developer put in.
>>> I'm not the developer. I'm on the development team and tasked with
>>> reviewing usability/accessibility.
>>>
>>>
>>>>Subject: Re: [WebAIM] Please test our modal popups on test page
>>>>
>>>>Regarding the offering modals
>>>>Focus doesn't move to the beginning of the content when it appears.
>>>>The beginning and ending boundaries of the dialog are not conveyed.
>>>>The background content is not hidden from screen reader users.
>>>> The Close icon is not keyboard accessible.
>>>>Table checkmark icons have no textual equivalents for screen readers.
>>>>
>>>>Contact modal:
>>>>The email is fine.
>>>>
>>>>Returned when closed, yes
>>>>
>>>>Why is role=tooltip on the body tag of the offering iframe document?
>>>>
>>>>
>>>>----- Original Message -----
>>>>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>>>>To: < = EMAIL ADDRESS REMOVED = >
>>>>Sent: Thursday, November 01, 2012 3:14 PM
>>>>Subject: [WebAIM] Please test our modal popups on test page
>>>>
>>>>
>>>>> Hello,
>>>>> I now have a test page with public access and would be very grateful
>>>>> if
>>>>> you'd take a look. Specifically, I'm concerned about any
>>>>> accessibility
>>>>> issues on the modal popups. Here is the link:
>>>>> http://168.156.9.250/ibestprograms/ and some questions I thought of
>>>>> are
>>>>> listed below.
>>>>>
>>>>> The demo content and data on the page consists of:
>>>>>
>>>>> * 5 select lists
>>>>>
>>>>> * Search and Reset buttons
>>>>>
>>>>> * Results table (the only data available for this demo is
>>>>> shown
>>>>> by
>>>>> default). The table consist of 6 columns. The Institution, I-BEST
>>>>> Programs, Contact and Offerings columns have links which open a modal
>>>>> popup.
>>>>>
>>>>>
>>>>>
>>>>> My questions:
>>>>>
>>>>> 1. Can the modal popups be perceived?
>>>>>
>>>>> 2. Can you tell when you have reached the end of the content in
>>>>> the
>>>>> modal popup? Or is the content in the popup indistinct from the
>>>>> following
>>>>> content on the parent page?
>>>>>
>>>>> 3. Can you exit the popup via the "close" link or via keyboard?
>>>>>
>>>>> 4. Having exited from the popup, are you returned to the exact
>>>>> spot
>>>>> in the main content where you left off before activating the popup?
>>>>>
>>>>> 5. In the Contact popup, can you activate the email link?
>>>>>
>>>>> 6. In the Offering popup, a table is presented with 5 columns
>>>>> and
>>>>> 2
>>>>> rows. Some of the data cells contain an icon of a checkmark. If you
>>>>> are
>>>>> able to view the source code for this table, you will see that
>>>>> Bootstrap
>>>>> uses some odd code (at least it is to me!) : <div
>>>>> style="text-align:center;"><i class="icon-ok"></i></div>. The CSS for
>>>>> this is a background image so I'm assuming there is no way for this
>>>>> checkmark icon to be perceivable.
>>>>>
>>>>> Again, many thanks!
>>>>>
>>>>> Angela French
>>>>> Internet Specialist
>>>>> State Board for Community and Technical Colleges
>>>>> 360-704-4316
>>>>> = EMAIL ADDRESS REMOVED =
>>>>> http://www.checkoutacollege.com/
>>>>>
>>>>> >>>>> >>>>> >>>>
>>>>>>>>>>>>>>> >>> >>> >>
>>>>>>> > >