Introduction to the

Accessibility, DOM details, front-end development, A11y, Accessibility

Accessibility is usually shortened to a11y because of the long spellings in which 11 refers to 11 letters in the middle.

Accessibility refers to the fact that users of all types can use it normally in the process of use. The most common thing in life is barrier-free facilities. I believe many people have joked about it. Let’s first discuss barrier-free related content from life examples to front-end development.

The content of this article is popular science, as the introduction of the next few front-end accessibility articles.

Living example

Blind path is the most common barrierless facilities in life, its original intention is to help the blind and presbyopia and other visual impairment of the crowd to guide the direction, so that all people can walk on the road barrierless. In real life, however, blind paths are often the opposite of what they actually mean:

Such a blind path I believe we must have more than once joked about it in the end there is no use, in addition to the blind life there are many such barrier-free facilities:

  • The busSpecial seats, designed toThe elderly, the sick and the pregnantUse, but more often byThe young manTo take up.
  • Move the stationBarrier-free elevatorDesigned for useThe wheelchair 和 The old manAnd so on the mobility of the people to use, but every time can see a lot of people to occupy it.
  • Set under the number keys in the elevatorbrailleAccessible for all.
  • It’s on paper money, toobrailleAccessible for all.

What have I to do with

Many students may have such a question, what’s my business? In fact, in addition to the large number of special groups, we sometimes temporarily become special groups. In the special group of temporality is divided into: temporary, permanent, situational.

temporary

The most recent example from the small second side is a zero classmate, playing basketball accidentally with his hand to support the floor resulting in fracture and dislocation. For example, some mobile apps require two-finger zooming and other operations. The iPhone provides auxiliary touch controls for accessibility:

Who can guarantee a lifetime of good health? Even the senior with two pectoral muscles and eight abdominal muscles had been working overtime for more than a month and suffered temporary blindness due to spinal compression. It is not that he will not have an accident if he is strong. Students still want more sports, not sedentary and buried in front of the computer.

permanent

Xiao Er’s uncle is born red-green color blind, we should not think that this proportion is very low:

  • China’s male color blindness rate: 4.71+-0.074%
  • Our country female color blindness rate: 0.67+-0.036%
  • The frequency of color blindness gene carriers in China: 8.98%

Most PC games have color reversals to help color blindness, such as the popular LOL. The iPhone also offers features such as display adjustment, color filters, and contrast enhancement to help users who are color blind, weak, or visually impaired.

situational

Situational is the most commonly encountered barrier in life. Sometimes you need to mute your mobile phone in meetings and at work. When a wechat friend sends a voice message, you can convert it to text by holding down the voice message.

Many of you didn’t think of that? Some situations in life also need accessibility to help us.

Accessibility classification

Accessibility is mainly divided into: motion perception, vision, hearing and perception. Here are some relevant examples to help you understand:

Motion perception

Kinesthesia refers to disorders of movement and dexterity:

  • The use of voice or assistive devices may be necessary if the fracture is difficult to operate.
  • Cervical spondylosis leads to the head can not easily rotate, can use the head, eye tracker, etc..
  • If the touch panel on your laptop doesn’t work, or if you’re on a bus or subway and can’t easily use a mouse, you can use keyboard shortcuts and web accessibility (as discussed in the next article).

visual

  • Presbyopia and visual impairment, useMobile phone amplifier 和 Display amplifierEtc., have to mention that some websites are usedMaximum - scale = 1.0To prevent the page from being zoomed, what should these users do?
  • Color blind, color weak, web provides certaincontrast 和 colorTools to use or switch between.
  • Blind people are offered helpReader identification pageTools, in fact, there are programmersBlind programmer.

auditory

  • Hearing impairment, the use of hearing AIDS, cochlear implants, etc., in the use of software or web pages, not only givenError toneYou also need to work on errorsVisual cues.

perception

  • forADD the difficult languageShould be reducedPage interference 和 Cognitive burden.

You can reach

During front-end page development, you can use accessibility techniques to the extent that you can:

  • If the target group doesn’t need itAccessible readingConsider not using it.
  • When the daily development task is too heavy to take care of, we can use part of it within our power and optimize the front-end page when we are free.

Four reference

  • Perceptive, not all people can see things on the page, such as for color blind, color weak users on the pagecolorLet’s do some processing.
  • Operable, not everyone can use the same tools as ordinary people, such as whether they can not useThe mouse 和 Touch screenYou can operate the web page.
  • Easy to understand, design toocomplex 和 Don't agreeCan be confusing to the user, such as the input field only SettingsplaceholderIt’s not setThe description tag“, the user may forget what he was doing in the middle of typing.
  • Compatibility, the ability to use a page with a blind keyboard or screen reader, is best knownHawking greatlyUse three fingers to operate the device.

Three themes

The next article will focus on the following three topics, including semantic related content in THE SEO series of articles mentioned H1 little secrets and IMG mason, SEO initial experience is a part of semantic, the realization of SEO can also help special groups of users is wonderful.

  • Focus: Use the keyboardtabThe next option,tab + shiftThe previous option, properly set the focus of the page to help the user provideMore use possible.
  • Semantically: Help through semanticallyAccessibility correlationTools understand pages.
  • Visual design: helps users easily perceive and understand the page through color and contrast, spatial layout, etc.

Accessibility Related Content

  • Little secret of H1 Mason
  • Img large
  • Barrier-free world
  • Grab the focus by the throat
  • Semantic and barrier-free trees
  • HTML Cosplay
  • Barrier free tool

Grow up together

In the confused city, there is always a partner to grow up together.

  • You can click on this if you want more people to see the articlegive a like.
  • If you want to inspire your mistress thereGithubGive aLittle stars.
  • If you want to communicate more with small two add wechatm353839115.

PushMeTop originally contributed to this article