Mobile Web Design And Accessibility: Importance And Considerations

Accessibility and Mobile Web Design

Accessibility of mobile refers to process of making applications as well as websites more accessible to disabled people. The basic objective of web is that is must be designed in such a manner so that it can work for everyone irrespective of their ability, language, location, software, hardware. When this objective of web is fulfilled, then it is accessible to people with a various range of sight, hearing, movement and cognitive ability. Thus, the effect of disability has entirely changed the web as the web removes the communication and interaction hurdles that many people encounter in the real world. However, barriers that exclude people from accessing web are created due to improper design of technologies, tools, applications and websites (Persson et al., 2015).

Save Time On Research and Writing
Hire a Pro to Write You a 100% Plagiarism-Free Paper.
Get My Paper

Accessibility is extremely vital for developers and organizations that intend to develop web tools and websites of high quality and do not want to exclude people from using their services and products. The aim of web accessibility is to make the web accessible to its full potential and enable equal participation of disabled people on the web. Thus the web should be accessible to people with various abilities in order to avail them equal opportunity and equal access. Indeed, the United Nation convention on the rights of disabled people identifies access to web as a fundamental human right (Henry, Abou-Zahra & Brewer, 2014).

It refers to design and development of tools, technologies and websites that can be accessible by disabled people so that they can contribute to the web by perceiving, understanding, navigating and interacting with the web. Web accessibility involves all disabilities that affect web access including visual, speech, auditory, physical, cognitive and neurological. The web provides exceptional access to information as well as interaction to disabled people, which means that web technologies could overcome the accessibility hurdles to print, visual and audio media. Besides supporting social inclusion of disabled people accessibility, support the same for older people and people in rural areas (Díaz-Bossini & Moreno, 2014).

Accessibility overlaps with practice such as mobile web design. The web design has significant role in accessibility of website. For instance, avoiding of colour schemes that makes things difficult to understand for colour-blind and short-sighted people. The objective of a responsive design or layout is to work well on every device irrespective of its resolution or screen size. While designing any application or tool or website, the developer must consider the types of accessibility problem that, the application, tool, or website will support. For instance, one general accessibility issue is that users who do not use mouse for browsing internet. In that case, the developer needs to create the keyboard shortcuts for those users so that they can exclusively browse the website or access the application or tool with their keyboard. The things needs to be considered for building a responsive as well as accessible website are typographic contrast, providing enough white space, grids and columns, navigation behaviour, dynamic features such as images sliders, videos (Hara, Le & Froehlich, 2013).

The Importance of Web Accessibility

Responsive web design is the approach of website design and development that works as fine in a tablet or mobile phone as in desktop or other screen size. Irrespective of the way the user accesses the website, the website features and elements rearrange themselves to make the website presentation layout fit at the size of the device screen (Kim, 2013).

Save Time On Research and Writing
Hire a Pro to Write You a 100% Plagiarism-Free Paper.
Get My Paper

Accessibility refers to the process of developing applications and websites that are usable by people with different abilities. This involves people having visual impairments who typically depend on software for high contrast or screen reading to access content as well as navigate using spoken commands or keyboard. Responsive design deals with content and interaction irrespective of the device while accessibility goes beyond that to give the positive as well as equal experience fell for those who access the website. It is notable that responsive web design implies design for different devices, whereas accessibility is about designing for incorporation  or inclusion. There may be accessible websites, which are not responsive, as well as there may be responsive websites that are not accessible. Responsive design is the supplementary tool, which can be applied to solve the accessibility issues. Hence, designing for accessibility and that for responsiveness are different (Kim, 2013).

A responsive web design develops a consistent standard or level that satisfies the primary requirements of its user, whereas accessibility goes further and ensures a functionality layer for users with assistive technology such as screen readers that is much required. Though the given technology for web design is not a problem for accessibility still the problem persists as there are significant number of various users who uses accessibility technologies such as high-contrast displays, text-to-speech as well as text-to-braille devices (Kim, 2013).

Both accessibility and responsive web design depend on the standards of coding a website. For instance, a hypertext markup language (HTML) heading receives its style from a construct called style sheet and not the inline styles for a particular colour, text or font size. This is acceptable for accessibility as the semantic meaning of the tag is available to assistive technology. It is also good for responsive web design as the style sheet can have the choice for including various display rules for various devices. Thus, responsive design allow us to improve the appearance of the web page with a single portion of source code. The following key components are vital for responsive web design.

  • Media query as well as listeners of media query which allow the device about website viewing based on screen size;
  • Adjustable grid-based layout, which allow rearranging and resizing the content through relative sizing in terms of percentage width of a webpage grid.
  • Adjustable media and images through cascading style sheet (CSS) or resizing.
  • Viewport establishing.

Each of the above components can have effect on accessibility.

  • According to the properties of device, media queries are used to provide various CSS. For braille and aural there is a CSS media type. However, these two media types are not well supported by the assistive technology and browsers. In general, users in need for magnification can use breakpoints to adjust the website to device size without decreasing the zooming amount. In addition, users with cognitive disabilities can ensure a better-focused view of content by customizing the website’s content amount based on width of device (Baturay & Birtane, 2013).
  • When a content is resized, correct reading order is ensured by promoting the reflow of content through fluid design. Fluid layouts aim to render the content as per the order in which it appears within document object model (DOM). Screen readers render content to visually impaired or blind users in this same order. Fluid layout also uses containers as well as relative sizing of content to enlarge the text and the content and naturally move the content down the page. The zoom feature in modern browsers magnifies the total webpage with text as well as scroll bars. A relative unit based fluid layout is required for enhanced and effective magnification. Low vision users can avail benefit from this by instructing about resize only text to the browser when a zoom command is executed (Natda, 2013). Besides changing the page layout from portrait to landscape, media listener can also be used for disable user scale checking on mobile devices (Carlson, Altakrouri & Schrader, 2013).
  • Use of adjustable image enable the images to resize themselves to the available area for them. This make the images to cover more space if available and avoid overlapping with the other content if less space is available.
  • Correct setting and establishing of viewport is also significant. Specification of viewport is essential to ensure that the website is displayed as per the device size. Many responsive web design websites can limit the scale level by confining the user from changing the viewport (Ofstad & Leong, 2015).

Considerations for responsive web design and accessibility that is applicable for mobile devices:

  • The viewport should enable users to pinch the zoom scale upto 200 percent.
  • The minimum contrast level between background and foreground colours is required to be greater when displayed on mobile device. For instance, according to Level AA conformance of Web Content Accessibility Guidelines (WCAG), the standard text’s luminosity must be 4.5:1. In a mobile device, this luminosity ratio must be 7:1 as per Level AAA criteria of WCAG 2 (Vigo, Brown & Conway, 2013). Thus, standards and guidelines such as WCAG 2 are considerable while building mobile websites.


From the above discussion, it draws conclusion that responsive web design helps to provide the best viewing experience for a webpage or portion of content across a wide range of devices. Whereas accessibility helps disabled people to navigate and easier way of making use of the content. The discussion also shows how the concept of responsive web design and accessibility are directly related to each other in numerous ways. Finally, it can be said that web is a very vital resource in several aspects of an individual’s life. Hence, it is necessary that the web must be accessible to disabled people to provide uniform access as well as uniform opportunity to them.


Baturay, M. H., & Birtane, M. (2013). Responsive web design: a new type of design for web-based instructional content. Procedia-Social and Behavioral Sciences, 106, 2275-2279.

Carlson, D., Altakrouri, B., & Schrader, A. (2013, March). Reinventing the share button for physical spaces. In Pervasive Computing and Communications Workshops (PERCOM Workshops), 2013 IEEE International Conference on (pp. 318-320). IEEE.

Díaz-Bossini, J. M., & Moreno, L. (2014). Accessibility to mobile interfaces for older people. Procedia Computer Science, 27, 57-66.

Hara, K., Le, V., & Froehlich, J. (2013, April). Combining crowdsourcing and google street view to identify street-level accessibility problems. In Proceedings of the SIGCHI conference on human factors in computing systems (pp. 631-640). ACM.

Henry, S. L., Abou-Zahra, S., & Brewer, J. (2014, April). The role of accessibility in a universal web. In Proceedings of the 11th Web for all Conference (p. 17). ACM.

Kim, B. (2013). Responsive web design, discoverability, and mobile challenge. Library technology reports, 49(6), 29-39.

Natda, K. V. (2013). Responsive web design. Eduvantage, 1(1).

Ofstad, A., & Leong, S. C. (2015). U.S. Patent No. 9,213,422. Washington, DC: U.S. Patent and Trademark Office.

Persson, H., Åhman, H., Yngling, A. A., & Gulliksen, J. (2015). Universal design, inclusive design, accessible design, design for all: different concepts—one goal? On the concept of accessibility—historical, methodological and philosophical aspects. Universal Access in the Information Society, 14(4), 505-526.

Vigo, M., Brown, J., & Conway, V. (2013, May). Benchmarking web accessibility evaluation tools: measuring the harm of sole reliance on automated tests. In Proceedings of the 10th International Cross-Disciplinary Conference on Web Accessibility (p. 1). ACM.