Importance of Accessibility on your Website
20 min read
Your association’s website likely acts as the first point of contact with your members. In fact, your website is likely your main engagement channel – it acts as a vehicle for communication. When your website is accessible, it identifies to current and prospective members that your association cares. It demonstrates that you acknowledge and understand online barriers that often prevent people with disabilities to interact with or to have access to online information and content.
When an association utilizes accessibility best practices all users have equal access to information. The first step to ensure your association’s website and communications are accessible is to understand WCAG guidelines on accessibility. We’ll go through WCAG’s accessibility best practices to help identify where your association can improve to meet WCAG accessibility standards.
Accessibility Best Practices
Visual Impairment
Visual impairment includes, but is not limited to, blindness, various types of low vision and poor eyesight, including colour blindness.
Colour and Contrast
It is important to check to see if the colours being used by your association meet visual accessibility standards. This includes the contrast of all colours being used together. As an example, you need to ensure the background colour of your website, the CTA button colour, and the colour of the text on the CTA button meet contrast and colour standards. To check to see if the colours and contrast of those colours meet visual accessibility WCAG standards, your associations can use WebAIM Colour Contrast Checker.
When developing content in the future, check the colour being used. This can include the colours of your logo, the colours being used in an email campaign, layout and formatting of an eBook you’re sending out or the images being used in your association’s blog posts, using the WebAIM Colour Contrast Checker. Enter the hex code for the text that you’re using and the hex code of the background into the Colour Contrast Checker. It will identify if the colour combination is a pass or fail. WCAG standards require at least a 4.5:1 contrast ratio, except for Large Text which passes at a minimum of 3:1. To find the hex code of your image, text, and/or background colour you can use a tool like Colour Picker Online.
Text Effects
Text effects, such as text with an outline can impact perceived contrast. Enter the color of the text outline being used as the text color, and the empty colour as the background colour when measuring contrast. If using text effects such as an outline, a glow, or halo run the same colour contrast test using WebAIM Colour Contrast Checker to identify if the text effect meets visual accessibility standards.
Visual Imagery and Alternative Text
It is important to identify that visual accessibility does not only identify as users who are blind, but also users with disabilities, such as partial blindness. Alternative Text, or “alt text” is sometimes referred to as text equivalents. Alt text adds meaning to photos to properly and accurately describe the purpose of the visual content. Users with visual accessibility needs may use text-to-speech software. This software communicates the added alternative text descriptions about the visual content to the user.
Ensure you use descriptive words to identify the purpose of the image. Add alternative text to images if the image serves a greater purpose than the already written, or provided text. This ensures users with visual accessibility needs of all kinds can identify the added value the visual content provides. When an image also acts as a link to another page, the alternative text must describe where the user will be taken when the link is clicked.
Types of Image Concepts
When reviewing photos and imagery with regards to WCAG visual accessibility best practices and standards, identify the purpose of imagery to determine if you need to add alt text for visual accessibility. Below are the five (5) most common types of images used to identify when adding alternative text is appropriate.
Informative or Complex Images
Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a description conveying the essential information presented by the image.
Decorative Images
When the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page, you can add a null text alternative (alt=””).
Functional Images
An image used as a link or as a button should describe the functionality of the link or button rather than the visual image. If a user is using a text-to-speech software program, it’s important that they are able to identify that there is an action required.
Images of Text
Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
Groups of Images
If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
Images of Maps
Each individual clickable area should have alternative text that describes the purpose or destination of the link. The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links.
An additional benefit in adding alt text, or text equivalents to imagery is that it increases search rank when evaluating your website’s search engine optimization (SEO). Majority of the time, adding alt text to images will be a judgment call. Ask yourself, how meaningful is the visual imagery to the content? But, when in doubt refer to WCAG’s Alt Decision Tree infographic to help you determine when to use alt text with images.
Motor/mobility
This includes, but is not limited to, the difficulty or inability to use one’s hands, including tremors, muscle slowness, loss of fine muscle control, and so forth – due to conditions such as Parkinson’s disease, muscular dystrophy, cerebral palsy, and stroke.
Spacing
Add padding around buttons or links, including a suitable amount of whitespace in between items on your website. This helps users who cannot control a mouse with precision. It’s easy for anyone to accidentally click something. Always keep usability in mind when formatting and laying out content.
Avoid pop up ads on your website – they distract from the content you’re trying to draw your users eyes to.
Navigation
When pages are coded in a way that hinders navigation by means of the keyboard alone, or a single switch access device, users who cannot use a mouse or a standard keyboard run into difficulty
Auditory
This includes, but is not limited to, deafness or hearing impairments, including individuals who are hard of hearing.
Users come to your association because they want to learn about the value your association can provide to them. But what if they can’t hear the content in your video, or have trouble listening to the podcast you’ve worked so hard on? Does your association’s website meet auditory accessibility standards?
Closed Captions
While video content can be used to communicate information visually, audio content needs to have alternatives, such as transcripts and captions. This allows users with auditory accessible needs the option to consume content as equally as a user without an auditory disability.
When videos are closed captioned or a sign language version is available, hard-of-hearing users and those with audio disabilities can better understand the video. Instructions are available on most video upload services, such as YouTube and Vimeo – click the buttons below to learn how to turn closed caption on YouTube or Vimeo.
Cognitive and intellectual
This includes, but is not limited to, developmental disabilities, learning difficulties (dyslexia, dyscalculia, etc.), and cognitive disabilities of various origins affecting memory, attention, developmental “maturity”, problem-solving and logic skills, etc.
When content is written in simplified, plain language users with learning difficulties and/or dyslexia are able to better understand the written content. It is easy to become immersed in your industry lingo and acronyms. Simplifying content to ensure it is easily consumed and understood. Illustrations can quickly communicate to viewers, as many people are visual learners. In addition to well thought out written content, add diagrams and animations to further illustrate the information you’ve spelled out – don’t allow visual accessibility needs to scare you off from using imagery, instead keep them in mind, using the image alt decision tree as a source of reference.
Seizures
This includes photo epileptic seizures caused by visual strobe or flashing effects.
Everyone loves gifs, memes, and funny videos. Avoid flashing effects, as users prone to seizures caused by these effects could otherwise be put at risk. Keep this small tip in mind when posting public or widely shared content. It can help avoid displeasure or harmful effects received by a user.
After you’ve implemented all of these accessibility best practices to your association’s content and website;
Create an Accessibility Page
In the footer of your website, under About Us or a similar navigation title, add a page for Accessibility. Add a form or email to enable a means of communication for someone with accessibility needs to contact your association. Enabling a point-of-contact allows your association to be open to continual learning towards those with accessibility needs to identify how you can make your association’s information and content more accessible. Go to our accessibility page to see an example!
Accessibility Standards Point of Contact
Appoint one person at your association to be the point of contact for accessibility needs. We recommend providing the appointed employee paid training, certification, or a course. Their role will include answering the form or email provided on your association’s website to identify ways your association can assist the individual who may have reached out.
Often this role will ensure anyone reaching out has access to your association’s content in a format that works best for them. For example, if someone with an accessibility need reached out to have access to your member benefits packages but had trouble reading your graphics, the accessibility needs POC would implement the administrative task. They would enlarge the content in a page document or slide deck format to increase text size to provide the members benefit package with the accessibility needs of the individual.
Accessibility should be at the forefront of your association when publishing content online. Work through these few steps and audit your association’s website to identify where there are areas of improvement to become more accessible. We recommend going through your website page by page to identify where the visual, mobile, auditory, and cognitive response to your content could improve.
Following accessibility standards is more than just a step-by-step process. Many associations work with professionals who take these standards into account as they are designing and building their websites. If you are considering a website redesign and are looking to speak with an agency who specializes in following accessibility standards, we recommend reaching out to Industrial.
About Shelby
Shelby is the Marketing Manager at Wicket. She is extremely passionate about writing content that makes an impact. It is important to her that Wicket, as a whole – provides practical advice and stands out as a thought leader in both the association and technology space.
