Accessible And Usable Content

Note for screen reader users: After pressing Enter key on the Show element, you may have to update the screen reader buffer (JAWS Insert+Escape) to read the expanded content.

Communication Considerations

Understanding Web Page Structure

A web page that is well structured with appropriate HTML markup will greatly improve assistive devices interoperability and keyboard navigation, which will ensure a good user experience and increased user productivity. People who use screen readers often cannot identify the navigation of a web site. Without visual context, these users sometimes cannot differentiate between sub-navigation and navigation elements. Most, screen reader users, when visiting a web page, expect website pages to be displayed in a consistent format. For example, Banner and Navigation regions should be presented before the Main Content of the page.Creating Accessible Web Content, Implementing & Evaluating Web Application Accessibility (WebAIM June 2016 Newsletter)

Screen reading technologies provide the user with many different ways to use a web page. Advanced screen reader users, when navigating through a site or finding specific information on a page, will likely use the screen reader facilities (shortcuts), rather than scanning through the content of the page starting at the beginning. However, most of these screen reader shortcuts, such as obtaining lists of links or headings depend to a large extent on the use of well structured code, which conforms to the Web Content Accessibility Guidelines. Less experienced screen reader users tend to read the web page sequentially, and thus depend upon a consistent content source order. The importance of adhering to the Web Content Accessibility Guidelines cannot be overstated. The use of semantically correct and valid code, meaningful and appropriately marked up headings and descriptive link text will enable screen reader users to make the most effective use of their technologies when visiting a website. Using the Voiceover screen reader to test for accessibility Video Tutorial, Marcy Sutton, EggHead.io
Make your single page apps work with screen readers, By Patrick Fox, Creative Bloq, October 07, 2015

Some of the more important Page elements to consider are:

  1. Title Element - Every page should have its own, unique TITLE element.
  2. Skip Links - People who use magnifiers to view a web site find skip links useful. Often a person using a magnifier will only see a small part of the screen. Often it is not obvious where the content is from this small part of the screen.
  3. Landmarks - The web page should be divided into perceivable block areas, which contain semantically associated information called Regions. Each region can be divided into logical subregions as needed. For users with cognitive and learning disabilities the landmark information could be used to expand and collapse these regions of your page to aid in simplifying the user experience by allowing the user to manage the amount of information processed at any one time.
  4. Properly Marked Up Headers - It is important that headings are nested properly in order to convey the structure and hierarchy of the page. It is important not to skip heading levels (Example, a H4 should not follow an H2). Screen reader users scan a web page using a variety of features, such as links, form controls and headings. Most screen readers can pull out the headings, and present them to the screen reader user in hierarchical order. This can provide a great amount of information to users and help them navigate through the page effectively.
  5. Structural Labels - Structural labels should be used to help describe different components of the page to screen reader users. Providing hidden structural labels assists screen reader users to identify lists of links and access the information provided via the hierarchy. The inclusion of structural labels is an effective and relatively simple solution to the significant problem some screen reader users have in identifying the different elements on a page. It is possible, through the use of CSS, to include these labels without affecting the visual appearance of the page.
  6. Breadcrumbs - Breadcrumbs are an additional navigation tool that assists both the general public and people with disabilities to navigate through a large or complex site. It is especially important where other navigation mechanisms, such as the Back button, have been broken. Breadcrumbs should provide the hierarchical position not the chronological pathway in the site. For instance, even if a user came to a particular part of the site through inline links, the breadcrumbs should provide the navigational pathway to that page.
  7. See the WebAIM Articles for a more in depth explanation.


Using ARIA To Improve The User Experience

ARIA (Accessible Rich Internet Application) markup was designed to insert information useful to assistive technologies into existing HTML code. It exists as a way to label controls and to provide information about their states. Adding ARIA support to a Web page does not change the presentation or behavior of that Web page to sighted users. The browser plays a big role in interpreting ARIA markup. Most browsers support some type of accessibility API (application programming interface), and assistive technologies use the API to get information about what is presented on the screen. So, ARIA markup is transformed by the browser into information that fits the accessibility API it supports. Then, the information provided by the API is processed by the assistive technology. That means the assistive technology support of ARIA depends heavily on the browser being used. The assistive technology user agent gathers information from the ARIA markup and the browser's API and presents it in a meaningful way to the user. Because of the above interactions, the quality of the user agent support for ARIA markup is inextricably tied to the careful, thorough application of ARIA markup on a Web page, and comprehensive support provided by the browser in which the markup is rendered.

The Accessible Rich Internet Applications (ARIA) Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. ARIA addresses these accessibility challenges. With ARIA, developers can make advanced Web applications accessible and usable to people with disabilities. More specifically, ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other, and their current state. ARIA describes new navigation techniques to mark regions and common Web structures as menus, primary content, secondary content, banner information, and other types of Web structures. Refer to the W3C/WAI Notes on Using ARIA in HTML.

If you can use a native HTML element, or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. If a non interactive element is used as the basis for an interactive element, developers have to add the semantics using ARIA and the appropriate interaction behaviour using scripting. In the case of a button, for example, it is much better and easier to Just use a native HTML button instead of redefining an element with role=button. All interactive widgets must be scripted to respond to standard key strokes or key stroke combinations where applicable. That is, if you create a widget that a user can click or tap or drag or drop or slide or scroll, a user must also be able to navigate to the widget and perform an equivalent action using the keyboard. Adding an ARIA role overrides the native role semantics in the accessibility tree which is reported via the accessibility API, and therefore ARIA indirectly affects what is reported to a screen reader or other assistive technology user agent. Adding an ARIA role will not make an element look or act differently for people not using assistive technology. It does not change the behaviours, states and properties of the host element but only the native role semantics. However, it is important to note that testing with inexperienced users, with older screen readers or browsers, will result in false reporting of accessibility issues, due to the limited understandind of dynamic web page behaviour. Danger! Testing Accessibility with real people

ARIA provides Web authors with the following:

  • Roles to describe the type of widget presented (such as menu, treeitem, slider, and progressmeter).
  • Roles to describe the structure of the Web page (such as headings, regions, tables, and grids).
  • Properties to describe the state widgets are in (such as checked for a check box, or haspopup for a menu).
  • Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy update (such as critical updates presented in an alert dialog box, and incidental updates occurring within the page).
  • Properties for drag-and-drop that describe drag sources and drop targets.
  • A way to provide keyboard navigation for the Web objects and events.
A Self-Paced Training Roadmap for Learning ARIA: Bryan Garaventa, September 17, 2016
ARIA Widget Checklist: For Screen Reader Testing: Bryan Garaventa, February 24, 2017


User Interaction Design

A tool addresses human needs by amplifying human capabilities, and the human-tool interaction is designed to facilitate human-human communications. The goal is for the human-machine interface to become intuitive and an efficient human-human connection. That is, life activities should focus on real human habits and human needs, as opposed to focusing on the technology. Like the traffic signals communicate information for human safety behaviour, and the transmitter box in your car automatically connects with the toll booth on a highway. The role of technology design in human relationships is about effective communications in connecting human-human through machines. An interview with the woman who gave Apple its voice, and a preview of what's to come, Eric Johnson

Communication design deals with the delivery of messages, encompassing graphic design, wayfinding, and communicative objects of all kinds, from printed materials to three-dimensional and digital projects. Interface and interaction design delineate the behavior of products and systems as well as the experiences that people will have with them. Information and visualization design deal with the maps, diagrams, and tools that filter and make sense of information. The purpose of graphic design is to communicate a message; Be it advertising or be it signage. So that's design whose subject is communication.

It is pretty easy to get overwhelmed and frustrated by all the human-object interactions in the modern world. Whether openly and actively or in subtle, subliminal ways, things talk to us. Tangible and intangible, and at all scales; From the spoon to the city, the government, and the Web, and from buildings to communities, social networks, systems, and artificial worlds/things communicate. They do not all speak up: some use text, diagrams, visual interfaces, or even scent and temperature, while others just keep us company in eloquent silence. Thus far, 21st-century culture is centered on interaction with objects. However, the increasingly common "pictures under glass" type of interface used on smart phones and tablets, limits the untapped potential of human capabilities. the evolution of communication design is all about the interface. That is, the interface must minimize the technology focus and maximize the human interactions and relationships.

Paola Antonelli, the Senior Curator in the Department of Architecture and Design at the Museum of Modern Art, most recent blockbuster show, Talk to Me, explored the communication between people and objects: from chairs that talk to subway kiosks. This fascinating show examined the future and the history of communication design.

Microsoft Inclusive Design (with audio description) YouTube
Learn how human-led design makes a deep and connecting impact, leading to innovative and inclusive solutions. Can design be both universal and personal? Inclusive is a short film that explores this question with some of the industry's foremost thought leaders. Embracing human diversity and Designing for inclusivity not only opens up products and experiences to more people with a wider range of abilities, it also reflects how people really are. All humans are growing, changing, and adapting to the world around them every day. Our solutions should reflect that diversity.

Designing Mindfulness is a manifesto from Mindfulness Everywhere. Mindfulness teaches us that the quality and nature of our attention has a direct impact on our wellbeing. Many of the interactions we have with technology every day involve our attention. Our wellbeing is therefore being affected by those attention-based products we use. Some companies simply do not understand the impact their products have on the minds of the people who use them. Other companies may deliberately use this knowledge to trap our attention and farm it for commercial gain. As a result, they have little care for the impact their products might have on the people who use them. how can we build the ideas and practices of mindfulness into technology so that the attention and wellbeing of the people who use it is best supported?


Accessibility Severity Guidelines

Basic design considerations to help elliminate accessibility issues by developing web content that is more inclusive:
Tips on Designing for Web Accessibility,
Tips on Writing for Web Accessibility, and
Tips on Developing for Web Accessibility.

  1. Critical: Must fix to allow even the most basic use of the application. User with a disability cannot complete a task, and no alternate means is provided to complete that task. The issue is a violation of the Web Accessibility Checklist.
  2. High: Must fix in order to meet accessibility standards and allow full use of the system. User with a disability will likely not be able to easily complete a task, and no alternate means is provided to complete the task. The issue is a violation of the Web Accessibility Checklist.
  3. Medium: Should fix to allow productive, accessible use of the application. User with a disability will likely be able to complete a task, but the issue prevents the user from completing the task efficiently. The issue may or may not be a violation of the Web Accessibility Checklist.
  4. Low: User with a disability will be able to complete a task, but the issue may cause confusion to the user, and should be resolved. The issue may not be a violation of the Web Accessibility Checklist. These may be functionality bugs that may effect all users, and should be corrected in the next release.


Accessibility Developer Resources

Support Information

Test Examples

Downloadable Demo Examples

  • Web Accessibility Initiative (WAI) Demo The Before and After Demonstration is a multi-page resource that shows an inaccessible website and a retrofitted version of this same website. Each web page includes inline annotations that can be activated to highlight some of the key accessibility barriers or repairs. Each web page is also accompanied by an evaluation report to inform the developers on the level of conformance to the Web Content Accessibility Guidelines (WCAG).
  • Accessible jQuery-ui Components Demo by The Paciello Group (TPG) This page contains some interactive controls that you would normally only find in desktop applications. Examples of such controls are tab lists, menu bars, sliders, and tree views. These controls are often operated using the arrow keys, which means your screen reader must temporarily switch off virtual navigation mode in order to interact with them. Some screen readers will automatically switch between modes depending on the control's type, while others require you to manually turn virtual mode off.
  • DOJO Toolkit Demos Dojo saves you time and scales with your development process, using web standards as its platform. It's the toolkit experienced developers turn to for building high quality desktop and mobile web applications.