Accessible And Usable Content


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. Global Trends and the Impact on Prosperity: David Best, AEBC Blog, February 2018

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 features (keyboard 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 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.

Some Important Page Elements 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. The User's Perspective: WebAIM Article


Using ARIA To Improve The User Experience

The Accessible Rich Internet Applications (ARIA) 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), 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. That is, 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.

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.

ARIA provides Web authors with the following:


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.

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. An interview with the woman who gave Apple its voice, and a preview of what is to come: Eric Johnson

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.

Design for Seven Billion. Design for One: Microsoft, 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? 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.

The PhET Interactive Simulations project at the University of Colorado Boulder creates free interactive math and science simulations. PhET sims are based on extensive education research and engage students through an intuitive, game-like environment where students learn through exploration and discovery. As users interact with these tools, they get immediate feedback about the effect of the changes they made. This allows them to investigate cause-and-effect relationships and answer scientific questions through exploration of the simulation. PhET is a free online physics, chemistry, biology, earth science and math simulations research project. Nobel Laureate Carl Wieman Founded PhET in 2002. Check out the Balloons and Static Electricity simulation.

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:
  1. Critical(1): 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(2): 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(3): 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(4): 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.
  5. Support Resources:
    Tips on Designing for Web Accessibility
    Tips on Writing for Web Accessibility,
    Tips on Developing for Web Accessibility.


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).
  • 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.