First, what is barrier-free

1

  • Commonly known as network accessibility, English accessibility, referred to as [A11Y].
  • Accessible Rich Internet Applications (ARIA) is a set of mechanisms that make it easier for people with disabilities to access Web content and use Web Applications.
  • W3C Web Accessibility Initiative (WAI) Internet launches guidelines for Accessibility.


  • The Internet has nearly 450 million disabled users. Facebook saw a 20% increase in users aged 65 and older in 2018.
  • According to statistics on China’s Internet, there are 829 million Internet users, 130 million people over the age of 65, 13 million visually impaired, 20 million hearing-impaired and 70 million dyslexics.





  • According to the International Law Firm, the number of ADA Title III (the section that prohibits discrimination based on disability) lawsuits increased from 4,789 in 2015 to 10,163 in 2018
  • Article 508 of the Rehabilitation Act of the United States, the Federal Act on Accessible information Technology of Germany, the Equality Act of the United Kingdom, the Accessibility Act of Italy, the Disability Discrimination Act of Australia, etc. In 2011, the Outline of China’s 12th Five-Year Plan for the Disabled pointed out that one of the main tasks of building an accessible environment is to strengthen the construction of information accessibility, and specified relevant policies and measures.

Ii. How to support accessibility

1. Evaluation criteria

WAI (Web Accessibility Initiative) uses A, AA and AAA as the success criteria for mobile accessibility optimization in the design of relevant accessibility standards. Class A has A significant impact on A wide range of user groups and is not targeted at A specific disability group. Class AA may be targeted at A certain type of disability group, while Class AAA usually focuses on improving accessibility for A certain group and has A low benefit-cost ratio.

2, have the ability

  • Keyboard friendly support
  • All content can be understood, such as semantic HTML support.
  • Add as much text as possible, such as pictures and text captions.
  • Provides high contrast and clear colors
  • Screen reader support

3. How to repair accessibility

1. Semantic structure

Turn off the style test to see if you can understand the content hierarchy. The wrong case

<div>Play video</div>
Copy the code

Recommend case

<button>Play video</button>
Copy the code

The

  • More convenient development, convenient user understanding
  • More suitable for more devices
  • More convenient for SEO optimization


2, keyboard friendly support

When tabIndex is used properly, the default HTML element has built-in keyboard assist. When other elements interact with JavaScript, keyboard assist and screen reader reports are affected. You can reset TAB order by setting tabIndex numbers. You can also mask tabIndex with negative values. Tab smooth rules follow from top to bottom, left to right.

3. Friendly forms support

Form tags are important to give the user an idea of what you need to enter for each form.

Fill in your name: <inputtype="text" id="name" name="name">
Copy the code

In the example above, nothing explicitly associates the label with the form input. Suggest correction

<div>
  <label for="name"> Fill in your name :</label> <inputtype="text" id="name" name="name">
</div>
Copy the code

3. Text description

If the user has visual and auditory impairment, as much as possible can be described, can increase the accessibility experience, the simplest implementation, add Alt attributes, such as links, images, video, forms, tables and other commonly used attributes, need to be added.

<img src="Pictures. PNG"
     alt="This is a picture caption.">
Copy the code

If you want to use the same text as a label for multiple images, you can do this by:

<img src="Picture 1. The PNG" aria-labelledby="image-label">
<img src=Picture 2. The PNG "" aria-labelledby="image-label">
<p id="image-label"< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

4. High contrast support

For users with visual impairment, similar colors will cause visual interference to users and they cannot correctly identify the text content. The page can be tested by manipulating the system to configure a high-contrast mode.

  • Black on white or black on white is best for people with poor eyesight or for display devices that are not so good.
  • Certain combinations – such as black and red, black and blue, yellow and green – can cause visual fatigue and even seizures.
  • For readers with poor eyesight, close letter spacing can be quite difficult to read.
  • Avoid fancy fonts

High contrast online color test: webaim.org/resources/c…

5, WAI – AIRA

Wai-aria is a specification written by the W3C that defines a set of HTML features that can be used with other elements to provide additional semantematization and improve the lack of accessibility.

  • Personas – This defines what the element does. For example role = “navigation”
  • Attributes – We can assign attributes to elements by defining them. For example: aria – required = “true”
  • State – A special attribute used to express the current condition of the element. For example aria – disabled = “true”

More documentation: developer.mozilla.org/zh-CN/docs/…

4. Barrier-free tools

1, online test site

wave.webaim.org/

2, Chrome barrier-free detection

Screen readers

ChromeVox, NVDA, JAWS, or VoiceOve open the browser and enable screen reading. Mac uses Command + F5 to enable language screen reading and test page readability.



www.ibm.com/developerwo…

Sixth, other

China Information Accessibility Alliance www.capa.ac/ W3C Accessibility Guidelines www.w3.org/WAI/