April 14, 2021

The UX Designer’s Guide to Accessibility on a $0 Budget



“So, we don’t have a budget for accessibility. But it’s not a big deal. Our users don’t have disabilities anyway.”

Have you heard something like this from a team lead or business owner? The sentiment that “our users don’t have disabilities” is unfortunately incredibly common and incredibly untrue. Over 1 billion people (about 15% of the population) have a disability of some kind, and even more have temporary or situational impairments. You miss out on serving a huge portion of users by ignoring this demographic—and you risk a lawsuit in the process. 

The truth is, there are a lot of inexpensive steps designers can take with just a little know-how to keep accessibility top of mind. First and foremost, it doesn’t cost anything to become an accessibility champion. Any kind of designer, at any level, can educate their team on the prevalence of users with disabilities.

More concretely, you can build accessibility into the design. While the full support of accessibility is not usually easy nor free—it can be a serious investment depending on the content of the site or app—there are a lot of straight-forward things designers can accomplish to improve accessibility, whether or not your team has the budget or resources. 

Here are 16 “low hanging fruit” accessibility wins you can accomplish during the design process that require no extra budget or training.

Check color contrast

Color contrast applies to text size and UI graphics. The Web Content Accessibility Guidelines (WCAG) 2.0 require that normal text have a contrast ratio of at least 4.5:1 and large text have at least a 3:1 ratio. Any text that’s 18 point (24px) or 14 point (18.66px) and bold is considered “large text.” 

Designing text, icons and images with adequate color contrast is an incredibly easy thing to do. It costs $0 to choose colors that are accessible to users with visual impairments, and as a designer, that decision is completely yours to make. 

Who benefits

Accessible color contrast benefits users who are color blind or have low vision, age-related changes in contrast sensitivity or tired eyes (or other visual temporary impairments). 

A temporary impairment or situational impairment is an impermanent condition that simulates a disability. Examples include commuting, working in a loud office, having a kid hanging off your arm, or yes, even being tired. 

Tools to use 

You can check color contrast using one of the many free contrast checkers out there. Some popular tools include:

Write in plain language

If you’re acting as a copywriter, write in simple language. If you’re not, it’s your job to advocate to the copywriters. Use vocabulary that an eighth grader can easily understand. 

Language on buttons can easily become unclear since space is at a premium. When you show users a message that says, “Are you sure you want to cancel this order?” and the options are “cancel” and “close,” it’s no wonder users get confused. User actions need to be absolutely obvious. 

Who benefits

Plain language benefits users with cognitive and learning disabilities and also users who simply don’t have time to process flowery copy. 

Tools to use

Break up large chunks of text

No need to belabor this one. Splitting up long paragraphs is another way to make content more readable. 

Who benefits

Everyone. Seriously, everyone. But users with cognitive and learning disabilities tend to particularly struggle with large chunks of text.

Use descriptive links and headings

Screen reader users use headers to understand how content on a page is organized. They also use them to navigate the page. 

Use HTML tags in your headers (<H1>, <H2>, <H3> and so on). Make sure you use only one <H1> tag per page, or you’ll disorient screen readers—they see the <H1> tag as the beginning of the content.

Who benefits

Anyone using a screen reader, including people who are blind or experience low vision.

Add Alt tags to images

Alt tags are “alternative text” embedded into source code that illustrate an image. To write an alt tag, all you need to do is describe the context of what the image is conveying in a few key words. Screen readers pick up on alt tags and read them aloud so users with visual impairments can more fully understand the page’s content. 

Who benefits

Anyone using a screen reader, including people who are blind or experience low vision.

Make text readable

Another easy one. 16px regular weight is recommended as a base. 

You also need to make text resizable. Users should be able to read the content on the page when it’s zoomed in to 200%. You can test responsive design by setting the browser window to 1280px wide and zooming to 400%. 

Who benefits

People who experience low vision, older users or even users whose screen resolution makes the default text too small to read.

Put notifications in context

If a user enters a form incorrectly and gets an error message, put that error message near the incorrect field and move the focus to the error. Displaying them at the top of the form but keeping the focus at the bottom of the form leave the user wondering where they went wrong. 

Who benefits

Screen reader users, users with cognitive disabilities, and well, everyone. 

Don’t use color alone to convey info

Color should never be the sole means of indicating action, prompting response or distinguishing a graphical element. Color can reinforce information but there needs to be another mechanism that displays the status of an action. In other words, you can’t just have a required form field turn red when the user leaves it empty—you need to include some kind of error message as well.  

Who benefits

Users who are blind, colorblind, have low vision or choose to override webpage colors for any reason (perhaps because the color scheme is too light or dark, barely highlights links or is otherwise difficult to read).

Tools to use

Make content keyboard accessible

You should be able to navigate a webpage using only a keyboard. Use tab and arrow keys to jump from link to link or between form elements. If you can’t, the page doesn’t meet WCAG guidelines. 

Screen readers and keyboard navigators rely on interactive elements embedded in HTML and CSS to move through the page and even offer shortcuts for skipping through content. Of course, this only works if the content is organized logically. Arrange page elements sequentially so they make sense to users “tabbing” through the page. 

Who benefits

Keyboard navigator and screen reader users, including people with visual impairments and mobility issues.

Keep screens simple

Keep your screen as simple as possible. Cluttered screens are simply harder to use. 

As a designer, you’re under pressure from the marketing team, SEO team and product owners who are all advocating for certain features to get the spotlight. You need to make some tough choices and lay down the law: every feature doesn’t need to be visible at all times—it just needs to be findable. 

Who benefits


Provide shortcuts

Your goal is to make using your product as easy to use as possible. Offer help whenever you can. Provide pre-fill fields, auto-suggests and shortcuts. 

Who benefits 

People with mobility challenges and those in a rush. 

Extra credit wins 

These “extra credit wins” involve modest amounts of effort on the front-end dev side but give huge accessibility benefits.

Use standard HTML

Advocate for using standard HTML code for drop-downs, radio buttons and other elements instead of designing custom versions. Screen readers look for standard HTML and can translate it easily, plus standard code already has accessibility functionalities built in. If you insist on doing a custom version, you need to code in accessibility features. 

Who benefits

Users with screen readers. 

Skip navigation

You can add a pretty straight-forward code to your global nav that allows people who are blind to skip repetitive navigation. While it doesn’t cover all cases where skip nav is beneficial, it’s still a helpful shortcut. 

Label form controls

Give all form controls a label that helps users complete the form. Every text field, checkbox and menu dropdown should have an associated <label> element. Screen readers dictate these elements to users as instructions, so the labels should describe the intended user action, such as <input>, <select> or <use the format MM/YYYY>. 

Multimedia content access

Accommodate the different ways users might intake information. If you have a lot of text, provide audio or video alternatives. If you have video, provide captions. If you have audio, provide a transcript. 

Test for accessibility

We test our products for edge cases. We can test them for accessibility, too. 

There are a few automated tools that help dev teams identify and resolve common accessibility problems, such as Axe by Deque or WAVE from WebAIM. You can also test for accessibility compliance yourself by navigating your site using only a keyboard, checking that audio has transcripts and that video is captioned. 

The easy case for accessibility

There you have it! 16 quick wins that are inexpensive and within every designer’s control. These may not be a comprehensive list, but they’re a great start to providing an accessible product.

The case for accessibility is a no-brainer. You’ll avoid lawsuits, serve more customers by not ignoring 15% of the population and out-pace non-compliant competitors. 

The Latest from Nexient

We're hiring

Design cutting-edge software and digital experiences for America’s most admired brands with Nexient.

Join Our Team