By
•
Mar 1, 2022
Before committing to a website design in West Palm Beach, you need to consider the fact that more than 61 million American adults don't conventionally use the web.
Of course, no one builds their website intending to exclude users with disabilities. However, if you are not building with inclusivity and accessibility in mind, then you could very well be blocking a significant number of people from engaging with your business.
Unfortunately, web accessibility issues are often overlooked by website designers, developers, and content authors. We don't want you to make the same mistake with your website.
In this article, we are going to discuss the most common accessibility issues you need to address to help make the web a better place for everyone.
Before we jump into that, let’s first discuss what accessibility issues are and why they’re important.
Accessibility issues are barriers that make it difficult or impossible for users with a disability to access, navigate, or interact with the content on your site.
To identify what these issues might be, you first need to understand how people with disabilities use websites. How they navigate through your page depends on the type of disability they have and their personal preferences.
Types of disabilities you need to be aware of:
Different kinds of disabilities are going to impact web navigation differently.
For instance, visitors with low vision or blindness use screen readers to read the contents of a website aloud. Other people without mobility in their hands or arms cannot use a mouse, which means they rely on keyboard-only navigation or voice command.
Aside from the fact that users with disabilities cannot access your site, here are the other reasons why accessibility issues are a problem:
Identifying the issues to solve within your site is a step towards creating an inclusive web experience for everyone. However, if you're not familiar with accessible website development and design in West Palm Beach, it can be challenging where to start. To help, here are the most common accessibility issues you need to look out for:
.jpg)
The first thing you want to check is the photos on your site. Do they have alt text? And if they do, are the descriptions accurate to what the image is conveying?
In WebAim’s accessibility evaluation study, 68% of the homepages for the top 1,000,000 websites have missing or inaccurate text on images.
People who use screen readers rely on alt text to understand what your images are all about. So, to help them visualize the content they can’t see, it’s important to use the right words to describe it.
For example, if you’re featuring an image of Florida beach, then a good alt text could be, “Aerial view of Florida beach”
For the decorative images on your site—the ones used purely for design purposes, which don’t contain any information relevant to the text on the page—you can leave the description blank. WCAG 2.0 states in section 1.1.1 that decorative images can be ignored by assistive tech, so alt text may not be necessary.
Check all your images to ensure they have relevant alt text. It's also important to optimize them for SEO.
According to WebAIM’s programmatic analysis, low color text contrast is the most common accessibility issue. Among the 1,000,000 homepages they reviewed, 85% didn’t have enough contrast between their background color and text color.
People with low vision or color blindness struggle to read content when there’s low color contrast between the elements on a page.
Some minimalist websites use gray text on a white background. This can make it very difficult for users to read what's on your site. Although it may appear aesthetically pleasing, it's no longer functional.
The recommended color contrast depends on the size of your text, but the gold standard for web accessibility requires a contrast of 4:5:1. If you’re not sure how your site is currently performing with this metric, you can use a color contrast checker to see.
Using proper heading structure in your content makes it more organized, which benefits all website visitors.
Without headings, your blog posts will look unorganized and confusing to navigate. This can leave users frustrated, making them more likely to leave and bounce off to the next site. A high bounce rate is bad for your SEO and can drag your ranking down.
It’s important to ensure that you’re using H tags, instead of simply bolding your text. For example, let’s say you just bold your headings.
How can screen readers identify that this is the topic you’ll be discussing in the succeeding part of your blog post? And how can you identify the relationship between various headings?
Your main heading <h1>, subheadings <h2>, and sub-subheadings <h3> should be nested accordingly.
Links play a crucial role in improving a user’s experience on a site. They help web visitors discover different content within a site and navigate through new pages that offer supplemental information that is relevant to what they're looking for.
Screen readers can read an entire page to a user. But, sometimes, a screen reader may only read the link text and not the sentences around it. This is why your link text needs to make sense even without the surrounding words.
Your link text should be able to communicate the function and the purpose of the page you’re linking to. For example, if you're linking out to a website that ranks movies, then your anchor text should be "top 10 movies" or "best movies.”
Providing a descriptive link text that's easy to read—instead of a vague one like "click here" or "more information"—will make it extremely easy for an assistive tech to interact with your content and communicate information to the user.
It’s also not a good idea to use images or buttons to represent a link without any alt text. Assistive tech cannot interpret buttons and images as links and tell users what the function of that button or image is. This can stop users from navigating the page you’re linking to.
If you want to use anchor links to images and buttons, make sure that you link to a descriptive text or include an alt text for the link.
.jpg)
Users interact with forms all the time, which makes it important to ensure they’re accessible for everyone.
One of the most common accessibility issues related to forms is empty form labels. Form labels tell screen readers what information a field requires. So, if a form field has no label or it's not clear to a screen reader what kind of information it's asking, it won't be able to relay this to its user.
To make your forms more accessible and user-friendly, use the <label> element in your code for every field. Otherwise, people using assistive tech will struggle to navigate and fill out your form.
If you’re using forms or any type of input field on your site, go through them and make sure that each one has a clear label.
For those using pre-filled text within a form filled to tell users what it is for, it’s necessary that you also check that the inputs are clear to avoid experiencing any problems with assistive devices.
Accessibility overlays are automated software solutions that claim to identify and fix any accessibility issues on your site.
As promising as this may sound, this quick-fix solution doesn’t always resolve accessibility problems in your site’s source code. And, in some cases, the software overrides the settings of the screen reader, making it difficult for users to adjust their assistive tech to cater to their specific needs.
As much as possible, avoid using overlays. It’s better to opt for an automated accessibility testing solution to conduct a code review.
Uneven spacing can sometimes happen, especially when your text is justified both left and right.
This can make it extremely difficult for people with cognitive disabilities and assistive tech to read the content of your page.
They may have a hard time distinguishing where one word ends and the other begins, or where your paragraphs end.
Make sure that your content is properly structured with even spacing. If you're having a hard time reading your content, chances are, other users with a disability will struggle too.
.jpg)
The aria-label attribute is designed to make interactive elements on your site, like image carousels and sliders, accessible to all users.
Without implementing an aria-label, it's possible that screen readers could enter your carousels or sliders and not be able to exit.
Make sure you use the aria-label attribute to change the way your HTML element is being translated into the accessibility tree.
If you’re not sure how accessible your current website design in West Palm Beach is, evaluate your site and check if the images have alt text, the color palette is well contrasted, the content is well structured, the links are properly optimized, all form fields have labels, and the carousel/slider features have the appropriate aria-label.
Making these changes to your web design will make your website more user-friendly.
Digital Resource is committed to making its website and its clients’ sites as accessible as possible for everyone. If you need help making your website inclusive and adhering to the guidelines and standards under the Americans with Disabilities Act, we can help!
Contact us today to review your website and identify non-compliant elements or documents!
Think you've got what it takes to hang with the pros at Digital Resource? Check out our Careers page to browse current job openings!
