Accessibility Cheat Sheet – DEV Community

Are you aware what a13y means? If not, it in all probability implies that you continue to have some catching as much as do on the subject of accessibility. The concept of this publish is to stipulate crucial features of accessibility, that’s why please deal with it extra like a cheat sheet than a compendium. On the finish of the article, I added some sources that may hopefully encourage you to do some extra analysis on the subject. Take pleasure in!


What’s accessibility? What does it imply to be accessible?


Accessibility may be seen because the “potential to entry” and profit from some system or entity. It is a vital idea in fields like structure, panorama structure, product design, graphic design, transport, internet improvement and digital options.

Accessible = Inclusive

Keep in mind! The objective of accessibility is to not create a separate answer, however to accommodate the primary answer to as many individuals as doable. If we preserve that in thoughts, the outcome might be a greater answer for everybody! Take into consideration the elevator – primarily created for individuals who couldn’t stroll the steps, however made life a lot simpler for all of us.

Accessibility = High quality

The Internet Content material Accessibility Pointers, generally known as WCAG, are a set of requirements which were internationally developed, with the objective of making a single set of tips which can be acknowledged by organizations and people world wide.

WCAG 2.0 and WCAG 2.1 are steady, referenceable technical requirements. They’ve 12-13 tips which can be organized underneath 4 ideas: perceivable, operable, comprehensible, and strong. For every guideline, there are testable success standards, that are at three ranges: A, AA, and AAA


Accessibility Points


Let’s take into consideration the accessibility points a consumer may face whereas browsing the online (and I’m certain all of us skilled not less than one among them greater than as soon as!)

👉 Visible

  1. Blindness
  2. Low-vision
  3. Shade blindness
  4. Utilizing a cellphone on a sunny day

What can we do?

  • Use of native HTML components
  • Use different textual content for graphics
  • Use colours with excessive distinction
  • Allow navigation with keyboard
  • Place associated content material shut collectively
  • Broaden abbreviations and acronyms

👉 Listening to

  1. Deaf individuals
  2. Laborious-of-hearing
  3. Individuals who don’t wish to disturb

What can we do?

  • Use captions for all movies
  • Don’t put content material in video and audio solely, add textual content as effectively
  • Don’t make the cellphone the one technique of contact with customers (for instance within the type or on an organization web site)
  • Write in plain English

👉 Motor

  1. Incapacity to make use of a mouse
  2. Gradual response time
  3. Restricted high-quality motor management
  4. Customers caught in a shaky bus
  5. Customers with small telephones

What can we do?

  • Allow navigation with keyboard
  • Create giant clickable areas
  • Make messages clear and concise
  • Sliders are cool but additionally troublesome to make use of, good to have an choice to sort as effectively
  • Don’t have quick time-out home windows
  • Don’t put too many interactive components collectively

👉 Cognitive

  1. Studying disabilities
  2. Simply distracted individuals
  3. Individuals who have difficulties to focus
  4. Dad and mom with young children

What can we do?

  • Comprehensible content material: correct construction,
    (headings, lists and separation)
  • Transient and clear messages
  • Making errors comprehensible for the consumer so he can simply appropriate them
  • Give a response consumer is anticipating
  • Maintain it easy (e.g don’t use italics)
  • Use autocorrect and supply strategies
  • Give reminders and prompts

Hope you discovered this quick publish helpful and that you just’ll proceed to broaden your information on accessibilty. Now, are you able to guess what a13y means?


Instruments and sources


Funkify: extension for Chrome that helps you expertise the online and interfaces by the eyes of maximum customers with completely different skills and disabilities.

Wave: a set of analysis instruments that helps authors make their internet content material extra accessible to people with disabilities

👉 Inclusive Elements Design:
👉 a11ycasts:
👉 BBC a11y guides:

Add a Comment

Your email address will not be published. Required fields are marked *