Marble Design System

Accessibility and Inclusion

Accessibility and inclusion are core considerations at every level of Marble, driven by the institution's goal of being a museum for everyone. Marble should be a design system that helps connect people to art, regardless of their social identifiers or ability.

We look to best-practice initiatives like A11Y to help guide us to continue achieving this goal

Typography and Readability

Readability is the top priority for typography in Marble, using large-print (defined as at least 18px or higher) for body paragraphs at default sizing, and value contrast ratios at least 4.5:1 on solid backgrounds, following WCAG AA guidelines.

Typographic Example:

At a viewport width of 1440px, a paragraph of text has a computed font-size of 20px, and within a standard Lightmode component has a font-color of #333333 set on a #ffffff background, giving it a value contrast ratio of 12.63:1.

When overlaying text on media such as images or video, Marble uses a shaded gradient behind the type. It is recommended to select crop-agnostic ambient media with low-contrast compositions and blocky patterns for these backgrounds.

Paragraph text should always be machine-readable and be selectable with the cursor while being visibly highlightable.


Assistive Features

By following modern best practices, Marble takes advantage of many native accessibility features such as supporting viewport scaling and magnification. Other features are built into components, including:

Keyboard Navigation

Marble should allow users to interact with the experiences using just a keyboard. This is a crucial feature for people who are unable to—or prefer not to—use mice, touchscreens, or other controllers. To that end, Marble follows these guidelines:

  • Top to bottom, left to right, predictable interface structures
  • Implementing standard keyboard controls, or designing intuitive hotkeys if needed
  • Focus states on all selectable interface elements
  • Providing "skip to content" shortcuts
  • Keyboard-based user testing

Screen Reader Support

Marble is also designed and developed with Screen Reader support in mind, using web best practices to ensure the experience is still easy to use for users who have visual impairment or prefer not to look at a screen. To that end, Marble follows these guidelines:

  • All verbal information should be machine-readable
  • Clear natural language interface descriptions, that exclude all unnecessary information
  • All images should have descriptive alt text, and also describe any branding, graphics, or text that's baked into the image
  • Marble prefers semantic markup whenever possible (i.e.: <nav>, <button>).

Lightmode and Darkmode

Depending on the user and their specific needs and preferences, either light UI or dark UI may be the more accessible option. For example, users with photophobia or light sensitivity may need dark UI to limit photons emitted by the screen, while users with dyslexia or astigmatism may need light UI to be able to read the text. For many users, it's just a matter of preference.

Because of these considerations, giving the user the option is the preferred practice. Lightmode or darkmode in Marble could follow the user's system preferences automatically, be set manually through a UI, or a combination of both.


Economic and Material

Part of our mission to serve all users is to provide a great digital experience regardless of whether it's accessed on a top-of-the-line device with a fast connection, an entry-level device with a slow connection, or everything in-between. We recognize that not everyone has equal access to technology, internet, and energy, as well as the fact that the use of these resources have an impact on the environments they live in. The use of any digital experience has economic and environmental costs. Marble puts in place the following design practices and performance features to increase performance and efficiency:

Responsive and Device Agnostic Layouts

Marble components are designed with layouts that adapt to the device's viewport size, orientation, and aspect ratio. This means that every Marble component is designed with any potential desktop, tablet, mobile, and in-gallery uses in mind.

Progressive Enhancement

Marble prefers progressive enhancement and lean web performance. Through performance audits, optimization passes, and code refinements, Marble seeks to make our digital products as functional and efficient as possible, while still providing a world-class media experience to our users. This results in faster load-times while conserving electricity use and battery life, so more visitors can efficiently engage with the experience.

Adaptive Media

Since Marble puts an emphasis on media quality in order to deliver a high-fidelity fine art experience, utilizing modern image-handling technologies like responsive imaging is crucial for serving the user the highest quality asset needed for their device, without wasting bandwidth. Media-rich experiences like interactives or videos should always have an automatic fallback available if, for whatever reason, the user's device cannot render them.


Physiology and Psychology

Vision

Marble interfaces should be visually functional for users across the sight and color vision spectrums. Tools such as visual simulation checks can help the design team evaluate and empathize, such as Storybook's filters for blurred vision, protanopia (red-green weakness), tritanopia (blue-yellow weakness), or monochromacy (black and white) vision. General guidelines for ensuring visual accessibility include:

  • Not relying solely on color as an indicator of state or meaning
  • Providing UI elements with comfortable padding and breathing room
  • Ensuring all UI elements have sufficient size and value contrast

Vibe

In the spirit of Calm Technology, Marble seeks to seamlessly become part of the visitor's museum experience without distracting or detracting from it. While this is a benefit for all users, it could be especially important for neurodiverse people such as those with anxiety, autism, or OCD. General guidelines include:

  • Avoiding colors, symbols, motion, or patterns that could cause anxiety, frustration, or distress
  • Avoiding disruptive and unexpected moments in the UX such as undesired alerts and promotions
  • Ensuring comfortable and predictable spacing and layout alignment across the experience