I’m a Data Scientist, not a UI Designer!

As data scientists, we follow rigorous methodology, but our tools can limit our options for data presentation. Our work requires precision, so we spend most of our attention focused on our research. While we care what data travels down the pipeline, we largely depend on our tools (or other developers) to manage how our data is presented. Could the software developer, or even the UI developer, possibly have a lesson for us?

Accessible door control in the corridor to the Portland Aerial Tram at Oregon Health Sciences University.
Accessible door control in the corridor to the Portland Aerial Tram at Oregon Health Sciences University. Photo Credit: Feral Zen.art

The third Thursday in May is Global Accessibility Awareness Day (#GAAD). The IBM Able team has just launched the open source Equal Access Toolkit to allow anyone developing applications to check for compliance with Web Accessibility Guidelines. IBM has been a key thought leader in this area by publicly sharing our own IBM Accessibility Checklist. For those of us working on the way way back-end (maybe rarely touching real production code), UI Accessibility is someone else’s problem, right?

Understanding how other people understand can provide great insight into our own research, even if we’re not developing end-user applications. The Accessibility Checker is very easy to use, especially if you’ve ever used developer tools to inspect an HTML element in your web browser. The Accessibility Checker runs in either the Chrome or Firefox browser thanks to a handy plugin that is integrated with each browser’s development environment. You can run it on any website that you can view in your web browser.

My favorite feature of the Accessibility Checker is the educational guidance it provides when detecting a possible issue. For example, I’d never considered why a text search box should be labeled. Someone using screen reader software depends on this kind of label to navigate the site. Now, I’m looking at Jupyter notebooks and R Markdown a lot differently. How do people who use screen readers experience these tools? How should I format my notebooks to make it easier for them?

Invention is a mix of elbow-grease and inspiration. Inspiration is really just a matter of connecting dots. The more dots we have to connect, the more potential we have for a valuable insight. Thinking about our problems in different ways is the path to true innovation. I challenge each of you who thinks UI is someone else’s job to take the Accessibility Checker for a spin and just see if you don’t learn something new.

Accessibility Checker Plugin Howto (using Firefox and Github)

  1. Install the plugin into your Firefox or Chrome web browser.
Screen shot of the Accessibility Checker plugin icon with menus
This is how the plug-in appears after installing on my Firefox browser in Mac OS.

2. Navigate to your website of choice and open the developer tools.

Screenshot of Tools Menu in Firefox. Open Tools then Web Developer, then select any of the options.
In Firefox under Mac OS, developer tools are found under the “Tools” menu.

3. Navigate to the “Accessibility Assessment” tab and select the “Scan” button.

A screenshot of the Accessibility Assessment tab under Firefox on MacOS.
This is what the Accessibility Checker looks like on my Mac OS computer running Firefox.

4. Read the Accessibility Checker’s recommendations and learn stuff!

A screenshot of the checker tool identifying a label element missing descriptive text.
The Accessibility Checker provides links to external accessibility guidelines related to the issues it identifies. In this example the tool tells us that labels help people using alternative modes of input/output, like screen readers and voice control systems.
A screenshot of the bottom part of the above error that explains how to correct it.
The Accessibility Checker also provides instructions for how to correct any issues it identifies. In this example the tool explains where and what sort of descriptive text should be added.

5. Apply what you’ve learned.

How can we make data science tools and outputs more inclusive? Please share your ideas with us in the comments below or via Twitter @ibmcodait (and use the tag #GAAD for Global Accessibility Awareness Day). Don’t forget to check out the IBM Accessibility Checklist and learn more about the Equal Access Toolkit so you can make your data science projects more accessible.

Links

  • Read the official Equal Access Toolkit announcement on IBM Developer
  • Install the browser plug-in on Firefox or Chrome
  • Contribute to the Equal Access Toolkit on Github

--

--

Augustina Flores
Center for Open Source Data and AI Technologies

🌱 Grass-seed Zen Practitioner ☸️ Indigenous Knowledge Advocate 🪶