WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: accessible slide out panel?

for

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

From: Angela French
Date: Mon, Aug 08 2016 2:00PM
Subject: accessible slide out panel?
No previous message | Next message →

Hello,
I'm hoping someone can point me to an accessible example of a side slide out box. I have seen a number of examples that have the functionality I want but I don't believe they would be accessible.
This is an example of the type of functionality I'm looking for, but this one relies on an image in the CSS so that no alt attribute can be applied.

http://www.building58.com/examples/tabSlideOut.html

Thank you.




Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Lovely, Brian (CONT)
Date: Mon, Aug 08 2016 2:09PM
Subject: Re: accessible slide out panel?
← Previous message | Next message →

Well, if that's all the content in the thing, then position the box off-screen with CSS so that it's hidden visually but exposed to screen readers, and hide the triggering element from screen readers with aria-hidden="true". Ideally, it would appear in a logical place in the code order, which should be easy enough since it's positioned absolutely, anyway.

From: Marc Solomon
Date: Mon, Aug 08 2016 3:02PM
Subject: Re: accessible slide out panel?
← Previous message | No next message

Hi Angela,

I found this code pen on the A11y Patterns site: http://codepen.io/grayghostvisuals/pen/IkmGF. It may prove useful in your research.

Best,
Marc