ARTICLE

Should Your UX Design Prioritize Accessibility or Aesthetics?

blog-Accessibility over Aesthetics in Web Design

Key Takeaways:

  1. Ease of use is more important than visual aesthetics.
  2. Some organizations are required to have ADA-compliant websites.
  3. Accessibility can expand your audience.
  4. You can quickly begin optimizing your website today.
  5. Scroll to the bottom for common accessibility issues and solutions. 

A lot of accessibility talk centers around themes of justice and equality. But in UX design, accessibility is less about politics and more about making smart business decisions. 

For commercial websites, the conversation is much simpler: Your audience can’t engage with your organization if they don’t have access. 

  • They can’t buy your products if they can’t enter your shop. 
  • They can’t change their minds if they can’t hear your message.
  • They don’t know where you are if they can’t locate you. 

The Americans with Disabilities Act (ADA) prohibits discrimination of anyone based on ability level and applies to both government (Title II) and public commercial (Title III) entities. 

An inaccessible website may not be an active, bad-faith violation of the ADA, but it can passively discriminate against differently-abled members of the general public. 

The US Department of Justice describes the application of ADA regulations to the digital space as follows: “A website with inaccessible features can limit the ability of people with disabilities to access a public accommodation’s goods, services, and privileges available through that website.”

What is Accessibility

In communications, accessibility comes down to how easily and accurately your audience can access information. 

To make the information accessible, UX designers need to consider the people who may be using their website and the ability levels of those individuals. 

An urgent care clinic will have sick and injured visitors, so it should consider fewer and larger buttons for its online booking system. Bleeding people don’t need more choices; they need more doctors. 

Can the general public (and, more importantly, your best audience) easily access and interact with all of your website’s content? 

Easy to Use Beats Good to Look At

How often do you leave an item in your shopping cart or navigate away from a form simply because you are frustrated? At best, those are lost engagement opportunities. At worst, they’re lost sales. 

The best solution to any problem is the one people will actually use. We prefer when things are easy to understand and intuitive to use. 

In the web design space, accessibility doesn’t even necessarily have to refer to differently-abled users. A more accessible website is simply an easier-to-use, more intuitive interface. 

From a business perspective, increased accessibility is simply profitable.

Ways to Approach Accessibility

Don’t think of UX design as a way to include “disabled” people. Instead, think of it as a way to better include all people. Increased accessibility leads to a larger audience. 

Designing for screen reader tools can also help with narrative structure and informational hierarchy, which also makes a website easier for anyone to navigate.  

The Web Content Accessibility Guidelines (WCAG) encourage web designers to consider the following parameters:

  • Perceivable: Is it simple for users to hear or see the content? 
  • Operable: Can visitors navigate all features from a keyboard?
  • Understandable: Does the content make sense within the page and website context? 
  • Robust: Are visitors of all abilities and access levels getting the full experience of your content? 

Common Accessibility Fixes

Increasing accessibility is all about offering alternatives—alternative ways of consuming your information and interacting with your brand. The best part is that some of these fixes are so easy that you can fix them right now. We’ll start with the biggest culprit, which is ironically the easiest to fix. 

1. Alt Tags

ux design - alt tags

Add descriptive text alternatives (or alt tag) to any non-text content and captions for visuals. 

For internet users with reduced vision, a screen reader navigates web pages audibly so that visually impaired users have access to vital online resources. The screen reader reads the alt text in lieu of any images and graphics on the page.

WebAim found that nearly a quarter of all home pages are missing alt text. 

When you post a graph, include the key takeaways in your alt text. When you post an image, be descriptive.

2. Color Contrast

ux design - color contrast

Just because a visitor to your site has 20/20 vision doesn’t mean they’ll see it the same as you. Using text that has low contrast against the background color makes navigation difficult, especially for color blindness. 

WebAim offers help sorting this issue, but UX design professionals can find plenty of contrast scanning tools for their websites. 

3. Heading Hierarchy

ux design - heading hierarchy

In the same way you may scan a website for information before engaging deeper, most screen readers use headings to help users navigate without reading an entire page. 

Headers are denoted by HTML tags ranging from <H1> to <H6>. 

Be sure you use H1 headings once per page. Proceed through header levels chronologically—don’t skip from an H2 to an H4. 

Paying attention to header hierarchy will also improve the narrative structure of your content, increasing its readability and usability for all visitors. 

4. Cluttered Navigation

ux design - cluttered navigation

Cluttered navigation presents a technical navigation issue for screen readers. But cluttered navigation also sucks for everyone else. 

Everyone wants their department, committee, or special project linked on your website’s home page, but that’s not helpful for anyone. Opt for clearly labeled menus and use pillar pages to navigate the subpages for different topics or resource areas.

5. Screen Reader, Keyboard Control Incompatibility

ux design - Screen Reader, Keyboard Control Incompatibility

The best way to find out if your website is accessible for assistive technology is to try it yourself. Start by navigating your website using only your keyboard. If you find specific interactions or prompts challenging to navigate, make a note to fix the UX design. 

You can also use a free screen reader tool to navigate your website and find opportunities to optimize your UX design. 

6. Descriptive Links

ux design - descriptive links

Ditch links like “read more” or “click here” and go with more descriptive links instead. Where will this link or button navigate the user? Use specific text in your buttons and links so that screen reader users can more easily navigate.

In fact, most of your visitors are more likely to interact with descriptive links since we’ve all been trained to navigate the internet with some amount of skepticism. 

7. Mobile First

ux design - mobile first

UX design happens on desktop computers with multiple high-resolution monitors. However, the majority of internet users use a mobile device. 

Navigate your website on your mobile device, and have team members with different mobile devices or operating systems do the same—bonus points if they aren’t UX design professionals. 

8. Inaccessible Documents

ux design - inaccessible documents

How many times have you downloaded a PDF you couldn’t edit, had incorrect submission field locations, and text you can’t copy or paste? 

Making the documents hosted on your site accessible is just as important as the rest of your UX design. Be sure your visitors can easily understand and intuitively interact with all hosted documents. 

9. Inaccessible Forms

Form fields on your website and on the PDFs you host on your website are already frustrating for people with complete vision and mobility. Poor UX design on your web forms can create visitor confusion, and worse, it can send prospects away. 

10. Always Use Multimedia

ux design - always use multimedia

When you put media on your website, try to include multiple forms of that content to accommodate all ability levels. 

A visitor doesn’t need a diagnosed disability to prefer (or better process) audio. The same goes for blog posts and video captions. 

Video captions are great for hard-of-hearing people (and for people who just like captions). They also help search engines index your content, making it more widely accessible to all audiences. 

Need a partner in accessible UX design?

Accessible UX design is a net positive for society and for your bottom line, but keeping up with the latest guidelines can be grueling. 

The strategists at Content Workshop help our clients navigate accessibility and compliance as they share better stories with bigger audiences.

Don’t let accessibility be a barrier for your best customers. Find out how we can help you create better, more accessible content.

Back To Articles
Next Article