Pixel Fish Digital Marketing Blog

Top 20 Website Accessibility Tips for Creating a W3C Website

Posted by Mark Fouche on Aug 20, 2021
Mark Fouche

It's common knowledge; websites and web content should be accessible to everyone, including people with disabilities. That's why the World Wide Web Consortium (W3C), in cooperation with various organisations and individuals world-over,  thought it wise to develop Web Content Accessibility Guidelines (WCAG).

Top 20 Website Accessibility Tips for Creating a W3C Website

The goal is to put web developers, designers and content creators on the same page as far as creating web content that's optimally accessible to individuals, organisations, and governments worldwide is concerned. 

More so, WCAG leans more towards ensuring that web content is effortlessly accessible to disabled persons. So the big question is, what does it take to match this standard? Here are the top 20 tips.

Top 20 Website Accessibility Tips for Creating a W3C Website

1. Use Headings Appropriately

Headings and subheadings play an influential role in forming the webpage outline. As such, it enables users to jump right into the sections they're looking for, rather than going through the whole page. And another thing, proper usage of headings enables non-visual users (search engines included) to understand how the page is organised, making the navigation process trouble-free. For instance, you should make a habit of using <h1>, <h2>, and <h3> tags, as they break down the texts systematically, enabling users to know when they're reading sections under the heading, subheading, etc. 

2. Add Proper Alt Text to Images

There's no mistake in including images in your web content. But how do you ensure that visually impaired persons, like those using Braille output devices or screen readers, can also access such imagery content? That's where adding proper alt attributes to images comes into play. This HubSpot resource gives comprehensive image alt text best practices, but in summary, you want to describe the image precisely, keep the alt text to fewer than 125 characters, and insert your keyword, but sparingly. 

3. Use Meaningful Page Titles

The page title. That's the first thing that screen readers usually encounter after your page loads successfully. So you can't afford to get it wrong at the beginning. For starters, ensure you use a <title> tag to let your readers know what information to expect when they click on your page. You also want to keep the titles unique for all your web pages because if they aren't, it becomes extremely challenging for readers using HTML markup to tell what page they're on. 

4. Use ARIA Landmarks

W3C's Accessible Rich Internet Applications (ARIA) is a set of guidelines that make it effortless to create accessible interactive web apps. ARIA landmarks are incredibly vital in providing more details to help readers interact effortlessly with elements or hide info that has no value to them. For example, by adding an HTML attribute to one of the eight ARIA landmarks, users can be able to jump straight to a particular section of the page without hassle. 

5. Provide Sufficient Colour Contrast

Looking at your page, can you effortlessly tell the foreground apart from the background? If not, that's a sign you need to up your colour contrasting game. Thankfully, several free tools have been created to make it effortless for you to check different colour combinations and strike the perfect balance and meet the WCAG compliance standards. Be sure to check them out here

6. Add Labels to Form Fields

Using label elements is beneficial in helping screen reader users to know the particular prompts linked to various form fields. In other words, labels provide more accessibility and focus on their associated form fields when clicked, enhancing the user experience. 

7. Avoid Tiny Fonts

It may seem like a non-issue, considering that users can increase the font sizes from their end. But the truth remains, not all users may know how to reset the font size. So to avoid the inconvenience altogether, you want to resort to reasonably large fonts by default, then leave it to the users to reduce the size if they wish. 

8. Provide Captions to Videos

Again, it's not uncommon to attach a video to your web content, but the most critical part is making it (the video) accessible to everyone, including non-visual users. You can leverage several free tools to create accessible videos by helping with transcription and captioning. 

9. Keep Content Accessible via the Keyboard Alone

Not all users have a mouse or a trackpad, leaving them with the keyboard as their only means of accessing content. Such users bank on the "arrow" and "tab" keys to navigate web pages, so it's only fair that you make your content accessible via the keyboard alone. Also, make a habit of providing keyboard shortcuts, breaking up large text portions, and avoiding elements that only function on the mouse hover. 

10. Use JavaScript Widgets that Support Accessibility 

You may prefer to use an existing widget instead of creating your own. But you don't want to go for any random widget without conducting your background check. For starters, you should check the bug report and documentation for info about accessibility, ensure the widgets support the keyboard-alone usage, and ask users with disabilities to test them.

11. Use Text, not Text Images

Text images usually blur when zoomed in, take time to download, and are challenging for the content author to edit. As such, you want to use the actual text and control it with CSS for a more accessible and visible appearance. 

12. Keep Text Optimally Accessible

Avoid using tables to structure a page, as it's confusing for most screen reader users. Instead, use them (tables) to provide tabular content only. Furthermore, try out CSS grid or flex for an impeccable page layout. That guarantees that the text doesn't blur even if low-vision users zoom it in up to 200%. 

13. Keep Your Content Precise

No one likes to navigate through long, ambiguous sentences before they finally get to the point they're after. As such, you want to keep your content extremely simple and straight to the point to enhance user experience and increase the length of visits to your sites. 

14. Insert Descriptive Link Names

Another common practice is where screen reader users simply peruse texts and skip over to sections with links. Under such circumstances, hyperlinked phrases like "click here" or "learn more" may not be comprehensive enough to shed more light on the info that the link contains. For that reason, you want to provide more descriptive link text, like "click here to start your free trial" or "learn more about how to enhance website accessibility." And as we alluded to earlier, you want to attach alt text to all your image links, enabling screen reader users to understand the image even before opening the link. 

15. Identify Language of Text

Being a World Wide Web, it's no surprise that your content will reach multi-lingual screen readers. As such, you want to use markup to identify the default language of any text or document that's not parallel with the default. 

16. Create Accessible PDFs

If you prefer creating and dispatching your content in PDF formats, ensure they're accessible and readable hassle-free. For instance, you can use the PDF Accessibility Checker tool available in Adobe Acrobat to confirm the same. You also want to use "tagged PDF, as it's the only type that supports alt text for images and headings. 

17. Markup Tables Appropriately

When preparing tabular content, you want to keep user accessibility levels optimal by providing appropriate HTML markups to the tables. This ensures that there's a visible flow between row and column headers, as well as data cells within their appropriate scope.

18. Describe Your Video Content

When posting the video, be sure to provide a separate script describing the most vital elements of the visual content. But that's not all; you can also go the extra mile of providing a description track either as a recorded narration or timed text, bringing everyone - disabled or abled alike - on board. 

19. Space Your Content Appropriately

Be sure to provide sufficient space not only between blocks of text but also between the lines. This enhances readability and enables screen reader users to track your content systematically for an enhanced experience. 

20. Use the Right Tools to Test for Accessibility

Screen reader accessibility testing isn't just a once-and-done process. Instead, you should make it a priority and a natural habit as you create content. On top of that, you want to have the WCAG guidelines or an accessibility checklist to resort to during the testing process. You also want to check out the numerous free and premium tools to help hasten the accessibility testing and development process. These may include the Axe browser extension, Google lighthouse, Tenon, and more. 

Make Your Websites Accessible with Pixel Fish!

Hopefully, this comprehensive resource was helpful, and you've learned new website accessibility tricks that you'll implement in your new project. Having an optimally accessible website makes it effortless to connect with your target audience, generate more leads, publicise your brand, avoid legal complaints, improve search engine rankings, among other benefits. 

Don't let these opportunities pass just because your website is challenging to access. Pixel Fish is a leading Sydney Website Design Agency that creates beautiful websites for better business. We specialise in WordPress websites for all of our websites. So contact us today, and let us help make your websites optimally accessible! 

Further Information

Pixel Fish Hosting, Support & Maintenance
Is your WordPress Hacked? Here are 5 Potential Reasons

Stand out from your competition with a Pixel Fish website!

Call us today on 02 9114 9813 or email info@pixelfish.com.au


Speak to us about your new business website. We’d love to hear from you.

Topics: Business Tips, Website Design