Strategies and Principles for Inclusive Coding

Ensuring Inclusive Digital Spaces

Increasingly, brands are not only focused on but are deeply concerned with the accessibility of their site. Making the internet accessible by ensuring that everyone, regardless of ability, can navigate and interact with digital content seamlessly is an ethical imperative and is critical for fostering inclusivity, complying with regulations, improving user experience, and demonstrating a commitment to ethical and social responsibility.

If prevention against alienating up to 86 million people in the U.S alone is not enough specifically, in the United States, the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act outlines requirements for accessible websites and failure to comply with these regulations may result in legal consequences. These legal consequences including lawsuits and financial penalties are not only costly but can result in negative publicity and harm the reputation of the business or organization. For both inclusivity and protection from the above mentioned consequences, it is imperative that in the development of ecommerce sites developers embrace accessibility as a core principle and build everything with equal access for all as a top priority.

Shifting our Mindset

As we continue to refine our internal automated tools working alongside accessibility partners like Allyant and Crownpeak to ensure better accessibility (also known as a11y) standards within our projects at VAAN, it’s become clear to me that a fundamental shift in mindset is crucial. Like the act of flipping a switch, we should always think about accessibility with every line of code we write. This isn’t merely a passing trend (although it may look like one given the sudden push we saw/felt in 2023 in our area of work), and this is because the evidence both in reason and numbers supports its significance :

“One of the main reasons for the importance of website accessibility is the growing number of people with disabilities. According to the World Health Organization and the CDC, 16% of the world's population, and 26% of the U.S. population, have a disability. That's over 1 billion people worldwide and around 86 million people in the U.S. who may be unable to access websites that are not designed with accessibility in mind. This can include physical, sensory, cognitive and intellectual disabilities. With such a large portion of the population affected by disabilities, it is essential that websites are designed to be inclusive and accessible to all.”

Top Tips for Writing Accessible Code

Where to start on making a site accessible can feel daunting. Here are my 3 tips to keep top of mind when writing code that promotes inclusivity.

  1. Ask yourself: Is what I’m building accessible and navigable via the keyboard?
  2. Consider whether someone without HTML expertise understands the content.
  • By looking at the HTML and its semantics will they know this is a carousel?
  • Are the next and previous buttons discernable?
  • Is the carousel’s purpose evident?
  • Which one is the current active slide? etc
  • Utilize a screen reader (such as Mac's VoiceOver or Browserstack) to assess comprehension - perhaps even closing your eyes to experience the context through sound alone.
  1. Remember: Only subpar developers disregard accessibility... As a developer myself, I’m committed to maximizing accessibility in my code.

WACG (Web Content Accessibility Guidelines)

To fully understand what is required to build inclusive and accessible websites let me quickly (to my understanding) break down a11y for you. There are two primary acronyms to remember:

WACG (Web Content Accessibility Guidelines) This is a set of recommendations for making websites and apps accessible to people with disabilities.

  • These are recommendations aimed at making websites and apps accessible to individuals with disabilities. While not all recommendations are inherently technical, most have actionable items for compliance.
  • For example, Guideline 1.1 mandates providing text alternatives for any non-text content, such as using the alt attribute for elements or including a fallback message within the tag.
  • There are three levels of compliance; as an agency we MUST achieve level A for every project, striving for level AA. Level AAA is specialized and caters to specific audiences.

Resources https://web.dev/learn/accessibility https://tetralogical.com/blog/2020/04/10/wcag-primer/ https://www.w3.org/WAI/WCAG22/quickref/ (Official reference) https://www.a11yproject.com/checklist/ (Level A and level AA)

ARIA (Accessible Rich Internet Application)

A set of attributes you can add to HTML elements to increase their accessibility

  • The purpose of ARIA is to enhance/improve the semantics of your code\ without altering the behavior, state and properties of the element. The cardinal rule of ARIA is to prioritize native HTML elements or attributes whenever feasible.
  • However, This does involve a learning curve to better know when its support is necessary to enhance the semantics of our code.Its primary usage lies in custom widgets to give screen readers context on its behavior and state.

Resources https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA https://www.w3.org/TR/using-aria/ https://www.w3.org/WAI/ARIA/apg/

Prioritizing Equality in Web Development

Accessibility is important for fostering inclusivity, complying with regulations, improving user experience, and demonstrating a commitment to ethical and social responsibility. By making websites accessible, businesses and organizations contribute to creating a more equitable and user-friendly online environment making it imperative as developers to place high importance on accessibility when we write code - we must embrace accessibility wholeheartedly as developers, prioritizing equality in every aspect of our work.