2023 Non-Profit Website Accessibility Checklist

By Elin Enrooth | January 2023

A blind woman using a special keyboard to brown the web.

Your website is a hub for all your organization's initiatives. If people with different abilities can’t access your site, you’re missing out on a huge audience. According to the Centers for Disease Control, 61 million Americans have a disability.

Users shouldn't face any challenges when navigating your website. Accessible design ensures that all users can access and interact with your site. Thus, making the web an inclusive place for all.

There are many design aspects that determine the accessibility of a website. Do you consider how someone with a vision impairment may process the images on your website? Or, do you organize the website structure to be usable for someone who uses keyboard commands?

Accessible design aims to create an equal user experience for people with disabilities. It’s often overlooked, but accessibility opens up the internet, and the world, to a lot of people. In the nonprofit sector especially, it's vital to be as inclusive as possible. Many nonprofits specialize in serving marginalized communities or those with special needs. To help ensure that your site is accessible for all, here’s a checklist of tasks to include in your website design.

Why should you care about web accessibility?

Focusing on accessibility will enhance the user experience for all visitors. This shows visitors that you value them as individuals. In return, this type of investment will boost brand loyalty.

Aside from the faults of inaccessible sites, it's illegal to discriminate against people with disabilities. Many countries have accessibility laws that come with fines and penalties. The Americans with Disabilities Act (ADA) prohibits organizations from discriminating based on disability. But, legal compliance isn’t the only reason accessibility should be a priority. Making your website accessible is a good way to show inclusive company values. Plus, designing an accessible website may improve the user experience for all visitors.

Screen capture of the Chrome browser built-in accessibility testing tool.

Chrome and many other browsers now come with a built-in tool to test webpage accessibility and get an overall score for pages.

The Web Content Accessibility Guidelines (WCAG)

Designing for inclusion isn't only for compliance. It's also a good business decision. In the US, digital accessibility lawsuits continue to rise. The international standard for web accessibility is the Web Content Accessibility Guidelines (WCAG). This includes a set of standards that developers can use when creating websites. WCAGs are available to any web designer or developer.

The WCAG are organized around four principles:

  • Perceivable: users can consume content via the senses
  • Operable: users can operate a website with the controls they use
  • Understandable: websites and user interfaces are comprehensible to users
  • Robust: websites should work cross-browser and cross-platform

websites-for-nonprofits

ArcStone’s website accessibility checklist

Website structure

  • Use start and end tags when required
  • Assistive technologies can parse the code without a visual reference
  • Accessible by all browsers
  • Link the accessibility policy on the site
  • Users can report accessibility issues with your website
  • Warn users if links will open to a new tab

Web pages

  • Web pages can be crawled by screen readers
  • Detect if the user has requested a light or dark color theme and style your web page accordingly
  • Use bulleted or numbered lists for groups of items

arcstone-blog-andi-accessibility

The free "ANDI" tool from the Social Security Administration is an excellent way to test your website structure and navigation for accessibility. The above screen capture shows the tool evaluating a page's tab structure and keyboard navigation.

Page titles

  • Titles are brief and descriptive
  • Each title describes the page’s content
  • Each page title is unique
  • "Front-load” page titles with crucial identifying information

Headers

  • Each page has an <h1> for its primary title
  • Headings organize content structure
  • Headings have a meaningful hierarchy
  • Headings are used in order, meaning H2s come after the H1, followed by H3s
  • Mark-up headings so that users can understand and navigate the page

Forms

Forms are used frequently on nonprofit websites, from event or volunteer signups to newsletter opt-ins to donation forms.

  • All forms have defined and labeled fields
  • Labels are next to their corresponding fields
  • Form fields have labels in the backend code
  • Form labels follow a logical layout
  • Required fields are noted with an asterisk
  • Users can navigate the form using only the keyboard
  • Errors are findable
  • Provide clear guidance to help users fix the error
  • Users are alerted to form submission confirmation
  • Each control has a descriptive HTML tag
  • Instructions inform users how to fill out the form
  • Include text placeholders in the form fields as an example
  • Group similar fields together using fieldsets

arcstone-blog-form-accessibility

The WAVE tool provides an excellent breakdown of forms and what accessibility features are included. Forms are often where a website has accessibility issues and should be carefully tested to ensure all users can access their functionality.

Documents

  • Provide PDF documents in an alternative text-based format, such as HTML or RTF
  • If using PDFs use the Acrobat Pro built-in accessibility audit tool to make sure the PDF is accessible

Text

  • Font size is adequate
  • The user can increase the font size without scrambling the design
  • Confirm text size and contrast against compliance standards
  • Text doesn't get cut off when users enlarge the text size
  • Text is in actual text format and not image format
  • Text and images do not overlap
  • Buttons and form fields are visible and usable
  • Layout is consistent and straightforward
  • Avoid technical jargon and regional slang
  • Text content is grammatically correct
  • Text can be manually magnified by 200%
  • Small text has a contrast ratio of at least 4.5:1
  • Large text has a contrast ratio of at least 3:1
  • Emphasize text with bold or italic text
  • Define abbreviations or unusual words

Links

  • Anchor text explains the link context
  • Link text presents the most unique content of the link first
  • Links are recognizable for all web users
  • Links are underlined
  • Links underline when users focus on them from the keyboard, stylus, or voice input
  • Link text has a 3:1 contrast ratio with the surrounding text
  • File links state the type of document and file size
  • Let users know if the link opens to a new tab or file

Animation

  • Moving content must be controllable by the user
  • Avoid blinking or flashing content, or provide a warning beforehand
  • Make sure no content flashes or blinks more than three times per second
  • Provide a mechanism for users to control the time limit or frequency (pause, stop, or hide)
  • If your site contains a slideshow, make sure that each photo has alt text and can be navigated via the keyboard
  • Test unique widgets for accessibility
  • Content doesn’t blink or flash more than three times per second
  • Use the prefers-reduced-motion media query in your CSS and set it to either reduce or no-preference

Make content easy to hear and see

Images

  • Make sure that any text on top of images has enough contrast
  • Be careful when using images as a background on your web pages
  • Provide alternative text for every non-decorative image
  • If images contain text, include it in the alt text
  • Provide alt text for linked images
  • Incorporate frequently-searched terms in the alt text
  • Add a line of simple HTML code to provide text for each image
  • Add “alt” HTML tags for brief amounts of text or “longdesc” tags for large amounts, to each image
  • Text-only images are not used
  • Tables have alt-text describing the contents or the data.
  • If an image is decorative, it should have a null alt attribute, i.e., alt="". WordPress, for example, marks an image as decorative (alt="") if you leave the alt text blank.
  • Linked images are a bit different. They need alt text that details their URL destination, not a description of the image

 

Screen capture showing image ALT tag text.

Using the WAV tool you can easily scan a webpage and see the ALT text (in green) descriptions for all images. Having excellent ALT text helps people using screen readers understand the photographic content in your website.

Video and Audio

  • On-page media does not auto-play
  • Media can be stopped, paused, or muted
  • Users can adjust any background audio or halt audio playback altogether
  • Videos have closed captioning
  • All audio and video files have transcripts
  • Videos have an audio description that describes the visual information
  • Video captions sync up with the audio

Contrast ratio

  • Colors have a high contrast ratio
  • All elements are distinguishable
  • Normal text has a contrast ratio of at least 4.5:1
  • Large text has a contrast ratio of at least 3:1
  • There is a distinct contrast between text and background colors

Provide tools to help navigate your website

  • All web pages have the same header nav
  • Users have access to a clear site map
  • Dropdown functionality is accessible with keyboards
  • Include a “skip navigation” link at the top of pages to allow people to skip to webpage content 
  • Place navigational links and pages in a way most would expect
  • Navigation is above the fold
  • Page organization is intuitive with navigation available on all pages

Keyboard navigation

Keyboard access is essential for users who cannot use a mouse or trackpad. These users rely on the keyboard and other assistive technologies to navigate content.

  • Site is navigable without a mouse
  • Web pages and elements are navigable using “Tab”, “Shift+Tab”, “arrow keys”, and “Enter”
  • The keyboard tab order matches the visual order
  • Users can access all menu items with the keyboard
  • Keyboard focus is visible as you navigate through elements
  • Focus indicators have a high contrast level

Evaluating accessibility

When redesigning a website, test accessibility throughout the process to identify problems early. One of the quickest ways to check your site’s accessibility is with an accessibility checker. These softwares check for compliance with accessibility standards, such as the WCAG.

WAVE

WAVE offers many tools to test the accessibility of your website. They provide a visual representation of the areas on your website that aren’t accessible.

To use the WAVE tool, enter the URL of the web page you want to check in the web page address field. WAVE will then generate a report that shows which areas of your site don’t meet WCAG standards. Besides a general assessment, WAVE provides feedback on how you can enhance accessibility.

A11Y Color Contrast Accessibility Validator

To make your website's colors accessible, use the A11Y Color Contrast Accessibility Validator. It displays the color contrast issues on your website or web pages. You can choose to test by URL or a specific set of colors (by using their hex codes or locations on the color wheel). If the tool detects an error, it will provide recommendations on how to meet WCAG standards.

Is your website missing the mark?

To open up the internet to people of all abilities, it's crucial to have an accessible website. Not only will an accessible website improve the user experience, but it will also improve your site’s SEO ranking. Many accessibility guidelines are also good SEO practices. If a website is easier to use, then visitors will spend more time on the site and navigate to more pages. If a website isn’t accessible, it can result in frustrating user experiences. This reflects SEO as users will spend less time on the site and bounce rate will be higher.

Topics: Nonprofit Help, Digital Marketing

arcstone-services