Tag Archives: a11y

UI Options 

UI OptionsObjectiveEasily add UI Options to your website. Add a simple separated-panel preferences editor to any page.DescriptionUI Options adds a simple preferences editor dialog with a set of six panels in a collapsible panel at the top of the page, accessible through a button in the upper right corner of the page.

Curated by (Lifekludger)
Read full article at Source: UI Options | GPII DeveloperSpace

Writing CSS with Accessibility in Mind

An introduction to web accessibility. Tips on how to improve the accessibility of your web sites and apps with CSS.

… a lot of things have changed and CSS now gives us an incredible set of tools to style the web. We went from Verdana to Webfonts, from fixed widths to Responsive Web Design, from table-based layouts to Grid, and we don’t have to use images anymore for borders, fonts or shadows. We have custom propertiesFeature Queriescalc() and numerous new units. This of course is only a subset of the great developments of the last years.

Writing CSS with Accessibility in Mind

While this wide range of properties and endless ways of solving tasks with CSS makes our lives easier, it also creates the potential to worsen the experience for our users. It’s actually possible to make a website inaccessible in just three lines of CSS.

In this post I’ve collected techniques, considerations and approaches that will help you write more accessible CSS. The collection starts with basic concepts and well-known properties and covers some of the newer stuff at the end.

In the end it got way bigger than expected, so here’s a handy menu so you can jump directly to a section that interests you the most:

Curated by (Lifekludger)
Read full article at Source: Writing CSS with Accessibility in Mind – Manuel Matuzovic – Medium

Web Accessibility Checklist

A beginner’s guide to web accessibility

ARIA Landmark Roles are helpful landmarks that can be used by AT to navigate a website.

Note: When you validate html using landmark roles, you’ll receive a warning stating these roles are redundant. In HTML5, several of the landmark roles are implicit via the native structural element which is supported by most modern desktop browsers with the exception of IE and iOS Safari. So, if you support IE and iOS browsers, you’ll want to use the landmark roles. For more information, read Quick Tip: Aria Landmark Roles and HTML5 Implicit Mapping.

Curated by (Lifekludger)
Read full article at The A11Y Project

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