One of the main pillars the internet is built on is neutrality. In the last couple of years, there’s been much debate over this issue with some trying to change it and others trying to maintain it. Web neutrality means that all content that’s published is of equal value (illegal content aside). This type of perfect chaos has created numerous communities of equal voices, but what about accessibility.
Just as the #content that’s being published is equal, so should be the #access to that content.
The Web Content Accessibility Guidelines (WCAG) have been published in the latest 2.1 draft back in 2018. by the Accessibility Guidelines Working Group and they aim to tackle this issue. Throughout the document, you can find suggestions on how to make your site suitable to visitors with limitations. While these guidelines aren’t laws themselves many countries around the world have adopted some or most of them into their laws (Section 508 in the EU, or the ADA in the US for example) and by doing so have forced sites to abide by them.
Because this adaptation is no small feat many services have popped up on the market looking to do the job for you. It works in a way that they scan and evaluate your site for any shortcomings, after which they’ll add overlays and/or editors that will make your pages compliant and keep up with maintaining the pages down for the long-term.
That would just be the principle of the process, as many services as there are, so are as many approaches to the issue at hand. One service we’ve found, that rises above the pack is accessiBe, which we’ll be looking over today.
The setup
accessiBe is a service that, when added to your core script (an easy process of adding just one line of code) breaks down your pages into elements it then scans. Once the scanning is complete, an accessibility interface is added to your site that lets your visitors edit these elements in a way that will make browsing more comfortable. The initial process of scanning and integration can last up to 48 hours depending on the amount of data you have on your site.
This amount of time just goes to show what a complex process this truly is and, as we’ve said, the only thing required from you is to add one line of code, everything else is done automatically in the background – talk about an easy to use a piece of software.
If you have any qualms about compatibility or are worried the integration won’t work as intended, don’t fret. The integration is universal and will function on any site and any display format (desktop, phones, tablets). Furthermore, all the features that are added to your already published pages through the scan are also automatically added to any future pages you’ll publish. Making all these processes automated will take a load off your shoulders and will allow you to focus on the content you’re publishing instead of the regulations you need to follow.
Installation
accessiBe works on a wide range of site management platforms and even for those that aren’t supported directly, an official workaround is present. However, for a moment, we’ll focus on the most widespread CMS out there – WordPress.
The installation process is exceedingly easy because the service comes in the form of a plugin and as such, all the same rules apply – download it from the repository, after which you just install and activate it, and you’re done.
After the plugin’s been activated you’ll need to copy and paste the JavaScript installation code you’ve received with your purchase on the accessiBe site in the “My Account” section. Once it’s transferred and the changes are saved, all other actions are done automatically without you having to change any more code.
The two pillars
accessiBe boasts high-end solutions both for the frontend editor available to your visitors and the backend functions you’ll use to manage all the accessibility features of your site. Let’s take a deep dive into both so you’ll have a much better idea of what you’re getting into.
Frontend editing
To access the accessibility interface, all your visitors will need to do is click on the designated button that’s located on top of the page in one of the corners. Through it, they’ll be able to edit elements of your pages to fit their specific need. Since there are so many factors to consider, there are also equally as many options to edit.
The interface is segmented in a great way, so that right at the top you’ll have a number of profiles to choose from that will, once activated, instantly adapt the page your on to your specific disability. Not only do you see the name of the profile, but it also states for what it’s primarily intended.
Probably the first thing that comes to mind when talking about issues with browsing is visual impairments because that’s how we get the most information.
With the accessiBe interface, you’ll be able to cover every impairment, from poor eye-sight to partial or complete blindness. This is covered within the “visually impaired profile” for lighter cases and the screen reader integration for the harder cases.
If you’re suffering from motor function problems, either temporary or permanent ones, you can enable keyboard navigation.
The “ADHD friendly profile” tries to eliminate distractions to help viewers focus. Similarly, the “cognitive disability profile” tries to help viewers focus by highlighting key elements on the page like headlines, links, and menus. There’s also the option to disable bright colors and tone down multimedia content for those suffering from epilepsy or seizures through the “seizure safe profile”.
All these profiles are premade so your visitors can quickly adjust the site without having to go through too many editors to get it just right. However, on top of the profiles that streamline the choosing, there are also editors for individual elements and they’re divided into three main adjustment groups – content, color, and orientation.
Content adjustments
Content adjustments are focused on the visual aspect of the page, primarily the text elements. Because of this, the section is intended to be used by viewers with visual impairments, although it’s in no way exclusive just to them.
Content scaling is used to zoom in or out on the whole page – every element on the page is affected by this, therefore everything scales in the same, original, aspect ratio. If reading is problematic, you can adjust just about anything about how the text is displayed – font size, line height, letter spacing, or alignment. You can even convert the font used on the page to the default font that’s active on your OS (in case you have one you prefer using) and highlight titles and links to make sure you’ll recognize both from regular text.
Finally, you’ll have the option to go old school and use a magnifying tool on the parts of the text you’re reading.
Color adjustments
Just as the name suggests, color adjustments let you edit the color schemes on a page. Anything from just changing the color contrast to fully choosing the colors featured on the site for titles, text, and background is done through a few quick clicks.
These changes will prove to be instrumental for color-blind visitors to have a more comfortable experience, but it can also affect those that suffer from various forms of seizures – toning down the contrast and brightness makes the page look far timider than it is by default.
Orientation adjustments
While orientation adjustments hint that their function is rooted in how visitors navigate and interact with your pages, the reality is more complex – these adjustments cover much more than enlarging the cursor and changing it back. You’ll be able to hide all animations, mute all sounds and hide all images on a page making it entirely text-based.
To help those with concentration issues you can enable things like the reading guide and highlight focus both of which will turn your attention to the most important parts of page content.
One purely navigational feature is the “useful links” interface that lists key sections of a page that you can jump to just by selecting them from a dropdown menu. Everything in this group of modifiers is designed to help you focus and concentrate better on the important stuff and you should use it as such.
Backend processes
When you hear terms like “AI-powered accessibility analyzer” you know there are some serious systems working in the background enabling your site to remain fully compliant for the long haul. Well, this seriously sounding process is one of the main reasons you would want to choose accessiBe.
A site is very akin to a living organism, always updating, always changing. That’s why you can’t simply stick with the initial scans and changes, but instead need to be tracking everything all the time. Having an automated “checker” that does all your work for you saves you more time and resources than you could ever imagine.
The system will scan every element of every page on a daily basis and it will learn as it does so. Through machine learning, each time pages are scanned data is collected, stored, and used for future processes, just like a manual scan would be like. It scans every element individually and through context, which ensures that elements aren’t valued only literally but what they mean as a whole.
Quite possibly the most impressive of these are image scans. If you’ve labeled them with correct tags, the scan will recognize this and will be able to relay that data to things like screen readers that your blind visitors use making it easy for them to understand what’s displayed. While this may sound rudimentary it’s far from it.
Screen readers, as you probably guess, read aloud the content of the site, but they don’t actually see the site, links, or any images on it, but rather sift through the site’s code. That’s why it’s crucial for your site to have code that is compatible with these apps because, without it, a Twitter link image is just a “link” and a blind person won’t know where the image/link is taking them.
If the so-called ARIA attributes are installed within the site’s code, however, they’ll add distinguishing tags directly to the code so instead of reading “link”, it will now be “Twitter link”. Just thinking about it that way, it’s plain to see what a difference this change makes.
These challenges aren’t exclusive to images and/or links but also aspects like keyboard site navigation which is again, much more complex than you would think at first because of the complex nature of sites nowadays. On an average site, you’ll find multiple menus, overlays, pop-ups, and much more. Any keyboard navigation software needs to know how to function if it’s on the center of the page, on the sidebar menus, in a pop-up, in a gallery, etc. The same types of tags are used to define the rules of behavior that make correct navigation possible.
By now you’ve probably guessed it since we’re highlighting it, but accessiBe will make these additions to your code so all your visitors will receive top-notch service when they browse your site.
Once again, we have to highlight that all these processes are automated, done in the background so no advanced coding knowledge is needed on your part.
Conclusion
If you’ve gotten this far then you know by now how important it is to have a site that’s in compliance with all the laws and regulations in your country. With services like accessiBe, there is no reason to leave any room for potential breaches that lead to litigation.
WebDesignerDepot toutes the accessiBe, as an easy decision because of the automated process that takes away all the necessary hard work you would otherwise have to do manually. If ever there was a time to enhance your site, it’s now, and if ever there was a service to use, it’s accessiBe.
Truly when someone doesn’t understand then its up to other
people that they will assist, so here it takes place.