WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Please test our modal popups on test page

for

From: Angela French
Date: Nov 1, 2012 6:11PM

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 REMOVED> >
>To: < <EMAIL 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 REMOVED>
>> http://www.checkoutacollege.com/
>>
>> >> >> >
>>>