css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

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

Colors

[[[pen...

Mk Selectmenu

Codepen Example

Mk SelectMenu

Table of Contents

Features

Markup

Basic Setup

Multiselect

Groupings

Classname Transfering

Additional Labeling

Reset

Smart...

Mk Datepicker

Codepen Example

Mk DatePicker

Table Of Contents

Features

Markup

Basic Setup

Min, Max, & Initial

Value Vs. Data-initial

Formatting

Linking...

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

MkComponent

Table Of Contents

What is MkComponent?

Features

How to Use

Utils

Template System

Format System

Transition Support

Aria

Extending Existing Components

The Aria API

What is MkComponent

MkComponent...

Mk Autocomplete

Codepen Example

Mk Autocomplete

Table of Contents

Features

Markup

Basic Setup

Remote URLs

Supplying Data

Multi/Single Selections

Tags

Time &...

Mk Loader

Codepen Example

Mk Loader

Table of Contents

Features

About

Markup

JavaScript

Public API

Event Hooks

Features

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

Aria

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:

a

area

button

input

object

...

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