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.
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?
- 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.
- The caret has the same issue as the mouse pointer (see above).
- 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 Google.com. 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:
- Smart Zoom: This feature allows site visitors to hone in on specific elements of a page, including text, images, and links.
- 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.
- 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.
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.
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.
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
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.
Ai Squared & sitecues® in Conclusion
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: sitecues.com; youtube.com; careers.stackoverflow.com; www.njstatelib.org