Ai Squared’s sitecues®: SaaS objectives Accessibility & Improves Usability for up to 25% of website audience

0

TL; DR: In a global the place web accessibility is changing into increasingly more important, yet all-too-frequently overpassed, Ai Squared has created sitecues®, the most appropriate, straightforward-to-use assistive know-how for webpage magnification, website navigation, and text-to-speech capability. A single line of JavaScript results in a panel made of two features: good Zoom Slider and discuss Toggle. With these two intuitive controls, Ai Squared objectives to overcome all “AT obstacles,” together with imaginative and prescient, hearing, learning, language, and behavior issues (with one of the crucial coolest makes use of of SVGs we’ve ever viewed). inShare 29 because the web turns into embedded deeper and deeper into the material of our daily lives, it’s troublesome to think about being unable to access or easily absorb the wealth of knowledge we’ve develop into accustomed to having access to with a few keystrokes. ceaselessly occasions, it’s simple for builders, designers, and entrepreneurs to disregard simply how an important accessibility on the web is, and they could best implement it as an afterthought (if in any respect). are attempting sitecues® on this text: Enter Ai Squared. Their latest product, sitecues®, is a turnkey SaaS answer that permits developers to easily embed zoom and speech functionality into web sites, learning management programs, pc kiosks, company Intranet portals, or any browser-based content material, for unbeatable accessibility. Why the necessity for sitecues®? actually that greater than one in 4 working-age adults (forty six million adults within the U.S.) undergo from delicate to extreme visual impairment. In the us alone, 10 million people endure from severe low vision problems (a statistic predicted to double with the aid of the yr 2020), and a combined whole in way over a hundred million seniors and child boomers expertise age-associated diminished vision. unfortunately, most effective 5 percent of the population that would profit from assistive technology (AT) if truth be told has get admission to to such instruments. Ai Squared’s next-technology product, sitecues®, is meant to beat all “AT barriers,” together with audio and visible impairments, dyslexia, attention Deficit disorder, and language obstacles. using asynchronous JavaScript and scalable vector graphics (SVGs), Ai Squared has constructed a in point of fact simple-to-put in force product that leaves little reason for website online house owners to not imagine serving to nearly 25 p.c of their customers. If given the opportunity to support the usability of your web site via 25 % with nearly no effort, why wouldn’t you? 3 Usability Flaws with modern Browsers currently, whilst you consider navigation usability and which features are magnified, you’ll notice that the zoom function of up to date browsers is if truth be told lovely shoddy. the size of content may also be elevated, however just about nothing will also be completed in regards to the inherent elements of the page. also, in the future for these with serious vision impairments, it turns into rather more useful to have content material recited to them as a substitute of having to learn themselves, however no such browser instrument exists. have you ever observed these evident accessibility errors in your browser’s zoom function? The mouse cursor remains the identical measurement, regardless of the extent of zoom. imagine being unable to look your mouse pointer, and not using a quick-fix to be had. The caret has the same problem as the mouse pointer (see above). your complete page zooms, making navigation very difficult. you end up scrolling everywhere just to figure out web page contents. Let’s display: Even Minor visible Impairments may also be Dibilitating Open a browser window and go to Google.com. windows customers, try retaining down the CTRL key and pressing the “-” signal a few times (Mac users: hang CMD as a substitute). might you handle the micro-text handicap each day whereas reading e-mails, getting guidelines, following pals’ lives on social media, and many others.? sure, there’s a browser zoom-in function. k, try zooming in to 200% and conducting a Google search as you may in most cases. See how you’re feeling in regards to the panning and scrolling process that’s required. Are these truly “solutions”? hardly ever. not yes? inspect Aaron Leventhal’s imaginative and prescient Simulator for Chrome: NoCoffee. Aaron is the lead engineer on the sitecues® product and an accessibility fanatic of a few years. NoCoffee is a free Chrome extension that places the hardships confronted with the aid of individuals with minor to severe imaginative and prescient issues in perspective for these of us now not burdened by way of accessibility flaws on the net. The sitecues® technique to Zoom, Navigation, & textual content-to-Speech With sitecues®, web page house owners can add three major accessibility instruments with a single line of code: sensible Zoom: this selection lets in website online visitors to hone in on particular elements of a page, together with text, pictures, and hyperlinks. One-contact learn: This reduces the need for full-page zoom through bringing page picks to the forefront of the screen. Surrounding content material is pushed aside to the history, serving as a subtle context reminder. customers can easily navigate from part to part using the arrow keys. speak Toggle Button for textual content-to-Speech: the debate Toggle function converts textual content into speech and returns it to the website online customer in a “customary” human voice. since the invention of their legacy product, ZoomText (a leading reveal magnifier and screen reader innovation) Ai Squared has been counted on for accessibility solutions. so far, approximately a hundred million internet users expertise accessibility due to Ai Squared. check out sitecues® in action The assistive know-how is displayed to users as an intuitive two-button badging panel embedded within the header of the webpage. It’s pass-browser supported across up to date browsers, no set up or download is required of web page visitors, and website online house owners merely add the sitecues® widget into the header of their site. See for yourself: See our temporary demonstration of sitecues® in motion within the video above. So What’s happening in the back of the Scenes?: Meet Marc & Aaron We sat down with Ai Squared’s vp and basic supervisor for the sitecues® product, Marc Zablatsky, in addition to the sitecues® Director of Product management and lead engineer on the challenge, Aaron Leventhal, to peel again the layers of the product infrastructure, and hear how Ai Squared is leveraging that expertise to make the net a greater, more available, place. Tech Tour: SVGs convey Accessibility to the net Two intuitive instruments make up sitecues®: the good Zoom Slider and the controversy Toggle Button. all the build-out of the product, on the other hand, holds a number of clever applied sciences: smart  Highlighter device  One-contact read  speak Toggle Button the original sitecues® product was first released in early 2014. Then in Spring of 2015, scalable vector pix (SVGs) had been introduced, inspiring an enhanced array of characteristic capabilities. “When SVG received offered, it made it a complete product,” Marc mentioned. as the title suggests, SVGs are simply vector pictures that may be scaled up and down in size. generally, they’re used for cool animations and attention-grabbing pictures, with the added benefit of interactivity. With sitecues®, then again, that technology has been harnessed and unleashed for the betterment of the product, and the net on the whole. the whole thing runs on JavaScript on the browser facet, and the sitecues® group has performed lots to preserve load times and scrolling performance. “Early on we had a take a seat down with eBay, and they advised us, “which you could’t have an effect on the burden time more than 50 milliseconds,” so that’s just about been our goal,” Marc said. 1. smart Zoom Slider (What’s happening Browser facet vs. Server side?) The “good Zoom” expertise lets in users to easily transfer the visible zoom slider to choose their favored stage of magnification, however because the slider will increase full-web page zoom stage, a few extra features, together with mouse enhancement, focal point enhancement, caret enhancement, and a highlighter tool are activated behind the scenes. When the badging panel is hovered over and increased, DOM elements are inserted in the web page; however, this does not interfere with default behavior of the web page itself. record-huge mouse and keyboard experience listeners are used for mouse highlighting and keyboard improve. On the server side, asynchronous JavaScript requests are made, firing off a mouse-over event. Aaron walked us thru their distinctive twist on conventional SVG usage — harnessing it for accessibility. “We knew we needed SVG to assist with that badging panel,” he mentioned. “Our mouse cursor, in all browsers with the exception of for web Explorer, is an SVG image that gets scaled and turned into a data URL,” Aaron instructed us. He also emphasised how main an issue no longer with the ability to see the mouse cursor is for customers. The technology in the back of scaling the mouse cursor to a recognizable size for all viewers is an immense accessibility win. 2. Highlighter instrument (The Trick to building One for the online) in the case of the highlighter tool, Aaron explained the difficulty of writing a generalized highlighter for internet content. “It’s simply truly in point of fact onerous to do for lots of reasons,” he mentioned. One problem being simply determining learn how to highlight, the opposite being that the authentic dimension of objects are steadily misinterpreted when referencing the DOM. “you end up with this massive spotlight, and it just doesn’t seem excellent,” he defined. “We do a number of work to figure out how massive the physical parts in truth are, and then we’ve various code.” in short, a point-scoring device is used for every part. Aaron associated this to InDesign circles or the Gestalt theory (ideas about how the attention sees objects offered in groups). “while you put your mouse cursor over one thing, we look at the entire candidate components and we provide each one a ranking of how separate it looks from the items round it,” Aaron explained. The candidate with the absolute best rating is chosen to be highlighted. This ensuing highlight is done with an SVG trick: “An SVG background picture is created on the fly and put underneath the element,” Aaron stated. in reality, multiple SVG parts are made per choice. One element is remodeled right into a background image, every other the outline around the background. both are presented on the page below/around each and every different. three. One-touch read: The reading field (the use of CSS3) With the One-contact learn characteristic, viewers can choose any image, hyperlink, or grouping of text (featuring that SVG spotlight trick), press the gap BAR, and their selection is brought to the forefront of the screen and displayed in a sitecues® reading field. links and interactive parts of the chosen area stay totally useful. With sitecues® center of attention enhancement, extra content is dimmed within the historical past, reducing visible distractions. Readers can navigate during the web page readily the usage of the ?, ?, ?, and ? keys. This eliminates the need for panning and scrolling, dramatically bettering person experience and usability, making One-touch learn one of the crucial popular options of sitecues®. 4. talk Toggle Button (Speech Engine Collaboration with IVONA & LumenVox) When the controversy Toggle is activated, snippets of text are sent over to the server, which transmits back tiny audio recordsdata, that are played in a normal (non-robotic), human voice. all of the file communications are encrypted, making the use of text-To-Speech (TTS) expertise for banking and transaction-based webpages secure and simple for customers. Aaron explained that his purpose behind the TTS instrument was once to seek out “the most friendly voice for older users.” Aaron put collectively a Survey Monkey survey that concerned one snippet of text being performed and heard via eight totally different speech engines. The “survey” used to be randomized at distribution, and Aaron accrued demographic data as well. “I used to be in a position to resolve that the most effective speech engine for us used to be both IVONA or LumenVox, which can be mainly the same beneath, as a result of LumenVox makes use of IVONA,” Aaron mentioned. 5. the security: protected Accessibility at Scale safety is of utmost significance to Ai Squared’s workforce. They don’t cache or shop consumer information with sitecues®; no personally-identifiable information is ever stored. The platform is built on Amazon net services (AWS), whose CDN, CloudFront, delivers the sitecues® JavaScript library quickly and at scale. a mix of SQL and NoSQL options are used to reduce the impact on web page load budgets. AWS internet hosting includes developed firewall safety and any requests comprised of the SaaS platform will mechanically be delivered over an HTTPS channel. All web sites geared up with sitecues® have undergone a QA course of prior to sitecues® integration. Ai Squared CEO David Wu (2d from left) networks with AT representatives international to better take hold of AT wants. The audience: Who’s using sitecues®? The product has been carried out in faculties, libraries, government businesses, and companies; sitecues® additionally at the moment helps roughly 6,000 nonprofits fascinated by the getting older group, as well as many companies associated to disabilities, such as the Viscardi center and Perkins college for the Blind. “We’re nonetheless kind of feeling our method as far as which verticals will resonate with the product first,” Marc said. just lately, they have been requested to let the website and shared computers of the new Jersey State Library for sitecues® use, and DirectEmployers association employed the sitecues® team to optimize the product for his or her whole interface. Marc told us the corporate has now not but approached website hosting suppliers about utilizing the product. “If somebody approached us, we would definitely speak about alternatives for them to make cash with the aid of adding sitecues® as a function to their web site — constructing in accessibility,” he stated. the brand new Jersey State Library requested that sitecues® be implemented on their website and shared computer systems. Ai Squared & sitecues® in Conclusion From the makers of the ZoomText product line, sitecues® is a consumer-pleasant assistive technology designed to make the online more available for millions of folks that would otherwise no longer by using served by using traditional ATs. This SaaS expertise features straightforward, one-step JS integration, and is appropriate with most HTML, CSS, and JavaScript utilized in websites across most brand new browsers (current variations of Firefox, Chrome, Safari, as well as IE9+). Marc informed us that their staff is engaged on some new updates and settings to add in the future, including shade contrasting. “we will be able to preserve the identical focus on usability, while including further accessibility options,” he said. The paradigm shift supplied by sitecues® lets in web site house owners to succeed in more users and more customers to have a greater experience on the web. photograph Sources: sitecues.com; youtube.com; careers.stackoverflow.com; www.njstatelib.org

Share.

Leave A Reply