preface

Domestic companies almost don’t consider Web Accessibility. This is due to our laws, which don’t necessarily require Web Accessibility in China. However, some countries in the world, such as the United States, have enacted the 508 Rehabilitation Act and formulated several Accessibility standards. Once a company’s product is not up to standard, it will face legal risk. So a lot of foreign employees, especially those with R&D centers in Our country, basically want to know a little bit about Web Accessibility, and I was fortunate enough to have done some research on Web Accessibility in my company. At that time, there were few Chinese materials, and it really made me uncomfortable to search for English materials by going over the wall. Therefore, after I had a general understanding of Web Accessibility, I always wanted to write a Web Accessibility blog, which can be browsed by friends who need it. However, I didn’t start it until the middle of January 2020. I will try my best to express in Chinese, but inevitably there are some mistakes, if there are fallacies, please advise.

This blog post was originally published on CSDN, but is now being reedited for December 2021 due to the gradual abandonment of CSDN.

What is Web Accessibility?

Web Accessibility translates to Web Accessibility or Web Accessibility, which refers to the ease with which users (all users, including people with disabilities) can access the Web. To this end, W3C also launched an initiative – WAI, WAI provides a series of specifications and standards (WAI-ARIA, WCAG, etc.). When we say that our site is Accessible, then it should be Accessible to all users, which means doing some extra processing for the experience of people with disabilities.

Why make the site Accessible?

Accessible sites not only provide a good experience for people with disabilities, but also for healthy users.

When a site has a checkbox, it is uncomfortable to click on it and we have to move the mouse very carefully to hit it. When we bind a for property to the checkbox, we click on the label field to manipulate the checkbox. For healthy users, This checkbox is more comfortable to use. For people with disabilities, this checkbox has an accessible name described by the label, which makes it easier for them to understand the meaning and purpose of this checkbox.

Sometimes, laws in some countries or regions require sites to be accessible.

For example, in the United States, they have a 508 rehabilitation Act that requires access to federally run sites, and the European Union has similar laws, and many other countries have related legal or policy restrictions. Therefore, a thorough understanding of Web Accessibility is quite necessary for companies that want to go abroad, not to mention most foreign companies in China.

People with disabilities are a potentially huge market.

According to The data of W3C, it is estimated that The global market size of 1 billion persons with disabilities is as high as $7 trillion. If you are interested, you can learn about The Business Case for Digital Accessibility

There are a number of benefits that I won’t go into too much detail, but basically they don’t hurt, because as developers, we only need a little extra work, plus a little Web Accessibility knowledge, to make our sites Accessible.

How to implement Web Accessibility?

Technically, our current Best Practice is to follow WCAG guidelines and develop properly using HTML5 semantic tags, complemented by WAI-ARIA.

Of course, in how to achieve the WCAG standard on this issue, there are a lot of technical things, but not here, later have time to write, this positioning is just a primer.

What is WCAG?

WCAG: The Web Content Accessibility Guidelines are the W3C’s reference Guidelines for Web Accessibility. They are currently recognized as the authoritative standard for Web Accessibility.

Following the WCAG’s guidance, we don’t have to spend any more time trying to figure out which disabled people access the Web in which way, with fewer barriers.

W3C recommends going straight to the latest version of WCAG 2.1 (2018 version). WCAG provides A very comprehensive list of points to consider, with three success criteria for each point: A, AA, and AAA. If all points are at A Level, then we reach WCAG Level A for Web accessibility. And so on. Generally speaking, you don’t have to go for AAA, because it’s pretty hard to get to AAA at some points.

When the website finally measures Web Accessibility, we can use VPAT to record what level our website has reached in each point of WCAG. After VPAT is recorded, it can be provided to customers or put on the website to prove that our website is Accessible. And it saves us time scrolling through the huge WCAG.

What is VPAT?

The full name is Voluntary Product Accessibility· Template, which is a Template used to indicate the level of Product Accessibility. There are several different versions. The same is that they all comply with the WCAG standard. Add-ons follow different standards, such as Section 508 of the U.S. Rehabilitation Act.

What is wai-aria?

First of all, it is necessary to talk about WAI. WAI is the abbreviation of Web Accessibility Initiative, translated as Web Accessibility Initiative. Most of the standards and specifications of Web Accessibility are formulated by WAI.

Since the Web evolved from a simple document (text and pictures) in the early days, Rich interaction modes have gradually evolved, and the Web has entered the ERA of Rich Internet Application (RIA). However, these interaction modes are quite unfriendly to people with disabilities, and some are difficult to use. Some even ordinary people use are confused, at this time it is necessary to have an authoritative non-utilitarian organization to specify some rules, guide developers to develop an interactive friendly Web, so WAI appeared.

WAI provides a specification — WAI-ARIA, which stands for Web Accessibility Initiative-Accessible Rich Internet Application, in order to make RIA also have good Accessibility. The specification provides three new attributes for HTML5.

1. Roles: This attribute is used to tell the helper what role the HTML5 Element really plays. For example, if the role of an A tag is “button”, the helper treats it as a button instead of parsing it as a hyperlink.
2. Properties: This property is used to provide additional semantic information to auxiliary equipment, one for the delete Button, for example, if we just set the color to dangerous operation said red, then auxiliary equipment does not know this, auxiliary equipment users will only know this Button is used to delete, then it is to remove what data, permanently delete? This additional information can be provided through the aria-label attribute.
3. States: This attribute is similar to Properties, but the difference is that States represents variable semantic information, such as aria-label mentioned above. If the description of aria-label changes all the time, it will inevitably cause confusion for users. Therefore, the following definition can be used: Properties changes have an infinite number of possibilities, but States changes toggle back and forth between several known States. For example, aria-hidden indicates the state of the HTML5 element that is shown or hidden.

The most important thing about WAI-aria is that these three attributes do not affect the CSS Tree or Dom Tree. They only affect the construction of the Accessibility Tree. To put it simply: the wai-aria attribute has no effect on our pages or JAVASCRIPT scripts.

The specific attributes of WAI-aria are not listed, and only relevant documents are provided here:

1. Accessible Rich Internet Applications (WAI-ARIA) 1.1, W3C official document about WAI-aria, most authoritative and detailed.
2. Wai-aria Authoring Practices 1.1, also produced by W3C, includes design principles, best Practices, online examples, etc.

How do people with disabilities access the Web?

Understanding how people with disabilities access the Web will help us understand the significance of some of the WCAG standards and help us address accessibility issues more comprehensively.

First of all, there are many types of physical defects, which can be divided into vision, hearing, cognition and movement. These four defects are not always permanent. For example, after myopia surgery, visual defects will occur before vision recovery. A broken bone, for example, can cause motor deficits before recovery. Think about how many people in the world are living with this disability every day. I estimate that China alone has a large number of people with fractures, surgeries, and other temporary defects every day, so our support for accessibility makes a lot of sense.

People with physical disabilities access the Web through assistive devices such as screen readers, braille readers, etc. Some chromatic-impaired or highly myopic users also use the browser’s high contrast or magnification features. In short, all of these aspects are covered in the WCAG.

What is ATs (Assistive Technology)?

ATs (Accessible Technologies), translated as assistive technology, also known as assistive devices. One of the most important is the screen reader, a small device connected to a computer that can read most of the information we can see and present it in the form of a voice broadcast.

So where does the information come from? The information is parsed from the browser’s Accessibility Tree, which is also where most of the ATs get their information. Its working principle is roughly as follows:

1. Browser exposes the semantic version of the Origin UI to ATs through the API provided by the system (different operating systems have different API definitions and implementations).
2. The ATs obtains a semantic version and constructs an alternative page for users, that is, a page that broadcasts the description through voice.
3. The User clicks through the ATs. The ATs relays the User’s intention to Browser through the API provided by the system.
4. Browser is obligated to respond to the User’s intent and interpret the User’s actions in the Origin UI context (i.e. simulate real clicks and other actions that trigger changes in relevant parts of the page).

Here are some resources to help you better understand:

1. Accessibility Overview By Goggles is a comprehensive Overview of Accessibility written By the Developers of Google Accessibility.
2. Accessibility Guides to Accessibility By MDN. Accessibility Guides to Accessibility By MDN are professional and focus on technical details.

What is Accessibility Tree?

Accessibility Tree simply means that after the browser builds the Dom Tree, it filters out the semantic information of each Node by parsing the semantic information of the Dom Tree and constructs Accessibility Node. Then build Accessibility Tree. Dom Tree change will affect the org.eclipse.swt.accessibility Tree, but for the org.eclipse.swt.accessibility Tree operation does not adversely affect the Dom Tree, and filter out information is the semantic information, less likely to affect the CSS Tree, So WAI-aria has no effect on our pages, and that’s how it works.

In the above principle, ATs only reads the Accessibility Tree. We can draw a conclusion that ATs only cares about semantic information. You can see how important it is for Web Accessibility to properly use HTML5 semantic tags.

What tools are used to test Web Accessibility?

For browsers, you can use a lot of plug-ins, such as Axe, Wave, Chrome and Firefox. These plug-ins can automatically detect whether the Web Accessibility of Web content has bugs, clearly indicate which WCAG rules are violated, how to improve and so on.

Axe is not only free, but also easy to operate and use. The UI is also my favorite simplicity style. Registered users can use more powerful test functions, providing separate test modules for different content, and generating test reports to prevent developers from bickering with each other.

You can also use the desktop application Nvda, the most popular screen reader software, to directly simulate how people with disabilities access the Web, which is also helpful in optimizing Web Accessibility.

conclusion

In the company’s Share Web Accessibility, we have to emphasize that “it is also a way to optimize the experience of normal people” to gain recognition. I really feel helpless. As human beings, should we have compassion for our fellow citizens? Is our pursuit of technology just for promotion and pay rise? In this world, if the human society only allows the strong to live, the weak to die, then humans and animals are no different, but also about what noble and great human nature.

We are Developers, Developers, is one of the millions square every profession, although can’t see money as dirt, but I think we should have a developer’s moral pursuit, because when you technical strength approach, points of is no longer the technology itself, but rather, the moral pursuit will, in turn, promote our technology level of ascension, With this kind of thinking height, our Code is no longer a hard currency for capitalists to make profits, but a bridge to communicate with the whole society.