Posts tagged accessibility

Please stop using placeholders as labels!!!!

Accessibility is the key :)

Accessibility is very important to keep in mind when authoring web-based experiences. When you use a placeholder attribute on an input field in place of a label element...

Getting Started with Grunt Tenon Client

Web Accessibility / A11Y is finally on a path of owning more mindshare in the web development community. It has a long way to go but will get there eventually when we learn more about all the...

Notes on ARIA

I can’t find a friendly, readable guide to ARIA. So I sat down and took notes on the spec. This isn’t an exhaustive explanation of proper use — more a quick-and-dirty overview. I hope you find it...

How do you mark up a comic?

Say I want to provide transcriptions of a comic to my site visitors, or maybe I'm making a comic with SVG. How best should I mark things up to make the meaning clear to assistive technology,...

user-scalable=no ... Evil or Slightly Not Evil?

No bias in that title, right?

Generally I don't like the idea of denying the user standard browser/OS functionality. More often than I find appropriate I come across sites (including at my own...

EnvisionUS.com Released

We did it!

After months of blueprinting, information architecture, stakeholder interviews, design, front end, and...

Bosma.org Pattern Library

*Note: Because of the number of iframes on the page, sometimes images don't load correctly. Simply hover over the frame and click "rerun."*

Basic Elements



Mk Selectmenu

Codepen Example

Mk SelectMenu

Table of Contents



Basic Setup



Classname Transfering

Additional Labeling



Mk Datepicker

Codepen Example

Mk DatePicker

Table Of Contents



Basic Setup

Min, Max, & Initial

Value Vs. Data-initial



BEMantic: DRY Like You Mean It

Tim Baxter’s recent A List Apart article, Meaningful CSS: Style Like You Mean It, has once again re-ignited the debate that front-end developers who prefer to take an object oriented approach to...


Table Of Contents

What is MkComponent?


How to Use


Template System

Format System

Transition Support


Extending Existing Components

The Aria API

What is MkComponent


Mk Autocomplete

Codepen Example

Mk Autocomplete

Table of Contents



Basic Setup

Remote URLs

Supplying Data

Multi/Single Selections


Time &...

Mk Loader

Codepen Example

Mk Loader

Table of Contents





Public API

Event Hooks


Screen reader compatible. We...

The cost of custom controls

There's no question that a majority of the time, there's a ton of value in creating custom components for your webapp. Custom components should aid in a user's experience with your...

<abbr> Is Broken. Let’s Fix It!

There are many problems with <abbr>.

It’s a point-and-click relic. Touchscreens can’t access it, not even Android or iOS with mice plugged in. Keyboards and assistive switch controls have...

Pedestrian accessibility in Vienna, Austria

I spent a week in Vienna, Austria - attending the 2016 Perl Dancer framework conference where I spoke on inclusive design and accessibility.

Amongst the beautiful baroque architecture, I noticed...

A Better Accessible Contrast Checker (HELP WANTED)

Readable text contrast is a foundation of web accessibility.

But boy does it suck to double-check. You have to find all the text/background combinations in your site, then paste them into a tool....

ARIA Cheatsheet


Cheatsheet for the most common ARIA Roles and Attributes

HTML elements can only have one role or attribute. Elements which are already semantic do not require additional aria attributes e.g ...

Keep links accessible & meaningful

Links is the most thing on the web you see so that we should make links more simple and more accessible for all users.

we will take a look at examples and discuss how should links looks.

1- Link or...

SPA is an anti-pattern for A11y.

A Single Page Application (SPA) is a web application or website that loads all of the resources required to navigate throughout the site on the first page load. As the user clicks links and...

Avoiding chaos when using Flexbox 'order'

A recent Twitter flurry provoked me to finally build a Flexbox demo I've been meaning to create since I first started playing around with CSS flex properties.

Roma Komarov posted an exploration...

How up-gradation of Front-end can enhance the Performance, Accessibility, Optimization, SEO and User Experience #DograsWeblog

Document designed on the Front-end up-gradation Since Google, Yahoo, Bing etc and other world best Search Engine's have done future development focusing Smart phone users. Web browsers gone...

Tabindex 101

The tabindex attribute "enables focus to be moved via keyboard to HTML elements". In old specifications, tabindex was only valid on the following elements:







Separators Inside <select>

So the design calls for a separator between options in a <select> menu.

How hard could that be?

The fake <option> approach

This is what you usually see on StackOverflow:

  <!-- This...

Writing CSS for High-Contrast Mode

I work on a component library at my job. I sweat over making it accessible, so of course I want the components to be legible in Windows’s High-Contrast Mode. For more information on what that is...

A Case for Web Accessibility

One would think that by 2019, the argument about the necessity of implementing Web Accessibility would be over, that everyone would agree that Web Accessibility is fundamental, that it would be the...

Accessibility rants: No budget, no excuse

A week and a half ago it was the web's 30th birthday, and I happened to coincidentally find on Twitter two accessibility blog posts that caught my attention:

“The web we broke” by Ethan...

Fix 85% of your Web Accessibility issues in 5 easy steps

In a previous post, we saw the importance of Web Accessibility and mentioned The WebAIM Million, an analysis by WebAIM on the current state of Web Accessibility of 1 million popular pages.


Free Web Accessibility Tools

This list of Web Accessibility tools is going to be a bit unusual. Some of them may not even be considered accessibility tools, especially the ones from the first section. But, usability and...