The internet was designed to connect people—but what if it’s shutting some users out instead? Website accessibility is crucial for ensuring that all users, including those with disabilities, can navigate and interact with your website effectively. However, many websites unintentionally create barriers that make it difficult for people with impairments to access content. At MORE Creative Agency, we specialize in Athens website design and SEO, so we’ve compiled a list of common mistakes we find in local business’ sites and provided suggestions to fix them.
How Can a Lack of Accessibility Hurt a Business?
Before we dive into our list, it’s important to recognize why this concept is crucial to a website’s success. Besides excluding potential consumers from engaging with your content, website accessibility plays a crucial role in improving SEO performance. Search engines prioritize user experience, and accessible websites often provide a better experience for all users, including those with disabilities. Accessible websites are more likely to load faster, have lower bounce rates, and engage users for longer periods—all of which are key factors in SEO. Ultimately, prioritizing accessibility is a win-win: it ensures your site is inclusive while boosting visibility and ranking on search engines.
1. Lack of Alternative Text (Alt Text) for Images
What is Alt Text?
Alt text (alternative text), also known as “alt attributes” or “alt descriptions,” is a written description of an image used in HTML code. It provides context or a summary of the image for users who are unable to view it, such as individuals with visual impairments who rely on screen readers.
The Mistake
Many websites fail to provide alt text for images, which means that screen readers cannot describe the image to visually impaired users. This results in lost information and a poor user experience.
How to Fix It
- Add descriptive and concise alt text to all informative images.
- Use empty alt text (alt=””) for purely decorative images to prevent unnecessary distractions.
- Ensure that images conveying important information have sufficient descriptions.
2. Poor Color Contrast
What is Color Contrast?
Color contrast on a website refers to the difference in luminance and hue between text and its background, ensuring that content is readable for all users, including those with visual impairments like color blindness or low vision. Proper contrast makes text, images, and other important elements stand out and be more legible, improving the user experience.
The Mistake
Many websites include elements that do not contrast well with its background; this can be difficult to read, particularly for users with visual impairments such as color blindness.
How to Fix It
- Use a color contrast checker (such as the WAVE tool or WebAIM Contrast Checker) to ensure sufficient contrast.
- Follow WCAG guidelines, which recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- Avoid using color as the sole means of conveying information; supplement it with text or symbols.
3. Missing or Improper Heading Structure
What are Headings?
Headings on a website are HTML elements used to define the structure and hierarchy of content. They help organize text into sections and subsections, making it easier for both users and search engines to understand the content of a webpage.
Headings range from H1 to H6, with H1 being the most important and typically reserved for the main title or topic of the page. Subsequent headings, H2, H3, and so on, are used to represent subheadings and further break down the content into more specific sections.
The Mistake
Many websites use headings incorrectly, such as skipping heading levels or using headings for styling instead of structure. This can make it difficult for screen readers to navigate the page efficiently.
How to Fix It
- Use headings in a hierarchical order (H1 for the main title, H2 for sections, H3 for subsections, etc.).
- Do not skip heading levels (e.g., jumping from H1 to H3).
- Avoid using bold or larger text as a substitute for proper heading tags.
4. Inaccessible Forms
What are Forms?
Forms on a website are interactive elements that allow users to input data and submit it for various purposes. Forms are commonly used to collect information from visitors, such as contact details, feedback, sign-ups, orders, and more. They typically include fields for users to fill out, such as text boxes, checkboxes, radio buttons, and dropdown menus, along with a submit button to send the data to a server for processing.
The Mistake
Forms that lack proper labels, error messages, and keyboard accessibility can be challenging for users with disabilities to complete.
How to Fix It
- Associate labels with form fields using the <label> element.
- Provide clear and accessible error messages that describe the issue and how to fix it.
- Ensure all form fields can be navigated using the keyboard alone.
5. Missing Keyboard Navigation
What is Keyboard Navigation?
Website keyboard navigation refers to the ability to navigate and interact with a website using a keyboard rather than a mouse or touch input. It is an important aspect of web accessibility, as it ensures that individuals with physical disabilities, those who prefer keyboard shortcuts, or users with certain assistive technologies can access and use a website effectively.
The Mistake
Some websites rely heavily on mouse interactions, making it difficult for users who navigate with a keyboard or assistive technology to access content.
How to Fix It
- Test your website using only the keyboard (Tab, Enter, Space, and arrow keys).
- Ensure all interactive elements (links, buttons, forms) can be accessed and activated without a mouse.
- Avoid using elements that require hover actions without providing an alternative for keyboard users.
6. Lack of Video Captions and Transcripts
What are Captions and Transcripts?
Captions are text representations of the audio in a video. They display the spoken words and sound effects in sync with the video, allowing users to read along while watching the content. Transcripts are written versions of the entire audio content from a video or audio recording. They include everything that is said, along with important non-verbal sounds or descriptions that help convey the content’s meaning.
The Mistake
Videos without captions or transcripts exclude users who are deaf or hard of hearing from understanding the content.
How to Fix It
- Provide closed captions for all video content.
- Include a transcript for audio-based content.
- Use auto-captioning tools but review them for accuracy.
7. Auto-Playing Media Without Controls
What is Auto-Playing Media?
Auto-playing media refers to any audio, video, or animation that begins to play automatically when a user accesses a webpage, without requiring any user interaction to start. This can include background music, video advertisements, or animated elements that start playing as soon as the page loads.
The Mistake
Auto-playing videos, audio, or animations without user control can be disruptive and challenging for users with cognitive disabilities or screen readers.
How to Fix It
- Allow users to start and stop media manually.
- Provide controls to pause, mute, or adjust the volume.
- Avoid using auto-playing content unless absolutely necessary.
8. Non-Descriptive Text Link
What are Text Links?
Text links are hyperlinks made up of clickable text on a webpage. When users click on these links, they are directed to another page, resource, or section of the website. Text links are one of the most common and fundamental ways to create navigation on a website. They can be used to link to other web pages, downloadable files, external websites, specific content on the same page, or even trigger actions like submitting forms.
The Mistake
Using vague phrases like “Click here” or “Read more” for links does not provide context for screen reader users.
How to Fix It
- Use descriptive link text that conveys the purpose of the link, such as “Download the accessibility guide” instead of “Click here.”
- Keep links concise but informative.
9. Ignoring ARIA (Accessible Rich Internet Applications) Best Practices
What is ARIA?
ARIA is a set of attributes designed to improve accessibility on dynamic content and advanced user interface controls (like sliders, carousels, or custom widgets) that are difficult for screen readers and other assistive technologies to interpret with standard HTML. ARIA allows developers to enhance the accessibility of their websites by providing additional context and information about elements that may not be inherently accessible.
The Mistake
ARIA roles and attributes are meant to improve accessibility, but incorrect use can create confusion for assistive technologies.
How to Fix It
- Only use ARIA when native HTML elements cannot achieve the desired functionality.
- Follow ARIA best practices and test with screen readers.
- Avoid unnecessary or redundant ARIA attributes that might interfere with accessibility.
10. Not Testing with Real Users and Assistive Technologies
What is Assistive Technology?
A website assistive technology that emulates user experience is typically a screen reader or accessibility testing tool designed to simulate how users with disabilities interact with a website. These tools help developers and designers understand how their website functions for users who rely on assistive technologies, ensuring that their sites are accessible and user-friendly for everyone.
The Mistake
Many developers rely solely on automated tools to check for accessibility, missing out on real user experiences.
How to Fix It
- Conduct usability testing with individuals who rely on assistive technologies.
- Use screen readers like NVDA, JAWS, or VoiceOver to navigate your site.
- Regularly audit and update your site based on user feedback.
Want a MORE Accessible Website?
Are you an Athens business that’s looking to create a website that will maximize engagement? At MORE Creative Agency, we use our skills as website designers in Athens, GA to streamline the user experience of our clients’ websites.
Let us help you boost your visibility on search engines and connect with your audience more than ever before. Contact us and start the journey to become more accessible today.