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.
