When talking about website design, accessibility is more than just making key features reliable and convenient.
It’s also a measurement of how easily people with disabilities can explore, use, and benefit from your website.
Designing a website with accessibility in mind—specifically for users with disabilities—will not only maximize your website’s traffic potential and brand image, but also improve brand loyalty.
Here are eight tips that will help you design an accessible website:
1. Use a platform that has tools for accessibility
Unless you’re an experienced web developer that can code everything from scratch, what you can do with your website depends on the limits of your website platform.
That’s why a versatile Content Management System (CMS) like WordPress is recommended.
WordPress supports over 30,000 themes and well over 59,000 plugins that add functionality. A good number of those are page builders that make it extremely easy for non-developers to turn their web design ideas into reality.
For experienced developers, WordPress also features a built-in code editor for HTML, CSS, PHP, and JavaScript files.
2. Start with an accessibility checker
The Website Accessibility Initiative (W3C) contains pages upon pages of website accessibility guidelines.
Going through each step could take you several weeks, if not months, to complete.
If you already have an existing website, use an accessibility checker to understand where your website currently stands. These tools work by scanning your website for accessibility issues and generating detailed reports.
Some of the more advanced tools also implement a scoring system to give you a clear view of your website’s current accessibility level. This often comes with actionable recommendations and a list of the specific website elements that require optimization.
3. Be mindful of your color choices
One demographic you need to be mindful of when designing your site, is users with visual impairments.
First, ensure your design has adequate contrast between foreground text and background color. If the contrast is too low, or if the background and foreground colors are too similar, some users may have difficulty reading the information.
It’s also important to avoid using only color to communicate information. For example, when creating buttons or clickable elements within a web app, always include contrasting text overlays to help users understand what they are.
You can learn more about color combinations and coordination by checking this infographic.
4. Add alternative text to images
Images containing photographs and color-driven information should also have descriptive alternative text (“alt text”) tags. These tags are not only beneficial for SEO, but also for users using assistive technology such as screen-readers.
Dictation software, in particular, read an image aloud using these tags. That said, use plain descriptions like:
- A picture of a red ball over a white background.
- A photo of a pink iPhone on a black desk.
- Photo of a forest.
5. Implement a clear content structure
A clear content structure is also important not just for accessibility purposes, but for improving the overall readability of web content.
Use formatting options like main headings and subheadings to create clear-cut section groupings. This makes it easier for all users to scan content for the information they need.
Below are a few additional tips to establish content hierarchy and improve your website’s accessibility:
- Use a single H1 title for every page.
- Avoid using title tags that don’t contain text.
- Label text-based title tags as headings for screen readers.
- Use the proper order of header tags (Use H2 first, H3 second, and so on).
Additionally, use whitespace to make clear divisions between different content sections. This will make your website look less cluttered and easier to read.
6. Make forms more user-friendly
Forms are an essential component of the user experience, and they should be among your top priorities when it comes to accessibility.
When creating forms, every form field should be properly and clearly labeled. Users should easily identify where to input information such as their first name, last name, email address, and so on.
Avoid the following when creating forms for your website:
- Using duplicate ID selectors for different form elements
- Placing form labels in ambiguous locations other than directly adjacent to their corresponding fields
- Creating forms with hard-to-find “submit” buttons
To further improve the usability of forms, consider placing placeholders with sample text. This will help users understand what each form field is for.
7. Be careful when using CAPTCHAs
CAPTCHA (short for “Completely Automated Public Turing Test to Tell Computers and Humans Apart”) has become an industry-standard authentication procedure that can protect your website against harmful traffic. It gives websites an extra layer of security against hackers and malicious bots used in cyber-attacks—from DDoS attacks to brute force logins.
However, certain CAPTCHA puzzles, like math problems and word-based questions, aren’t accessibility-friendly.
If you want to use CAPTCHA, you should be aware of the WCAG’s rules, which state, “CAPTCHAs are, consequently, allowed under the W3C’s Web Content Accessibility Guidelines (WCAG) provided that text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.”
Furthermore, “It is important to understand the limitation of the WCAG CAPTCHA exemption. It applies only to the content of the CAPTCHA. WCAG still requires that alternative text identify the graphical object as a CAPTCHA. Conformance with all other WCAG guidelines also remains critical for web accessibility.”
8. Implement mobile responsiveness
Design your website with mobile-friendliness in mind to make it more accessible on smartphones and tablets.
Mobile-friendliness is not only essential for accessibility. It’s also a must-have if you want high search engine rankings, especially now that more internet users are coming from mobile devices than desktops.
A widely-used solution is to use responsive website design, which automatically repositions and scales website elements according to the display being used.
If you use WordPress, the good news is there are tons of supported themes available that use mobile-responsive design right out of the box.
Iron out the creases with a tool like Google’s own Mobile-Friendly Test. Just enter your website’s URL or code to quickly identify mobile-friendliness issues and information on how to fix them.
Conclusion
Designing websites with accessibility in mind is not only good for the user experience; Several accessibility principles overlap with optimization strategies for boosting a website’s profitability.
With the tips above, you not only improve the experience of users with disabilities. You also position your website for reliable, long-term success. It’s a win-win.
Cover Image: Designed by vectorjuice / Freepik
