For those without disabilities, the internet is generally easy to navigate. Most of us grew up with this technology and it’s almost second nature to turn to the internet for everyday life. However, try closing your eyes and executing a Google search to find a new pair of shoes to buy. It’s extremely difficult, isn’t it?
Pulling off a “blind” search is challenging because the screen provides you with visual information related to your search. While this is how the internet has always worked, it highlights how the internet structurally discriminates against those with impaired or no vision. People with reduced vision must rely on screen reader programs to read web pages to them. While screen readers are constantly being updated and improved, it’s still largely up to the website itself to provide the correct markers and structure that allows the screen reader to function properly.
At CQL, we work with brands and their website to lessen this burden. We specialize in creating a more accessible user experience for those with visual and hearing impairments, and other physical or mental restrictions that disable them from using the internet like someone without a disability.
In this article, I will elaborate on a few accessibility enhancements in Salesforce Commerce Cloud (SFCC) that an interface developer can use to build a more inclusive user experience for those with disabilities. After all, the worldwide web should be open for everyone.
ARIA Tag Types in SFCC
Accessible Rich Internet Applications (ARIA) tags were developed to help screen readers manage and share site content. The aria-label attribute gives a name to a page element that may not already have text, such as a radio button, social media icon, or other visually intuitive buttons.
The trail markers are more than just a few scattered aria attributes. The role attribute tells the user what kind of element it is, such as a textbox, button, checkbox, searchbox, dialog, and more.
The aria-hidden attribute allows elements to be hidden from the screen reader to avoid confusion about overlapping elements while also speeding up the page load time by not loading images or icons.
The aria-live is an important attribute for reactive elements that change based on user input or other page events. By setting this attribute, the screen reader will be notified of changes to that element. This means the screen reader can quickly understand and read any new text or other element changes that appear.
You can see these attributes in action in this quick HTML sketch of a product list page:
Developer Tips for a More Accessible User Experience
We can now move on to debugging and solving accessibility issues. It is important for developers looking to debug and fix accessibility issues to use these tools to check for issues.
The most common tools used by users with disabilities are NVDA and JAWS for desktop use, while Android and iOS have a built-in accessibility mode for mobile use. The NVDA program is the most developer-friendly because of its simplicity and because there’s a nice hotkey for turning it on and off.
Another handy tool for developers is the accessibility tab in the Chrome and Firefox developer console. It shows a list of each element on the page, with its role and what the user will hear from the screen reader and various properties for each element.
A limited diagnostic will look for issues in the current webpage and suggest edits, such as adding a ‘title’ attribute or adding an aria tag. This tool can simulate various versions of color blindness, and it shows the tab order of the page, which is extremely important as it shows how a screen reader navigates the page.
Last but not least: the accessibility selector in the top left of the console can give you quick information on elements you place your cursor over.
Legal Implications with Accessibility Enhancements
Ensuring your site is fully accessible is not only the right thing to do to accommodate users with disabilities, but is even required by law in places like California.
The Unruh Act is a law passed by the State of California that essentially outlaws discrimination against certain protected traits, such as race, religion, sex, orientation, national origin, language, disability, etc. Since the passing of the Federal ADA, this now applies to commercial websites, as well.
The upshot is that commercial websites wishing to reach the California market must comply with the Web Content Accessibility Guidelines (WCAG) or run the risk of being hit with a lawsuit.
There are two basic methods for ensuring compliance: dedicating some development time early and often to fixing issues or hiring a third-party expert in accessibility compliance to fix or suggest changes to the project.
For additional information on the California Consumer Privacy Act (CCPA), see CQL’s CCPA guide to better understand what the CCPA means to your business.
Regularly Assess Your Website’s Accessibility
The bottom line is that regularly assessing your website’s accessibility and ease of use is imperative to doing the right thing and accommodating users of your site with disabilities. In turn, this will also keep your legal department bored by closing off invitations to expensive lawsuits.
Have more questions on accessibility from both the development and UX perspectives? Check out our blog on “The Importance of Accessibility in Ecommerce” or contact us today.
