How Accessibility Impacts Responsive Design

Sure the focus of responsive design is on the ability of the layout to adapt to the user’s screen. Such optimization makes it easier to read and navigate the content on different screen sizes by making the content “bend and move”. But there’s another critical aspect that must be considered in this design process: how are semantics and information relationships exposed to individuals employing assistive technology on different platforms? On touchscreen devices for instance, one cannot navigate down a column in a data tables like one does on a desktop. Differences in support for HTML / ARIA on different platforms devices also need to be taken into account during design and development.

An example of mobile accessibility

In this example, the account details are displayed In a 2-column data table when the mobile view checkbox is unchecked. VoiceOver does not announce row headers as one flicks through the content within a data table. So in a mobile view it is alright to use list markup instead if one chooses. The user experience is the same for a VoiceOver user.

Also note, the two links that can be expanded / collapsed use the aria-expanded attribute to expose the link’s state. But on an iOS device, it is the title attribute provided on the link for redundancy that kicks in to convey the link’s state.

Photo of Sailesh Panchang

About Sailesh Panchang

One of Deque’s first employees, Sailesh is experienced in conducting accessibility assessments of Web content and software using combination of automated and manual-testing techniques including code reviews. In addition, he works to enable Deque clients to get started and become effective users of Deque’s tools.

Sailesh is very strong in application of accessibility techniques for HTML and WAI-ARIA for complying with Section 508, WCAG and legislation like Air Carrier Access Act (ACAA). Sailesh is an assistive technology user and relies on screen reading software like JAWS, NVDA, VoiceOver and TalkBack.