5 Factors for Improving Digital Accessibility & Equity

In our experience, social impact leaders are thoughtful and intentional about digital equity and accessibility. They want their digital hub to be as inclusive as possible. But they’re typically experts in their issue area, rather than in the nuanced world of digital accessibility.

We’ve got you covered. Lean in as we dig into five parameters to consider when making accessibility and equity choices about your digital hub.

As we get started, know that these parameters have costs — whether abstract (in the sense that they limit design choices) or pragmatic (in that they have budget implications). Let your target audience strategy guide how you weigh these considerations when trying to achieve the goals of your digital strategy.

Note that you don’t need to do everything on this list. We’re presenting a spectrum of options. What you prioritize should be based on what your audiences want to do on your site and specific circumstances that they might encounter when visiting your digital hub.

1. Bandwidth & Performance

People have access to different types of devices and quality of internet service. Let’s be realistic, most people aren’t browsing the internet using a fiber connection on the latest Macbook Pro. Plus, people are increasingly browsing the internet on smaller, less powerful devices. In addition, people around the world live in areas without good internet or sufficient infrastructure to meet demand.

In order to make your website usable for as many people as possible, you need to consider strategies that take these bandwidth and device performance factors into consideration.

Reduce the “Payload” of Your Website

When you access a web page, your device downloads the content for that page. This includes what you can see and operational aspects that you can’t such as animations and interactive layers. Added together, all of these elements of a page make up the “Payload.” Keeping the payload size of your website’s pages as low as possible will allow it to load on slow or overloaded networks and less performant devices.

For example, YouTube downloads roughly 6 megabytes (MB) of content when you hit the Homepage. The folks who run YouTube know that a payload of that size can be a lot for a slow connection. But they are expecting that their audiences are there to watch videos — an activity that inherently uses up a lot of bandwidth. So there is an expectation that you have a solid internet connection and an adequate video processing card in your device when you go to YouTube. They are making this calculation based on their audiences.

On the other hand, Ready.gov is a disaster preparedness website. Its Homepage only downloads around 2MB of content when you land on it. That’s ⅓ of the bandwidth as YouTube. They are expecting people to be in areas where internet access is limited and are likely on a mobile device. They know that it’s important for people to get information quickly in difficult conditions. Their website reflects both their audience and the situations in which it is most likely to be accessed.

Consider User Device Capabilities

Just like video games or demanding programs, websites can require varying levels of hardware capability. Think about the devices that your audiences, and especially, your beneficiaries, are most likely to be using to access your products or services. Populate your site with their capabilities top of mind.

Let’s say you’re a food bank with multiple locations that serves a large county. If you’re asking your beneficiaries to use an interactive map to find your locations, you may be hindering their ability to do so. This kind of feature requires a lot of bandwidth and may be very slow in places with limited internet access or for people with old or low processing power devices. Chances are, if someone is accessing a food bank, they are working with these types of challenges as well.

If your audiences are remote and likely to be using mobile devices to access your site, keeping your payload low helps them access the pages that are important to them.

Strategies for Minimizing Bandwidth

Avoid unnecessary embeds, video, or uncompressed and oversized images. If you’re on Wordpress, consider using fewer plugins as each one adds a bit of overhead to the site — resulting in payload size increases and slow performance.

Be thoughtful about how each page of your site is treated. As we mentioned above, accessibility can be situational. For pages you expect to be accessed by people on mobile phones with poor internet access, keep things like videos, interactive sections, and large images to a minimum. But on pages that are donor or funder focused, it’s safe to expect that they are using faster computers and have decent internet access. These pages can, and probably should, have more robust content.

At Cosmic, our goal is to hit about 1MB of data on pages where delivering information is critical. This allows information downloads within a reasonable amount of time — even with poor connections and older devices these pages will load within a reasonable amount of time.

2. Accessibility

Content and code on websites should meet accessibility standards as much as possible. This applies to design in terms of legibility and contrast. The W3C, an organization responsible for establishing internet standards, has established the Web Content Accessibility Guidelines (WCAG). We design and code our sites with the goal of hitting WCAG 2.1 Guidelines.

We build our digital hubs with three principles in mind.

1. Design to be accessible

2. Use code hints for assistant programs such as screen readers

3. To meet increasing levels of compliance use available accessibility tools such as audio transcripts and video captions plus voice interaction with screen readers

Avoid Text in Images

For example, your site should not have text as part of images to convey information. It’s a poor design choice to put vital text in an image. If you put a pdf of an event flyer image on your website, a screen reader used to assist people with impaired vision can’t read it. You can have a downloadable pdf on a page but don’t count on an image of it to convey crucial information. Make sure all of the vital information on your site is in text on the page itself.

Ensure Sufficient Contrast

Your pages also need to have adequate contrast between written content and the background color it appears against. We aim for a contrast ratio of at least 4.5:1. Designers and developers need to have contrast in mind when creating each website page.

Don’t Rely on Accessibility Overlays

We often encounter legacy sites that utilize a web accessibility overlay. Overlays are a broad term for technologies that aim to improve the accessibility of a website. They apply third-party source code (typically JavaScript) to make improvements to the front-end code of the website.

While we honor the desire and efforts to make a site more accessible, it’s our informed opinion that overlays are not an accessibility solution. For more information, see the overlay open letter. Some of the signatories are members of the body that establishes the WCAG.

Design and Code for Screen Readers

A screen reader is an assistive technology. The software renders text, buttons, image content, and other screen elements into speech or braille output. They are used by people who are blind, visually impaired, illiterate, or have a learning disability.

We follow best practices for screen readers by writing hidden code for buttons that are visual elements without copy, such as an arrow that infers ‘next’ or ‘continue reading’ or scroll sideways in a carousel. This code isn’t visible on the site. Writing this hidden code is a process of aligning visual design with accessibility tools called ‘screen reader hints’.

For images, it’s best practice to use a screen reader hint known as ‘alt tags’. These are brief written descriptions of what an image contains — essentially its purpose in the page, rather than a visual description. More and more developers and designers are adding captions to images to help with this as well, especially in social media. It’s less important to have a description of a textural image such as a geometric shape as this doesn’t give a website visitor any important information.

3. Language and Translation

Our online writing philosophy includes a handful of guidelines that also help with accessibility. They include:

• Be Positive

• Be Clear

• Avoid Jargon

• Say it Once

• Be Succinct

• Focus on Bite-sized Copy

• Use Short Scannable Headlines

Watch Your Language

Write as if your reader is intelligent, but knows little about the subject matter. You are experts in your issue area, but your reader may not be. Don’t talk down to them, but also don’t presume that they know everything that you do.

Limit the use of colloquialisms that don’t translate across cultures. Alternatively, to make the copy more human, do manual translations that allow for colloquialisms.

Be Thoughtful About Translation

Consider your audiences and what languages they speak. When your website needs to cater to communities speaking various languages, be intentional about using language that conveys the same messaging and information across all languages. This isn’t always possible, but creating content from this perspective improves accessibility when written content is machine translated.

Automated translation through services like Microsoft Azure, Google Cloud, or AWS make translation affordable and easier. Even though they are sometimes inaccurate, they usually can communicate the ideas you want to convey.

For critical content, consider hiring a translator. This is one of the trade-offs we mentioned earlier. You are incurring higher costs than using automated translation, but when detailing your services or presenting vital content like emergency notifications, avoiding errors is invaluable.

4. Browser & Device Compatibility

Responsive design is our default approach to digital hubs. Any modern website, action center, or media hub should work well on mobile devices, laptops, and desktop computers.

Consider Economic Accessibility

When we design and develop digital platforms, we always integrate responsive design into our thinking from the start. This results in platforms that are user friendly for anyone who has an internet-ready device. Not everyone can afford a top-of-the-line desktop computer. When economic accessibility of your site users is a consideration that guides design and development, it grants more people access.

This should also be a consideration for older devices. If your audience skews toward the use of older hardware, you want to develop your website in ways that take this into account. There can be many reasons for this, including budgetary restrictions that have prevented devices or systems from being upgraded, difficult requisition or upgrade processes (such as we have seen in government), people on fixed incomes, and more.

Be Aware of Browser Compatibility

We have an internal standard of supporting the last two major versions of a browser. At the rate that browsers are updated, that typically means two years back. But for some of the same reasons above, and people’s fears of updating their personal systems, not everyone is using the latest browsers.

If your audiences are unlikely to be using up-to-date browsers, let your creative agency know. It will take significantly more time — and therefore money — to account for these older browsers. That’s the trade-off to consider here. But increasing backwards compatibility (as this process is called) may better serve your users.

Backwards compatibility is far less of a problem than it was ten years ago, but it’s important to consider. More and more browsers are adhering to standards set by W3C to include a set of standard features that every browser should have. Plus, more and more users’ devices automatically update. And, as cybersecurity awareness has grown, users have generally been better about keeping their devices up-to-date.

Being familiar with the devices and browsers your audiences use can guide you in making these choices. Look to your site analytics for information on this, or send out a survey framed to let them know that you are trying to optimize access.

5. User Interface Patterns & Information Architecture

Today, most website users are pretty familiar with a number of typical navigation and other user interface (UI) patterns. Some of their expectations include:

• The donate button is on the top right of each page

• You use the word ‘Donate’ instead of ‘Give’ for donations

• You have a Contact page

• You have an About page

• The navigation is a three-barred menu button on mobile (sometimes called a “hamburger menu”)

• The site visitor scrolls to view content and keep reading. This is true even when scrolling sideways.

It’s OK to break the mold, but be aware that you might discourage some users. This is the trade-off here. If you do break the mold, it has to be interesting and you will need to acknowledge some users won’t put in the time to learn the new patterns.

Think Through Your Information Flow

Make sure that the information on your site is organized in a logical flow. Make your information scannable so people can find the information they’re looking for quickly. Doing simple things like following the headline hierarchy of Heading 1, Heading 2, Heading 3, etc. helps screen readers prioritize information.

While this ties into Language & Translation above, using short scannable headlines helps people move quickly down a page until they find a topic of interest. When loading pages takes some time, having people scan through them for relevant information should slow them up.

Code Your Site with Semantic Tags

We’re getting deep into the development weeds here, but stick with us. This approach has both accessibility and SEO benefits.

More formally known as semantic HTML tags, this is backend code that defines the meaning of the content they contain. For example, tags like <header>, <article>, and <footer> are semantic HTML tags.They clearly indicate the role of the content they contain. Using a semantic tag helps site visitors using screen readers better understand the context of content.

Semantic tags give search engine crawlers (like Googlebot) a better understanding of the role of content on each page. This is important for SEO (search engine optimization) because the search engine will prioritize pages with correctly implemented tags, over those that don’t.

Overcoming Challenges

As we have shown, website accessibility and equity is a matter of working with complex factors, some of which you can affect and others that are outside of your control. Be assured that by working with a knowledgeable creative agency, you can choose options that take your audiences and their challenges into account when you are working to improve the accessibility and equity of your digital platforms.

Being practical and strategic about your choices will help the people you benefit, as well as funders and supporters, get to relevant information on your site as easily and quickly as is practical. This can help you reach the people who need your services, expand your reach, aid in funding, and help you realize your vision in more accessible and equitable ways.