Robert Rauschenberg Foundation: supporting the legacy of a modern master

The Robert Rauschenberg Foundation fosters the legacy of the prolific artist’s life and work. Supporting artists, initiatives, and institutions that carry forward Rauschenberg’s influence through grants, programs and scholarly activities, the foundation provides a massive repository of artwork and archives reference materials online.

Activated Studio has upgraded and maintained RRF’s Drupal website through several iterations, including a responsive re-theme, numerous features, resolving technical debt, and major content reorganizations.

Activated Studio completed an ADA compliance and accessibility redesign project for RRF in 2019.  This accessibility audit case study can be used as a guide for your own site.  

If you have any questions about ADA compliance, contact us.

The Accessibility Audit

When RRF came to Activated Studio with concerns about their website’s accessibility, our first step was to conduct an accessibility audit. 

Here’s what we found:

  • Illegible font
    • Low color contrast for text
    • Font size increase not enabled
  • Overlapping text and images, which is difficult for screen readers to process
  • Scrolling title animation executed in JavaScript
  • Missing landmark labels (code that clearly defines page features to facilitate efficient assistive technology navigation)

After synthesizing the results of the initial audit, we broke down the work ahead of us into three categories:

  • Design
  • Keyboard navigation
  • Page structure

Modifying Some Design Elements per the Accessibility Audit Findings

The visual design of a web page is something that most sighted users take for granted. Small white text against a dark background is a simple design choice for some, but for vision impaired users it can be a major barrier that prevents them from reading necessary online information.

We aimed to stay true to the original stylish visual design of the RRF website, while correcting several common accessibility missteps:

  • Composition
    • Global theme of the site was problematic for visually impaired users
  • Color and Contrast
    • Green text used had low contrast ratio (2.66), far from the minimum ratio (4.5) that would enable any user to easily read the text
  • Zoom or Scale
    • Users were unable to adjust the size of the font or images
  • Layout
    • “Art in Context” section required continuous clicks and scrolling, complicating navigation
  • Writing
    • Vague text made it difficult to determine the function of links and other elements on the page without visual context
  • Typography
    • Condensed Montefiore font used for menus and titles was entirely uppercase, which reduced readability

Design Solutions

  • Designed new page types for especially problematic pages, as well as a new global theme to make full site experience more legible
  • Darker green was chosen to improve contrast ratio while still respecting the client’s brand
  • Scale options were enabled
  • “Art in Context” page was changed to a Masonry grid layout without fixed height rows to optimize space
  • Links specified

For the new font design, I thought it was possible to unify all the elements using a single font family, with personality, contemporary but not disruptive. I thought that a DIN typography would work really well for RRF. DIN typeface has its origin in the Prussian railway back in 1905 and was adopted by Germany in 1936 as a standard known as DIN 1451 (DIN is an acronym for Deutsches Institut für Normung—in English, the German Institute for Standardization). DIN 2014 is a contemporary version. The Regular performs well in long text settings, while Light and Bold faces are extremely legible at large sizes. DIN has great legibility and uncomplicated, unadorned design which helps to enhance the works of Rauschenberg.

Carlos Prieto, Designer

Addressing Keyboard Navigation Concerns

Effective keyboard navigation is an essential component of an accessible website. Users with motor disabilities and vision impairments commonly rely upon keyboards, rather than a mouse or a trackpad.

In the initial audit, we found that the Foundation’s website had issues within the code which made keyboard navigation difficult:

  • Focus
    • Focus was not enabled, making it difficult for assistive technology to determine how to interact with links on the site
  • DOM Order
    • Visual order of the site’s content did not match the content order in the code, jumbling the components of the site for screen readers
  • Offscreen Content
    • Because Robert Rauschenberg’s work is primarily visual, some offscreen directionals and explanations exclusively used by screen readers was necessary
  • Alt Text
    • Thousands of images were missing descriptive Alt text, making it impossible for screen readers to convey content
  • ARIA
    • ARIA attributes were not added to HTML elements, making the roles and functions of dynamic features on the site unclear to non-sighted users

Keyboard Navigation Solutions

  • Focus enabled
  • Code was cleaned and reorganized to reflect the visual order of each page
  • Offscreen content added
  • ARIA attributes were added for clarity
  • Descriptive Alt text was added to thousands of existing images and “Alt text” was made a required field when uploading new images

Changes to Page Structure

Content structured with assistive technology in mind results in a page which is effortless for screen readers to process and navigate. Implementing code that is specially designed for assistive technology saves time and frustration for people with disabilities.

RRF’s website made several common page structure mistakes:

  • Headings
    • Headings lacked logical organization and weight according to their importance in the code, resulting in a tedious screen reader experience
  • Interactive Elements
    • Links and calls to action were vague and difficult to understand without visual context
  • Landmarks
    • Page features were undefined, hindering screen reader navigation

Page Structure Solutions

  • Headings were reorganized and given weight in relation to importance, allowing users of screen readers to efficiently scan for information
  • Interactive elements were made more specific
  • Landmarks were employed on every page

Accessibility Testing To Verify Improvements

The last step in our total accessibility overhaul was to put the new site to the test. We conducted a final audit of the redesigned site to determine whether or not it was compatible with assistive technology.

Here’s what we found:

  • Accessible color contrast
  • More legible font
  • ADA accessible theme elements such as focus and font increase enabled
  • Alt tags on all images on the site
  • Landmarks present on every page
  • Page headers weighted and organized throughout site
  • Clean markup
  • Artful site design maintained while enhancing usability for all site visitors

In our initial audit, Activated Studio determined that accessibility issues existed in the design, keyboard navigation features, and page structure throughout the site.

After three and a half months of redesigns, code cleaning and client consultations, the Robert Rauschenberg Foundation’s new and fully assistive technology compatible website was completed.

Art In Context section, after

“From providing support when needed to project leadership when asked, the Activated Studio team has always come through for us. We’ve been counting on Activated Studio for eight years to maintain several high-traffic websites in a competitive space, and have also engaged them for custom design/development projects. This crew does not disappoint. Not only have they enhanced our users’ frontend experience, improving engagement and search performance, they’ve also simplified and streamlined our backend experience, making all of our jobs easier. And we know Activated Studio has our back and will reply within minutes via slack or email if we need them. Where would we be without them? Don’t want to know.”

John W.

Englewood Health

Get in Touch

We’d love to hear from you and discuss your project.