How To: Build Accessible Content

What is accessibility?

The term "accessibility" means different things to different people, which makes sense since we all have a range of capabilities and limitations. Some people may have poor eyesight, be color-blind, require the use of assistive devices such as a screen reader, or may be limited to accessing the internet from a specific device, such as only a mobile device or only a desktop computer. 

When building content, there are some simple yet effective guidelines that make it easier for everyone to view and understand your content.

Responsive Design

Responsive design means the content on your screen adjusts based on your device and screen size.

  • The Lane platform is designed to adjust automatically, so that users can access the same information whether using a smart phone, tablet, laptop or a large external monitor.

Vision Impairment

A wide range of vision impairment issues can be mitigated with a few simple choices.

Alt Text

When inserting images into a page, "alternative text" is text that describes the image. This helps vision-impaired people who are using screen readers that read out the text on a page.

  • Avoid using images that have text as part of the image. This cannot be read by a screenreader (and will get stretched or cut off when resized for various screens).
  • The Hero content block is designed to place a title and description above an image. This can be easily ready by a screen reader.

High Contrast

Choose high contrast color combinations for text and background images that are easy to distinguish when reading.

    • When using the Hero Content Block, always enable the "Show Gradient" option which makes the image(s) darker.
    • The text color will automatically switch between black and white depending on the choice of background color. Choose colors on either end of the lighter or darker spectrum over the greys and beiges in between:


Color-blind combinations

Avoid using the following color combinations, which are the most common types of color blindness:

  • Red & Green
  • Blue & Yellow

If you have any questions about design and accessibility, contact the Help Desk at and we are happy to help!

Was this article helpful?
0 out of 0 found this helpful