Ai Squared’s sitecues®: SaaS Targets Accessibility & Improves Usability for Up to 25% of Site Audience

Ai Squared’s sitecues<span class="registered">®</span>: SaaS Targets Accessibility & Improves Usability for Up to 25% of Site Audience

TL; DR: In a world where Internet accessibility is becoming more and more necessary, yet all-too-often overlooked, Ai Squared has created sitecues®, the premier, easy-to-use assistive technology for webpage magnification, site navigation, and text-to-speech capability. A single line of JavaScript results in a panel made up of two features: Smart Zoom Slider and Talk Toggle. With these two intuitive controls, Ai Squared aims to overcome all “AT Barriers,” including vision, hearing, learning, language, and behavior issues (with one of the coolest uses of SVGs we’ve ever seen).

As the Internet becomes embedded deeper and deeper into the fabric of our daily lives, it’s difficult to imagine being unable to access or easily absorb the wealth of information we’ve become accustomed to accessing with a few keystrokes. Often times, it’s easy for developers, designers, and marketers to dismiss just how crucial accessibility on the Web is, and they may only implement it as an afterthought (if at all).

Try sitecues® on this article:

Enter Ai Squared. Their latest product, sitecues®, is a turnkey SaaS solution that allows developers to easily embed zoom and speech functionality into websites, learning management systems, computer kiosks, corporate Intranet portals, or any browser-based content, for unbeatable accessibility.

Why the Need for sitecues®?

The truth is that more than one in four working-age adults (46 million adults in the U.S.) suffer from mild to severe visual impairment. In the United States alone, 10 million individuals suffer from severe low vision problems (a statistic predicted to double by the year 2020), and a combined total in excess of 100 million seniors and baby boomers experience age-related diminished vision.

Unfortunately, only five percent of the population that could benefit from assistive technology (AT) actually has access to such resources. Ai Squared’s next-generation product, sitecues®, is intended to overcome all “AT Barriers,” including audio and visual impairments, dyslexia, Attention Deficit Disorder, and language barriers.

Utilizing asynchronous JavaScript and scalable vector graphics (SVGs), Ai Squared has built a really simple-to-implement product that leaves little reason for website owners not to consider helping nearly 25 percent of their users. If given the opportunity to improve the usability of your site by 25 percent with almost no effort, why wouldn’t you?

3 Usability Flaws with Modern Browsers

Currently, when you consider navigation usability and which features are magnified, you’ll realize that the zoom function of modern browsers is actually pretty shoddy. The size of content can be increased, but virtually nothing can be done about the inherent elements of the page. Also, at some point for those with serious vision impairments, it becomes much more helpful to have content recited to them instead of having to read themselves, but no such browser tool exists.

Have you ever noticed these glaring accessibility errors in your browser’s zoom function?

  1. The mouse cursor remains the same size, no matter the level of zoom. Imagine being unable to see your mouse pointer, with no quick-fix available.
  2. The caret has the same issue as the mouse pointer (see above).
  3. The entire page zooms, making navigation very difficult. You end up scrolling all over the place just to figure out page contents.

Let’s Demonstrate: Even Minor Visual Impairments Can Be Dibilitating

Open a browser window and go to Windows users, try holding down the CTRL key and pressing the “-” sign a couple of times (Mac users: Hold CMD instead). Could you handle the micro-text handicap every day while reading e-mails, getting directions, following friends’ lives on social media, etc.?

Sure, there’s a browser zoom-in function. Okay, try zooming in to 200% and conducting a Google search as you would normally. See how you feel about the panning and scrolling process that’s required. Are these really “solutions”? Hardly.

Not convinced? Check out Aaron Leventhal’s Vision Simulator for Chrome: NoCoffee. Aaron is the lead engineer on the sitecues® product and an accessibility enthusiast of many years. NoCoffee is a free Chrome extension that puts the hardships faced by individuals with minor to severe vision problems in perspective for those of us not burdened by accessibility flaws on the Web.

The sitecues® Solution to Zoom, Navigation, & Text-to-Speech

With sitecues®, website owners can add three main accessibility tools with a single line of code:

  1. Smart Zoom: This feature allows site visitors to hone in on specific elements of a page, including text, images, and links.
  2. One-Touch Read: This reduces the need for full-page zoom by bringing page selections to the forefront of the screen. Surrounding content is dismissed to the background, serving as a subtle context reminder. Users can easily navigate from section to section using the arrow keys.
  3. Talk Toggle Button for Text-to-Speech: The Talk Toggle feature converts text into speech and returns it to the site visitor in a “normal” human voice.

Since the invention of their legacy product, ZoomText (a leading screen magnifier and screen reader innovation) Ai Squared has been counted on for accessibility solutions. To date, approximately 100 million web users experience accessibility thanks to Ai Squared.

Check Out sitecues® in Action

The assistive technology is displayed to users as an intuitive two-button badging panel embedded in the header of the webpage. It’s cross-browser supported across modern browsers, no installation or download is required of site visitors, and site owners simply add the sitecues® widget into the header of their site. See for yourself:

See our brief demonstration of sitecues® in action in the video above.

So What’s Happening Behind the Scenes?: Meet Marc & Aaron

We sat down with Ai Squared’s Vice President and General Manager for the sitecues® product, Marc Zablatsky, as well as the sitecues® Director of Product Management and lead engineer on the project, Aaron Leventhal, to peel back the layers of the product infrastructure, and hear how Ai Squared is leveraging that technology to make the Web a better, more accessible, place.

The Ai Squared team has built a reputation for cutting-edge technology and creative thinking when it comes to AT solutions.

Tech Tour: SVGs Bring Accessibility to the Web

Two intuitive tools make up sitecues®: the Smart Zoom Slider and the Talk Toggle Button. The entire build-out of the product, however, holds several intelligent technologies:

The original sitecues® product was first released in early 2014. Then in Spring of 2015, scalable vector graphics (SVGs) were added, inspiring an enhanced array of feature capabilities. “When SVG got introduced, it made it a complete product,” Marc said. As the name suggests, SVGs are just vector graphics that can be scaled up and down in size. Typically, they’re used for cool animations and eye-catching graphics, with the added benefit of interactivity. With sitecues®, however, that technology has been harnessed and unleashed for the betterment of the product, and the Web in general.

sitecues widget features full-page zoom and text-to-speech controls

Everything runs on JavaScript on the browser side, and the sitecues® team has done a lot to preserve load times and scrolling performance. “Early on we had a sit down with eBay, and they told us, “You can’t affect the load time more than 50 milliseconds,” so that’s pretty much been our target,” Marc said.

1. Smart Zoom Slider (What’s Happening Browser Side vs. Server Side?)

The “Smart Zoom” technology allows users to easily move the visual zoom slider to choose their desired level of magnification, but as the slider increases full-page zoom level, several additional features, including mouse enhancement, focus enhancement, caret enhancement, and a highlighter tool are activated behind the scenes.

When the badging panel is hovered over and expanded, DOM elements are inserted in the page; however, this does not interfere with default behavior of the page itself. Document-wide mouse and keyboard event listeners are used for mouse highlighting and keyboard support. On the server side, asynchronous JavaScript requests are made, firing off a mouse-over event.

Aaron walked us through their unique twist on typical SVG usage — harnessing it for accessibility. “We knew we needed SVG to help with that badging panel,” he said. “Our mouse cursor, in all browsers except for Internet Explorer, is an SVG image that gets scaled and turned into a data URL,” Aaron told us. He also emphasized how major a problem not being able to see the mouse cursor is for users. The technology behind scaling the mouse cursor to a recognizable size for all viewers is a major accessibility win.

2. Highlighter Tool (The Trick to Building One for the Web)

In the case of the highlighter tool, Aaron explained the difficulty of writing a generalized highlighter for web content. “It’s just really really hard to do for a lot of reasons,” he said. One obstacle being simply figuring out HOW to highlight, the other being that the true size of objects are often misinterpreted when referencing the DOM. “You end up with this giant highlight, and it just doesn’t look very good,” he explained. “We do a lot of work to figure out how large the physical elements actually are, and then we have a lot of code.”

In short, a point-scoring system is used for each element. Aaron related this to InDesign circles or the Gestalt principle (rules about how the eye sees objects presented in groups). “When you put your mouse cursor over something, we look at all the candidate elements and we give each one a score of how separate it looks from the items around it,” Aaron explained. The candidate with the highest score is chosen to be highlighted.

This resulting highlight is done with an SVG trick: “An SVG background image is created on the fly and put under the element,” Aaron said. In actuality, multiple SVG elements are made per selection. One element is transformed into a background image, another the outline around the background. Both are presented on the page under/around each other.


3. One-Touch Read: The Reading Box (Using CSS3)

With the One-Touch Read feature, viewers can select any image, link, or grouping of text (featuring that SVG highlight trick), press the SPACE BAR, and their selection is brought to the forefront of the screen and displayed in a sitecues® Reading Box. Links and interactive elements of the selected area remain fully functional.

With sitecues® focus enhancement, excess content is dimmed in the background, reducing visual distractions. Readers can navigate through the page with ease using the ←, ↑, →, and ↓ keys. This eliminates the need for panning and scrolling, dramatically improving user experience and usability, making One-Touch Read one of the most popular features of sitecues®.

4. Talk Toggle Button (Speech Engine Collaboration with IVONA & LumenVox)

When the Talk Toggle is activated, snippets of text are sent over to the server, which transmits back tiny audio files, which are played in a normal (non-robotic), human voice. All of the file communications are encrypted, making the use of Text-To-Speech (TTS) technology for banking and transaction-based webpages safe and simple for users. Aaron explained that his goal behind the TTS tool was to find “the most friendly voice for older users.”

Aaron put together a Survey Monkey survey that involved one snippet of text being played and heard through eight different speech engines. The “survey” was randomized at distribution, and Aaron collected demographic data as well. “I was able to determine that the best speech engine for us was either IVONA or LumenVox, which are basically the same underneath, because LumenVox uses IVONA,” Aaron said.

5. The Security: Safe Accessibility at Scale

Security is of utmost importance to Ai Squared’s team. They don’t cache or save user information with sitecues®; no personally-identifiable data is ever stored. The platform is built on Amazon Web Services (AWS), whose CDN, CloudFront, delivers the sitecues® JavaScript library quickly and at scale. A combination of SQL and NoSQL solutions are used to minimize the effect on page load budgets. AWS hosting includes advanced firewall protection and any requests made from the SaaS platform will automatically be delivered over an HTTPS channel. All websites equipped with sitecues® have undergone a QA process prior to sitecues® integration.

Ai Squared CEO  with representatives from Hand in Hand, ATIA, Perkins, and Tsinghua University

Ai Squared CEO David Wu (second from left) networks with AT representatives worldwide to better grasp AT needs.

The Audience: Who’s Using sitecues®?

The product has been implemented in schools, libraries, government agencies, and enterprises; sitecues® also currently supports approximately 6,000 nonprofits focused on the aging community, as well as many organizations related to disabilities, such as The Viscardi Center and Perkins School for the Blind. “We’re still kind of feeling our way as far as which verticals will resonate with the product first,” Marc said. Recently, they were asked to enable the website and shared computers of The New Jersey State Library for sitecues® use, and DirectEmployers Association hired the sitecues® team to optimize the product for their entire interface.

Marc told us the company has not yet approached web hosting providers about utilizing the product. “If someone approached us, we would definitely discuss opportunities for them to make money by adding sitecues® as a feature to their website — building in accessibility,” he said.

The New Jersey State Library enables sitecues® use on their shared computers and website

The New Jersey State Library requested that sitecues® be implemented on their website and shared computers.

Ai Squared & sitecues® in Conclusion

From the makers of the ZoomText product line, sitecues® is a user-friendly assistive technology designed to make the Web more accessible for millions of individuals who would otherwise not by served by traditional ATs. This SaaS technology features easy, one-step JS integration, and is compatible with most HTML, CSS, and JavaScript used in web pages across most modern browsers (current versions of Firefox, Chrome, Safari, as well as IE9+).

Marc told us that their team is working on some new updates and settings to add in the future, including color contrasting. “We will retain the same focus on usability, while adding additional accessibility features,” he said. The paradigm shift offered by sitecues® allows website owners to reach more users and more users to have a better experience on the Web.

Photo Sources:;;;

Alexandra Leslie

Questions or Comments? Ask Alexandra!

Ask a question and Alexandra will respond to you. We strive to provide the best advice on the net and we are here to help you in any way we can.