Ensuring your website works with assistive technologies isn’t just the right thing to do — recent lawsuits are making more healthcare organizations take notice of accessibility guidelines and best practices. If you’re not sure where to start, here’s a list of the most common issues that an automated web crawler will uncover.
Six of the Most Common Accessibility Issues Websites Face Online
WebAIM did an accessibility analysis of the top 1,000,000 home pages
on the most popular websites across industries, and what they uncovered is interesting. All of these sites, regardless of industry, tend to have the same six common accessibility issues plaguing their sites:
- Low Contrast: For people who have low vision or colorblindness, low contrast is a real issue. If the text and icons are not easily distinguishable from the background, some users will not be able to see the information on your website. This isn’t just a nice to have feature for people with low vision, it simply requires less strain and cognitive effort from all users.
- Missing Alternative Text: People who are blind or have very low vision typically use assistive technology called screen readers. Screen readers do exactly what it sounds like—they read what is on the screen. The proper HTML markup is important so that screen readers announce things properly. When a screen reader encounters an image, it will say a phrase like “graphic” followed by whatever text is added as an alternative text. If this alternative text does not exist, some screen readers will try to guess what the image is by reading the file name. Alternative text typically should describe the image and be 250 characters or less. Check out these tips for writing alt text.
- Empty Links: Quite often, we will find links on a page that do not have any text inside of them. In the HTML markup they look something like this:
<a href="https://www.geonetric.com"></a>As opposed to the correct markup for a link which would look like this:
<a href="https://www.geonetric.com">Geonetric</a>Empty links are usually the result of a deleted link when using a WYSIWYG (what you see is what you get) editor. The editor will delete the text from the page but doesn’t always remove
the link from the markup. - Missing Labels: Every form field on a website needs to have a label. It’s highly recommended that these labels are visible for all users, but at the very least these labels need to be in the HTML markup and programmatically tied to the correct field. Placeholder text is not a valid label.
- Missing Language: Every page on a website should have a language attribute that tells screen readers how to pronounce words and which dialect to use. It also helps translation tools know what language the page is originally written in. The language should be set on the opening html tag, typically done inside the template files.However, if you change languages anywhere on your site, you need to declare what language you are using. For instance, if the default language on your site is English, but you have a paragraph of text written in Spanish, you need to add lang=”es” to that paragraph tag to tell screen readers which language to use.
<p lang="es">Esta frase es en espanol.</p>
- Empty Buttons: Like empty links, empty buttons typically happen by accident. WYSIWYG editors will delete the text inside the button, but leave the markup on the page causing empty buttons. These are easy to remove if you know what you are looking for. They will typically look something like this:
<button class="SomeName"></button>As opposed to the correct markup for a button which would look like this:
<button class="SomeName">My Button</button>
Create a Plan of Attack
Healthcare websites are not immune to these same issues. And, it’s important to note that web crawlers can only identify certain types of barriers. There are likely additional issues on your site.
Learn more about how to check your healthcare website for accessibility issues and be sure to watch our webinar on Accessibility and Healthcare. Then contact us to get started.
