E-mail List Archives

Search E-mail List Archives for

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

From: Jennifer Smith
Date: Tue, Sep 10 2013 7:22AM
Subject: Javascript Lightbox & Accessibility
No previous message | Next message →

Hi!

I'm testing a page for accessibility and am newish to working with accessibility and javascript.

Here's the page I'm testing with a lightbox code: http://www.cdc.gov/nchhstp/testing_sandbox/wide.html.

I've done what I can do (with my HTML and CSS skills) to make the same content accessible without javascript - to download the PDFs.

I'm looking for tips, ideas, suggestions for making it better. Would some ARIA roles help here? If so, where do I look for resources on improving this feature for accessibility?

Thanks,
Jen

From: Bryan Garaventa
Date: Tue, Sep 10 2013 10:53AM
Subject: Re: Javascript Lightbox & Accessibility
← Previous message | Next message →

The only ARIA attribute that really is of importance for modals/lightboxes
is aria-hidden, since this will hide the background content from screen
reader users in IE, FF, Chrome, and Safari.

The following is excerpted from the AccDC Technical Style Guide at
http://whatsock.com/tsg
under Modals.

Expected behaviors: Ensure that the background content is hidden from screen
reader users, ensure that the beginning and ending boundaries are conveyed
to screen reader users, make sure the modal can be closed from the keyboard,
and ensure that circular tabbing confines keyboard focus within the modal
content.

Live demo:
http://whatsock.com/tsg/Coding%20Arena/Modals/Modal%20(Internal%20Content)/demo.htm
If you have a DOM utility such as Firebug, you can see what the attributes
are doing when the modal is opened and closed.

Additional ARIA role and compatibility differences are documented on the TSG
page as well.


----- Original Message -----
From: "Jennifer Smith" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, September 10, 2013 6:22 AM
Subject: [WebAIM] Javascript Lightbox & Accessibility


> Hi!
>
> I'm testing a page for accessibility and am newish to working with
> accessibility and javascript.
>
> Here's the page I'm testing with a lightbox code:
> http://www.cdc.gov/nchhstp/testing_sandbox/wide.html.
>
> I've done what I can do (with my HTML and CSS skills) to make the same
> content accessible without javascript - to download the PDFs.
>
> I'm looking for tips, ideas, suggestions for making it better. Would some
> ARIA roles help here? If so, where do I look for resources on improving
> this feature for accessibility?
>
> Thanks,
> Jen
>
> > >

From: Bryan Garaventa
Date: Tue, Sep 10 2013 10:58AM
Subject: Re: Javascript Lightbox & Accessibility
← Previous message | Next message →

A quick question, when you say "to make the same content accessible without
javascript", are you trying to make the lightbox work without JavaScript?

----- Original Message -----
From: "Jennifer Smith" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, September 10, 2013 6:22 AM
Subject: [WebAIM] Javascript Lightbox & Accessibility


> Hi!
>
> I'm testing a page for accessibility and am newish to working with
> accessibility and javascript.
>
> Here's the page I'm testing with a lightbox code:
> http://www.cdc.gov/nchhstp/testing_sandbox/wide.html.
>
> I've done what I can do (with my HTML and CSS skills) to make the same
> content accessible without javascript - to download the PDFs.
>
> I'm looking for tips, ideas, suggestions for making it better. Would some
> ARIA roles help here? If so, where do I look for resources on improving
> this feature for accessibility?
>
> Thanks,
> Jen
>
> > >

From: Jennifer Smith
Date: Tue, Sep 10 2013 12:46PM
Subject: Re: Javascript Lightbox & Accessibility
← Previous message | Next message →

Thank you, Bryan!

I'm trying to make sure that the same content can be downloaded without the lightbox if someone has disabled javascript, so I added the links to the PDF posters below the images. I don't intend for the lightbox to work without javascript.

Hope I communicated this well enough.

-Jen

-----Original Message-----
From: Bryan Garaventa [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, September 10, 2013 12:58 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Javascript Lightbox & Accessibility

A quick question, when you say "to make the same content accessible without javascript", are you trying to make the lightbox work without JavaScript?

----- Original Message -----
From: "Jennifer Smith" < = EMAIL ADDRESS REMOVED = >
To: < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, September 10, 2013 6:22 AM
Subject: [WebAIM] Javascript Lightbox & Accessibility


> Hi!
>
> I'm testing a page for accessibility and am newish to working with
> accessibility and javascript.
>
> Here's the page I'm testing with a lightbox code:
> http://www.cdc.gov/nchhstp/testing_sandbox/wide.html.
>
> I've done what I can do (with my HTML and CSS skills) to make the same
> content accessible without javascript - to download the PDFs.
>
> I'm looking for tips, ideas, suggestions for making it better. Would some
> ARIA roles help here? If so, where do I look for resources on improving
> this feature for accessibility?
>
> Thanks,
> Jen
>
> > >

From: Bryan Garaventa
Date: Tue, Sep 10 2013 1:41PM
Subject: Re: Javascript Lightbox & Accessibility
← Previous message | No next message

Ah, got it, thanks :)

----- Original Message -----
From: "Jennifer Smith" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, September 10, 2013 11:46 AM
Subject: Re: [WebAIM] Javascript Lightbox & Accessibility


> Thank you, Bryan!
>
> I'm trying to make sure that the same content can be downloaded without
> the lightbox if someone has disabled javascript, so I added the links to
> the PDF posters below the images. I don't intend for the lightbox to work
> without javascript.
>
> Hope I communicated this well enough.
>
> -Jen
>
> -----Original Message-----
> From: Bryan Garaventa [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Tuesday, September 10, 2013 12:58 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Javascript Lightbox & Accessibility
>
> A quick question, when you say "to make the same content accessible
> without javascript", are you trying to make the lightbox work without
> JavaScript?
>
> ----- Original Message -----
> From: "Jennifer Smith" < = EMAIL ADDRESS REMOVED = >
> To: < = EMAIL ADDRESS REMOVED = >
> Sent: Tuesday, September 10, 2013 6:22 AM
> Subject: [WebAIM] Javascript Lightbox & Accessibility
>
>
>> Hi!
>>
>> I'm testing a page for accessibility and am newish to working with
>> accessibility and javascript.
>>
>> Here's the page I'm testing with a lightbox code:
>> http://www.cdc.gov/nchhstp/testing_sandbox/wide.html.
>>
>> I've done what I can do (with my HTML and CSS skills) to make the same
>> content accessible without javascript - to download the PDFs.
>>
>> I'm looking for tips, ideas, suggestions for making it better. Would some
>> ARIA roles help here? If so, where do I look for resources on improving
>> this feature for accessibility?
>>
>> Thanks,
>> Jen
>>
>> >> >> >
>
> > >