Accessible by design.

Accessible by design.
 

At Spark, we’ve been getting to know lots of people who are affected by Inherited Retinal Diseases (IRDs). As we learned more about your unique needs and the sense of community you share, we recognized the importance of spreading the word about gene therapy research.

That’s why, when it came time to create aSharedVision.com, we made it our goal to create an effective site for the IRD community. We knew it had to do more than just provide information about IRDs, gene therapy research, and the importance of genetic testing. The site also needed to make that information easy to access by everyone: the fully sighted, as well as those with limited or no vision. We set out to create an accessible website, just as an architect designs an accessible building, where everyone feels welcome.  

Throughout the creation of this website, we followed accessibility guidelines established by the World Wide Web Consortium (W3C), an international group that develops website standards. These guidelines tell us that an accessible site is:

  • Perceivable: Information can be “seen,” in one way or another, by everyone
  • Operable: Visitors can successfully move around
  • Understandable: Information is easy to understand, and the site is easy to use
  • Robust: Information can be interpreted by accessibility tools (ATs)

Sites that don’t meet these four criteria can be challenging, or even unusable, for people with low vision. To avoid that possibility, we relied on W3C principles to guide each step, and to make aSharedVision.com accessible to all of our visitors.

 
“We set out to create an accessible website, just as an architect designs an accessible building, where everyone feels welcome.”
 

Design.

Based on W3C guidelines, we made certain design decisions that make the site easier to read, use, and understand.

Color palette

aSharedVision.com primary color palette

Creating a good looking site is always important, but when choosing colors for aSharedVision.com, our priority was to address the needs of the IRD community. We selected colors that not only contrast well against the background, but also against each other. We followed the W3C-recommended contrast ratio, so that text is legible for those who don’t see the full color range, and blocks of color are easier to distinguish. 

You’ll notice white text is always displayed on a dark background, while deep purples and blues are set against contrasting pops of lime green, light blue, and coral.  While these specific colors may not be visible to everyone, they are still distinguishable when converted to the colors seen by those with color vision deficiency. 

 
aSharedVision.com primary color palette seen by a person with Deuteranopia.
aSharedVision.com primary color palette seen by a person with Protanopia.
aSharedVision.com primary color palette seen by a person with Tritanopia.

Above: aSharedVision.com primary color palette as seen through filters of the three types of color blindness.

 

Fonts

Serif font verses Sans serif font

We chose to use sans serif fonts, which are simple, non-decorative fonts that most people find easier to read. Sans (“without”) serif fonts lack the line or base extensions, called “serifs,” that can make letters difficult to distinguish from each other. Popular sans serif fonts include Arial and Helvetica.

The two fonts used on this site feature distinctive letters, even spacing, and large counters (the space inside an “o,” “d,” or “b”), all of which help visitors more easily decipher the characters, and in turn, the words. For even more legibility, we utilized bold type and avoided italics throughout the site.

 

Icons and images

In website design, icons and images are often used as visual aids, or to represent text, functions, or information. The icons on aSharedVision.com are simple, specific, and easily recognizable. For example, you can access resources through a linked chain icon, or sign up for our newsletter through the news icon.  

Resources icon
Newsletter icon
Genetic testing icon

We wanted to ensure that everyone could use the images on the site, so we included a zoom feature, which enlarges photos and graphics that communicate important concepts. Finally, we made sure screen readers could accurately describe every image, by including descriptions of all images and photos, either on the site or in the code.

 

Writing and organization.

We created aSharedVision.com to share important information on retinal gene therapy research, genetic testing, and other high-level scientific concepts. We wanted to make it usable and meaningful for you, so we kept the writing clear, concise, and understandable. We also illustrated certain processes, such as the mechanics of gene therapy, to make them even more clear. For every video, we include a transcript, and throughout the site, we intentionally chose words for how they sound, knowing that many users will access the site through screen readers. 

We streamlined the layout by avoiding unnecessary details and repetitive content, and we always clearly labeled buttons and links with informative language. Instead of “Click here,” you’ll see, “Watch the video” or “See how it works.” All of these choices improve usability for everyone.

 

Coding for accessibility.

aSharedVision.com is accessible both in how it’s designed to look, and how it’s designed to work with accessibility tools (ATs). Screen readers are the most popular AT for people with low vision.

Screen readers are web browsers that read websites out loud. They often have a high learning curve, and can be frustrating to use when a site is not designed or coded correctly. In fact, a poorly built site can sound like a mess. 

Here are a few examples of how we avoided that problem through proper coding:

  • Site functionality is available from both the mouse and the keyboard, to make navigation easier for many users, and improve the screen reader experience.
  • We coded the site to skip repetitive navigation, which can be helpful for sighted users, but tedious when using a screen reader.
  • We accurately labeled site elements, such as images and form fields, providing invaluable information for those using screen readers.
 

Dealing with accessibility issues.

While we designed aSharedVision.com to be accessible to all users, and especially to those with IRDs, that doesn't mean it's perfect. Throughout the testing process, we evaluated the site for accessibility, using a variety of tools intended for just that purpose; and we discovered things that still weren't optimal. Almost always, however, they were “errors” that are just visible to the robots that do the evaluation, but don't affect the human experience. 

To us, it made sense to view accessibility test results in the context of how the site is working for you. When we find an issue, we define and measure it to determine if and to what extent it will impact our visitors. We also weigh the benefits and drawbacks of keeping it in place. Whenever an issue causes a negative impact, we fix it. 

 

Share your experience.

Designing this website involved deliberate decisions about colors, fonts, writing, organization, and coding; each was made with you in mind. We hope that it meets your needs, answers your questions, and provides a sense of community, but please let us know if you’re experiencing any problems accessing aSharedVision.com.

Share this story!

 

Disclaimer: The opinions and references found in this patient story belong to the author alone, and do not necessarily reflect the opinions of aSharedVision.com or Spark Therapeutics. Spark Therapeutics is not responsible for the accuracy of any of the information supplied by third-party sites referenced in this story.