Tag Archives: a11y

The art of labelling — A11ycasts #12

There’s a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome’s DevTools. A few notes:

  • Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to chrome://flags/ and turn on in the DevTools settings.
  • Wrapping an <input type="checkbox"> in a <label>gives the input a name of the text in the label, even without a for attribute.
  • The aria-labelledby attribute overrides the name of the element with the text taken from a different element, referenced by ID. It can even compose a name together from multiple elements, including itself.
  • Adding tabindex='0' to an element will make it focusable.


Curated by (Lifekludger)
Read full article at css-tricks

Designer’s Guide to the Basics of Web Accessibility Design – Hongkiat

In this post, I’ll cover the basics of accessibility design, what it is, what it aims to solve, and steps you can take to get started. Note, this is an incredibly detailed subject, and it will take months or years of practice to fully understand. But the benefits are worth the effort, and all of your web projects will leave every visitor with a lasting impression of accessible content.

Intro To Accessibility

Generally speaking, accessibility is the idea of building content so that it can be consumed by anyone. This may include blind people who can’t read, and it may include people with physical disabilities who can’t operate a mouse or keyboard (or either).

But it can also include people with slight deficiencies in vision. It might include people with dyslexia or reading comprehension issues. In fact, the idea of “web accessibility” includes every possible impairment that might affect how someone interacts with or consumes a website.

Steps To Accessible Design

I highly recommend visiting the A11Y project website for practical accessibility tips. A11Y (which is also a numeronym) is a free open source project hosted on GitHub, offering techniques for accessible web design.

You can browse their checklist of accessibility items, or even a bunch of design patterns for elements like dropdowns, tabs, accordions, buttons, and modal windows (among other items).

a11y accessibility project website

It’s difficult to learn all of this stuff and to implement it at the same time. Take it step-by-step, and be willing to research more if you get confused.

Check out the A11Y’s how-tos and quick tips for getting started. You’ll bump into specific suggestions like jump-to-content links and high-contrast color schemes. These techniques each have their own level of detail, so implementation is mostly about testing to see what works.

Curated by (Lifekludger)
Read full article at Source: Designer’s Guide to the Basics of Web Accessibility Design – Hongkiat