---
title: Accessibility
tags: Before You Start
---

# Accessibility

*Good design is accessible design, as a focus on accessibility enhances usability for all users.*

While the aim is to provide a design system that is as foolproof as possible, it is up to brand and content managers to build accessibility into their design choices. Default colors, type sizes, and other elements are crafted to meet WCAG standards to account for low vision, while hearing and cognitive impairments have been considered throughout the module library. Here are a few of the ways accessibility has been tackled within the US Pharma Design System.

## Ways We Made Our System Accessible

* **Type Readability:** Focus on standard font sizes and optimal character counts for best readability across all breakpoints.
* **Color Contrast:** Make sure our colors meet WCAG standards to achieve optimal AA or AAA ratings.

| First Iteration | Second Iteration |
| --------------- | ---------------- |
|  |  |

### ALT Text and ARIA Labels

Where possible, use ARIA Labels (Accessible Rich Internet Applications) to indicate "landmarks" in our system to make it easier for screen readers to parse information.

**Key focus areas for users:** Ensuring all image tags have an alt attribute set. Images that are decorative (like an icon in front of a label in a button) can leave the alt value blank. All other images need a clear description.

| Poor Description | Good Description |
| ---------------- | ---------------- |
| *"A picture of a girl"* | *"A little girl on the beach smiling"* |

### UI Elements

Accessible design is predictable. There should be no guessing about how elements behave or how they look on different pages.

Input fields, buttons, and other interactive elements have been designed with clearly defined focus states.

| Poor Button Use | Good Button Use |
| --------------- | --------------- |
|  |  |

Using UX standard shapes for buttons (rectangle, rounded rectangle) gives designers more freedom to use other shapes (arrows, large squares, parallelograms, etc.) for non-functional parts of the design without confusing its users.


**Overdesigning navigation with buttons is one of the biggest mistakes made on healthcare sites today.**

As a rule, buttons should have an easy-to-recognize button shape. They should be short, with a quick Call to Action, and be consistent in style and color across the entire site.

One of the biggest mistakes noticed in analysis of legacy Novartis websites was the use of different navigation colors among indications. This system keeps the nav consistent, but still allows for those types of design choices in other parts of the Content Management System, where it is not going to confuse users.

### Interactions and Animations

We believe that content should not hide behind intricate gestures or interactions. As a result, we have designed our interactions with the idea that people with limited movement should provide access to all content.

Our system also aims to avoid unnecessary animation or, more specifically, motion initiated by the web page without user interaction.