For many professionals, associations are incredibly important in terms of career advancement — the help they receive through upskilling and reskilling with association courses, the new information they get from industry events, and the professional connections they make through association-enabled networking all help them to grow their skills and take their careers to the next level.
With that in mind, making your association’s website inclusive, accessible, and welcoming is absolutely essential. Your users, no matter who they are, should feel right at home when they first land on your homepage. So, what can your organization do to ensure this outcome?
Designing for accessibility and inclusion is essential — which is why we’re going to cover it in-depth right here.
Making members feel welcome through inclusivity
Inclusivity and accessibility are crucial for associations these days, as Madgex’s own extensive research has shown.
For example, one of our recent surveys of more than 200 professionals with disabilities revealed that 20% of those who use assistive technology still struggled to complete job applications, while troublingly, a large majority — 67% —were concerned that their disability would negatively impact their chances of securing a job interview.
These aren’t just lifeless stats — they're the lives and livelihoods of professionals with disabilities at stake. Keeping this in mind, it's imperative that associations make their members feel welcomed and included through an accessible digital space.
In terms of website design, there are some buzzwords that people throw around all too lightly — like “inclusive accessibility design.” However, if you truly want to make that a reality, you’ll need to work on creating web services and products that are accessible to the largest number of people possible.
Sure, there are some basic guidelines on inclusivity like layout, typography size, and color contrast. While we’ll get into these as well, they’re not the only crucial aspect of the design process — inclusive design requires an additional psychological approach.
Consider what people see when they first arrive at your website — is it an inviting and welcoming space? Have you thought through how your association first greets its audience and what your visuals are signaling?
Don’t underestimate the power of visual imagery when it comes to reinforcing perceptions of what kind of people are welcome in a group. Any images of people need to contain a balanced gender and racial representation, with standards that don’t make them exclusive to an audience of professionals. The key for associations is that their online representation should never resemble a “walled community” of a certain demographic group.
While clarity and efficiency are certainly important, remember what your members want — assistance, information, and open access. If you’re asking for someone’s personal information, as most associations do at some point, you need to make sure that your website is a welcoming space for people to provide it.
Considering that, an association needs to constantly create space for affirmative communication at every single touchpoint that it has with prospective members. Generous whitespace, large buttons and font, and straightforward, direct language are always a good idea — with each page that collects user information only requesting 2 to 3 pieces of data per page at most.
Also, include picklists with non-specific options whenever possible, and make sure people have the option to not provide sensitive personal information if they don’t want to. This will immediately result in an association providing a more welcoming online environment for both new and existing members.
Making a website accessible to people with disabilities
When it comes to designing your website with more accessibility in mind, there are quite a few actionable steps you can take:
Choosing a content management system
Most association websites, and websites in general, are constructed with content management systems — like WordPress and Drupal.
Pick one that suits your specific needs the best, and once you do, ensure that your template and theme are built with accessibility in mind. You can see whether that’s the case from the template’s documentation. Also, do the same when it comes to any widgets, plugins, modules, and other elements.
For instance, editing toolbars must have options for accessible tables and headings, and any embedded video players must include closed captioning features.
Structure your content with headings
Screen reader users are always able to navigate content better if you structure each text-heavy page with a heading structure. A strategic use of headings will ensure your website can be correctly interpreted by all screen readers.
Also, don’t choose a heading based on their appearance. They need to be used in a logical order. For example, the H1 must come before an H2, an H2 must come before an H3, and the like. Don’t skip levels as it could be confusing for users. Also ensure every page contains an H1 (and only one), which explains the main content of the page.
Alt text for images
All images should come with alt text, so that screen reader users may grasp the message those images are supposed to convey. While this is true for promotional imagery as well, it’s most important when you use infographics and other informative images to convey data.
Image alt text: "A man on a bike riding through the city."
Carefully name your links
Every website contains both internal and external links, with the former being especially important for creating a flow of information throughout your website and leading users from one page to the next in a logical manner.
However, all content that includes links should also include text that accurately describes the link’s destination. With that in mind, “click here” is not generally an acceptable piece of hyperlink text, at least from the perspective of a screen reader user.
Visually impaired users often use screen readers to quickly scan a page for texts. That’s why they may not necessarily read your link’s text within the wider context of the page — descriptive language is necessary to provide them with that context.
Be careful with color use
There are multiple forms of color deficiency, and red-green (the most common form) affects about 8% of the entire population. Considering that, using only these colors while indicating what fields in a form are required will prevent a large portion of the populace from interacting with your website, at least without significant frustration.
On the other hand, there are plenty of people with disabilities that hugely benefit from content that’s organized and distinguished with color — such as learning-impaired users and people with memory disabilities.
Both color-impaired and learning-impaired users must be satisfied — and you can do so by combining color and other visual indicators, like question marks or asterisks. Also, borders and whitespace are great visual separators for distinguishing between blocks of content.
Consider accessibility when designing forms
As we’ve mentioned above, it’s incredibly important to design your forms with accessibility in mind — if form fields are mislabeled, screen readers may miss cues, preventing many of them from even joining your association or benefiting from your content.
To that end, every form field must come with a descriptive, well-positioned label. For instance, if we’re talking about a field where a user should enter their name, the field should be labeled properly as “Full Name” — or you could include two fields for “Last Name” and “First Name”. Also, using the <label> tag is a must.
For certain form fields that are required, you must include appropriate labeling and configuration that will alert all screen reader users to this. Most commonly, websites will include a visual indicator like an asterisk. Also, add a text alternative or an attribute on the field to make sure that users with screen readers are fully aware that the field is required.
Also, if users make an error while submitting the form or fail to fill out some of the required fields, they must be properly informed of the mistake.
Make your website more accessible today
Associations, by their definition, are inclusive and accessible groups — and your website should help maintain that quality instead of hindering it.
When members want to join an annual conference or register for some other content, make sure both the content and the registration forms are accessible for people with disabilities. Also, any written, spoken, or visual content must not exclude anyone, even if accidentally — everyone should feel welcome and included.
Looking to make your association more accessible and inclusive? Contact Madgex today to learn more about our market-leading career-center technology designed with inclusion and accessibility in mind.
Our job boards are Web Content Accessibility Guideline (WCAG) AA standard accessible, fully responsive, and seek to comply with alternative guidelines, such as the United States Section 508. We also carry out extensive and frequent accessibility audits and use coding techniques like progressive enhancement and Accessibility Rich Internet Applications (ARIA) to ensure that our products go well beyond industry standards for accessibility.