University Assignment: Responsive Web Design and Mobile Accessibility

This report delves into the principles of responsive web design and its critical role in ensuring website accessibility, particularly for mobile devices. It begins by defining responsive web design and its significance in providing optimal viewing experiences across various screen sizes, avoiding the need for horizontal scrolling and accommodating different mobile browsers. The report then examines the concept of web accessibility, emphasizing the importance of designing websites usable by people with disabilities, including those with visual, auditory, physical, cognitive, and neurological impairments. It highlights the overlap between responsive web design and accessibility, illustrating how responsive design can address accessibility issues by adapting content and interactions to different devices. The technical aspects of responsive web design are discussed, including the use of media queries, adjustable grid-based layouts, adjustable media, and viewport settings, and how these elements affect accessibility. The report also explores specific considerations for responsive web design and accessibility on mobile devices, such as viewport settings, contrast levels, and adherence to Web Content Accessibility Guidelines (WCAG). Finally, the report concludes by emphasizing the importance of making the web accessible to disabled people, providing them with equal access and opportunities.

Running head: RESPONSIVE WEB DESIGN
Responsive web design
Name of the Student:
Name of the University:
Author note:

1Responsive web design
Accessibility feature of mobile web design (for phone or tablet)
Introduction:
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).
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).
Web accessibility:
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

2Responsive web design
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).
Role of responsive web design in web accessibility:
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).
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).

3Responsive web design
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).
Technical perspectives:
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

4Responsive web design
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

5Responsive web design
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.

6Responsive web design
Conclusion:
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.
References:

7Responsive web design
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.

8Responsive web design
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.