Cursor image

How to Make Data Accessible

One of our Twitter followers is interested in solving important medical and scientific questions while making his data accessible to everyone, including users with disabilities.

His question to Innate’s Accessibility Team was this:

Best Practices & Standards for Openness and Effective Sharing

For scientific purposes, the keys to openness and effective sharing are:

  • Non-proprietary file formats
  • Application Program Interfaces (APIs)

These resources will help present information in a way your colleagues will be able to adapt to:

From Innate’s perspective, the next most important standards are the Web Content Accessibility Guidelines (WCAG 2.0). We like WCAG 2.0 because:

  • It is anti-discriminatory–which increases the number of researchers and advocates able to access information.
  • It improves searchability and social reach.

How to Effectively Present Accessible Images and Videos Using Brain Scans

Wikipedia shows brain scans as still or animated images or videos:

Images

Goal

The user must be able to select and copy the image, send it somewhere for others to examine, and be certain they’re sending what’s expected. Ask yourself: if the image doesn’t load, will the same level of information be shared?

Procedure

Image of a brain scan

Axial MRI slice at the level of the basal ganglia, showing fMRIBOLD signal changes overlaid in red (increase) and blue (decrease) tones.

If you will be using an image of brain scans, each photo will need a text description that meets the level of information described in the image. If the information is short, this can be achieved by adding an alt tag (alt=”DESCRPITIVE TEXT” inside the HTML image tag).

If your description will be longer, mark the image as a figure in the alt tag and cite it in text immediately adjacent. It will look like the one to the left:

Some scientific and medical images require a description longer than a paragraph to accurately describe the image. If that’s the case for you, then mark the image as a figure in alt text, then link it to another page, popup, or collapsible area. If the image moves but is not a video file (e.g., an animated GIF), then it’s important that motion stop within about 3 seconds, otherwise it should be shown in a manner that has controls to stop the video. This practice will keep people with vestibular disorders from getting sick.

Basic Videos

Goal

The user must be able to gather the content that they can perceive and competently discuss the issues presented. Ask yourself: if a new person reads the captions with the sound off, is the story correct? If they turn away from the video, but listen to it, can they understand?  If someone reads the transcript, do they have the same knowledge as if they were watching the video? Doing these things will help those who have difficulty hearing, seeing or processing to better understand your content regardless of their ability or language barrier. As an added bonus, these extra efforts tend to make content more popular.

Procedure

If you choose to display brain scans with a video, like an MP4 or Flash file, the requirements for accessibility are different than those of images.

  • Any video with audio should have captions. Real time captions are best. Many systems offer automatic captioning that can be corrected later.
  • The visual part of your video should have an audio description. Adding a few sentences describing the video works in a pinch.
  • The addition of a transcript that addresses audio and visual content covers any potentially overlooked issues and is great for scientific records.

An Accessible Player:
  • Has controls that work with keyboard alone
  • Has the ability to easily stop the video
  • Has easy access to a Closed Captioning button
  • Is accessibly labeled and coded for assistive technologies (screen readers, speech tools, etc.)
  • Uses progressive enhancement when embedding a player to give a fallback if the player doesn’t load

For expert guidance on presenting  video on your site, contact Innate to ensure your video is accessible.

Text-based Data: CSV, JSON, XML

Goal

If you compare the first line or the schema file to the data, does the output make sense? This information will be accessible as long as header elements line up correctly with data elements.  This allows use of an API (Application Program Interface) to automate activities.

Procedure

Thankfully, CSVs (comma separated values), XMLs (Extensible Markup Language), JSONs (JavaScript Object Notation) and similar formats all use plain text. This makes them very accessible.

Tables

Tables are a straightforward and easily accessible way to present data. Scientific data might have a standard order, similar to information on a street address.  By using a table, he would be able to present this type of data uniformly.

Goal

To ensure that this is coded properly so blind users can access, the easiest way to test is to use a web-based tool like WAT-C or WAVE, or to inspect code yourself. Some screen readers will make up for bad code by interpreting it, but this is sometimes inaccurate. To learn how to code tables, check out WebAim.org‘s article on Data Table Construction.

Procedure

Simple and Most Multi-Level Complex Tables

In recent years, tables have become simplified to the point where they are quite easy to use. Even with a moderately complex data table, we can easily program HTML headers for rows and columns, which help explain the relationships of cells. If you are working with complex tables, where a number of the cells are unique, then additional work will be needed. Specifically, these relationships should be identified by using the “scope” attribute in the header cell. Additionally, table captions/summary attribute can be used to give more information to users.

Super-Complex Tables

Very few tables need complex code to allow screen readers to understand them, but it’s not unheard of.  If the construction of tables seems unusually complex, your first plan of action should be to try and split the tables to simplify them as best you can. Then, use headers in header cells and ID attributes in data cells to explain the relationships more specifically.

Complex Table example

<table id="complexTable" summary="Used cars for sale">
  <caption id="caption">Comic Book Characters, Basic Info</caption>
 
  <thead>
    <tr>
      <th id="h1" scope="col">Name</th>
      <th id="h2" scope="col">Powers</th>
      <th id="h3" scope="col">Strength</th>
      <th id="h4" scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="subHeader" colspan="4" id="h_sports" scope="col">Short</th>
    </tr>
    <tr>
      <th headers="h_sports h1" id="hr1" scope="row">Wolverine</th>
      <td headers="h_sports hr1 h2">Healing</td>
      <td headers="h_sports hr1 h3">Mutant 65</td>
      <td headers="h_sports hr1 h4">90</td>
    </tr>
    <tr>
      <th headers="h_sports h1" id="hr2" scope="row">Wasp</th>
      <td headers="h_sports hr2 h2">Equipment</td>
      <td headers="h_sports hr2 h3">Normal Human</td>
      <td headers="h_sports hr2 h4">35</td>
    </tr>
    <tr>
      <th headers="h_sports h1" id="hr3" scope="row">Bucky</th>
      <td headers="h_sports hr3 h2">None</td>
      <td headers="h_sports hr3 h3">Weak Human</td>
      <td headers="h_sports hr3 h4">15</td>
    </tr>
    <tr>
      <th headers="h_sports h1" id="hr4" scope="row">Spider-Man</th>
      <td headers="h_sports hr4 h2">Spider Sense</td>
      <td headers="h_sports hr4 h3">Mutant 50</td>
      <td headers="h_sports hr4 h4">32</td>
    </tr>
    <tr>
      <th headers="h_sports h1" id="hr5" scope="row">Jubilee</th>
      <td headers="h_sports hr5 h2">Lights</td>
      <td headers="h_sports hr5 h3">Mutant 20</td>
      <td headers="h_sports hr5 h4">21</td>
    </tr>
    <tr>
      <th class="subHeader" colspan="4" id="h_suvs" scope="col">Tall</th>
    </tr>
    <tr>
      <th headers="h_suvs h1" id="hr6" scope="row">Reed Richards</th>
      <td headers="h_suvs hr6 h2">Stretches</td>
      <td headers="h_suvs hr6 h3">Mutant 80</td>
      <td headers="h_suvs hr6 h4">48</td>
    </tr>
    <tr>
      <th headers="h_suvs h1" id="hr7" scope="row">Ultron</th>
      <td headers="h_suvs hr7 h2">Robot</td>
      <td headers="h_suvs hr7 h3">Metallic 500</td>
      <td headers="h_suvs hr7 h4">6</td>
    </tr>
    <tr>
      <th headers="h_suvs h1" id="hr8" scope="row">Hulk</th>
      <td headers="h_suvs hr8 h2">Smash</td>
      <td headers="h_suvs hr8 h3">Mustant 1000</td>
      <td headers="h_suvs hr8 h4">Unknown</td>
    </tr>
  </tbody>
</table>  
Sorting tables

JavaScript is a superb way to create a sortable table. With WAI-ARIA live region code (Accessible Rich Internet Applications), the visually-impaired user can be aware that data is changing on the page. For example, we have a table below with linked headers.

Sort Table Example

  <caption id="caption" role="alert" aria-live="polite">SweetBriar Instuctors Not Sorted</caption>
 
  <thead>
    <tr>
      <th role="columnheader" aria-sort="none" scope="col"><a href="#1" id="Instructor|asc" title="Sort Professor Name ascending">Instructor</a></th>
      <th role="columnheader" aria-sort="none" scope="col"><a href="#2" id="Course|asc" title="Sort Course ascending">Course</a></th>
      <th role="columnheader" aria-sort="none" scope="col"><a href="#3" id="Enrollment|asc" title="Sort Enrollment ascending">Enrolllment</a></th>
    </tr>
  </thead>

With the use of a JavaScript/jQuery plugin, we can sort the rows according to column using these links. First, if we sort by Instructor, in ascending order (cells highlighted in green):

Sort Table Example - Instructors/Ascending

  <caption id="caption" role="alert" aria-live="polite">SweetBriar Instrcutors Sorted by Instructor: Ascending Order</caption>
 
  <thead>
    <tr>
      <th role="columnheader" aria-sort="ascending" scope="col"><a href="#1" id="Instructor|asc" title="Sort Professor Name descending">Instructor</a></th>
      <th role="columnheader" aria-sort="none" scope="col"><a href="#2" id="Course|asc" title="Sort Course ascending">Course</a></th>
      <th role="columnheader" aria-sort="none" scope="col"><a href="#3" id="Enrollment|asc" title="Sort Enrollment ascending">Enrolllment</a></th>
    </tr>
  </thead>

Finally, if we sort by Course, in descending order (cells highlighted in green):

Sort Table Example - Courses/Descending

  
  <caption id="caption" role="alert" aria-live="polite">Sweetbriar Instructors Sorted by Course: Descending Order</caption>
 
  <thead>
    <tr>
      <th role="columnheader" aria-sort="none" scope="col"><a href="#1" id="Instructor|asc" title="Sort Professor Name descending">Instructor</a></th>
      <th role="columnheader" aria-sort="descending" scope="col"><a href="#2" id="Course|asc" title="Sort Course ascending">Course</a></th>
      <th role="columnheader" aria-sort="none" scope="col"><a href="#3" id="Enrollment|asc" title="Sort Enrollment ascending">Enrolllment</a></th>
    </tr>
  </thead>

For a better demostration, go to SSA Accessibility Best Practices Library.

Automation

Using an API and a small suite of strong web code, these activities can be automated and will remain accessible regardless of changing data.  Google Fusion Tables are an interesting option for those interested in learning more about automation.

Need help making your API output accessible? We’d love to help.

Devorah Firestone

Accessibility Lead

<p>Devorah is the Lead Accessibility Enthusiast at Innate. She likes to solve problems creatively, hang out with happy people and practice martial arts. She can also occasionally be seen on TV for strange and sordid moments.</p>

Scroll To Top