cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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 development...

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


Smart Width


Mk Datepicker

Codepen Example

Mk DatePicker

Table Of Contents



Basic Setup

Min, Max, & Initial

Value Vs. Data-initial


Linking Datepickers


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

MkComponent is an...

Mk Autocomplete

Codepen Example

Mk Autocomplete

Table of Contents



Basic Setup

Remote URLs

Supplying Data

Multi/Single Selections


Time & Min-Width

Flash Class...

Mk Loader

Codepen Example

Mk Loader

Table of Contents





Public API

Event Hooks


Screen reader compatible. We support screen...

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...