Accessibility 101: 5 Things Your Website May Be Missing

At ArcStone, we work hard to ensure that every website we build is visually stunning, fast, functional, and accessible for those who may need nontraditional ways to process information. Accessibility is something that is easily overlooked but helps open up the internet, and the world, to those with visual impairments, blindness, or those that process information in different ways. 

Nonprofits operate in a space where life's many and myriad experiences are honored and celebrated. Because of this, it's essential that your nonprofit's website is accessible to the greatest number of people possible.  

In our decades of experience, we've analyzed hundreds of websites to see what's working and what isn't from a marketing perspective. In recent years, we've taken that approach to accessibility and have reviewed dozens of websites to see what often gets overlooked. 

5 Things Your Website May Be Missing

Websites have evolved a lot since the early days of the internet. Today there are many tools that can help open up the internet for those who previously may have been left out of the conversation. To help you ensure that you're not overlooking accessibility in your nonprofit website, we've gathered the top five things that we see missed. 

#1 - Modern Website Structure

The structure of websites has changed drastically in the past 20 years. Gone are the HTML tables and frames as scaffolding for design and content. Welcome the fluid, visually stunning, and user-focused websites of today. However, amongst all the gorgeous images and emotion-stirring videos, it can be easy to forget that website and page structures are helpful for those processing the information differently. 

In the modern age, good website accessibility depends on having a website structure that includes:

• Page Sections
• Language Definition
• Viewport Definition 
• Skip to Content Link
• Heading Tags
• Alt Text

This structure helps those using site readers to receive the information in a way that makes sense and more accurately reflects the content on the page. From what we've seen, many sites five years or older don't leverage these features. So, if it's been a while since your last website update, it may be time for a redesign. 

#2 - Focus

Focus refers to where the keyboard can navigate and enter information on a web page. For those with motor impairments that prevent them from using a mouse or other methods of page navigation, the keyboard is the way they drive their experience of the website. Accessibility tools also rely on what's defined as "in focus" to navigate, interact with, and read the site. 

However, popups, chatbots, sliders, and other interactive features can mess with the page focus, making it harder for them to get around. 

Review the content on your website, along with any popup windows, banners, or chatbots that can affect focus. Or even try navigating your site using just your keyboard to gain insight into the user experience you're providing.  

#3 - Forms

Forms are used frequently on nonprofit websites, from event or volunteer signups to newsletter opt-ins to donation forms. However, if those forms don't have defined and labeled fields, they may not be accessible. 

Accessibility tools rely on form fields and buttons being labeled correctly. Additionally, they rely on descriptions of the type of content requested, the format of that content, and indications of whether it is a required field. Labels can be applied to form fields in the backend code that will let the user know what type of field it is, such as radial button, checkbox, or text area.

Additionally, being able to navigate through the form in a logical manner using just the "tab" button or keyboard will help ensure the form is accessible and user-friendly. 

#4 - Quality Anchor and ALT Text

Screen readers and other accessibility tools rely on Alt Text to describe the important images on the screen. Using contextual and descriptive Alt Text on your images can be critical to good accessibility on your site (and even help with SEO!).

Just remember to be concise and direct rather than poetic and flowery. The Alt Text is supposed to add to the context of the text that accompanies it, just as the image does, not tell a different story or distract from the main message.  

Additionally, don't neglect anchor text. Anchors are HTML elements that create a link to a specified URL. Putting descriptive language around links or anchor tags makes them more valuable and easier to use.

Often, people will ask their accessibility tools to read out all the links on a page. As they listen, hearing "click here" or "click for info" isn't helpful, but "book now," "our services," or "our schedule" can be. 

#5 - Designing With Images

The internet has long been a visual medium. And adding text or other elements on top of images looks fantastic and can be impactful for people with vision. However, it can cause accessibility issues for those that don't or rely on screen reading software.

Be very careful when using images as a background on your web pages. Closely and manually reviewing contrast is critical. However, automatic scanning tools will call out text on top of an image as an error, even if the contrast is sufficient, so use this in your design sparingly and focus on adding great descriptive Alt Text when you do. 

Is Your Nonprofit Website Missing the Mark on Accessibility?

As we've said, web design has changed a lot in the past few years, not to mention the past two decades. However, in order to open up the internet, and the world, to people of all abilities, it's crucial that you make your website as accessible as possible.

To help, we have an on demand webinar on accessibility geared toward nonprofits. This webinar will help you better serve your audience and make the internet more inclusive. This webinar is just one more way we're trying to make The Web for Everyone™.