If you work in government, academia, or the nonprofit sector, you are likely familiar with web accessibility. However, many organizations still struggle to understand the importance of accessibility and whether or not it’s worth the commitment. If you ask around, you’ll find that the most common justifications for not having an accessible website are time and budget. 

The goal of technology is and always has been to serve the people, and it should serve all the people, without discrimination. In the U.S. alone, an estimated 48.9 million people have a disability; which means that 1 in 5 people are disabled or partially abled. And these statistics do not even include those with short-term disabilities or impairments, i.e., individuals who suffer from an injury, accident, etc., that render them temporarily disabled.

While web accessibility standards and best practices have been around for a number of years, many organizations still struggle to understand the importance of accessibility and thus don’t make it a priority. There is also a fear that the extra effort to make a site accessible will be too difficult, out of budget, and therefore simply not possible to even consider. However, accessibility at its core is something that naturally fits into web development. The process is not as daunting as many assume and the benefits to an organization’s mission are significant.

Accessible websites are becoming the norm

The internet is an ever-changing organism. It’s constantly evolving and changing the way things are done online. While web accessibility might not be a legal requirement (yet) beyond government websites, it is a trend that is gaining momentum and notice in both the nonprofit and commercial sectors. In recent years, the number of accessibility-related lawsuits has nearly tripled: in 2018, the number of suits brought forward under Title III of the American Disabilities Act (ADA) increased to at least 2,258, which was a 177% increase from 814 lawsuits in 2017. 

To put this into context, let’s look at another web trend that now has real consequences on the way that the web works: mobile-first websites. In 2010, Google CEO Eric Schmidt put forth the idea of “mobile-first design.” It was a simple and new approach to address the rising  number of users who access the internet from their mobile devices. It slowly started to gain traction and developers started to incorporate it in how they built applications. Soon enough, it simply became “how we do things.” Since 2018, Google officially gives priority to mobile-first websites in its indexing methodology. What started as a trend, has now become standard practice.

Web accessibility is on the same path. It’s growing in importance and eventually, it will become the norm. So how can you ensure your website is accessible without having to sacrifice budget?

Think accessibility from the start

First, remember that in web development, everything costs more if it’s an afterthought, i.e., if it’s something you have to fit in or integrate once the bulk of the work is done, it is going to require more work. If you are planning to build or redesign your website, accessibility should be an acceptance criteria from the very beginning. Your project team should be in agreement with the level of accessibility they want to provide, and it should be taken into consideration throughout each phase of the project. 

Design plays a crucial role in delivering accessible applications. Accessibility risks, such as colors, typography, and contrast should be addressed at this stage to avoid that the development team ends up with the pressure and task to test for accessibility pitfalls later. Additionally, following best development practices will help you keep costs low. For example, HyperText Markup Language (HTML) is accessible by nature; using correct HTML elements for their correct purpose will avoid running into accessibility issues later. Implementing meaningful headings, including titles in your links and adding alt text to images, are only a handful of good development practices that also address accessibility.

When semantic HTML isn’t enough, developers should include ARIA attributes. ARIA is a set of attributes that defines ways to make web content and web applications more accessible to people with disabilities (here is a great intro to ARIA). While it might be tempting to add ARIA attributes as a way to “magically” make a website accessible, it’s important to remember that these attributes were intended as a way to supplement applications. They should be considered the exception and not the rule; so use it, but don’t abuse it.

Integrating accessibility on existing websites

For existing websites, there are several ways to iteratively work towards a more accessible website without disrupting the life of the site itself. A first step towards accessibility is running a site audit to identify your site’s needs, necessary improvements, and priorities. There are several tools to help you run an effective accessibility pass, such as Accessibility Insights and CodeSniffer, among others. Once the audit is complete, you can pinpoint accessibility issues that can be addressed in the immediate term, such as content updates (e.g., including alt text on all images). An audit does not likely require technical development time, which allows you to focus on developing a plan to make initial changes, and then plan for larger improvements once you have the time and resources lined up to do so.

To address changes in code, you’ll need to work with a technical partner or developer to ensure your website is fully compliant. A cost-effective approach is to tackle small-effort issues that have site-wide impact. For example, color contrast, font sizes and visible focus states are generally quick and easy fixes that overwhelmingly improve a website’s accessibility performance. 

A key, yet often overlooked, accessibility standard is keyboard accessibility, also known as tabbing. Whether it’s due to injury, disability, or personal choice, many users will navigate a website via keyboard only; this is why it’s crucial to ensure your site is not only accessible but also keyboard friendly. By default, users can only navigate to links, buttons, and form controls; but often, during development, additional elements (such as navigation tabs, animated icons, arrows, etc.) are integrated and cannot be interacted with via keyboard. Tracking and updating these kinds of elements may also require dedicated time as they are often the results of custom solutions, one-off design elements, or workarounds to achieve the desired front-end look, so you’ll want to plan for that as well.

Tackling WCAG 2.0 compliance

WCAG 2.0 is divided into three conformance levels: A, AA and AAA. The success criteria are organized based on the impact they have on the design or visual presentation of the webpages. The higher the level, the more restrictive it becomes on design.

For example, let’s take guideline 1.4 (Distinguishable), which is about making it easier for users to see and hear content, including separation of foreground from background.

• Success Criterion 1.4.1 is about the use of color. Color mustn’t be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
• Success Criterion 1.4.3 is about minimum contrast. The visual presentation of text and images of text must have a minimum contrast ratio of at least 4.5:1, except for Level AA.
• And finally, success criterion 1.4.6 is about enhanced contrast. The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for Level AAA.

As you can see, the higher we get, the more demanding it becomes and the more challenging it can be in the way that it is presented on a web page.

As a rule of thumb, success criteria from level A should be invisible or barely noticeable to the interface. On the other hand, level AAA will have such a high impact on the design, that even the W3C claims that most organizations are not able to achieve it.

In summary

In short: designing for accessibility, means designing for everyone. HTML is accessible by nature which means that if you incorporate accessibility into what you are already doing, you are well on your way to providing an inclusive experience to a much larger audience. And as the trend towards web accessibility continues, this is a norm that all organizations need to prioritize and include in their web development planning going forward.