WAI ARIA

HTML is great, but it was designed for text documents and doesn’t cover all the things we use it for now. Assistive technologies like screen readers can make great use of ARIA attributes to help users with disabilities access your service.

WAI ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications suite) is especially helpful with dynamic content and advanced UI controls.

Here’s an example alert.

<div id="status" role="alert" aria-live="assertive" class="alert alert--connected">

<p>App Connected</p>

</div>

The role="alert” is used to communicate an important and usually time sensitive piece of information to the user. By adding aria-live="assertive" , we also signal to the screen reader that this element is likely to update and to let the user know immediately.

Grab more examples at The A11y Project and Heydonworks.

JSON Linked Data

Boost your site’s data connectivity and SEO with JSON linked data. This is a way of embedding structured microdata amongst the content on your site.

Maybe you want to formally show details about your company to site crawlers for use in search engine indexing. You can add structured data as a JSON snippet to the head of your HTML page.

{

"@context": "http://schema.org",

"@type": "LocalBusiness",

"name": "Etch",

"legalName": "Etch Software LTD",

"logo": "http://etchapps.com/etch-logo.png",

"url": "http://etchapps.com",

"email": "info@etchapps.com",

"sameAs": [

"http://www.twitter.com/etch"

],

"address": {

"@type": "PostalAddress",

"addressLocality": "Canterbury",

"addressRegion": "Kent",

"postalCode": "CT1 1TU",

"addressCountry": "United Kingdom"

},

"geo": {

"@type": "GeoCoordinates",

"latitude": "51.2769008",

"longitude": "1.0862405000000308"

},

"openingHours": "Mo, Tu, We, Th, Fr 09:30-17:30"

}

This snippet from our site at Etch defines us as a local business in Canterbury in the UK, shows our email, which Twitter account we’re linked with, our opening ours and our email contact.

All this can be consumed by Google and other automated services, helping to boost our search ranking and give better search results to users.

Google even has a testing tool to see how your data looks to their search engine robots.

Find out more about linked data at JSON-LD.

Touch icons and a theme color

I bet you have an iOS touch icon, but what about a Windows tile? Safari pinned tab? All the different Android pixel densities?

It’s too easy to forget some of the icons you need across all the devices on the market these days, so take the pain out of it by using a generator.

While it might not be the prettiest tool on the block, the Real Favicon Generator does an amazing job of covering all the icons and bits you might have missed.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">

<link rel="manifest" href="/manifest.json">

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<meta name="theme-color" content="#ffffff">

They even help remind you to set your theme colour for Chrome on Android. Match the browser chrome to your page header to look super slick.

Open Graph and Twitter cards

Let’s get social! If you’re lucky enough to have your site shared by other people on social media, you want it to look its best.

Open Graph data and https://dev.twitter.com/cards/overview data help you define the title, description, thumbnail and a host of other data about your service for more useful shared content.

We use the Web Code Tools Generators to make sure we haven’t missed anything important.

<!-- Open Graph -->

<meta property="og:type" content="business.business">

<meta property="og:title" content="Etch Software">

<meta property="og:url" content="http://etchapps.com">

<meta property="og:image" content="http://etchapps.com/logo.png">

<meta property="business:contact_data:street_address" content="18A Ivy Lane">

<meta property="business:contact_data:locality" content="Canterbury">

<meta property="business:contact_data:region" content="Kent">

<meta property="business:contact_data:postal_code" content="CT1 1TU">

<meta property="business:contact_data:country_name" content="United Kingdom"> <!-- Twitter Card -->

<meta name="twitter:card" content="summary">

<meta name="twitter:site" content="@etch">

<meta name="twitter:title" content="Etch Apps">

<meta name="twitter:description" content="A small team of designers and developers, who help brands with big ideas.">

Interaction states

Hover, focus and active states help signal to your users what can be interacted with on your site. They’re also a great point of reference for keyboard users to know where they are in your site structure.

Buttons, links and form elements are the most important things to consider and styling these states nicely can be part of your overall brand feel. Don’t forget to consider the transition between the states, animation is fun!

Cursor styles

To build on your interaction states, getting the right cursor style is super important.

When you hover over a link or a button, you should see a a pointy finger to let you know you can click it.

Text should have a text cursor to show it can be highlighted and potentially edited.

button {

cursor: pointer;

}

There’s more cursors available than we can list here, but check them all out over on CSS Cursors

Semantic input labels

Input labels are often overlooked as you can’t see their link to the appropriate input, but they’re super useful for assistive technologies and even mouse users can click them to focus/change the input they are linked to.

The label for attribute should specify the id of the individual input that the label is referencing.

<label for="email-input">Email address</label>

<input type="email" id="email-input" name="contact" value="" />

Geek out on form markup on MDN.

Input type

Whilst we’re looking at inputs, let’s make sure the input is the right type. HTML5 gave us a raft of new input types to play with. The most important factor for most site owners is that they will trigger a more appropriate keyboard on mobile devices.

Email inputs show an @ symbol front loaded on the main keyboard, number inputs bring up the numeric keypad.

<input type="email" id="email-input" name="contact" value="" />

See if you can find a new HTML5 form input to use in place of the standard text today.

Better image sizes

Far too many sites use images that are too big for their display. By properly compressing your images or even serving responsive images you can shave seconds off your sites load time.

If a 1 second delay costs on average 7% in conversion, you are literally throwing money away by not optimising your images.

Responsive images are now supported in most modern browsers and there’s tiny javascript polyfills for those that don’t.

<img

src="http://etchapps.com/logo-medium.png"

alt="Etch Logo"

srcset="

http://etchapps.com/logo-medium.png 1120w,

http://etchapps.com/logo-medium.png 720w,

http://etchapps.com/logo-medium.png 400w"

sizes="

(min-width: 40em) calc(66.6vw - 4em)

100vw"

>

Find out more about the latest responsive image techniques at the Responsive Images Community Group

User select none

Our final enhancement is for when users are trying to select a block of text on your site, or maybe they get a bit tap-happy and double tap to select some text.

There are bits of your UI that don’t need the text available for select, like buttons, navigation, the chrome.

user-select: none prevents those areas being highlighted, leading to a smoother copy/paste experience.

button {

user-select: none;

}

Learn more about user select none at CSS Tricks.