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.
