The Vitamin T Blog

All you ever need to know about creative hiring, plus tips on digital portfolios, resumes, events, and trends.

Vitamin T Vitamin T

Top Tips to Make Sites Accessible from Ethan Marcotte

Illustration of accessibility figure

Just over a decade ago, responsive web design came into our vernacular, thanks to designer and developer Ethan Marcotte. This new way of designing for the ever-changing web was to ensure a site worked on any device—smartphone, tablet, laptop, desktop. Today’s movement is about making your site work for everyone, including people with disabilities. 

We’re offering a free Gymnasium course that shows how to do just that (did we mention it’s being taught by Ethan Marcotte and you can squeeze it into your lunch hour?) It’s a must-watch for any designer or coder, anyone leading a creative team, and everyone running a business with an online presence. Which, these days is pretty much every business.

Yes, the Ethan Marcotte

In case you haven’t been following along (and we don’t blame you if you haven’t, not everyone wants to look under the hood of their website experience), Ethan Marcotte shot to cyber fame with his mobile-first thinking and literally wrote the book on responsive web design. He’s been one of Fast Company’s Most Creative People and has worked with clients like New York Magazine, the Sundance Film Festival, and The Boston Globe. Now, he’s teaching you everything you need to know to make your site accessible. Soon, accessible sites will be as ubiquitous as responsive ones, and we’ll wonder how we ever got by without them.   

Why accessibility matters

The most obvious reason is a moral one. We want to make sites inclusive. So, as a designer or coder, you need to consider people with visual impairments—maybe they will only have the page read out loud to them. Or those with limited motor functions who may not be able to use a mouse or trackpad—can they easily tab through? Keep in mind, too, that the Google algorithm is changing next year to factor in user experience

The second reason is economic. In the United States alone, 61 million people have some form of disability, so this is a good chunk of viewers, consumers, and potential customers that you don’t want to miss out on.  

accessibility_callout_1

Of course, there’s also a legal obligation. Have you heard of Guillermo Robles? He is the blind man who recently sued Domino’s because he couldn’t order a pizza despite having screen-reading software. In October 2019, the Supreme Court denied the pizza giant’s petition to hear the case, leaving a lower court’s decision in place and effectively handing a victory to Robles and disability advocates everywhere. (Even Beyoncé, who we’re pretty sure you have heard of, is not immune to making her site ADA compliant.) 

5 topics in 60 minutes

When you hear facts like a recent accessibility report that analyzed the top million homepages found that only 1% meet the most widely used accessibility standards, it’s critical that we all do our part to make accessibility, well, accessible. 

In just under an hour, Ethan breaks down the basics of making your site do just that. He’s conveniently divided the course into five separate chapters, which makes it easy to go back and refer to specifics when you’re actually ready to design or code. Here’s what Ethan covers:

  • Screen readers for voiceover
    Ethan focuses on Apple VoiceOver for MacOS to show how a site’s text is read and organized, and why using descriptive link names is critical.
  • Designing beautiful focus states
    This chapter explores how to create the equivalent of a beautiful hover state for users that rely solely on a keyboard due to fine motor disabilities. 
  • Flexible and accessible typesetting
    Ethan explains why setting up font size in pixels can actually be detrimental to people with vision impairments.
  • Responsively designing with viewport units
    Learn how to use these percentage-based measurements that are relative to how tall and how wide your browser might be at any time.
  • Creating accessible drop cases
    Find out Ethan’s tips for creating cool drop cases that are easy on the eyes and easy on the ears for those listening with screen readers.

 accessibility_callout_2

Goodie bag

The class is free and there are party favors? Sign us up! The course also comes with a PDF of helpful resources, broken down by chapter. It’s chock full of articles, tools, and how-tos that make it easy to further explore accessibility. 

So, the next time you have a free hour, make it productive. Sit down with your coffee, burrito, and Ethan Marcotte and learn how to make the world (wide web) a more inclusive place.

Recent Posts