What Does Responsive Web Design Have to do with Accessibility?

A lot. Responsive web design (RWD) is a web design approach aimed at delivering flexible web page layouts to provide optimal viewing across a wide range of devices. RWD allows for easy reading and navigation on a variety of different-sized devices — from oversized desktop monitors to mobile phone screens – with a minimal amount of resizing and scrolling. Instead of building multiple sites for multiple device types, RWD allows designers to create one site that responds to each type of device that accesses it and delivers the appropriate output.

Since the creation of the web, users with low vision have sought ways to resize text without adding horizontal scrolling to the page. Additionally, fixed, non-fluid sizes cause overlapping or cutoff text when a web page’s text is resized. Similarly, tables and non-fluid pages used to lay out content cause reading order issues for users of screen readers. One size fits all sites do not fit the needs of users with disabilities. Responsive design principles, including fluid layouts, benefit users with disabilities on desktops as well as on mobile devices.

Effective RWD uses responsive (multiple fluid grid layouts) rather than adaptive (multiple fixed width layouts) design. Responsive web design targets the width of each user’s web browser to determine how much space is available and how it should display the website. Resolution breakpoints are set up to target ranges that define specific types of displays. For example, one set of CSS is used when the screen width is more or less than a certain size.

@media all and (max-width:480px){
#container{
// styles here
}

In a December 2012 post on RWD, the Internet news blog Mashable called 2013 “The Year of Responsive Web Design,” in large part due to the increasing sales of devices such as tablet and smartphones causing a major shift in how consumers are viewing websites such as theirs. Mashable projected that by the end of 2013, in excess of 50% of their website’s traffic will come from mobile devices. Users with disabilities have also been flocking to mobile devices such as Apples iPhone and iPad, as well as Google-powered Android smartphones and tablets. These mobile platforms contain accessible browsers and support accessible features and assistive technology. Recent laws in the U.S. (such as the CVAA) help to ensure access is available to advanced communication services (ACS) on mobile devices.

With literally thousands of different devices accessing the Internet, designing native apps to work on all of those platforms is not always feasible. In addition, many users simply prefer to use a browser instead of an app. According to a study on the future of mobile news by the Pew Research Center published in October 2012, roughly 60% of tablet and smartphone users prefer to use their browsers to access news on their devices. Similarly, users with disabilities do not want separate sites in order to access content. Well-designed websites can be responsive to a user’s device as well as to a user’s needs. For example, the related techniques such as progressive enhancement and progressive disclosure are common on mobile devices and benefit users with disability.
There are four key components to the heart of responsive web design:

• Media queries and media query listeners — helps a device decide how to view the website depending on screen size
• Flexible grid-based layout – uses relative sizing, allowing content to resize and rearrange as the percentage-based width of a webpage grid expands or contracts
• Flexible images and media, through dynamic resizing or CSS
• Establishing the viewport

Each one of the above components can have an impact on accessibility.

• Media queries can be used to provide different CSS based on device properties. There is a CSS media type for “aural” as well as “braille”. These two media types, however, are not well supported by browsers and assistive technology. In general, though adapting the site to the device size by using breakpoints will help users who require magnification and reduce the amount of zooming required. Additionally, customizing the amount of content on the site based on the device width will ensure a more focused view of the content for users with cognitive disabilities.
• Fluid design promotes reflow of content when it is resized and helps to ensure a correct reading order. Fluid layouts tend to render content in the order it appears within the document object model (DOM). This is the same order that screen readers render content to users who are blind or visually impaired. Fluid layouts also call for relative sizing of content and containers allowing text and content to enlarge and automatically shift other content down the page. Most modern desktop browsers zoom feature magnifies the entire page (not just text) and forces scroll bars and not just text. While this provides access it promulgates a lot of horizontal scrolling. More effective magnification requires a relative unit based fluid layout. Users with low vision can benefit from this by instructing their desktop browser to “resize only text” when a zoom command is performed. In theory media listener may be used to detect changes in a device and update the layout. Currently this is used to change the layout of a site when the user changes from portrait to landscape mode on a mobile device but the concept could be applied to checking for user scale checking on mobile devices.
• Flexible image use will allow images to resize to the area that is available to them. This allows images to take up more room if it’s available and to not overlap other content if less room is available.
• Establishing and correctly setting the viewport is important. It may be necessary to specify a viewport on mobile sites to ensure the site is displayed to the correct device size. Unfortunately, many RWD sites restrict whether the viewport can be changed by the user and may limit the scale level. The Web Content Accessibility Guidelines (WCAG) version 2 Level AA success criteria 1.4.4 requires that sites be scalable without assistive technology up to 200%. This means that in the case of the mobile browser the browser’s pinch zoom feature must allow for zooming up to 200% without using the assistive technology zoom on the mobile device.
  In the code example below the meta tag is set properly to allow the user can scale the page and it sets a maximum scale of 2.0 allowing the user to zoom to 200%.

Considerations for RWD and Accessibility

On Desktop Browsers

• Scroll bars must appear when content does not fit on the screen. Preventing scroll bars by hiding overflow without a means to access content when it is resized is a accessibility violation.
• Pages must respond correctly to custom CSS and removal of CSS. Enabling high contrast mode in browsers such as Internet Explorer will turn off background images to ensure the proper contrast level of text.
  • The page must still be understandable without CSS Background-images.
• The page must still be readable without specified colors.
  • When a background color is specified, a foreground color must also be specified, and vice versa.
• Position and reading order of content must remain correct.
• Using CSS to hide content in different contexts may not always provide the desired results with assistive technology. Manipulation of the DOM to add or remove page content should be used (e.g appendChild).

On Mobile Devices

• The viewport must allow users to pinch zoom (scale) up to 200%.
• The minimum level of contrast between foreground and background colors may need to be greater when displayed on a mobile device. For example, the luminosity of standard text must be a ratio of 4.5:1 for WCAG Level AA conformance. On a mobile device the contrast needs will likely be more, for example a luminosity ratio of 7:1 indicated by WCAG 2 Level AAA criteria.

Developers must still consider accessibility guidelines and standards such as WCAG 2 when developing mobile websites. For example, it’s a common misconception that focus order (AKA tab order) is not important on touch screen devices. Focus order is still important to users of assistive technology and alternative input devices. For example, the swipe gesture with a mobile screen reader will move to the next content unit such as a link, form field, or text based on the DOM order. Users with mobility impairments may likely use an external keyboard or device that simulates a keyboard to access a tablet.

Ideally the concept of responsive web design will be extended past device widths to device capabilities and users’ needs. For example, a truly responsive site could know the users’ preferences, automatically turn on closed captions for multimedia, zoom the page automatically to 200%, or present content with larger line spacing based on user preferences.

More information

Progressive Enhancement

Progressive enhancement techniques prescribe a basic implementation that works across multiple devices and with a wide range of assistive technologies and platform accessibility features. Rich interactivity is added automatically when supported by the device allowing users with capable devices or in the case of accessibility capable assistive technology to benefit from enhanced web content.

Progressive Disclosure

Progressive disclosure is a user interface principle aimed at removing clutter on sites focusing users to a given task. Sites with less focused content can help users with cognitive disabilities stay focused and can alleviate navigation issues that users who are blind or have mobility impairments find common on complex sites. In the past users of assistive technology often visited mobile sites with their desktop browser as they were more accessible and less cluttered when mobile versions of sites were first introduced before acceptance of RWD. It may still be useful to allow the user to switch between mobile and desktop versions of a site even when RWD is used. For example, some users with disabilities may use special browsers on specialized AT with no screen and thus may not accurate reflect the screen width — but the user may want or need access to the mobile site.