Advancing Accessibility with Astral

Internet technology undoubtedly enables efficiency in the day-to-day lives of many people. Verto recognizes more work is still needed to unlock access across varying abilities and digs into solutions with the Astral Accessibility widget.
Advancing Accessibility with Astral
Advancing Accessibility with Astral
In: frontend, UX, UI, angular, accessibility-widget, open source
“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” -Tim Berners-Lee, W3C Director and inventor of the World Wide Web

There’s no doubt that technology (especially the Internet) helps us function in our work and personal lives much more efficiently than we could previously even a decade ago. Long gone are the days when depositing a cheque required an in-person visit to the bank, and we’re spending far less time in stores and more time shopping online.

Unquestionably, technology saves a lot of us a great deal of time and provides us with enormous conveniences when accessing services in our day-to-day interactions. Of course, this isn’t necessarily the case for every person in every situation.

Many still face numerous obstacles and barriers preventing them from interacting and accessing these services as intended. Because of this, the original intent of the World Wide Web must be kept in mind when designing digital solutions. That means the tools we build should provide equitable access for users with different needs and limitations: accessibility for all.

Shoot for the Stars

Ease of use and accessibility has always been a design priority here at Verto Health. Because we work in the digital health space, it's even more vital to place the principle of equal access at the core of our designs. Even so, there's always room for improvement.

As our client roster grew and we expanded in reach, we knew we had to do more to meet the diverse needs of our end users. With that in mind, we set out to design and develop our very own accessibility widget. By including a screen reader, contrast control, and various text options, we could help individuals of varied abilities better engage with our solutions.

And so, "Astral Accessibility" was born. We designed and developed this widget internally, using the Angular web application framework, and we're excited to share our design process.

Read on to learn more!

Designing with Empathy

At Verto, empathy always drives the design process for user experience; this was especially the case with the accessibility tooling project. Approaching UX design with empathy helps us to understand not only the end user's immediate frustrations but also their hopes, fears, abilities, limitations, and general needs.

To better comprehend who our target users were for the accessibility tools, we sought to learn about the different kinds of disabilities that impair usability.

User Research: Disabilities & UX

By definition, accessibility requires that digital solutions be designed and developed so that people with disabilities can, understand, navigate, interact, and contribute to them. Disability is a broad term that encompasses many conditions, so we had to dive deeper to understand the various problems our users face.

Explained: “A disability is any condition of the body or mind (impairment) that makes it more difficult for the person with the condition to do certain activities (activity limitation) and interact with the world around them (participation restrictions).” - CDC

We discovered certain groups of disabilities which affect a person’s access to online content. Broadly, these include:

  • Mobility or physical impairments
  • Auditory/ hearing impairments
  • Visual impairments
  • Cognitive, neurological, & learning disabilities

Read more about these types of disabilities here.

Accessibility also affects people without disabilities, such as:

  • Older people with changing abilities due to ageing
  • People with “temporary disabilities” such as having a broken arm or having lost their glasses
  • People with “situational limitations” such trying to read a device screen while gin bright sunlight

Market Research: Accessibility Tools

Next, we explored the landscape of existing accessibility tools and standards. We drew inspiration from solutions by UserWay, EqualWeb,, and others.

We also learned about AODA (Accessibility for Ontarians with Disabilities Act) compliance, and how we could meet those standards.


Mind maps are a great way to visualize thought processes and organize concepts before jumping into creation. We use them all the time in our design processes at Verto Health. Here’s one we made to break down some of the accessibility needs of people who’s disabilities or impairments affect their user experience.  

The Toolkit

With our research and inspiration guiding us, we were ready to design and build our accessibility tool! After some iteration, we arrived at an open-source web component solution written in Angular: Astral Accessibility.

The widget is easily embeddable on a webpage to appear at the bottom right corner of a user’s screen. Its accessibility adjustments include a screen reader, contrast, saturation, text size, and spacing options.

Astral Accessibility has been made freely available for use on GitHub under the MIT license. It is compatible with all major frontend frameworks and vanilla javascript for legacy applications too.

Next Steps

We’re proud of our first version of Astral Accessibility, but we recognize the room for improvement. To bring even more value to the widget, we intend to add adjustments and accessibility profiles in future iterations.

Profiles we want to target:

Motor impaired

  • Keyboard navigation
  • Voice commands

Colour blind

  • Dark/ Light high-contrast
  • Low/ High saturation
  • Monochrome


  • Reading mask
  • Reading guide
  • Dictionary


  • Dictionary
  • Reading guide

Epilepsy (seizure safe)

  • Blinks blocking
  • Low saturation

Keep an eye out here for further developments!

Written by
Julia Dietrich
Julia is a UX analyst (Product) at Verto Health. Inspired by connection, when she's not dreaming up ways to elevate the healthcare experience, she's doing yoga, making pottery, or out in nature.
Fay Wang
Product Designer at Verto Health
Eric Phillipson
Eric is a Technical Writer with the Product Team at Verto Health. He’s a true nerd at heart and when he isn’t working alongside the amazing bright minds at Verto, he’s surrounded by synthesizers.
More from Verto Blue Team
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to Verto Blue Team.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.