5 Things You Can Do This Afternoon to Make Your Website Accessible

If you grew up skateboarding or riding your scooter around the neighborhood, you’ve probably felt the frustration of having to pick up your board at an intersection — or risk flying off when the curbside bumps abruptly stop your wheels. What you might not pay as much attention to are how the sidewalks are wide enough for you and your buddy to skate on them side-by-side. Those little bumps at intersection curbs, known as tactile paving, are there for a reason. For people who are blind or visually impaired, they’re a game-changer. They signal that a hazardous zone is near — such as a street, vehicle loading area, or the edge of a train platform.

Accessibility in public spaces often goes unnoticed by those who don’t rely on it. But for many people, it’s the difference between able to fully participate in society or being excluded. Features like curb ramps, wide sidewalks, accessible parking spaces, ramps, and elevators are just a few examples of accessibility in construction and architecture. This can be traced back to the Americans with Disabilities Act (ADA) first signed into law in 1990. These requirements ensure that public spaces work for everyone. But now that so much of our lives are online, shouldn’t the digital world — and your website design — be equally accessible? Following basic web accessibility guidelines helps ensure that it is.

Web accessibility is an often overlooked practice or afterthought when building a website. I’ve been guilty of this myself. With time and budget constraints, accessibility can seem optional or overly complex to developers or the project managers and key stakeholders that want to see a finished product ASAP. But just like with buildings, businesses can face legal risks if their websites are not accessible under the ADA. These ADA website compliance lawsuits such as Domino’s, Walmart, Target, Netflix, and many more have all faced lawsuits for ADA violations. Going beyond compliance, it’s also a matter of reach and impact. The World Health Organization estimates that about 16% of people on earth live with some form of disability. Disabilities including vision, hearing, motor, or cognitive differences can make accessing the web more difficult.

So, let’s take a little time this afternoon to widen the usability of your website overnight. Here are 5 simple, high-impact improvements you can make right now.

Put your mouse aside and attempt to navigate your site by only using Tab, Shift+Tab, Enter, and Arrow keys. Are you able to traverse through your site in a clear, logical way? Do the buttons, links, and form fields appear differently when they are focused?

Think of how you might use a Smart TV remote — you don’t use a mouse, so the interface must clearly highlight where you are. For people with motor and visual disabilities, keyboard navigation is the primary way they interact with the web, making it a core part of WCAG accessibility testing.

If you can’t tell where you are on your site or it starts to fall apart, that could indicate that it’s time for some HTML restructuring.

This is a highly overlooked website accessibility checklist item. Macs have a built-in screen reader called VoiceOver, which you can enable in System Settings > Accessibility > VoiceOver > On. Windows PCs also have a pre-installed screen reader called Narrator, but the 2 industry-standard screen readers for PC are NVDA (NonVisual Desktop Access) and JAWS (Job Access With Speech).

When I worked on Visa’s Design System team, I used all three and found they each had quirks. Screen readers allow people who are blind or have low vision to understand where they’re focused on a page and what elements do.

For an accessible link on a website, a screen reader would read out something like “Pricing, Link, View our pricing plans”, which would tell the user where they are, what the element is, and what its purpose is.

Images on the web are HTML elements, just like titles (<h1>), links (<a>), or paragraphs (<p>). The simplest, bare-bones image could be written like this:

<img src=“dog.jpg” />

But without a description, screen readers won’t communicate what’s being shown. All images need to include at least 2 attributes: src and alt. The src attribute specifies a path to the image, where the alt attribute shares to a screen reader what the image is:

<img src=“dog.jpg” alt=“Golden retriever running after a tennis ball” />

If you found the screen reader test giving confusing results, you may need to add ARIA (Accessible Rich Internet Applications) attributes in the HTML as well. There are several aria attributes we could use in an application to give it top-notch accessibility, but I will focus on 3:

1. aria-label: Adds a text label for screen readers when visible text isn’t clear:

<button aria-label=“Close menu”> <span class=”x-close-icon” /> <button

This would be an HTML element for a button where there is no text inside, but instead an “X” icon. The aria-label of “Close menu” is what is read aloud on the screen reader.

2. aria-hidden: Hides decorative elements from screen readers so they don’t clutter the output:

<span class=“bell-icon” aria-hidden=“true” > <svg /> </span>

3. aria-expanded: Indicates whether dropdowns, accordions, or modals are open or closed. This is a dynamic attribute, which switches between true and false. An example would be a button that expands a drawer in a navigation component:

<nav id=“main-nav”> <button aria-expanded=“true” aria-controls=“main-nav”>Accessories</button> </nav>

Good contrast improves readability for everyone, especially people who are colorblind or have low vision.

Contrast is measured as a ratio: black-on-black or white-on-white would be 1:1, which is the lowest and most unreadable contrast. While black-on-white is 21:1 — the maximum contrast (though not always the most comfortable for readability). According to WCAG (Web Content Accessibility Guidelines), we should stick to at least a 4.5:1 contrast ratio.

That gives a wide range of ratios to still be creative with while still being accessible. There are many free browser extensions that will check your site’s contrast.

Clickable elements should be large enough and spaced far enough apart to avoid frustration. This is especially important for people with limited dexterity or motor impairments, but also improves usability for everyone. Nobody enjoys “fat-fingering” the wrong button on a mobile site.

WCAG requires a link or button to be at least 24 by 24 pixels to be fully accessible. Exceptions can be made if the link/button has enough spacing around it.

Web accessibility covers far more than mentioned above. WCAG includes things like time limits, gestures, forms, errors, and everything in between. Accessibility research is a profession of its own because of how critical it is — legally, ethically, and practically.

That being said, these quick accessibility fixes are a great place to start, and a practical way to move toward an accessible website design. Even small improvements can open your site up to more people and give a better user experience for everyone.