Accessibility and Usability on the Web using Universal Design Principles

To create a web environment that is accessible by all users, web designers and developers need to implement standard accessibility measures for the use of accessible technologies such as screen readers.

The World Wide Web provides access to enormous amount of information from all over the globe. It has become an indispensable source for communication and social interaction through social networks and mobile devices.

Now more then ever the world is connected through the web through a diverse range of browsing technologies such as tablets, smartphones, laptops and desktop computers.

For an emerging generation the Internet is the primary source of communication and information.

However, as the World Wide Web expands to connect every reach of the world much of the content available is inaccessible.

People with physical, speech, cognitive, and neurological disabilities require the use of accessibility technologies to read and understand web content. The environment in which web content is distributed, the browser, is quickly emerging as the source for assistive technologies in the form of browser extensions.

Computer operating systems also provide universal access with screen readers. As web content is distributed into more facets of human function in the household and at work, the role of an accessible web is necessary in order to provide universal access.

Traditionally accessibility on the web relates at a technology level, this being the reach in which web content is viewable through user agents such as browsers, but as emerging web technologies provide more ways to view and interact with the web the need for accessibility to provide the same experience for all users is greatly increasing.

The usability of web content for participants with disabilities is an important measure into the effectives of accessible technologies.

An accessible web should promote interaction between accessibility and web technologies to provide a platform for universal access for all users.

By applying universal design principles to achieve an accessible web, the goal is to create a web in which there is inclusion -accessible information and technologies- without exclusion.


Accessibility is a term defined in environmental and architecture planning for ‘the simplicity with which activities in the society can be reached’. The term accessibility acts as an umbrella for all parameters that influence human functioning within environments [1]. This defines accessibility as an environmental measure [2].

Accessibility can be divided into three dimensions. These have applications in the physical environment, the access of information, and societal activities and services [1:1]. The three dimensions of accessibility are micro, meso and macro. The micro dimension describes the immediate environment [1:2]. The meso environment encompasses the public environment at a municipal level [2:1]. The micro environment is that of a sociological whole, an approach to accessibility through national or universal strategies. The United Nations outline accessibility as the access to information and communication which under the Standard Rules on the Equalization of Opportunities for Persons with Disabilities and is defined within Section 2: Target areas for equal participation [3].

States should develop strategies to make information services and documentation accessible for different groups of persons with disabilities. Braille, tape services, large print and other appropriate technologies should be used to provide access to written information and documentation for persons with visual impairments. Similarly, appropriate technologies should be used to provide access to spoken information for persons with auditory impairments or comprehension difficulties.

Equal participation in an online context is outlined in the recommendations of W3C’s Web Content Accessibility Guidelines (WCAG) 2.0 [4]. Reviewed by W3C members, software developers, and interested parties, the Web Content Accessibility Guidelines provide technical guidance for accessibility in an online context in order to meet the varying needs of the online audience as a whole. Within the W3C guidelines are several levels of recommendations including overall principles, general guidelines, testable success criteria, and a collection of sufficient techniques and advisory techniques [4:1].

Web accessibility encompasses all disabilities that affect across to the web, including physical, speech, cognitive, and neurological disabilities [5]. The Australian Government endorses the Web Content Accessibility Guidelines (WCAG) 2.0, with all government websites updated to apply accessibility principles through a Web Accessibility National Transition Strategy [6].

Accessibility is measurable through compliance with norms and standards [1:3]. Stahl’s measurement of validity and reliability of information gathering of accessibility is established in three steps:

  1. Personal component: a description of functional capacity based on knowledge on human functioning.
  2. Environment component: a description of barriers in the environment in relation to the standards available, but based on user evaluation.
  3. Analysis juxtaposing the personal and environmental components.


Usability is derived from the function of tool within an environment. The word usability -a derivative from usable- is an adjective synonymous with ‘fit to use’ [7] therefore a measurement of the implementation of function requirements. Usability is based on individual interpretations [1:4]. It is evaluated by a satisfaction of goals required by an individual. These goals are determined within the environment’s restriction on individual user functions. The measure of usability is derived from a user’s perspective of enabling function, performance and well being [1:5].

The perception of usability as a measure of function is determined via user interaction, independent from official compliance guidelines. Usability is a measure of effectiveness towards function, that being the process of compliance of specific user goals in an environment. Effectiveness of function from a usability standpoint is an evaluation of the efficiency in which a user’s goals are achieved within the environment.

Usability is not based with compliance with official norms or standards it is mainly subjective in nature [1:6]. Stahl states the reliability and validity of usability measurements from information gathering can be quantified by four steps:

  1. Personal component: a description of functional capacity based on knowledge on human functioning.
  2. Environment component: a description of barriers in the environment in relation to the standards available, but based on user evaluation.
  3. Activity component: a description of activities to be performed in the environment.
  4. Analysis integrating the personal, environmental, and activity components: a description of usability problems.

Universal Design

Universal design is a practice in which accessibility is achieved through a set of principles. It originates from accessibility in buildings, and has since been extended to encompass information and communication technologies.

The seven principles of universal design as defined from the Centre of Universal Deign at the North Carolina State University are:

  1. Equitability of use, the usability and marketability of a product to people with diverse abilities.
  2. Flexibility in use, the accommodation of a wide range of individual preferences and abilities.
  3. Simple and intuitive use, the creation of product that is easy to understand, regardless of experience, knowledge, language skills, or current concentration level.
  4. Perceptible information, communicating necessary information effectively, regardless of ambient conditions or sensory abilities.
  5. Tolerance for error, minimising hazards and adverse consequences of accidental or unintended actions.
  6. Low physical effort, the product can be used efficiently and comfortably, with a minimum of fatigue.
  7. Size and space for approach and use, the appropriate size and space for approach, reach manipulation, and use regardless of body size, posture, or mobility.

Gregg Vanderheiden of the Trace Research & Development Center at the University of Wisconsin-Madison has defined universal design as the process of creating products (devices, environments, systems, and processes) which are usable by people with the widest possible range of abilities, operating within the widest possible range of situations (environments, conditions, and circumstances), as is commercially practical [8].

Vanderheiden’s definition of universal design has two major components: The first is the design of products, so that they are flexible enough that they can be directly used (without requiring any assistive technologies or modifications) by people with the widest range of abilities and circumstances as is commercially practical given current materials, technologies, and knowledge. Vanderheiden’s second component of universal design is product design that is compatible with the assistive technologies that might be used by those who cannot efficiently access and use the products directly.

Universal design is synonymous with ‘design for all’ [1:7]. Universal design approaches accessibility through social change, accessibility is reached through a compliance with social norms relating to the design and appropriate use of product in the wider public.

Web Content Accessibility guidelines (WCAG)

W3C’s Web Content Accessibility Guidelines (WCAG) 2.0 provide a technology-neutral approach founded on the POUR (perceivable, operable, understandable, and robust) general principles [9].



In order to be accessible, the interface of a website must be presented to the user in a manner they can perceive. The W3C Web Content Accessibility Guidelines (WCAG) [4:2] provides recommendations for perceivable web content, these include text alternatives (braille, speech, or large print), times-based media alternatives, adaptable and distinguishable content.


User must be able to operate the interface through interactions that the user can perform. Operable web content is achieved by making the website keyboard accessible –including custom keyboard interfaces, and navigable.


The website must provide content in a logical and consistent manner. The user should be capable of understanding the operation of the website interface, as well as the information contained within the content. In order to provide an understandable user interface website content should be readable and allow for input assistance for forms and fields. Web pages should appear and operate in a predicable manner.


Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies [4:3]. The website, and it’s content, should remain compatible as user agents, and web technologies advance. Compatibility as a whole encompasses all assistive technologies, including screen readers and magnifiers both digital and physical.


The Neilson Norman Group conducted usability studies with people using assistive technologies. From the test results the Neilson Norman Group was able to comprise actionable recommendations for improving accessibility through design guidelines for websites and intranets [10].

Graphics and Multimedia

Websites should minimise the use of graphics. Where graphics are used they should be comprised of high-quality images with logical names and ALT text to describe the images, with LONGDESC attributes to briefly describe the content in the image. Images should never be manipulated (blurred, obscured) to indicate unavailability. Multimedia and Flash demos should be able to be skipped.


Navigation menus should avoid opening links in new browser windows. Pop-up dialogue boxes should also be avoided in preference of a default action that is most forgiving. If the user is redirected to a new browser window provide a simple way for the user to navigate back to the website’s homepage. Navigation should not rely on rollover text to convey any information. Website navigation should avoid using cascading menus.

Links and Buttons

Websites should limit the number of links on a page, avoiding small buttons and links for a call to action. Using whitespace between buttons and links improves visibility of navigation elements in a website. Links containing images should provide another method for linking to something. Important commands should appear as their own unique links, and should be underlined within large text elements. Links within text should be logical.

Page Organisation

Immediately confirm the current page to the user once it has loaded, making sure to confirm the company name on the homepage once it has loaded. Pages should minimise the need for scrolling. Users should be warned when a choice is coming. After a user has made a choice all possible outcomes should be kept in the same vicinity.

Pages should be ordered and designed logically and consistently. Carefully consider using “Skip Links” so users can skip links or navigational elements. Choose a simple, informative Web address for your site, and keep that URL in the address field after the page loads. (Make whatever appears in the address field logical.)

Intervening Pages

The website should only include necessary pages, plash or cover pages should be avoided in preference for a homepage that immediately describes the company and site content.

Forms and Fields

Forms should limit the amount of information required, with required fields highlighted to the user clearly. Field label text should be in close proximity to the field which is relates. Instructions correlating to a field within a form should come before the field itself. The form should contain standardised fields (for phone numbers, first name and last name etc.) and be stacked in a vertical column.

Field order within a form should be logical and consistent with the user’s expectation of required information. The form submission button must be as close to the last field as possible, highlighting the completion of the form fields. Errors in the form submission should be highlighted to the user in clearly identifiable colours, in most cases red text.

Presenting text

Text should be natural language and concise. The size of text should scale with magnification of the browser. Fonts and colours be legible and high contrast to a single background colour, text should not be used on background images.

The website should be legible with a screen magnifier. Text elements should be detected with screen readers for people with vision impairment, this includes the use of punctuation such as asterisks and parentheses.


Search within a website should be forgiving of spelling errors. The search box should be placed in a logical location on the website and clearly identified. Descriptive search results should be returned to the user, clearly presenting search result rankings. Users should be informed if the search query is empty or has no search results returned.

Web Accessibility Initiative (WAI)

W3C’s Web Accessibility Initiative (WAI) develops strategies, guidelines, and resources to help make the Web accessible to people with disabilities [11]. Rather than a reliance on web authors implementing web content compliant with the WCAG 2.0 guidelines, the Web Accessibility Initiative (WAI) model aims to provide an inclusive web environment with compliance from user agents, and authoring tools.

The User Agent Accessibility Guidelines (UAAG) is part of a series of web accessibly guidelines, and targets web browsers, media players, and assistive technologies. The implication of the User Agent Accessibility Guidelines (UAAG) is that user control is provided for how the content and interfaces are rendered, access is given to all content with documentation provided for accessibly features [11:1].

The Authoring Tool Accessibility Guidelines (ATAG) is primarily for developers of authoring tools such as: web content editing editors (WYSIWYG, HTML and XML editors), site management and publication tools including content managements systems (CMS), and websites that enable users to create web content including wikis, photo sharing sites, and social networking sites. The Authoring Tool Accessibility Guidelines (ATAG) ensures the authoring tools themselves are accessible to all users, as well as the content produced. Compliance with Web Content Accessibility Guidelines (WCAG) 2.0 is a criteria of the Web Accessibility Initiative (WAI), however the WAI aims to address accessibility in web resources for all users.


To create a web environment that is accessible by all users, web designers and developers need to implement standard accessibility measures for the use of accessible technologies such as screen readers.

The user’s needs are the foundation for usability, where the web interface provides functionality for the completion of tasks online.

Participant-oriented design, namely usability-evaluated web development provides a subjective perspective into the functions of an online environment. From usability testing web designers can create an objective perspective based from the definition of accessibility to apply the Web Content Accessibility Guidelines (WCAG) as contextual recommendations for implementing an accessible website under the guidance of Web Accessibility Initiative (WAI).

Cooperation between a social and developing architecture such as the Web Accessibility Initiative (WAI) and the strict guidance of Web Content Accessibility Guidelines (WCAG) can create a sustainable and flexible web. The social model of the Web Accessibility Initiative (WAI) creates a dialogue between user agents and web content -formed from the recommendations- for catering to web assistive technologies. Assistive policies and guidance aid in creating an accessible web interface for both the user agent, such as browsers, and the web content rendered within that environment.

Approaching web accessibility from universal design principles ensures that accessibility in inclusive of all potential users of a web interface.

From implementing the universal design principles in the design of web interfaces, web designers can create flexible and simple interactions that are fundamentally intuitive and provide an equitability of use. Fundamental interactions online, such as the user completing fields within form, can be developed to provide universal access through the implementation of simple and intuitive guides for assistive technologies.

Through a native language approach to error handling, in this case the web form, web designers can communicate efficiently to visually impaired users. Rather than the reliance on hover states and footnotes to circumnavigate error handling, web designers should approach error handling with a ‘minimum of effort’ methodology, this being low physical effort and appropriate use of space to communicate perceptible information effectively to the user.

Overall the emergence of new web technologies can provide web designers and developers an easier platform for the creation of accessible information online. As mobile and desktop operating systems already provide accessibility options for users, the emphasis for web content producers is to enable the use of these technologies efficiently through the web form.

A fundamental approach to universal access can be implemented using universal deign principles, the adherence to web accessibility guidelines (WCAG, WAI etc.), as well as the understanding role of usability and accessibility in a online context.

  1. Stahl, S. I. (2003). Accessibility, Usability and Universal Design: positioning and definition of concepts describing person-environment relationships. Disability and Rehabilitation , 25 (2), 57-66. ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎

  2. Pirie, G. (1979). Measuring Accessibility: a review and proposal. Environment and Planning A , 11 (3), 299-312. ↩︎ ↩︎

  3. United Nations. (1993, December 20). The Standard Rules on the Equalization of Opportunities for Persons with Disabilities. Retrieved May 19, 2012. ↩︎

  4. W3C. (2008, December 11). Web Content Accessibility Guidelines (WCAG) 2.0. Retrieved May 19, 2012. ↩︎ ↩︎ ↩︎ ↩︎

  5. Australian Government: Department of Finance and Deregulation. (2010, June). Web Accessibility Nametional Transition Strategy. Retrieved May 19, 2012. ↩︎

  6. Australian Government Information Management Office. (2012). Spatial data. Retrieved May 19, 2012. ↩︎

  7. Oxford University Press. (2010, April). Oxford Dictionaries. Retrieved May 19, 2012. ↩︎

  8. Gregg Vanderheiden, P. (n.d.). Universal Design of Consumer Products: Current Industry Practice and Perceptions. Retrieved May 19, 2012. ↩︎

  9. Brian Kelly, D. S. (2009). Accessibility 2.0: Next Steps for Web Accessibility. Journal of Access Services , 6 (1-2), 265-294. ↩︎

  10. Nielson Norman Group. (2001, October). Beyond ALT Text: Making the Web Easy to Use for Users with Disabilities. Retrieved May 19, 2012. ↩︎

  11. W3C. (2011, March 11). Getting Started with Web Accessibility. Retrieved May 19, 2012. ↩︎ ↩︎