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.
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.
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.
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.
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.
Just as we continue to improve the platform to reflect user feedback, we are also committed to improving accessibility.