Studio Science Accessibility Standards
Documented here are the standards for accessibility in front-end design and development used by Studio Science.
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.
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<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.
ARIA Landmark Roles are helpful landmarks that can be used by Assistive Technologies to navigate a website.
A region that contains mostly site-oriented content, rather than page-specific content. Generally the page header. Used only once per page.
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.”
The main content of a document, used only once.
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.
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.
A large perceivable region that contains information about the parent document.
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.
Declaring a language attribute on the html element enables a screen reader to read out the text with correct pronunciation.
Specify a language with the
lang attribute on the
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
h2heading, while top-level sections should begin with
h1headings. 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
:focusas used on
Ensure links are recognizable, especially to the colorblind.
In general, this means using styles beyond color alone (such as underlining) to identify links.
- Use appropriate alt text on all images.
SVG elements and ARIA roles
role="img"on SVG elements to identify them as graphics.
ids and use an
aria-labelledbyattribute to reference the id values to provide accessible name and description.
role="presentation"to elements inside the SVG, such as
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>
This is especially important for interactions, such as those using the
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
<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.
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.
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