One of the most important things you should know about in Web development but never take seriously – Accessibility

• Author: Chen Da Yu Tou
• Making: KRISACHAN

What is Accessibility?

WHAT DOES A11Y EVEN MEAN?

The org.eclipse.swt.accessibility, abbreviated A11Y, usually is the abbreviation of initials + + middle letters length at the end of the letter, translated as “Accessibility”. This is a technical concept that allows as many people as possible to access the sites we develop, and through this concept, makes Internet access fair.

A11Y is very much the right thing to do, and in some countries and regions, even providing accessible sites has become part of the law.

There is a sentence on MDN: “The fundamental purpose of the Web is to serve everyone, not limited by hardware and software, language, culture, location and physical and mental state.” (the original: The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, Location, or physical or mental ability.

The Accessibility of Web Accessibility.

Whether ordinary people or is disabled friends, needs to have the standard website can easily access to information, accessible web is the development of web specifications, with a more rigorous attitude and condition to design a web page, the page content to carry out the “accessible” to different degree or demand of users, can be smooth to obtain information on the site.

This means that even some users with browsing disabilities are something we need to consider when developing. What are the types of disabilities we need to consider on a daily basis?

The types of disorders we should be concerned about

According to the W3C’s Web Content Accessibility Guide (WACG), there are four main types of obstacles:

• Visual impairment
• Hearing impairment
• Movement disorder
• Cognitive impairment

The World Health Organization’s Fact sheet on Disability and Health states that “more than 1 billion people, or about 15 percent of the World’s population, have some form of Disability,” “Between 110 million and 190 million adults have significant functional difficulties.”

Visual impairments

Visual impairment refers to vision loss to the extent that a problem cannot be solved by normal means (such as glasses). Some include people with vision loss caused by an inability to touch glasses or contact lenses. Visual impairment can cause people to have difficulty with daily activities such as driving, reading, socializing and walking. People in this group usually use auxiliary functions to read the screen, such as magnifying glasses, screen zooming and screen readers. Common screen readers are:

• Paid products: JAWS (Windows) and Dolphin Screen Reader (Windows).
• Free products: NVDA (Windows), ChromeVox (Chrome, Windows and Mac OS X) and Orca (Linux).
• Built-in products: VoiceOver (macOS, iPadOS, iOS), Anna (Microsoft Windows, ChromeVox (on Chrome OS) and TalkBack (Android).

Hearing impairments

Hearing impairment, also known as hearing loss, refers to partial or total loss of hearing, while deaf people refer to those who have no or little hearing. Hearing loss may occur in one or both ears and may be temporary or permanent in nature. Hearing problems in children may interfere with language learning and adults may have difficulties at work. For some people, especially the elderly, hearing loss can cause loneliness.

People with hearing impairment may have low or no hearing at all, and people with hearing impairment may use ATs(see Assistive Devices for People with Hearing, speech, or language impairments), but there is no specific ATs available on the Web.

Mobility Impairments (Mobility impairments)

A mobility disorder is when a person cannot use one or more of his/her limbs, or lacks the strength to walk, grasp, or lift objects. The use of a wheelchair, crutches or a walker may be used to aid mobility. Mobility disorders can be caused by a variety of factors, such as disease, accident or congenital disease, as well as by neuromuscular and orthopedic injuries.

Voice-activated wheelchairs are one of the most important inventions to improve the quality of life for people with mobility disabilities. Voice-activated wheelchairs were first invented in 1977.

People with disabilities who lack arms or fingers can have a hard time using keyboards and mice, but in recent years there have been advances in speech-recognition devices and software that have made it easier for people with disabilities.

Cognitive impairments (Cognitive impairments)

Cognitive impairment is a wide range of disabilities, from the most limited mentally handicapped to all of us who develop as we age and have difficulty thinking and remembering. The range includes people with mental illnesses, such as depression and schizophrenia. It also includes people with learning disabilities, such as dyslexia and attention deficit hyperactivity disorder. Importantly, while there are many variations in the clinical definition of cognitive impairment, people associated with it experience a common set of functional problems. These include difficulty understanding content, remembering how to complete tasks, and confusion caused by inconsistent web page layouts.

In addition, epilepsy patients also belong to the category of cognitive disabilities, we need to consider this part of the people when we develop.

There are guidelines on MDN for people with cognitive disabilities:

• Present content in a variety of ways, such as text, voice, or video;
• Write easy-to-understand content, such as less dialect or emoji;
• The important content should be carefully written;
• Minimize distractions, such as useless features and ads;
• Page layout and navigation should be consistent;
• Regular element styles, such as underlined links (blue when not accessed) and purple when accessed;
• Process interactions should have progress and step instructions;
• User authority authentication should be simple;
• Error messages should be displayed clearly;
• Forms should be easy to fill out and operate.

WCAG

The Web Content Accessibility Guide (WCAG) is part of a series of Web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards body for the Internet. They are a set of recommendations for making Web content more accessible, primarily for people with disabilities, but also for all user agents, including highly restricted devices such as mobile phones. WCAG2.0, published in December 2008, became an INTERNATIONAL Organization for Standardization standard, ISO/IEC 40500:2012 in October 2012. WCAG 2.1 became a W3C recommendation in June 2018.

The main guidelines for WCAG are as follows:

Perceivable

Information and user interface components must be presented to the user in a perceptive manner.

• Provide alternative text for all non-text content so that it can be translated into other forms that people need, such as large print, braille, speech, symbols, or simpler languages.
• Secular media provide an alternative.
• Create content that can be rendered in different ways (such as a simple layout) without losing information or structure.
• Create content that can be rendered in different ways (such as a simple layout) without losing information or structure.

Operable

User interface components and navigation must be operational.

• Enable all functions to be operated through the keyboard.
• Give the user enough time to read and use the content.
• Don’t design content that will cause seizures.
• Provides methods to help users navigate, find content, and determine its location.

Understandable (Understandable)

Information and user interface actions must be understandable.

• Make the text readable and understandable.
• Make web pages appear and operate in a predictable manner.
• Helps users avoid and correct errors.

Robust

Content must be robust enough to be credibly interpreted by a wide variety of user agents, including assistive technologies.

• Maximize compatibility with current and future user agents (including assistive technologies).

WAI-ARIA

The Web Accessibility Initiative — Accessible Rich Internet Applications (WAI-ARIA) is a technical specification published by the World Wide Web Consortium (W3C) that specifies how to increase the Accessibility of Web pages, In particular, dynamic content and user interface components developed using the tool. Ajax, HTML, JavaScript and related technologies.

preface

Wai-aria is A11Y application specification, mainly for the above types of obstacles and WCAG requirements of the technical instructions, the use of these technical instructions, so that browsing disabilities can easily access our application.

In this article, we discuss the WAI-ARIA specification in the front end. The following are three main features of the specification:

Roles

Wai-aria roles are set on elements using role attributes, similar to those defined in role attributes [role].

Examples are as follows:

<li role="menuitem">Open the file...</li>
Copy the code

The roles in this category have the following optional attributes:

As shown in the figure above, there are a lot of roles to choose from, but there are four main categories:

1. Abstract Roles
2. Widget Roles
3. Document Structure Roles
4. Landmark Roles

Its main functions are:

• Role description.
• Level information about related roles.
• Role context.
• Reference related concepts from other specifications.
• Use OWL (Web Ontology Language) to provide a type hierarchy that allows semantic inheritance.
• States and properties supported by each role.

States and Properties

Wai-aria provides a collection of accessibility states and properties used to support platform accessibility apis on various operating system platforms. Assistive technologies can access this information through a common user agent application (SUCH as screen reading software) DOM or by mapping to platform accessibility apis. When combined with roles, user agent applications can provide user interface information for assistive technologies that can be delivered to the user at any time. A change in status or property results in notification to assistive technologies, which may warn the user of the change.

Let’s look at an example:

<li role="menuitemcheckbox" aria-checked="true">Sort by Last Modified</li>
Copy the code

In the above example, a

is used to create a clickable menu, and ariA-Checked is changed by JS events so that the user agent can understand the function.

Since this is the user’s active action and not the default state, for a better experience, we can style li when aria-checked=”true” as follows:

[aria-checked="true"] { font-weight: bold; }
[aria-checked="true"]:before { background-image: url(checked.gif); }
Copy the code

Wai-aria states and attributes are classified as follows:

1. Widget properties
   • aria-autocomplete
   • aria-checked (state)
   • aria-disabled (state)
   • aria-expanded (state)
   • aria-haspopup
   • aria-hidden (state)
   • aria-invalid (state)
   • aria-label
   • aria-level
   • aria-multiline
   • aria-multiselectable
   • aria-orientation
   • aria-pressed (state)
   • aria-readonly
   • aria-required
   • aria-selected (state)
   • aria-sort
   • aria-valuemax
   • aria-valuemin
   • aria-valuenow
   • aria-valuetext
2. Real time domain attribute
   • aria-atomic
   • aria-busy (state)
   • aria-live
   • aria-relevant
3. Drag and drop the attribute
   • aria-dropeffect
   • aria-grabbed (state)
4. Relationship between attributes
   • aria-activedescendant
   • aria-controls
   • aria-describedby
   • aria-flowto
   • aria-labelledby
   • aria-owns
   • aria-posinset
   • aria-setsize

Managing Focus

Wai-aria advocates that all user interaction objects should be focusable, i.e. keyboard-selectable.

When using standard HTML tags and WAI-aria widgets, developers should create keyboard-accessible nodes in sequence, such as Tabs keys, arrow keys, and so on.

Developers should focus on the following container roles:

• combobox
• grid
• listbox
• menu
• menubar
• radiogroup
• tree
• treegrid
• tablist

The focus management part is actually a more emotional part, and a lot of times we rely on our business logic and technology selection.

Such as single-page applications are common in nowadays, when we make routing switch, or through the AJAX content changes, for sighted people, we are very easy to see, but if it is depend on the blind people read screen software, may be at a loss, I click on the next page, i.e., don’t know where have read what content?

For example:

<nav>
  <a href="/">Home</a>
  <a href="/goods">goods</a>
  <a href="/user">user</a>
</nav>
<main>
    <Link />
</main>
Copy the code

But if we add the ability to switch routes or reset the focus during data interaction, then the screen reader software can start from the beginning and blind people will not feel awkward:

<nav>
  <a href="/">Home</a>
  <a href="/goods">goods</a>
  <a href="/user">user</a>
</nav>
<main>
    <h1 tabindex="1">Fish head home mall</h1>
    <Link />
</main>
<script>
    function routerChange() {
        const heading = document.querySelector('h1')
        heading.focus()
        document.title = heading.textContent
    }
</script>
Copy the code

Afterword.

Knowledge about the org.eclipse.swt.accessibility, is not an article will explain, this article is to explain some basic content, in the hope that we can know more on the concept of the follow-up.

Fishhead I have been concerned about this field for some time. The more I contact with it, the more I find the importance of A11Y.

In a previous trip abroad, I forgot my glasses and lost contact with my friends at night. Because I am nearsighted, I can’t see things clearly at night, so I was in a really bad mood before my friends found me. My language was different and MY heart was full of fear.

Therefore, after coming into contact with this concept in the future, I felt very touched and hoped to do something for my friends who have browsing difficulties.

At the same time, I also hope to see that friends here can pay more attention to spread this concept and apply the knowledge they know to their own projects. Although from a rational point of view, it is not very helpful for business interests, but for some friends with dyslexia, it is really very important.

Fish head will follow up on some of the above concepts and detailed development details, interested can continue to pay attention to.

The resources

1. mds.is/a11y/
2. www.w3.org/TR/wai-aria…
3. Developer.mozilla.org/en-US/docs/…
4. Tao – wai. Gitbooks. IO/wai/content…
5. www.zhangxinxu.com/wordpress/2…
6. zhuanlan.zhihu.com/p/29359260
7. www.w3.org/Translation…
8. www.w3.org/Translation…
9. Developer.mozilla.org/zh-CN/docs/…
10. zh.wikipedia.org/wiki/ Hearing impairment
11. zh.wikipedia.org/wiki/ Impaired vision
12. zh.wikipedia.org/wiki/ Movement speech disorder
13. Accessproject.colostate.edu/disability/…
14. zhuanlan.zhihu.com/p/53821168
15. www.w3.org/TR/2014/REC…
16. www.w3.org/TR/2014/REC…
17. www.w3.org/TR/2014/REC…
18. www.bbc.co.uk/guidelines/…
19. www.bbc.co.uk/guidelines/…

Afterword.

If you like to discuss technology, or have any comments or suggestions on this article, you are welcome to add yu Tou wechat friends to discuss. Of course, Yu Tou also hopes to talk about life, hobbies and things with you. His wechat id is krisChans95