Accessible And Usable Content
Understanding Web Page StructureA 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:
- Title Element - Every page should have its own, unique TITLE element.
- 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.
- 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.
- 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.
- 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.
- 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.
- The User's Perspective: WebAIM Article
Using ARIA To Improve The User ExperienceThe 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.
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:
- 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.
- Support resources:
a practical guide to using ARIA: the W3C Web Platform Working Group
A Self-Paced Training Roadmap for Learning ARIA: Bryan Garaventa, September 2016
Screen Reader Testing ARIA Widget Checklist: Bryan Garaventa, February 2017
JAWS HTML Support: Freedom Scientific VFO
JAWS ARIA Support: Freedom Scientific VFO
User Interaction DesignA 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 GuidelinesBasic design considerations to help elliminate accessibility issues by developing web content that is more inclusive:
- 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.
- 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.
- 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.
- 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.
- Support Resources:
Tips on Designing for Web Accessibility
Tips on Writing for Web Accessibility,
Tips on Developing for Web Accessibility.
Accessibility Developer Resources
- AccessKey tests: Charles McCathie Nevile
- Introduction to Web Accessibility: Google Course
- Implementing and Evaluating Web Application Accessibility Tutorial: WebAIM
- Single page applications, Angular.js and accessibility: Gavin Ogston, March 2015
- Accessibility 103: HTML Coding, Writing, and Testing: University of Minnesota
- Bits of Code blog for self-taught web developers to gain a more well rounded knowledge of web development
- A native HTML element listing (past and present)
- The Accessibility Tree - A Training Guide for Advanced Web Development: Bryan Garaventa
- How to create a curriculum for teaching ARIA (differentiating between content authors and developers): Bryan Garaventa
- The ARIA Role Conformance Matrices: AccDC
- The Visual ARIA Bookmarklet Aid For Developers
- Using ARIA in HTML
- ARIA Criteria Standards and Guidelines
- ARIA Authoring Best Practices
- ARIA Keyboard Best Practices
- The ARIA Role Conformance Matrices
- W3C/WAI Notes on Using ARIA in HTML
- HTML5 Accessibility Support ARIA Test Cases
- WCAG Client-side Scripting Techniques
- WCAG Mobile Accessibility - How WCAG Apply to Mobile Devices
- W3C/WAI Web Accessibility Tutorials
- practical tips for making Kendo UI charts and graphs more accessible (with code samples and videos)
- CK Editor Accessibility Users Guide
- CK Editor Accessibility Guidelines
- CK Editor Developers Guide
- Appium Mobile App Automation open source test automation framework for use with native, hybrid and mobile web apps
- Instruments User Guide for IOS VoiceOver Automated testing mobile applications
- Google Chrome Accessibility Developer Tools: GitHub
- Accessibility Tools Reference for Google Web Developers: Kayce Basques, July 2018
- Wayfindr Open Standard Version 1.1, December 2017
- The Tools of a Blind Programmer: Parham Doustdar
- Creating Microsoft Office 365 End User SharePoint Online Websites:
The Basics in creating an accessible SharePoint site
Getting ready to build an accessible SharePoint site
Add accessible content and links to a site
Adding accessible pictures and media to a site
- Teach Access Portal: Web Axe
- Accessible University Mock Site - a fictional university to demonstrate common web design problems
- Inclusive Components: heydonworks
- HTML Test Pages: Illinois Center for Information Technology Accessibility
- Open AJAX Alliance Accessibility ARIA Examples
- Code Library Samples: Deque University
- AccDC ARIA Accelerated Dynamic Content demos
- Modern Web Accessibility Demos: Paul J. Adam
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.