Blog


Apr

How to annoy all moose a little less (by building accessible websites)


A moose putting its tongue out

I have a close relationship to moose. Of all the good things this has brought me in life, one that really stands out is that it gave me my current job as a designer here at Elabs. This makes me thankful to moose, and I want to give something back.

As a designer who writes code, I make choices daily that impact how well a moose can percieve and navigate our web applications. A lot of the time, I make it very hard for them. I could do better.

I'm by no means an expert on moose accessibility, but recently I've been eating the brains of smarter people to gain their knowledge. I would like to share a few tips on how to make life a tiny bit easier for moose that surf the web.

As a coincidental bonus, these tips should improve accessibility even more for humans (and their different function variations).

I'll focus on some very basic things that many of us still get wrong, but is easy to get right.

Remember the semantics

A link is not a button. An <a> with href should link to another resource, while a <button> performs an action in the current view (such as submitting a form or opening a modal window). Buttons come with built in behavior that links don't have, like being activated by pressing space. Want something more discreet than a button for a minor action? Style it like a link.

Mind your headings. Be carfeul when you're building your heading structure, to make sure you're not skipping levels. Headers are the backbone of the document and a common way of navigating it with a screen reader. Don't pick heading level based on style or font size. If you want the look of a <h3> where a <h2> should be, try styling it with <h2 class="h3"> or similar. Also, Harry Roberts argues that your logo is an image, not a <h1>.

Placeholders are not labels. We hear this all the time, but still get this wrong sometimes. Many site search inputs still use placeholder text as their label (or nothing at all, and solely relies on the "Search" button to convey its function). If you need a compact search form, hide the label in a way that doesn't hide it from screen readers, like this .visually-hidden class does.

Is it content? Serve it to everyone.

Provide text alternatives. Until Google finishes their automatic image captioning algorithms, we're stuck with writing alt texts ourselves, whenever we use an image that qualifies as content (as opposed to styling). It's especially important when the image is a link, since screen readers will read out the link URL as title if no alt is present for the image.

Links should be self explanatory. Using "Click here" or "Read more" as link text makes the destination a mystery if you're navigating a page by jumping through its links, which is often what screen reader users do. Ambiguous links is the third most problematic item on the web (after CAPTCHAs and Flash) according to a WebAIM Screen Reader User Survey.

Color alone can't be trusted. Don't rely on just color to convey meaning, make sure there are labels or other visual clues to complement. Keep it in mind when styling states of interactive elements, such as :focus states of inputs or :hover states of links. Around 8% of human males and 100% of female and male moose have a color vision deficiency. What if it was your moose?

Apples of different colors to illustrate color vision deficiency types

Types of color vision deficiency (dichromacy)

Stay legible

Zooming should not break anything. Being able to zoom a page is important for individuals with poor vision (like... every moose), or just anyone tired of tiny text. Make sure your site doesn't break when zooming. Use relative units for font sizes and margins/paddings. Font sizes set in px zooms well in many browsers today, but not at all in IE (not even in IE 11 – it's by design). Remember there's a difference between zooming an entire page, with images and everything, and increasing the browser's font size. The latter is common if you're finding the web site's default font size hard to read.

Check your contrast. It's not just for elderly people. Sometimes we forget about low quality monitors, sun glare, tiny handheld screens, or a combination of them. Use Lea Verou's contrast ratio tool, the Sketch color contrast plugin, or ask your friendly neighborhood moose to have a look.

Key value

Some people and most cats hate mice. Try to make all parts of your website keyboard accessible. Tab through it and make sure there is a :focus state for every :hover state. Be extra careful with any custom widgets, especially modal windows.

Keyboard with apples as keys

Äpple Bluetooth Keyboard (the number one input device among moose)

Going further

These tips were absolute basics, they should be a part of every project. Still I cheat and I get lazy, and I know I'm not alone. These things are not that hard, they're just tweaks to your workflow.

Once you've managed to annoy moose and people a little less, go the next mile and learn how to do some real difference:

Mar

Streamio Marketing Site - the Design Process


I will explain my typical process when designing a marketing site by showing you examples from my work with Streamio.

Why Streamio? Because they are a fun company to work with, easy to cooperate with and they give clear and good feedback.

First I got a mockup from Streamio with some thoughts and wishes. It's actually rare that you get a mockup this good from the customer:

The mockup from Streamio

The mockup from Streamio, which I'm very impressed with. Sooner or later they won't need my help anymore :).

An important thing with a marketing site is to get the user's attention. This is done by giving enough information in a short amount of time, so that the user gets interested and keeps on reading further down. This means that we need to scale down the information, put it in a natural order and keep it simple and clear.

It's quite known how much, or little, we read on the internet. Studies show that we read very little, I myself is a typical example. We browse sites very fast, and it doesn’t take many seconds before we jump to the next one. This is something we have to think about when designing web sites, we only have a couple of seconds to catch the users attention, not much more exposure then a logo. Some interesting articles on the subject are UXMYTHS - People read on the web, How Users Read on the Web and E-Mail Newsletters: Increasing Usability.

The first thing I do in the design process is to look through the information on the customer's mockup. The second step is to make my own interpretations. My first thoughts on the Streamio mockup was that there was too much information and the headlines were unclear. On the following drawings I have scaled down the information and changed the layout in the at the top:

Draw with pencil on paper

I love to draw with pencil on paper - a great way to get your thoughts down at the beginning of the process.

Close-up on Streamio's mockup

Close-up on Streamio's mockup.

Final drawing of the design

My final drawing of the design, which I showed Streamio.

What's left is:

  • a short headline about Streamio: they help you upload and publish videos online.
  • then a picture of a computer and two devices with their video platform or video, to show that it works on all modern platforms.
  • followed by 3 short blurbs about their advantages.
  • the 3 blurbs are then put into one sentence to make it even more clear.
  • a prominent Call-to-Action button makes it easy for the user to try the service.
  • finally there is a price tag with the minimum price.

When I'm done I show the customer the new drawings. This time Streamio was happy with the result, so then I continue with the next step: the real designing.

I design directly in the web browser, which is most efficient today. This way you work closer to the end result and you don't have to work in two steps, like when you're using Photoshop. I do additional graphical elements in Photoshop, but I constantly look at the end result in the web browser. Another great advantage with working in the web browser is that you have access to A LOT of fonts from @font-face services, such as Typekit. Today you can do a lot with the design using html and css3, which I'm sure you already know, but if you want to read more about it you can take a look at Smashing Magazine or NetTuts.

Two fonts

Two fonts used on Streamio's site. The first one is the popular serif FF Tisa which I think is great! It is used for all the content on the site. The second one: FF DIN Pro Condensed, is used for the logo.

First layout

This is my first layout after the drawings. Here I have made the basic layout and placed the content, and made some screenshots and additional graphics. But it is a bit plain and boring.

Streamio likes a very sharp and glossy style, and I won't say no to that. A lot of sites can't pull this of, but I think it gives a great vibe and harmony to this site and it works with Streamio's kind of service.

Some screenshots from the final site:

Final site 1

Final site 2

Final site 3

I really like the last page because it's only built with three images. It's a fun challenge to try to use as few images as possible. This keeps the loading time for the site short, or rather compensate for custom fonts.

Streamio launched their site on March 7th. It looks a bit different from my final version because they combined some of the final design with some of the earlier to create what they want.

Take a look at Streamio.com.

In my next blogpost I will write about the design process behind the actual video tool which David at Streamio has developed and I've made the design for.

If you have any comments or questions you can text me on twitter: @leuchovius, thanks!

Nov

Build, RubyConf and Dave Hoover


Today we are 4 people at the office, half of the crew. Jimmy and Johannes, our designers, left on Monday for Build which is a design conference in Belfast. And yesterday CJ and Jonas flew to RubyConf in New Orleans were they will be giving the talk: The Front End Testing Frontier. CJ will also give a talk about Socialist Software Development.

On Tuesday we had a short but very appreciated visit by Dave Hoover, who flew by Gothenburg to see us and join Got.rb in the evening. Early on Wednesday he continued his journey by train to Malmö and Øredev Developer Conference.

A quiet day at the office.