Studio Science Accessibility Standards

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Documented here are the standards for accessibility in front-end design and development used by Studio Science.

Design

Checklist

  • Color is only used to convey meaning in a secondary way.

    With more than 3 million cases per year in the US alone, color blindness is very common. It is important to test your designs for usability by the color blind, and avoid using color alone to convey meaning.

    • Avoid color coding.

    • Don’t use color-specific instructions (this is especially important for error states.)

    • Links should be indicated with more than color, such as underlining.

  • Contrast reaches the minimum ratio of 4.5:1

    The contrast between text color and background color should be at least 4.5:1 to ensure readability for people with moderately low vision, as well people with color deficiencies. For more information on achieving the correct contrast ratio, read the section on Tints & Shades.

  • Establish a color palette with tints and shades.

    Your color palette should include tints and shades for each color. Tints and shades are (generally) accomplished by combining the main color with 20% black, 20% gray, 20% white, and 80% white. These tints and shades allow greater flexibility for contrast in your design.

    For more information, read Color Contrast for Better Readability by Tom Osborne.

  • Test tints and shades for optimum contrast on elements such as buttons.

  • Design link-focus indicators for users navigating the site with a keyboard or assistive device.

  • Design forms and fields with labels, not just placeholder text.

    Labels must be included for use with screen readers and assistive devices.

Testing

Development

Viewport

  • Never use <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    Using <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> can keep users with vision problems from accessing and/or understanding your site, by removing the ability to pinch and zoom. Use <meta name="viewport" content="width=device-width, initial-scale=1.0"> instead, which causes the site to load at the correct size and zoom level, but still allows users to change the size of the content.

Landmarks

ARIA Landmark Roles are helpful landmarks that can be used by Assistive Technologies to navigate a website.

  • <header role="banner">

    A region that contains mostly site-oriented content, rather than page-specific content. Generally the page header. Used only once per page.

  • <nav role="navigation">

    A collection of navigational elements (usually links) for navigating the document or related documents. User agents should treat elements with the role of navigation as navigational landmarks.”

  • <main role="main">

    The main content of a document, used only once.

  • <article role="article">

    A section of a page that consists of a composition that forms an independent part of a document, page, or site. Do not place articles within articles.

  • <aside role="complementary">

    A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.

  • <footer role="contentinfo">

    A large perceivable region that contains information about the parent document.

  • <form role="search">

    A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. Used on search forms.

Language Attribute

Declaring a language attribute on the html element enables a screen reader to read out the text with correct pronunciation. 

<html lang="en">

Specify a language with the lang attribute on the <html> element.

Document Outline

  • Use semantic headings and structure.

    Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section’s nesting level. Sections nested one level may begin with a h2 heading, while top-level sections should begin with h1 headings. To the extent possible, the headings should represent an accurate outline of the content.

  • Ensure links have :focus state.

    If content changes on mouse hover, the same should occur on keyboard focus. A useful solution may be to use the same state on :focus as used on :hover

  • Ensure links are recognizable, especially to the colorblind.

    In general, this means using styles beyond color alone (such as underlining) to identify links.

Images

  • Use appropriate alt text on all images.

SVG elements and ARIA roles

  • Use role="img" on SVG elements to identify them as graphics.

  • Give title and description elements ids and use an aria-labelledby attribute to reference the id values to provide accessible name and description.

  • Add role="presentation" to elements inside the SVG, such as circle, path, &c.

An example is provided below: 

<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="title desc">
    <title id="title">Circle</title>
    <desc id="desc">Blue circle with black border</desc>
    <circle role="presentation" cy="60" r="55" stroke="black" stroke-width="1" fill="blue" />
</svg>

Javascript

  • Use unobtrusive Javascript (never use inline scripting).

    Unobtrusive JavaScript means the site and content should still be accessible with JavaScript disabled. JavaScript should be added in the spirit of Progressive Enhancement.

  • Provide fallbacks for users with JavaScript disabled.

    This is especially important for interactions, such as those using the slideToggle() method.

Forms

  • Logical layout Tab order of the form follows a logical pattern.

  • Associated label for all form controls (e.g. input, select etc.) <label for="name">Name:</label><input id="name" type="text">

  • Make sure placeholder attributes 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 fieldset and describe the group with legend

    Important for <input type="radio"> and <input type="checkbox"> 

<fieldset>
    <legend>Output format</legend>
    <div>
        <input type="radio" name="format" id="txt" value="txt" checked>
        <label for="txt">Text file</label>
        </div>
    <div>
        <input type="radio" name="format" id="csv" value="csv">
        <label for="csv">CSV file</label>
    </div>
</fieldset>

Media (Audio and Video)

Text alternatives make the audio information accessible to people who are deaf or hard of hearing, as well as search engines.

  • Provide text transcripts
  • Synchronized subtitles for videos
<video class="readable" poster="your-video-poster.jpg" controls tabindex="0" title="My Video">
    <source  src="your-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source  src="your-video.ogg" type='application/ogg' />
    <source  src="your-video.webm" type='video/webm' />
    <track src="your-video-transcript.vtt" label="English Captions" kind="subtitles" srclang="en-us" default />
</video>

Visit the A11Y Project for more information.

alt text

  • Provide the alt attribute for images used as content to describe the function of the image (alt text is rarely detailed description).

  • Descriptions should be useful, i.e., “company name”, not “logo”.

  • Image links should describe where they go, not the image itself.

  • Use an empty alt attribute for decorative images, or images that not necessary for understanding the content of the page.

Testing

  • Navigating your site using a range of tools, such as just the keyboard or a screen reader, will help you understand how a blind, low-vision, or limited-mobility user will experience it.

  • Test using a screen reader

  • Test using keyboard only