Picture this scenario: You step into a store excited to make a purchase, only to encounter narrow aisles, illegible signs, and unhelpful staff. It’s frustrating, isn’t it? Yet, this mirrors the virtual experience of millions online when web applications—be it portals, blogs, forums, educational platforms, social media, online stores, health trackers, food delivery services, microsites, and more—are not crafted with accessibility at the forefront.
Gone are the days when accessibility was merely a buzzword in the ecommerce realm. It’s imperative to realize that it goes beyond rendering text machine-readable or merely meeting compliance standards. Accessibility entails bridging the digital gap, ensuring every customer’s online shopping journey is pleasurable, and, above all, guaranteeing inclusivity for all.
In the ecommerce community, there exist numerous myths and misconceptions surrounding accessibility. If you’re embarking on your journey into accessibility, consider this blog post your inaugural stride towards fostering a more inclusive online environment.
Defining accessibility
In the realm of accessibility, various barriers exist, and amusingly, one of the initial barriers encountered is the very word itself. Hence, alternative terms are sometimes used, such as:
- A11Y: wherein the number 11 replaces the 11 letters between ‘A’ and ‘Y’
- Ally: as the number 11 resembles the letters “ll”
- 13 letter word: highlighting that the word comprises 13 letters
Regardless of the terminology employed, the core meaning remains consistent. Some define accessibility as “the concept of whether a product or service can be used by everyone,” while others describe it as “the practice of ensuring that information, activities, and environments are understandable, meaningful, and usable for as many people as possible.” Still, others assert that “accessibility guarantees that all individuals, regardless of ability, can engage with the information or services provided.” Ultimately, the essence persists: it’s about designing products or services that are usable by all.
As a testament to the validity of these definitions, we can turn to the words of Tim Berners-Lee, the creator of the World Wide Web, from 26 years ago: “The power of the Web lies in its universality. Access by everyone, regardless of disability, is an essential aspect.”
Let’s begin by introducing a few terms commonly encountered in discussions surrounding accessibility:
- Web Content Accessibility Guidelines (WCAG): These guidelines and standards, established by the World Wide Web Consortium (W3C), are aimed at ensuring that web applications and digital platforms are accessible to a broad spectrum of individuals. By adhering to WCAG, inclusivity is promoted, and the potential audience is expanded.
- Americans with Disabilities Act (ADA): This federal law in the United States prohibits discrimination based on disability and establishes requirements for accessible facilities and services. Compliance with the ADA is crucial for providing equal opportunities and access to individuals with disabilities, and it also helps in avoiding legal complications.
- Web Accessibility Initiative (WAI): An initiative of the W3C, WAI is committed to making the web universally accessible. Through the development of guidelines and resources, WAI empowers web creators to design with all users in mind. By fostering a more inclusive online environment, WAI ensures that digital content is navigable and interact able for everyone.
- Four Principles of Accessibility: This refer to the fundamental guidelines outlined in WCAG, which serve as the cornerstone for creating accessible content. Adhering to these principles enhances the overall user experience and broadens the usability of websites for a diverse audience. These principles dictate that content should be:
- Perceivable: Information and user interface components should be presented in a manner that users can perceive, whether through sight, hearing, or other senses.
- Operable: User interface components and navigation must be operable and usable by all users, including those who may rely on keyboards or assistive technologies.
- Understandable: Information and operation of the user interface should be clear and comprehensible to all users, irrespective of their background or abilities.
- Robust: Content must be robust enough to reliably function with both current and future technologies, including assistive technologies, ensuring continued accessibility over time.
Comprehending the audience targeted for website accessibility
Fifteen percent of the global population, equating to one in every six people or one billion potential users, has some form of disability. This underscores the significance of accessibility in reaching a sizable audience.
It’s crucial to recognize that anyone, regardless of their current abilities, may require an accessible web interface at some point in their lives. Whether due to aging-related changes, deteriorating vision, slowed reflexes, or alterations in cognitive abilities, accessibility becomes essential for everyone eventually.
Disability isn’t always permanent; situations can change, and anyone might encounter temporary or situational disabilities. This notion, succinctly articulated by Microsoft’s Inclusive Design Team, emphasizes the dynamic nature of accessibility needs.
Accessibility in e-commerce
Now that we’ve covered definitions, common terms, and statistics, let’s delve into what this means for your web application. Below, you’ll find a checklist of accessibility features to assess your store’s accessibility.
- Keyboard Navigation and Visual Focus Indicator: Guarantee effortless navigation of your web application using solely keyboard inputs, and incorporate a clear visual indicator to show users where their focus lies on the screen.
- Color Contrast: Employ high-contrast color schemes to ensure text and vital information stand out distinctly against the background, strategically selecting colors to minimize confusion.
- Strategic Color Use: Opt for colors that convey specific meanings or information, such as red for warnings, green for approval or success, blue for links, and yellow for caution or attention.
- Image Alt Text: Provide descriptions for images to aid customers with visual impairments in understanding their content and context.
- Content Structure and Headings: Arrange your content with well-defined headings and a coherent structure to facilitate ease of comprehension for all users.
- Font Size and Style: Choose fonts characterized by clear, well-defined letters and adequate spacing between characters, allowing users to adjust text size according to their preferences or requirements.
- Fillable Form Fields: Ensure all form fields possess descriptive labels to simplify the input process for users.
- Video Captioning: Incorporate captions in videos to assist users who are deaf or hard of hearing, or those unable to listen due to their environment or circumstances.
- Descriptive Links: Use explicit and descriptive link text (e.g., “More information can be found in this blog post”) rather than generic terms like “click here,” providing context for screen readers.
- Responsive Design: Guarantee your web application’s responsiveness across various screen sizes, enabling accessibility on both large monitors and small mobile devices.
Advantages of Incorporating Accessibility in E-commerce
Though implementing accessibility and ensuring accessible content may appear challenging, the rewards outweigh the challenges. Embracing these principles not only ensures equitable access to your products and services but also positions your brand as a beacon of inclusivity and innovation in the fiercely competitive e-commerce landscape.
Now, let’s delve into the positive outcomes that accompany robust accessibility endeavors:
- Legal Compliance: Implementing necessary measures ensures adherence to legal regulations, mitigating the risk of expensive lawsuits and fines. For instance, in the United States, a blind individual successfully sued Domino’s Pizza for inaccessible online ordering.
- Ethical Responsibility: Prioritizing accessibility showcases your dedication to inclusivity and social accountability. By making your online store accessible, you not only avoid excluding potential customers but also cultivate a reputation as a business that values everyone’s needs and fosters a sense of belonging.
- Enhanced SEO: Improving accessibility positively influences search engine ranking. Search engines favor web applications offering better user experiences, including accessibility features, which can lead to heightened visibility and increased organic traffic.
- Increased Traffic: An accessible online store attracts a broader range of users, resulting in higher traffic as more people can comfortably interact with your shop. This translates to enhanced sales and conversions.
- Expanded Audience: Accessibility broadens your potential customer base to encompass individuals with disabilities (permanent, temporary, or situational), constituting a significant portion of the population. By catering to this diverse audience, you tap into an often overlooked market, expanding your sales potential.
- Revenue Growth: By ensuring accessibility, you tap into an often underserved market, leading to a notable increase in sales as your online store becomes more welcoming to a diverse customer base.
- Enhanced User Experience: Accessibility enhancements foster a user-friendly environment for all visitors, facilitating smoother navigation, quicker load times, and improved usability. This results in heightened customer satisfaction and enhanced loyalty.
Examples of Accessibility in E-commerce
Typical Accessibility Errors
To assist you in constructing an inclusive online store, here are some instances of prevalent accessibility blunders:
Lack of Alt Text: Neglecting to include descriptive alternative text for images inhibits screen readers from conveying the image’s content to users.
Example: On the product page of your online clothing store, there’s an image of a fashionable red dress. However, the alt text simply reads “dress_36,” providing insufficient information for blind or visually impaired shoppers. As a result, they are unable to make an informed purchase on your site, potentially leading to lost sales opportunities.
Unclear Links: Employing ambiguous link text complicates users’ understanding of the link’s purpose.
Example: “For more information, click here” fails to provide context regarding the linked content.
Poor Heading Structure: Neglecting to organize content with appropriate headings can lead to confusion for screen reader users and individuals who rely on heading navigation.
Lack of Responsive Design: Failing to optimize your site for different screen sizes and devices.
Example: When attempting to access a restaurant’s web application on a tablet, the menu items are truncated, preventing customers from viewing the entire menu. This results in a frustrating user experience and may prompt them to seek dining alternatives elsewhere.
Insufficient Contrast Text: Employing low contrast between text and background colors can render content illegible for individuals with vision impairments.
Example: Product descriptions are presented in pale gray text against a light beige background, making it exceedingly difficult for customers to read pertinent information about the products they’re interested in. Consequently, this may lead to potential sales losses.
Undefined Form Fields: Neglecting to distinctly label form fields creates difficulties for users in understanding what information to input.
Example: On a job application page, the form fields are designated as Field 1, Field 2, and Field 3, without specifying the type of information required for each field. This ambiguity leaves applicants uncertain about which details to provide, potentially resulting in incomplete applications and frustration.
Keyboard Inaccessibility: Creating your website without enabling keyboard navigation.
Example: Certain interactive elements cannot be accessed or operated solely using the keyboard, thereby excluding individuals with motor disabilities.
Lack of Focus Indicators: Absence of clear focus indicators may impede keyboard users from determining their location on a page.
Example: While navigating an online store’s checkout page using a keyboard, there are no discernible outlines or highlights around the selected form fields or buttons. This absence makes it challenging for users to discern their position in the checkout process, potentially resulting in errors and cart abandonment.
Auto-playing Media: Videos or audio that start playing automatically can disrupt and disorient users with cognitive or sensory disabilities.
Example: Upon loading the homepage, a video starts playing with loud audio, causing distraction and annoyance to users, particularly those with sensory sensitivities or cognitive impairments.
Neuralab’s Chief Designer, Emanuele Lizzi, addressed the significance of these themes at the IZZI Power of Education 2023 conference, captivating the attention of numerous attendees. Explore further details about the conference and view the video recording of his presentation on Neuralab’s blog.
Good Accessibility Examples
While discussions on accessibility have persisted for years, even the most dedicated web applications still encounter challenges. Nonetheless, many are actively striving to create accessible content, with several reports acknowledging their efforts.
In early 2023, HubSpot highlighted 14 websites that excel in website accessibility, ranging from small ecommerce businesses to prominent brands. They commended the BBC for its accessible news site and praised WWF for its user-friendly pages.
The 2023 report from Web Accessibility In Mind (WebAIM) showcased progress, revealing that 96.3% of homepages now meet WCAG 2 standards, a slight improvement from the 96.8% reported in 2022. While specific websites were not named, their data identifies common accessibility pitfalls. Additionally, WebAIM provides a web accessibility evaluation tool called WAVE, aiding in the assessment and enhancement of web app accessibility.
Engadget has been producing annual reports focusing on the accessibility of major web applications for the past three years. Their 2023 report highlighted that “the tech industry still has a lot of work to do regarding accessibility,” but noted some notable progress, including the following interesting examples:
- Apple has been a pioneer in accessibility and user-friendliness. In the latest update, they introduced a feature on iPhones that assists individuals who are blind or have visual impairments in locating doorways and reading signs or text on them.
- Google is actively enhancing the inclusivity of its tools, with notable improvements over the past year. One such improvement is Guided Frames, a tool designed to aid blind or visually impaired users in taking selfies.
- Microsoft continues to integrate new accessibility features into its products. This year, they introduced automatic captions for videos on LinkedIn and enabled alt-text for advertising images on the platform.
- Amazon introduced several new features and updates, including gesture support for Echo Shows. Users can now dismiss timers by waving or displaying an open hand, benefiting those who cannot use their voice or prefer not to touch the device.
- Meta (formerly Facebook) also made strides in accessibility, receiving recognition as the best place to work for disability inclusion by the Disability Equality Index. Additionally, they added alt-text for stickers on Facebook and Messenger.
While major corporations excel in accessibility, there are also noteworthy examples from lesser-known entities in the online world. For instance, a WordPress plugin developed for neuralab.net utilizes the AWS Polly service to convert blog post text into audio files, allowing users to listen to, pause, and rewind the content directly within the blog post.
Another commendable case is Neuralab’s collaboration with the Croatian Academic and Research Network (CARNET). During the development of CARNET’s new website, a primary focus was placed on accessibility. This involved fine-tuning the page layout to ensure usability for the widest possible audience, including adjustments to colors, contrast, and font size, as well as the addition of a built-in dyslexia font feature. Neuralab extensively documented their work with CARNET on their blog and created a visual showcase of the project on Behance.
Building accessibility into your store
Ready to initiate accessibility enhancements for your online store? Here are your actionable steps to get started:
- Incorporate descriptive alt text for all images across your web application to ensure compatibility with screen readers.
- Verify your web application’s keyboard navigation functionality to guarantee seamless navigation for users without a mouse.
- Include captions for videos to accommodate deaf and hard-of-hearing users.
- Develop and publish an accessibility statement on your web application, articulating your dedication to accessibility.
- Provide training to your team on accessibility standards and best practices.
- Continuously assess your web application’s compatibility with assistive technologies and conduct user testing with individuals with disabilities.
And remember, in the words of Apple, when considering any feature, prioritize accessibility by ensuring it is accessible in multiple ways.
Making the internet better for everyone
In today’s digital era, accessibility is imperative. It’s about establishing an inclusive environment where everyone, regardless of their abilities, can enjoy a fulfilling shopping experience. With the array of tools available to us and the knowledge and responsibility we hold, it’s time to lead the charge in championing accessibility. Let’s view it not merely as a technical requisite, but as a fundamental pillar of contemporary digital commerce. The future of e-commerce is accessible. Are you ready to embrace it?
For over 15 years, Neuralab has been at the forefront of conceiving, designing, and developing web applications for medium and large organizations. Specializing particularly in crafting exceptional e-commerce solutions alongside internal applications, extensive web portals, and online platforms, Neuralab boasts a dedicated team of 25 professionals, including designers, developers, content creators, and product managers. With all operations conducted in-house and no outsourcing, Neuralab ensures comprehensive project management and execution.
Elevate your store and brand experience with the support of a certified WooExpert. Neuralab stands as a Platinum-certified team of creatives and engineers, proficient in managing all facets of e-commerce projects.
