Have you ever come across something that didn’t work well because the person who built it didn’t actually use it? Don’t be that person. Use what you build.

Use it on your computer. Use it on someone else’s computer (preferably one with a different operating system and web browser). Use it on your phone. Use it on someone else’s phone. Use it on a tablet. Walk into an Apple Store and use it on a bunch of different devices.

Don’t just take a quick look. Use it. Actually use it. Find the rough edges. Figure out what’s broken. Take notes. Now prioritize the problems, get to work, and make what you built better for everyone.

Most web browsers apply a distinctive visual style to the element that’s currently in focus. This usually manifests as a prominent outline around the element, which is usually applied using the outline CSS property behind the scenes.

If the default outline style for focused elements clashes with your design you might be tempted to remove them using something like this:

:focus {
    outline: none;
}

Do not do this! Those default outline styles are there for a very important reason: accessibility. They help people who don’t (or can’t) use mice and people with visual impairments navigate your site. Removing the default outline styles without replacing them with something else will make your site harder to use for a lot of people.

Want to find out more? Good news! There’s an entire site dedicated to this issue, and it includes suggestions for alternative focus styles to use instead of the defaults: OutlineNone.com.

The <img> element has an alt attribute that should be populated with text describing that image. The content of an image’s alt attribute is used in various situations:

• Search engines can’t see images the same way people do, so they’re going to look at the content of the alt attribute instead.
• When people have their browsers configured to not load images (which is more people than you might think; many have restrictive data and/or bandwidth limits).
• Non graphical browsers, including screen readers, will use the text in the alt attribute in place of the image.
• If the image fails to load, or the image format is not supported by the browser, the alternative text will be displayed instead.

If you find yourself wondering what you should put in an alt attribute ask yourself this question: If you were describing this website to a friend over the phone, and they had no way to view it, how would you describe this image? The answer is what you put for the value of that image’s alt attribute.

Some image elements are not integral to the content of the page, like decorative images. If you wouldn’t mention a particular image to your friend on the phone that <img> element should still have an alt attribute, but its value should be an empty string, like this:

<img alt="" src="...">

An alt attribute with an empty string indicates that non-visual browsers, like screen readers, can simply ignore the image.

For images that are a key part of the content, but have no appropriate textual description, the alt attribute should be omitted entirely (but this is almost never the case).

There are five primary factors involved when it comes to designing text that's comfortable to read on the web:

• Font Family
• Font Size
• Font Color
• Line Length
• Line Height

Font Family

Generally speaking, for body copy, you should use a serif or sans-serif font designed for large blocks of text. The usual suspects here are font families like Helvetica/Arial, Times, and Georgia. Avoid fancy script font families, typefaces designed for headlines, and the like.

Font Size

When it comes to the size of text on the web, the biggest misstep to avoid is making text too small. Most web browsers default to a font size of 16px for a reason; don't go much smaller than that.

Font Color

Font color is important for one reason: contrast. In order for your text to be readable it needs to have a decent contrast ratio. Be wary of placing light text on a light background, or dark text on a dark background. Not everyone has perfect, or even good vision. As we age our eyes take in less and less light. Just because you can read something doesn't mean everyone can.

Line Length

The optimal length of a line of text is a matter of some debate, but most people agree that the acceptable range is somewhere between 50-75 characters long, including spaces. You should avoid going over 80 characters long at all costs, as doing so will have a severe impact on the readability of your text. As a general rule of thumb, and depending on the font family being used, you'll want to aim for a width of 25em to 35em as a good starting point, and then tweak things from there.

Line Height

Like line length, line height is another subjective area, but most people agree that something between 1.2-2 times the size of your text is best. One thing to note here is that, in CSS, the line-height property will take a value without a specific unit, which makes sure the line height is always relative to the size of the text in question. So, avoid line-height: 1.5em and use line-height: 1.5 instead.

This tip barely scratches the surface of typography on the web, but it’s a start. Get these basics right and your text will be comfortable for the majority of people to read, and the more comfortable people are reading your content the better!

Make sure you always specify a language in your <html> element, like this:

<html lang="en">

Why is this important? Here are two reasons:

1. The language attribute helps facilitate automatic translation of your content into other languages.
2. Screen readers use the language attribute to make sure they’re using the proper language when reading your content.

Both of these give more people easier access to your content, and all you have to do is add a single attribute!

Wondering what the code for your language might be? They’re all in the IANA Language Subtag Registry. Just search that page for the name of the language you want and use the associated subtag value in your HTML element’s lang attribute.