A Peek Into CADRE’s Accessibility Audit

12/3/20
Two tenets of CADRE’s mission are opening access to big bibliometric datasets and empowering researchers to work with big data. Better accessibility goes hand-in-hand with removing the barriers to entry for researchers to access and analyze big data.

Screenshot of CADRE homepage showing an example from the report. Arrows point out changes made in the accessibility edit and descriptions of those changes. An arrow pointing to a small 'Get Started' button describes the accessibility change as 'UX Copywriting. Changed from Get Started to Log In to ensure consistency and adopt common UX patterns in web design'. A second arrow points to a larger button that says 'Get Started.' The accessibility change is described as 'General accessibility. Enlarged font size from 1.25 rem to 1.5 rem.' Two other arrows appear on the image but run off of the screenshot.

The CADRE team applied that mindset to its recent beta launch, which incorporated major accessibility and user interface improvements.

CADRE underwent two accessibility screenings. In the first one, CADRE UX/UI Designer Jessie Ma used a Chrome Plugin called the Web Accessibility Evaluation Tool (WAVE) to identify accessibility-related issues. The Big Ten Academic Alliance’s Library Accessibility Alliance additionally used the web accessibility software Deque Systems to conduct a high-level review.

After the screenings, CADRE’s lead web developer, Ben Serrette, implemented the suggested design updates. Today, we’re going to focus on some of the main takeaways from our accessibility audit.

Contrast, content, and restructuring

Throughout the website, Ma updated colors, sizing, spacing, and other visual properties of links, buttons, subheadings, titles, and paragraph text to meet the WCAG 2/2.1 AA/AAA standards.

Two side-by-side screenshots showing the Query Builder title and background image before and after the accessibility audit. In the screenshot from before the audit, the white lettering of 'Query Builder' has less contrast against a light blue background color. In the second image from after the audit, the white lettering of 'Query Builder' has a heavier contrast against the dark blue background color.

One example of her changes is the recolored gradient used in the Query Builder feature in CADRE’s Gateway. She changed the background color to ensure the white text is legible against the lightest color used, providing a better contrast.

Ma also restructured webpage layouts and headings for better visual aesthetics and readability for both sighted users and those using assistive technology. Changes ranged from adding a fixed measurement of space between the activities listed on the Outreach page to adding a table to reorganize how the headshots and project leadership titles are presented on the Team page.

Nearly every page experienced a heading restructuring, which improves accessibility by making the page organization easier to understand, as well as allowing screen-reader users to navigate to their desired content faster.

One page that benefited from a major reconstruction was the Resources page. Ma switched the video titles from an unordered bulleted list to a specific heading size that allows for easier readability and navigation.

There are two side-by-side screenshots showing CADRE's Resources page before and after the accessibility audit. In the picture taken before the audit, the title text 'Informational Videos and Demos' is an H4 heading and the videos and their titles are displayed in an unordered list. The menu on the right side of the page shows underlined hyperlinks that lead to Resources subpages, including 'Documentation, CADRE Data Access Policy, CADRE Outreach, and Software Release Notes.' In the screenshot with the accessibility edits, the page title is changed to H3 (larger) and videos are displayed with H4 headings instead of in a list. The text on the menu on the right is no longer underlined and has changed to 'Documentation, CADRE Access Policy, Software Release Notes, DOI -- SDG Research.'

Good writing is more accessible

Efficient, informative language directly impacts the user journey, especially for users with diverse cognitive and physical abilities. A user may not connect the “Get Started” text on a button with the intention of logging into CADRE, for example.

A button that says 'Log In'.By revising the “Get Started” button to say “Log In,” Ma also ensured CADRE was incorporating common UX web design patterns of user behavior. Other language changes include shortening the text on the submission button on the Contact Us page to simply say “Submit” and giving clear instructions on how to use the CILogon feature in CADRE’s Gateway.

Next steps

Just as we continue to improve the platform to reflect user feedback, we are also committed to improving accessibility.

You can find the full accessibility report here. We also encourage users to share their feedback on any functionality they want to see CADRE incorporate, including accessibility features.

Leave a Reply

Your email address will not be published. Required fields are marked *