In the rapidly evolving digital landscape, accessibility, inclusivity, and functionality are not just buzzwords—they’re essential components of any online presence. As we continue to shift towards a more digital-centric world, the need to ensure that websites, fundraisers, and forms are accessible to everyone, including those with disabilities, becomes increasingly critical. Here are six of our top tips:

1. Keyboard Navigation

Every interactive element of your digital assets should be navigable using keyboard commands alone. This approach ensures that users with mobility impairments or those who prefer keyboard navigation for any reason can access your content without barriers. 

Try navigating through your digital assets without using your mouse! Here’s how:

• ‘Tab’ key: This is used to move the keyboard focus from one interactive element to another, such as links, buttons, and form fields.
• ‘Enter’ key: This is used to activate the currently focused interactive element, such as a button or link.
• Arrow keys: These are used to move between options in menus, select checkboxes or radio buttons, choose a dropdown item, and scroll through content.

The Critical Role of Color Contrast

Visual clarity is paramount. High color contrast between text (or interactive elements) and their backgrounds make your digital assets readable for everyone, including users with visual impairments. 

How to test color contrast:

• Identify foreground and background colors.
• Enter the foreground and background colors into the color contrast checker tool and verify that the contrast ratio meets the accessibility standards. 
• The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). The contrast ratio for form elements should also be evaluated against the same standards.

Want to learn more about how to make you non profit’s emails accessible? Read our tips here.

Image Accessibility

Where there are images on your website, make sure your images include alt text. This is especially important for users with visual impairments who may be using screen readers to navigate. Providing alt text is required by Web Content Accessibility Guidelines.

How to test that images have alt text:

• Right-click on an image, and select “Inspect” or “Inspect Element” (depending on your browser).
• This should open the Developer Tools window, with the HTML code for the image selected in the Elements panel.
• Look for the “alt” attribute in the HTML code for the image (eg. The alt attribute should contain descriptive text that explains the content of the image. If the alt attribute is missing or contains a blank or irrelevant text, the image does not have alt text.
  • Note: If the image is in the background, or if the image is for the look and feel only and provides no context to the form, alt text is not needed & can remain blank.

Learn more about optimizing images here.

Clear Language

The complexity of language can alienate users with cognitive disabilities or those who are non-native speakers. Simplifying text, avoiding jargon, and using direct language can make your digital assets more accessible. 

How to test for clear and concise language:

• Test for comprehension: Use online tools such as the Readability Test Tool to analyze the language used and identify any areas that could be simplified further. This tool provides insights into the grade level of language used and highlights sentences that could be made simpler.
• Test your website with people with different abilities: ask coworkers, parents, or friends to test the form to get feedback from people with different cognitive abilities to make sure the language is easy to understand.

Screen Reader Compatibility

Screen readers transform digital content into spoken words or Braille, allowing visually impaired users to access your content. 

How to use your operating system’s screen reader:

Mac: Choose Apple menu > System Settings, then click Accessibility in the sidebar (you may need to scroll down). Click VoiceOver on the right, then turn VoiceOver on or off.

PC: Press the Windows logo key  + Ctrl + Enter together to start Narrator. Press these keys again to stop Narrator. On many keyboards, the Windows logo key is located on the bottom row of keys, to the left or right of the Alt key.

How to test your website using your operating system’s screen reader:

• Open your website in a web browser and turn on the screen reader. The screen reader should automatically detect the form and begin reading the content aloud.
• Use the keyboard (using the commands listed above) to navigate through the website and interact with it. As you navigate through, listen to the output of the screen reader and ensure that it accurately describes the content.

Utilizing Accessibility Checker Tools

Finally, leveraging accessibility checker tools can provide a comprehensive overview of potential issues in your digital assets. 

How to test your digital assets with an Accessibility Checker tool:

• Open up the WAVE Web Accessibility Evaluation Tool.
• Enter the URL of the digital asset you’d like to check in the search bar. 
• The tool will scan the donation form for accessibility issues and generate a report of any issues it finds.
• Review the accessibility report. The report will highlight any accessibility issues found on the webpage or application, along with recommendations for how to fix them.

Finally

Inclusivity, functionality, and accessibility are intertwined aspects of digital design that, when executed thoughtfully, can enhance the experience for all users. By embracing these practices, you not only comply with legal standards but also champion a more inclusive digital world. If you need help setting up your nonprofit for success, reach out today!