General Best Practice

Accessibility

Semantics

Use semantic headings in the correct order.

Obviously don't use tables for layout.

<!-- Bad -->
<div class="heading">A heading</div>
<span class="my-js-link">Link</span>
<span class="button">My button</span>
<span class="button" role="button">My button</span> <!-- slightly less bad -->

<!-- Good -->
<h1>A semantic heading</h1>
<a href="/newudihwi">Link</a>
<button>My button</button>

Extending Semantics & Accessibility.

Tab order

The tab order of elements on the page should be logical, going from left to right and top to bottom. Tab order is defined by the order your page's source code.

  • tabindex="0" - This will make an element that isn't naturally focussable (e.g. span, div, p) able to be focused. It will appear in the natural tab order of the page.
  • tabindex="-1" - Using an negative number means the element will not appear in the natural tab order of the page, but it can be assigned focus using JavaScript. For example you may want to give focus to a validation error, but not have it appear in the natural tab order.
  • tabindex=">0" - Any tabindex greater than 0 should be avoided, as it is necessary to add a tabindex to every focussable element on the page to maintain a sensible tab order.

Forms

Make sure the tab order of your forms is logical.

Use an associated <label> for all form controls. You can either associate with a for="my-input-id" or by wrapping the input.

Language Attribute

Add a language attribute to the html tag to enable screen readers to use the correct pronunciation.

<html lang="en">

Images

Use appropriate alt text on all images. Decorative images that don't convey content or meaning should have an empty alt="" attribute.

Read these great tips on using alt text properly.

Aria

Aria attributes are used to add in accessibilty information to elements that are missing them. First rule of aria use:

'If you can use a native HTML element or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.'
Using WAI-ARIA in HTML

Roles

Make use of the following Aria landmark roles:

  • main - Main content area. Should only be used once per page. <main role="main">
  • banner - Use this on your global page header. <header role="banner">
  • navigation - Contains navigation links, e.g <nav role="navigation">.
  • contentinfo - A collection of metadata, copyright information and the like. Usually used on the footer <footer role="contentinfo">

State

Consider using the following attributes to improve the experience of screen readers:

  • aria-invalid - Use to highlight invalid input field values as the result of some validation.
  • aria-hidden - Use to hide something from a screen reader. E.g. <i class="icon-download" aria-hidden="true">. Do not use on an element that is visible and focussable.
  • aria-current - Can be used to denote the current item in a breadcrumb, pagination control or navigation menu. Value can be true, page, date, time

See the full list of aria attributes

Colour Contrast

To be AA compliant:

  • Standard text should have a contrast ratio of at least 4.5:1
  • Large scale text can drop down to 3:1
  • Text that is part of a logo or brand name has no minimum contrast requirement.

You can use Contrast Ratio for checking this.

Performance

When developing a website or application it should be optimised for a fast loading speed across all devices. A good benchmark of this is to use Google Page insights to measure its rating out of 100 to measure how successful this has been (always aim in the amber to green rating and never red).

This can be achieved by ensuring the following criteria are met at a minimum:

  • Minify CSS - Minify / concat all CSS files into one minified file.
  • Minify HTML - Minify html output on production environment.
  • Minify JavaScript - Minify / concat all JS files into one minified file.
  • Optimise images - Optimise all images.
  • Size tap targets appropriately - Increase size of buttons / tap targets on touchscreen devices.

The following criteria can also be implemented to further increase performance if scores are very low.

  • Eliminate render-blocking JavaScript and CSS in above-the-fold content - Defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
  • Prioritize visible content - Structure your HTML to load the critical, above-the-fold content first.

The following should be enabled on the server / setup by hosting to complement the optimisation completed by the UI Team.

  • Leverage browser caching - Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
  • Enable compression - Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

Browser support

This can vary depending on the requirements of a project, but our recommended level of support is as follows:

Full support

IE Edge IE 11 IE 10 IE 9 Firefox last 2 versions Safari 7 Chrome latest version

All content is readable and usable. All functionality must work. Variations in presentation of content is minimised between browsers. Proactive support - these browsers will be explicitely tested.

Partial support

IE 8 Safari 6 Opera

Content is readable and usable and navigation works. Variation in presentation is allowed. Reactive support - these browsers will not be explicitely tested, but support issues will be considered.

Not supported

IE 7 IE 6 FF 4.x All others

No support or testing necessary.

Directory Structure

Directory / file structure should be consistant across all projects and follow a similar structure to this (this assumes you are putting the files in either the root of the project or in a STATIC folder served up by the server:

  • css
  • img
  • js
    • lib Add javascript libraries such as jquery here
    • modules Add bright custom js modules here