preface

Accessibility, tools, plug-ins, a11y, Accessibility

Actually, accessibility is quite close to us. For example:

  • Color blindness: the proportion of boys is1/12, the proportion of girls with the disease is1/200.
  • The elderly: can not see clearly words need to use a magnifying glass, visual sensitivity reduced need to see the content of the contrast is too low.
  • Pregnant woman: holding a child cannot operate with both hands.

In coding and design can make corresponding help to this group of people, for accessibility design can see the following article accessibility design is very detailed, there are also some related tools for accessibility development.

Read more about accessible World

tool

WAI-ARIA

HTML Cosplay learned a little about WAI-aria in the last article. Wai-aria is not incompatible with front-end development, but you can also use it as a development tool. For example, when developing a front end button:

<style>
    .button {}
    .button.pressed {}
</style>

<! - button - >
<div class="button">I'm a button</div>

<! -- Button activated -->
<div class="button pressed">I'm a button</div>
Copy the code

Using ARIa-pressed from WAI-aria instead of pressed also adds semantics to the button:

<style>
    .button {}
    .button[aria-pressed="true"] {}
</style>

<! - button - >
<div class="button"
    role="button"
    aria-pressed="false">I'm a button</div>

<! -- Button activated -->
<div class="button"
    role="button"
    aria-pressed="true">I'm a button</div>
Copy the code

System comes with

  • Mac: openSystem Preferences > AccessibilitySelect visual, auditory, and interactive AIDS such as magnifying glasses, color inversion, contrast Settings, and more.
  • Open the iPhone:Settings > General > AccessibilitySelect visual, auditory, and interactive AIDS such as magnifying glasses, color inversion, contrast Settings, and more.
  • Native Android seems to do a better job of this, with only one on handoppo r9There are no practical AIDS.
  • Win: Xiao Er does not use Win. Welcome to Github to help supplement this part.

VoiceOver

Apple’s accessibility AIDS are built into Mac computers, iphones, ipads and other devices. The use of The Mac has been covered in the Semantic and accessibility tree. Here are a few shortcuts that can be used fluently:

  • Control +option+ right arrow/left arrow: Toggle navigation, equivalent to in focustab.
  • Control +option+ Shift + down arrow/Up arrow: Enters or exits the selected content in the current navigation.
  • control+option+command+h: Read the content of the web pageheading.
  • control+option+space: Simulates mouse click events.
  • control+option+u: Use a rotor.

For iPhone and iPad shortcuts:

  • Tap once with one finger: Select the item.
  • Tap twice with one finger: Simulate clicking items.
  • Swipe left and right with one finger to switch items.
  • Two-finger click: Stop reading.
  • Two-finger rotation: Select toggle mode to browse only links, heading, etc.
  • Three-finger swipe up and down: to scroll or turn pages.

Chrome Accessibility

This is a feature that comes with Chrome, and it gives you a view of the accessibility tree when you select a node or review an element under console Elements:

Add the Accessibility option to the Audits as well:

When you click On Run Audits Google the browser gives ratings and optimizations related to the current page accessibility and is very detailed:

You can also see the Color suggestions for the current page in Color Contrast Is Satisfactory, or you can click on the Color in Elements:

As you can see in the picture above, two comparison curves are given to provide choices, and the corresponding score is given, of course this is only for reference and not mandatory as a dogma.

NoCoffee

A Chrome plugin that mimics the effect of a color-blind user visiting a page helps identify areas of the page that need improvement. For example, on the Gold Digger homepage select green color blind simulation:

You can clearly see that all the blue nuggets have changed to purple, and the red highlights have changed to yellow.

High Contrast

A Google Chrome plugin can improve the contrast of a page and simulate the effect of a user who is not aware of the color, helping us to identify areas of the page that need to be improved. For example, on the Nuggets home page:

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