Necessary for some, good for everyone
From 1 July 2014, all new web sites and vending machines must comply with the Universal Design of ICT Regulations. The requirements apply to both private and public entities. The purpose is for everyone to have equal access to information and services. The norwegian Agency for Public Management and eGovernment (Difi) provides advice, guidance, and also supervises.
It’s important to consider accessibility and universal design as a first class citizen when making products.
Accessibly is like a blueberry muffin—you can’t push the berries in there afterward
To help understand the importance of accessibility, we recommend the following video:
Web Accessibility beginner’s guide
We aim to use components built with HTML and ARIA roles in accordance with the W3C standards and best practices. By doing this, we can further ensure that assistive technologies can recognize and extract meaningful content to present this to users depending on such tools.
<header role="banner"- A region of the page that is site focused. Typically your global header
<nav role="navigation">- Contains navigational links.
<main role="main">- Focal content of document. Use only once “per page”.
<article role="article">- Represents an independent item of content. Use only once on outermost element of this type.
<aside role="complementary">- Supporting section related to the main content even when separated.
<footer role="contentinfo">- Contains information about the document (meta info, copyright, company info, etc).
<form role="search">- Add a
searchrole to your primary search (how to implement).
Declaring a language attribute on the html element enables a screen reader to readout the text with correct pronunciation. Also add an attribute for reading direction (either ltr = “left to right”, or rtl = “right to left”).
<html lang="en">- Specify a language with the lang attribute on the element.
<html dir="ltr">- Specify a reading direction with the dir attribute on the element
Use semantic headings and structure.
- Ensure links have :focus state.
- Ensure links are recognizable (underlined).
- Provide a “Skip to main content” link.
- Use appropriate
- Use logical layout. Tab order of the form follows a logical pattern.
- Associated label for all form controls (e.g.
<label for="name">Name:</label><input id="name" type="text">)
- Make sure
placeholderattributes are NOT being used in place of label tags. An exception to this rule would be smaller forms with one or two fields (eg. search or log in forms)
- Group related form elements with
fieldsetand describe the group with
<input type="radio"> and <input type="checkbox">
Media (Audio and Video)
Providing text alternatives makes the audio information accessible to people who are deaf or hard of hearing. This also goes for search engines who are deaf and hard of hearing as well.
- Provide text transcripts
- Synchronized subtitles for videos
- Test color contrast. Best done early in the process, by ensuring that the foreground and background colors of your site have sufficient contrast you will help make your site more readable for everyone.
- Web Content Accessibility Guidelines (WCAG) 2.0, WCAG 2.0 covers a wide range of recommendations for making Web content more accessible
- Contrast Grid from Eightshapes, Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast
- WebAIM Color Contrast Checker, Test single values for foreground and background color for WCAG compliant contrast
- WAVE Chrome/Firefox Extension, The Web Accessibility Evaluation tool (WAVE) allows you to evaluate web content for accessibility issues directly within the browser.
- Using alt Text Properly
- How-to: Skip Navigation links
- WW3C WCAG 2.0 - Name, Role, Value