sin3

Tag: a11y

NoMoreCaptchas - Welcomes Humans and Sends Away Spam Bots

Published by Sindre Wimberger on July 29th, 2014

NoMoreCaptchas analyses behavior while a user name and password are being entered and determines if the user is human or a bot. There’s no extra field to fill out like with CAPTCHA, no incomprehensible audio to try and decipher and no hidden field that can trick or confuse a screen reader. That means there’s nothing blocking content and a website is still secure.

skiplinks

Published by Sindre Wimberger on July 28th, 2014


Keyboard-Only Navigation for Improved Accessibility
http://www.nngroup.com/articles/keyboard-accessibility/


Fixing Focus Scripts

image longdesc

Published by Sindre Wimberger on June 16th, 2014




Icon Fonts

Published by Sindre Wimberger on May 21st, 2014

Introduction

Ten reasons we switched from an icon font to SVG

@font-face for icons? Compaitibility Research

Accessibility

SVG

Published by Sindre Wimberger on May 7th, 2014

Introduction



Techniques
Can I use SVG
http://caniuse.com/#feat=svg

Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility.

grunticon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike.

takes your SVG drawings and processes them to a CSS icon kit, coming in several different flavors.
http://iconizr.com/


A fast, caching, dynamic inline SVG DOM injection library.
https://github.com/iconic/SVGInjector

A simple JavaScript plugin which detects SVG images on your website, and automatically "looks" for a standard image fallback for those older, less capable browsers.
http://benhowdle.im/svgeezy/

SVG `text` and Small, Scalable, Accessible Typographic Designs

Advanced
Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.
http://snapsvg.io/

Animated SVG Icons with Snap.svg
https://github.com/codrops/AnimatedSVGIcons

The invisible gradient technique: Cross-browser support for SVG (with image fallback) using CSS
http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique

Accessibility
Tips for Creating Accessible SVG
http://www.sitepoint.com/tips-accessible-svg/

Using ARIA to enhance SVG accessibility
http://blog.paciellogroup.com/2013/12/using-aria-enhance-svg-accessibility

Iconsets

NodeJS

**SVG O**ptimizer is a Nodejs-based tool for optimizing SVG vector graphics files.
https://github.com/svg/svgo

Node-WebKit based GUI for SVGO
https://github.com/svg/svgo-gui

SkipTo plugin by PayPal Accessibility Team

Published by Sindre Wimberger on May 5th, 2014

SkipTo is a replacement for your old classic “Skipnav" link, (so please use it as such)! The SkipTo script creates a drop-down menu consisting of the links to the important places on a given web page. The menu will make it easier for keyboard and screen reader users to quickly jump to the desired location by simply choosing it from the list of options.