Around 26 million people call Australia home. Our country is a veritable human kaleidoscope of backgrounds, philosophies, and physical capabilities. With so much diversity, you want the website of your not-for-profit (NFP) to be firing on all cylinders.
As a professional website design and development agency, Web 105 constantly works with NFPs, government organisations, and healthcare providers. This includes adapting any functional or layout concerns to address the unique needs of all target audiences.
In this article, we want to review why you need an inclusive website design and how it can be leveraged to better market your brand to clients, team members, stakeholders, and potential donors.
What is Inclusive Website Design?
You’ve probably already heard of UI/UX. This user interface and experience directly relate to how website visitors interact with your NFP’s online presence.
Inclusive design is different. The goal here is to ensure that every visitor, regardless of needs or capabilities, can access your website. That means people with low vision just as much as those who can only use a keyboard to navigate the web.
Unfortunately, most companies and brands stick to thinking about themselves as the end-user. While they may be fine for a massive multinational effort like Starbucks or McDonald’s, your NFP has a much different purpose.
You want to ensure you can reach as much of your target audience as possible, and focusing on inclusive design is a surefire way to help you organically get started.
Considering all this, here are some of our top tips for creating your nonprofit organisation’s new website or updating your current online presence with inclusive elements.
Best Tips for Inclusive Design for Your Nonprofit Website
#1 – Restructure Your Content
The last estimate put about 453,000 people in Australia in the category of blind or with low vision. This means that when they want to browse all that amazing content you have on your landing page, about us, or even your updated email address, it’s hard to see.
You want to structure all the content on your website into easily digestible chunks. Use headers and sub headers to break up sections, and try to keep paragraphs under four sentences in length.
Use a sharp contrast between your website’s background colours and text/font. A good rule of thumb is 80 characters per line with a line height 1.5x the size of your font.
#2 – Don’t Forget HTML Markup
HTML is the backbone of the Internet. It is the programming language used to arrange basic text into visually appealing content.
However, if your content doesn’t have the correct markup along with it, it cannot be properly assigned a visual element.
Tags like <h2> or <p> create the heading and paragraphs that order and organise your content. It makes it easier to view what you want to say, when you want to say it, on all devices being used.
#3 – Boost Keyboard Navigation
Yes, using a mouse or your finger on a smartphone is a well-known way to explore the online world. But what if you have a disability that doesn’t allow you to use a keyboard?
Your NFP’s website needs to allow keyboard navigation. This turns your content into interactive elements that can be quickly navigated using a tab key on a keyboard. Instead of being frustrated with the inability to highlight text, arrive at different pages, or explore forms, you have an easy way for keyboard users to get where they want to be.
You can easily test out your website’s current keyboard navigation by going to the page and only using the tab key and shift + tab key to navigate. If you aren’t able to experience everything your target audience should, it may be time to give our team at Web 105 a call.
#4 – Use the Alt-Text Options
This next tip for inclusive website design for your Australian nonprofit boosts both accessibility and SEO (search engine optimisation). You have the option to write in descriptive alternative text for visual elements like images, photos, and graphics.
Known as “alt-image text,” whenever a visitor turns off downloading images due to vision impairments, the text describing those images pulls up instead. Screen readers rely heavily on alt-text, as do search engines that crawl your website for keywords and phrases.
#5 – Skip the Text Heavy Images
Speaking of screen readers, they prefer images with a limited amount of text in them. The technology can only read the text you design into the photo if it is in the alt-text parameter.
Images will also automatically resize based on the dimensions of the screen your target visitor is using. If you have a heavy text-laden image with a lot of information, it is likely not to display well on a smartphone or tablet.
#6 – Put Label in Your Form Fields
This inclusive design tip works for everyone, not only those with impairments or disabilities. Use descriptive labels when you have a form, like accepting donations or volunteering.
For example, if you have a form with “First Name,” “Email,” and “Phone Number,” put those labels inside the form element you want the visitor to fill out. They should automatically disappear once someone starts typing, but it is far more efficient for visitors to know what to provide and for screen readers to recognise.
#7 – Keep it Simple
Copywriting is a professional art where you convey crucial information in a way that relates to your target audience. Many writers like to use unnecessary “big” words or flowery language that often get in the way of your point.
A good method for ensuring your content is easily read and understood is to have a few people on your team proofread it. Make sure they are from different backgrounds and education levels. If the content is too confusing, it’s time to adapt.
For example:
- Use a list instead of long paragraphs that get boring.
- Break up text with visual elements to clarify points.
- Define technical terms or local jargon.
- Expand an acronym so readers understand the reference.
#8 – Use Colour Wisely
The W3C is the World Wide Web Consortium. It creates the acceptable inclusive website design “playbook” we should all follow.
One of the suggestions from the W3C is to have a background-to-text ratio related to colour of 4.5:1. The reason for having this type of ratio is there are a lot of people with colour blindness. If your website doesn’t have a sharp contrast where it relays information, you will likely lose some readers.
You want to find ways to use the colours you love with accessibility features. Spotify is an excellent example. The service places a tiny dot below any selected options during playback (play random songs, repeat playlist, etc.) so you know it is selected. This is much better than relying on colour alone.
#9 – Never Use Flashing Elements
Whenever you go into a movie with some bright lights flashing, you are bound to see a warning on the screen saying those with epilepsy or similar neurological conditions may want to rethink this film.
Australia has a little over 250,000 people with epilepsy. If you use strobing effects, flashing animations, or similar visual elements, you run the risk of causing some serious harm to a potential volunteer, client, or donor.
Keep all animations under the “Three Flash Rule.” This means if you have anything flashing a light or element more than three times per second, it must be changed.
Final Thoughts
The good news is that all these tips for inclusive website design and development are easy to attain. You don’t need to stress about completing the project alone when professionals like our team at Web 105 are here to help.
We’ve worked with numerous government organisations, healthcare providers, and Australian NFPs using NDIS funding. We know how crucial inclusive design is to your overall mission and can provide the insight and solutions you need for a beautiful, mobile-responsive website.
Schedule a consultation today, and let’s discuss how your new or updated website can better serve everyone you want to visit.
FAQs
What is inclusive web design?
When you strategically design a website so that all the visual elements and content are accessible to all users, regardless of their location or backgrounds.
What are the three principles of Microsoft’s inclusive design methodology?
Microsoft does a fantastic job of building inclusive websites. They follow a simple rule: “Recognize exclusion; learn from diversity; and solve for one, extend to many.” This just means designing with everyone in mind and scaling as necessary.
What is the W3C?
The World Wide Web Consortium is an international organisation that creates the guidelines and technical standards most commonly used to promote web technologies. In terms of inclusive web design, that means improving the site so more can access the information.