Responsive Web Design(RWD) and it’s Accessibility-Part1

What is RWD

RWD refers to responsive web design and RWD is coined by Ethan Marcotte. RWD is nothing but crafting your website as per the screen size. We don’t need to build many websites for the different screen sizes. For an instance, it is not necessary to build separate websites for desktop, mobile, and tablet views. If site is responsive then it is all one single website and website adopts as per the size screen. This is the beauty of RWD and having one single website for all the possible screen sizes reduces the maintainers cost too.

can RWD be good for accessibility?

When we make RWD properly then we would get default accessibility benefits. Let me put it in other way. If you are focusing to build responsive website then some of the accessibility issues would be taken care automatically. what are those default accessibility benefits? or what are those accessibility issues that are being taken care on the fly?, will discuss them in details in the coming sections. For now, just remember, we would get default accessibility benefits if RWD is done properly. We would also discuss in the coming sections how do we achieve those benefits by using responsive techniques such as view port, fluid or flexible layout, resizable images, and media queries.

What is the commonality between accessibility and responsive web design

Can you think of any commonality between RWD and accessibility? There is a commonality. Let me explain that. RWD is talking about how good or how well your site is going to be fit/adopted to different devices such as mobile, tablets and so on.. in a way, RWD is targeting to reach out as many as users who are accessing the site in the different devices. Accessibility is talking about providing an equal opportunity for all the users including people with disability. In a way, it is targeting to reach as many as users to access the web. To conclude, the commonality between them is that reaching out as many as users in both RWD and accessibility.

 

Accessibility Benefits of RWD

RWD principles benefit to people with disability to access desktop and mobile websites. What are those benefits? The following are the default benefits when RWD is done properly..

1. Visually impaired:

• Users can understand and navigate the content easily as the content in the mobile web pages is less
• RWD follows certain standards and it is good for assistive technologies. Assistive technologies exposes the name, role, and value of standards or standard controls  properly/appropriately than custom controls

 

2. Low vision:

• Users can zoom the content even in the small resolutions without horizontal scrolling
• Users can magnify the images and get optimum experience in all the screen sizes
• This is not related to low vision specific but it is in general. Responsive sites are readable in all the screen sizes without further zooming

 

3. Motor disability:

• Users can accomplish task quickly as the content and navigation is stream lined
• The touch target size is large enough and users can touch in the expected areas appropriately

 

4. Cognitive disability:

• The content is clear and not clutter and hence, cognitive disability users would not get confused

 

Accessibility and RWD:

If your site is responsive then do you think your site is completely accessible? Answer is no. Both RWD and accessibility are complement to each other. However, it does not mean that if you make responsive site then entire site is going to be accessible. Let us see few scenarios in which the type of accessibility issues that we get although your site is responsive

1. Hamburger menu-all the menu items in the mega menu are visible in the desktop world. However, the same menu items get collapsed into one single hamburger menu. The state of hamburger menu to be exposed to the screen readers. This is accessibility violation and it can be fixed by using some aria techniques but nothing to do how well you are done RWD
2. Focus management-when hamburger menu is clicked in the above scenario then focus is not moved to the newly displayed content and focus is moved to somewhere else. It is accessibility violation and nothing to do with RWD. Sometimes, hidden controls get focused during tab or swipe navigation and those hidden controls should not be in the focus order. Always, focus order should match with visual order.
3. Focus visible: as the user navigates on the screen by using swipe and tab navigation, there should be visible focus for the element that user navigated to, so that users can understand where they are
4. Reading order: in the responsive sites, hidden content is exposed to the screen readers sometimes. Reading order should match with visual order. This is accessibility violation and nothing to do how well you are done RWD
5. Color contrast: the color contrast between background to foreground should be 4.5:1 in all the platforms

 

These are simple examples to make you understand what type of accessibility issues we may encounter although your site is responsive. Let us get into the our actual focus and it is how do we achieve those default accessibility benefits when RWD is done properly. To continue reading, visit part2 of this post.