Web Design for the Blind and Visually Impaired


Everyone claims to care about it and understand it on both sides of the interview table, but when it comes to job time, very often no one mentions it again.

This wasn’t true of all my jobs, but most of them.  At the Academy of Art I worked with subtitles using inqscribe, and we took great care to accommodate disabled students, sometimes transcribing entire courses for one student. This work was a labor of love for me, because my sister, Jenny, was legally blind.

Jenny passed away recently.  I built a tribute site in her honor. Because she was legally blind and many of her friends are blind or visually impaired, I took extra care to design the site with blindness in mind.

Some key points:

Label everything with an alt tag.

Provide alternatives for images and video, using special media players, subtitles, transcripts, and audio description if possible.

Provide a means to change color to high-contrast or grayscale.

Provide a means to change font sizes without breaking the layout.

Always test your site with browser zooming and be sure the layout can handle several increases in magnification.

Use links sparingly. If you want to provide a bunch of external links, group them at the bottom rather than sprinkled liberally throughout the content. Try not to use images as links but if you do, use the alt tag to describe the link rather than the picture.

Name your links carefully, avoiding “click here” and “learn more”, preferring a clear label of where you are going: “Audio Description Project”.

Avoid opening new tabs for all links.

Abandon your mouse in favor of keyboard controls to eliminate mouse-dependent activities.

Avoid using headers and header navs with frames.

Strongly consider using a single column. Keep key content towards the top and if there are two columns, keep the main nav and lead content in the left column to help avoid extra tabbing.

Turn off your images in your browser and be sure tabbing and navigating through your site is simple and precise.

Be sure your forms are laid out logically and consistently, use labels properly, and avoid client-side scripts and radio buttons.

Test with accessibility tools and if you can, test on several screen readers.

Finally, solicit feedback from blind and visually impaired users. Nothing can replace the experience of the end-user, particularly those with low vision.


Why I love Trello

Recommending tools to people is a risky business. What if they hate it? What if they hate me for ruining their previous workflow? What if they don’t want efficiency, they want familiarity and predictability?

Wailing Baby

At times in our lives the best we can do is survive. We aren’t all striving for greatness with the same intensity at the same time. Far from it. Stability is underrated to those who live for today, but for those recently battered by storms of misfortune, or childbirth, it is enough to simply go through the motions. It happens to all of us.

Human beings aren’t machines.

Modern Times
Charlie Chaplin in Modern Times

We make a difference in many different ways. Some of us are steady contributors; others are dead-weight for long stretches before making transformational impacts in micro-moments. We didn’t build the team and we aren’t here to judge anyone; we are here to help.

Everything I do must start with a human and end with a human.

To forget humans at any point in systems design creates only noise and technical debt.

When I set out to design a “website” I am really designing a system interface between the client, their users, and the world at large.

And by system interface, I mean a rapid Vulcan Mind meld which leads to a secure value exchange and sparks a new long-lasting and mutually-beneficial relationship.

Vulcan Mind Meld
Vulcan Mind Meld

It’s powerful stuff to grok the value propositions of the client and the true needs of the users, all while filtering out the noise and technical debt that has polluted the air.

Clients and their value propositions are shockingly difficult to understand.

We do our homework but at some point we take on faith that they have something to offer. We can’t know their business or their clients as well as they do. They know themselves but the Gordian knot of spaghetti code tangled around them has obfuscated their vision. They don’t know the way forward but fake it bravely every day. They are kings and queens lost in their own jungle and now so are you.

Medicine Man
Australian medicine man with magic healing crystal.

You were brought in as a medicine man. You are here not to make a “website”, but to untangle the true nature and place of their value propositions in a competitive digital world. They need you to understand who they are, what they do best, what they suck at, and how to improve them drastically without changing them much.

You are here to show them how to unblock their creative energies, find themselves as a brand, as a business, as a team, and as individuals and maybe even have a little fun. They assume you can do that unobtrusively in eight to ten weeks with a “website”.

They are blissfully unaware that no piece of their human-based value-exchange system exists without the other. They are in denial. A “website” isn’t what they need. Re-discovering who they are is what they need; the website is simply to share their journey. It must tell a story of self-discovery with a killer value proposition and a happy ending.

Somewhere within their best intentions exists a genie that can’t get out. They are trapped by their tools and their familiar workflow and perhaps, momentarily, by their humanity. None of this is their fault, per se.

But there is a way to help.

How? Surely Trello can’t do all this?

We want to help in big ways, transformational ways, but, again, people don’t always want to be transformed. Give them a pill to lose the weight. Better yet, cast a spell over my tanning booth. Wait, forget the pill and make the spell have me lose weight, get a tan, and pay my bills k-bye-thanx!

What does this have to do with Trello?

Trello Welcome Board
Trello Welcome Board

I am hopeful that Trello will be the tool that gently leads us out of the jungle and safely back home.

Water Stick
Water Stick

Trello is my water-stick. It will lead us out of confusion, noise and technical debt and into the clear, a plateau high above the plains, where together we will see from horizon to horizon how vast their kingdom is.

It will nudge them to rethink everything about who they are and what they are doing. Because Trello surreptitiously forces you re-organize your entire workflow into manageable bits. And you have fun thinking about building ontologies and workflows without knowing that you’re doing it.

What’s more, Trello can integrate my clients, my teams, and my projects directly into my personal workflow.

What does that mean?

I use the Scrum method to get things done. It consists of making four living lists.

Backlog: a long to-to list of tasks in a project.
Today: my short list to-do now.
Yesterday: the items I completed yesterday.
Archive: All the yesterdays. Trello auto-archives as well.

Scrum boards in Trello
Scrum boards in Trello

I build these cards into every Trello project board.

I use a Pomodoro Clock and work in 25 minute blocks with 5 minute breaks. Each morning I map out my day into 30 minute blocks with about 12 Pomodoros baked into the schedule. That’s 5 hours of actual work and one hour of breaks. In an 8 hour day, that leaves two hours for meetings and lunch. More meetings means fewer Pomodoros.

Pure fantasy. More likely I’ll get 5 – 10 Pomodoros, and pause the clock for interruptions. Other times I might just reset the clock and keep working or I might rearrange all of it on the fly. Whatever works and keeps me working on the right things at the right time. These are living lists and I’m only human.

This method fits into Trello as if it were made for it. Trello helps me learn to chunk my work into measurable units and better estimate my time. It helps me stay productive and focused. It helps me rearrange, clarify and optimize on the fly.

I even made template teams for new “website” projects within Trello to bootstrap the process of on-boarding new clients.

Trello Client Project Template
Trello Client Project Template

I am hopeful my clients will use Trello early and often to help sculpt my backlog into a turn-by-turn map out of their jungle.

Even if they don’t use it I can integrate their documents into my Trello workflow and simply manage the project alone. If necessary I can print it out and show them my project checklists. Being humans, many of them will completely ignore Trello but they will sleep well knowing I wield a mean water-stick.

That’s why I love Trello.

Thanks for your time.

Molly Elizabeth at Udemy

Last week Molly Elizabeth of Udemy contacted me to ask if I would look over a new, free HTML5 guide recently posted on the Udemy blog by Mark Lassoff.

I’ve been mighty busy with my two sons, Aiden, 2.5 years old, and Joshua, just 8 months and I failed to respond. But Molly would not be deterred. She emailed me three times.

Good for you, Molly! I love that kind of persistence from anyone who is not a bill collector.

Udemy, for those who don’t know, is an online learning site replete with courses of all kinds, including a wide offering of coding courses. The link she sent me above lands on a really basic HTML guide for the rawest of beginners. It is essentially just a teaser for the paid course, but it does offer a starting point and is worth a look for total newbies. I liked that he included a bit about displaying media because newbies always seem to want to embed audio or video on day one.

So I want to thank Molly for pulling my coat to that and for inspiring me to take a fresh look at the entire course catalogue at Udemy. The number of free courses at Udemy is impressive. Below are some I intend to check out:

Thanks, Molly.

Best Practices

zen monk meditates
be one with your CSS grid

NOTE TO SELF: The sooner you develop good habits, the sooner you will find your center as a developer.

Put another way: if you don’t develop good habits, you won’t develop good work.

1. Know and love your content
2. Choose your tools and workplace wisely
3. Be neat
4. Get out of your own way (solve real problems)
5. Don’t Repeat Yourself (DRY)

Each of these is worth it’s own short post, so I’ll leave you with this to ponder:

If a blogger writes a post and no one reads it, would a tree fall soundlessly in a forest somewhere, too?

Supporting ie

An important staring point for any project is deciding what browsers you need to support.  If your client or boss insists against your best advice to support ie version 9 and below, you most likely will have to spend a fair chunk of your effort on hacks.

According to the W3Counter’s browser statistics, in July 2014 ie had a 21% global market share, however only about 6.6% of all ie browsers are ie 9, and only 4% are ie 8.

While ie 8 and ie 9 combined still represent 10% of all ie browsers, they only represent about 3% of browsers overall.

Is it really worth your time supporting the rapidly declining 3%?

The writing is on the wall.

Microsoft recently announced they plan to end support for most of their older browsers:

After January 12, 2016, only the most recent version of Internet Explorer available for a supported operating system will receive technical support and security updates.

At this point I am ready to abandon ie 9 and below unless someone makes me an offer I can’t refuse.


SASS and LESS are CSS pre-processors.

What is a CSS pre-processor?

A pre-processor is a program that processes its input data to produce output that is used as input to another program.

A CSS pre-processor will allow writing clean CSS in a programming construct instead of static rules and it will output the result in clean CSS.

Advantages include: variablesnestingmixinsoperators and

Guru Chris Coyier writes about SASS vs. LESS and general musings on pre-processors on CSS-tricks.com.

Udemy also compares LESS and SASS.

Google provides a few notes about DevTools and working with CSS pre-processors.

For the cons of using pre-processors, check out Miller Medeiros‘ blog post.

Finally, here’s an epic YouTube Playlist on SASS related topics:

Sass styleguides

Fonts and Typefaces

A font is what you use, a typeface is what you see.

These days everything seems to trip me up. My thoughts just dart from one place to the next.  What’s the difference between a  font and a typeface? Do you spell web with a capital ‘W’? And then I click on something and *poof* my train of thought is gone.

Capitalization of “web” and “Internet”

Chicago now prefers web, website, web page, and so forth—with a lowercase w. But capitalize World Wide Web and Internet. 7.76.

Chicago Manual of Style

I just want to make sure my HTML and CSS templates are up to speed and here I’m hung up on capitalization and fonts.

Besides my ADD, the issue at hand is this: should I use @import in my CSS to load my fonts or just add them in the html as a link?

Google fonts is fantastic. I love the real-time analytics.

But I’m not sure how I want to use it.

Look! A shiny new thing! Typecast!

Stick to the issue: should I use @import?

The answer according to Guru Steve Souders is no.

Here’s why: using @import causes the individual css files to load sequentially, rather than in parallel.

There you have it.

Or will I need a Web font loader?

Web Tutorials

You can learn just about anything about Web development online for free.

For learning basic HTML, CSS and JavaScript, start at Codecademy. For me it was time well spent.

Other helpful general knowledge sites include:

Further Reading:

reset.css vs. normalize.css

Browsers are programmed to apply default values to elements on a web page whether or not any CSS is written. This helps render viewable HTML without any added styles. The only problem is, different browsers can’t agree on the default styles of elements and these inconsistent values then become part of your cascade.

In order to level the playing field of your cascade, you may use a set of “reset rules” to wrangle these browsers into line.  A clean baseline of styles across all browsers can save headaches later.

Eric Meyer’s reset CSS is widely used and referenced.

An alternate solution, normalize.css, is presented by necolas.

The main difference between them is that normalize.css preserves the useful defaults rather than flattening everything out and forcing you to re-declare default values you would have preferred to keep. Normalize also fixes bugs, which is outside the scope of reset.css.

Oli Studholme presents a comparison and concludes normalize.css is a better way to begin.

Me? I went with necolas as usual.

I add the normalize.css file using @import to the top of my global css file.  Strip it down as much as you like, although there isn’t a lot of bloat. Simply adding the normalize.css to the top of your global.css is fine, too. If I am using Bootstrap, there is no need since a version of normalize.css is included.