WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Responsive Web Design and Accessibility?

for

From: Bryan Garaventa
Date: Oct 4, 2012 11:55PM

It's important to note that visual layout, styling, and resolution
considerations have little to no impact on screen reader and keyboard
accessibility.

----- Original Message -----
From: "Ken Petri" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Thursday, October 04, 2012 7:39 PM
Subject: Re: [WebAIM] Responsive Web Design and Accessibility?


Hi Rick,

The Web Experience Toolkit has a framework/template for responsive design
that has accessibility as a specific goal:
http://wet-boew.github.com/wet-boew/demos/index-eng.html

One place that is potentially problematic with a responsive design is the
menu system. If the menus are items in a single-level unordered list and
all the responsive design is doing is stacking them at a smaller screen
resolution, there probably will be no issues. As the menus get deeper and
more complex, though, you have to come up with different strategies for how
to handle deep menus on a small screen. There are lots of possibilities.
Here is a good overview:
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

It's probably pretty clear with which of these you could run into
accessibility issues. Keeping it simple is probably the best bet -- for
example, if there are dropdowns at full width, then consider setting
sub-menus to display:none and just creating a stack of top-level items when
the resolutions get mobile width. But there are other approaches that can
be pretty accessible (try the WET's mega menus at a narrow resolution for
example...).

In general, though, accessibility isn't going to suffer with a responsive
design. It's the same elements, just differently laid out/stacked. And so
long as you're keeping the visual hierarchy clear (no squeezing out of
white space or goofy-large headings), then accessibility should be just as
good as what was achieved at "desktop" widge/scale.

ken
--
Ken Petri
Program Director, OSU Web Accessibility Center




On Thu, Oct 4, 2012 at 10:06 PM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

> You are welcome to use AccDC at
> http://whatsock.com/
> if you wish.
>
> Which includes scalable functionality templates for lightboxes, banners,
> tooltips, popups, tabs, menus, tree controls, keyboard and screen reader
> accessible drag and drop, auto suggestion fields, sortable listboxes,
> footnote generation, live chat, sliders, calendar pickers, accordions,
> carousels, slideshows, and wizards.
>
> All of which have been fully tested to ensure screen reader and keyboard
> accessibility using accurate markup specifications.
>
> Plus AccDC can be used to build anything else that you can imagine, and
> it's
> free.
>
> ----- Original Message -----
> From: "Rick Hill" < <EMAIL REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
> Sent: Thursday, October 04, 2012 5:18 PM
> Subject: Re: [WebAIM] Responsive Web Design and Accessibility?
>
>
> I'll try again:
>
> We are about to embark on upgrading our site(s) to a responsive design. I
> was wondering what resources (if any) exist that discuss the accessibility
> of responsive deigns, pro and con. Also, any techniques that can be used
> to
> make a responsive Web site more accessible?
> –––––––––––––––––––––––––––––––––––––––
> Rick Hill, Web CMS Administrator
> University Communications, UC Davis
> (530) 752-9612
> http://cms.ucdavis.edu
> –––––––––––––––––––––––––––––––––––––––
> Web CMS assistance at <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
> –––––––––––––––––––––––––––––––––––––––
>
> > > >
> > > >
>
>