Skip to navigation content (Press Enter).

Creating Accessible User-Widgets

Lesson 2 of Section 4

Not all users perceive the content of a web page in the same way. As an example, consider a user that receives none of the visual information from a web page. Such a user requires the help of an assistive technology. In order to cater to the unique needs of all users, first, an understanding of the process by which assistive technologies consume web pages is needed.

The user agent is the web browser that a user chooses to interact with. The user agent typically presents a webpage the same way, regardless of the needs of a user. In order to interact with a web page, some users require the help of an assistive technology. An assistive technology is a piece of equipment and/or an application that expands the capabilities of a disabled person. Assistive technologies often use an accessibility API to interface with a user agent. The availability of accessibility APIs varies by browser and operating system.

diagram-of-assistive-technology-interaction-with-user-agents Text Summary of Diagram

Perceivable Functionality

The two central objectives of web accessibility are to keep presented web pages both perceivable and operable. If all of the functionality of web page is operable using both a mouse and a keyboard, then virtually any user can use an assistive technology to access the page with these modes of input. The more difficult hurdle when developing an accessible web application is the creation of perceivable functionality.


An incredible amount of information can be garnered by looking at a webpage. For example, bold, CAPITALIZED, and italicized text is recognizable as important. Semantics is the associated meaning to these font types. Semantic meaning can be associated with a wide variety of stimulus such as: visual cues, word selection, geometry, as well as tone of voice.

In web development, semantics is defined more specifically. Semantics in web development is the meaning of a thing, defined in a way that a computer can process, and in a way that many persons can consistently associate it with the same meaning. The goal of semantics in web development is to create perceivable structural relationships.

When creating an accessible user-widget, any semantic meaning of the visual representation of function should be made available to users who are unable to view the web application. Sometimes this is done by an assistive technology.

For example an html anchor, <a>, tag visually represents the idea of a link by changing text colour and underlining the text contents. This semantic meaning is contained in the anchor tag and expressed visually through the style. Assistive technologies assist in expressing roles of elements to users. A screen reader can be expected to notify a user when text being read is contained within an anchor element. This expresses the role of the text to the user. Both users can reasonably expect that the text is a link and that activating the link will navigate them to a new page.

A different example would be the division, <div>, tag. This tag gives no information about the role or function of its contents. Therefore, if the tag has a function it is often necessary to supplement this element with information about the role and function of the element, as well as how the element is associated with neighbouring elements. This task become more complicated the greater the complexity of a widget or structure in a web application. Ideally, <div> tags should be used as containers for applying styles, and developers should avoid using them as functional elements of user-widgets

A screen reader can express the function of a static web page as long as links, buttons, and other functional elements are properly tagged and organized. Dynamic web pages add functionality that is often not described by the HTML tags. The following lesson will describe the best method to explicitly associate semantic meaning to dynamic elements of a web page.


1: here to return to the home page. 2: Return to home page.

Link 1: Click <a href="/index.html">here</a> to return to the home page. Link 2: Return to <a href="/index.html">home page</a>.

The above links vary in accessibility.

  • Link 1 will make sense when read in context, but users that rely on a screen reader will hear the link in context only when reading through the page, when that same user tabs through the links on a page, the screen reader will read "here" out of context, which gives the user no information about where that link will take them.
  • Link 2 will still be informative when read out of context.

Be descriptive when choosing the content of an anchor tag.

1: 2: 3:

button 1: <button id='close' style='background-color:red;'> D: </button> button 2: <button id='close' style='background-color:red;'>X</button> button 3: <button id='close' style='background-color:red;'>close</button>

In this example there are three button that have the function of closing an element.

  • The only semantic information offered to users in button 1 is the colour of the button, the button tag itself, and the ambiguous emoticon that is used as the content of the button. This is not enough information for any user to reliably understand the function of the button.
  • Button 2 has 'X' as content, which along with the red colour would usually be recognizable as a "close" button. The information of the red button colour is not available to users with visual impairments. With only the information that the element is a button, and that the content is 'X', a user cannot be expected to understand the purpose of the button.
  • Button 3 declares the purpose of the button in the content. This button would be understandable by any user.


Test Your Knowledge

Take the test or continue to the next lesson

Service Bulletins

  • MAC ID Password Expiry

    Beginning in May 2016, MAC ID passwords at McMaster expire annually. Learn more at

Service Desk

Client Self Service:
Hours: Monday - Friday
8:30 am - 4:30 pm
Phone: 905-525-9140 x24357 (2HELP)
Location: Main Campus BSB Rm. 245
Service Catalogue:

Great Idea Site

Great Idea