Search Kanopi

Category: Accessibility

Accessibility in the Design Process

Posted on by allison

(Note: If you’re short on time, click here for the tl:dr summary.)

We take web accessibility seriously here at Kanopi. It’s a key part of being an inclusive organization, which is one of our core values.

It’s also because we need to be. And so do you. 

Let’s start with the fact that it just makes good business sense. 

According to CDC stats, 27% of adults in the U.S. alone are permanently disabled (which itself is just one small portion of the entire disability spectrum). If your website doesn’t address their accessibility concerns, you’re essentially denying them the opportunity to become your customer, member, subscriber, applicant, or whatever your website goals may be. 

It’s also worth mentioning that, depending on the nature of your organization, you could even face potential legal liability if your website isn’t properly accessible.

In practice, it means we’ve baked accessibility considerations directly into our processes, throughout every department and team. For example, when our strategy team creates user personas, they ensure at least one of them has a specific accessibility need along with the standard set of attributes. 

Since many of the considerations regarding website accessibility are design considerations, our design team has created an Accessibility Checklist that we apply to everything we create. It’s based on the A11y Project plus our own team’s experience, and it’s meant to help ensure our designs meet the standards set forth by the Web Content Accessibility Guidelines (WCAG).

The A11y Project provides the most comprehensive explanation of WCAG. So, to quote them verbatim: 

The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments. There are three levels of accessibility compliance in the WCAG, which reflect the priority of support:

  • A: Essential — If this isn’t met, assistive technology may not be able to read, understand, or fully operate the page or view.
  • AA: Ideal Support — Required for multiple government and public body websites. 
  • AAA: Specialized Support — This is typically reserved for parts of websites and web apps that serve a specialized audience.

As A11y points out, this list by itself won’t make your site fully accessible to everyone, but it will go a long way toward improving the overall user experience.

Kanopi Design Accessibility Checklist

Color Contrast

We check text contrast to prioritize readability, and meet a minimum WCAG AA-compliant 4.5:1 contrast ratio.

We also ensure that color contrast for non-text items (graphical objects, for example) meets the minimum standard 3:1.

We use Webaim’s contrast checker tool to ensure our contrast ratios are compliant.

Typography

WCAG guidelines require that text can be resized up to 200 percent without losing content or functionality, and without relying on assistive technology. This rule does not apply to captions or images of text.

We choose fonts that work well at both large and small sizes. They feature clear, distinct letterforms that are easy to read in many situations. This helps accommodate the variation found across different mobile devices.

We use a minimum size of 12 points or 16 pixels for all body copy. 

Animation & Motion

While most mobile and desktop operating systems now include ‘reduce motion’ settings, websites themselves should also allow for further controls. WCAG also states that users should always be able to exert some control over how they experience animation in websites. 

This is why the websites we design, build and support allow users to play and stop animations as it suits them. We also use motion strategically, so it enhances the experiences for some users without impeding the experiences for others.

Layout Design

We make sure all user interface elements in our designs are sized and spaced to make interaction (i.e. via ‘tap’ or alternative interfaces) as simple as possible for users with reduced motor functionality.

In addition to being compliant with WCAG guidelines regarding text spacing and other interface elements, it also aligns with more general design best practices — in this case, Jakob’s Law.

Accessibility benefits all users.

We’ve found that adhering to accessibility guidelines not only opens your websites to potential new users, but it creates a better user experience for everyone. 

These are just a sample of the user benefits accessible websites provide:

  • Reduced friction points within the website experience
  • Easier to consume and engage with content
  • Better mobile experience
  • Wider audience reach 
  • Reduced bounce rates
  • SEO benefits
  • Higher conversion rates

Feel free to borrow this checklist for your own organization, or formulate your own list that best reflects your user research. And if your website needs to be more accessible, a major redesign might be the right step. If you’re not sure, we’re here to help.

If you’re interested in learning more about accessibility, check out these posts: 

TL:DR Design Accessibility Checklist 

Note: As per our Accessibility Expert Candice Dexter, we should note that these checklist items apply to more than one rule each; but we’re focusing here on its primary compliance rule.

Color Contrast

Check for:

We prioritize fonts that perform at large and small sizes We test text contrast to prioritize readability, and meet a minimum AA-compliant 4.5:1 contrast ratio.

We also ensure that color contrast for non-text items (such as graphical objects) meets the minimum standard 3:1.

To comply with:

Typography

Check for:

We prioritize fonts that perform at large and small sizes that have distinct, easily identifiable letterforms. A minimum size of 12 points or 16 pixels is used for all body copy. 

We stick with fonts that can be easily read in a variety of scenarios, to account for the variation that can occur with mobile devices.

To comply with:

Animation & Motion

Check for:

Users should always be able to exert some control over how they experience animation in websites. While most mobile and desktop operating systems now include ‘reduce motion’ settings, websites themselves should also allow for further controls.

The websites we design, build and support give users the ability to play and stop animations as it suits them. We also use motion strategically, to enhance the experiences for some users without impeding others.

To comply with:

Layout Design

Check for:

We make sure all user interface elements in our designs are sized and spaced to make interaction (i.e. via ‘tap’ or alternative interfaces) as simple as possible for users with reduced motor functionality.

To comply with:

Accessible personas: the key to inclusive web design

Posted on by allison

The World Health Organization (WHO) estimates over 15% of the world’s population — or 1.3 billion people — self-identify as having a disability.

That’s why creating inclusive and accessible websites isn’t just a nice-to-have in today’s online world; it’s an absolute necessity. 

As hospitals, universities, and nonprofits strive to meet the needs of everyone who visits their websites, it becomes all the more crucial to understand the diverse challenges folks face when attempting to interact with inaccessible content (and the impact this can have on customer acquisition, applications, and fundraising.)

Here at Kanopi, we’d argue that to understand what people with disabilities need from your website, you should develop accessible personas — detailed representations of your different website visitors, particularly those with disabilities.

This blog explores why accessible personas are essential, how they help design better user experiences and the best practices for developing them. Let’s get started!

What are accessible personas?

We’ve written about them before here, but simply put, a persona is a fictional yet data-driven representation of your target customer, written as if the persona were a real person. It’s documented in a way that lists everything from demographic information to hobbies, to pain points, and motivators. 

A persona is a tool you can use to create sales and marketing materials that have a specific target user in mind, rather than a generic one. They are designed to guide content writers, designers, and developers in crafting websites that can be easily accessed and navigated by everyone, regardless of their abilities.

But what many personas lack is taking accessibility needs into account. We can’t forget or ignore that site visitors can have various impairments, including permanent, temporary, and situational disabilities (see below for more on those). This is particularly critical in healthcare, where users come to a website with any number of accessibility needs and need information quickly and easily. 

Example: a persona for a UCSF Department of Urology patient

Example: a persona for a UCSF Department of Urology patient

By focusing on different disability types — such as mobility, visual, hearing, cognitive, and neurological impairments — organizations can better anticipate the needs of folks who may face barriers when interacting with their websites.

Dyslexia alone affects 20% of the population and represents 80–90% of all those with learning disabilities. It’s the most common of all neurocognitive disorders. Limiting all capitalization and breaking up large walls of text to add white space are just a few design solutions that help ensure your site content is dyslexia-friendly. 

It’s also essential to consider the three different types of impairments:

  • Permanent impairments, like blindness or permanent mobility limitations.
  • Temporary impairments, such as an eye injury or recovering from surgery.
  • Situational impairments, like those faced by a person in bright sunlight or within a noisy environment.

There’s a strong business case for developing accessible personas.

Improved usability for everyone

Accessible personas help organizations understand the unique challenges faced by people with disabilities, leading to more inclusive and user-friendly web design. 

The insights drawn from accessible personas ensure that accessibility isn’t an afterthought but an integrated part of the design process. 

By considering different abilities, you create a better experience not only for folks with disabilities but for everyone — whether they’re navigating your website with a keyboard, voice control, or even in a noisy or visually cluttered space.

Most organizations must comply with accessibility laws, such as the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act. 

Then there’s the issue of ethics. Put simply, ensuring your website is accessible to people with disabilities means equal access to your site’s content for all, not just a few. 

Enhances content, UX, & design

Creating accessible personas encourages teams to focus on key aspects of accessibility, such as content clarity, navigation ease, and intuitive design. 

For instance, a persona with a hearing impairment might require captions for videos and a visual indicator for sound cues. 

Additionally, a person with a visual impairment might need large text options and high-contrast colors. 

These solutions — along with many more outlined in our content scorecard — help ensure that everyone who visits your website can read, navigate and use your content as intended.

Fosters empathy & inclusion

Developing personas based on real-world impairments fosters empathy among strategists, content writers, designers, and developers. 

When teams are guided by detailed personas that represent real-world people, you can create a stronger emotional connection to your organization’s accessibility goals. 

This empathy can shift the focus from mere compliance to a genuine commitment to creating more inclusive and usable digital experiences for everyone.

Best practices for developing accessible personas

Consider permanent, temporary, & situational disabilities

Disabilities can vary widely in terms of permanence. Some folks might have lifelong disabilities, like blindness, while others might have temporary conditions, such as an eye injury. 

Situational impairments — like a noisy environment or bright lighting — also affect how people interact with your website.

Account for diverse impairments

A disability can impact someone’s senses and abilities differently, including:

  • Mobility: People with limited motor control may require options to navigate your website without precise mouse movements. Ensure your site provides keyboard navigation, large buttons, and clear visual cues for all clickable elements.
  • Visual: Permanent impairments like blindness or color blindness and temporary issues such as cataracts or eye injuries require solutions including alt text, high-contrast colors, and adjustable font sizes.
  • Hearing: People with hearing impairments need captions and transcripts for videos and visual cues for audio content.
  • Cognitive & Neurological: People with cognitive impairments benefit from clear, simple language, step-by-step instructions, and tutorials that help them navigate your website easily.

Embed accessibility in Drupal

Once you’ve designed your personas, make it easy to implement how you’ll meet people’s needs.

The Drupal A11y Project Checklist created and maintained by developers at Kanopi offers helpful, integrated guidance on interaction methods, navigation, and structure for individuals, organizations, and governments.

Screenshot of the Drupal.org A11y project checklist

Practical solutions for a variety of impairments

Avoid taking a one-size-fits-all approach. Different solutions assist different impairments. For example:

  • Mobility Impairments: Ensure folks can navigate your site using their keyboard or screen reader. Avoid requiring precise mouse movements, which can be difficult for people with motor impairments.
  • Visual Impairments: Craft high-contrast color schemes and resizable text options, and use descriptive alt text for images and videos. These features benefit people with blindness, color blindness, and even temporary impairments like eye injuries. 
  • Hearing Impairments: Use captions, transcripts, and visual cues to replace audio information. Additionally, provide clear, concise language to ensure understanding.
  • Cognitive Impairments: Simplify language, use step-by-step instructions, and minimize complex interactions. Visual aids can be beneficial for people with cognitive or neurological impairments.
  • Neurological impairments: Avoid extreme flash and strobe of visual content, parallax effects, and scroll-triggered animations, considering the needs of the 50 million people worldwide who have epilepsy and the 1.8 million adults worldwide who have bilateral vestibular hypofunction (BVH).

Where to start for creating your own accessible personas 

The UK Government Digital Service (GDS) has developed seven different open-source accessibility personas that you can use as a reference to get started. However, the GDS also notes that creating accessible personas is not a substitute for including people with access needs in your user testing.

Guidelines from Microsoft’s Inclusive Design methodology provide a comprehensive approach to developing accessible personas as well.

Accessible personas not only humanize your site’s users but also help prioritize and align content, UX, and design solutions to better meet their needs.

At Kanopi, we create personas from many different sources, including:

  • user research
  • interviews with real people
  • data gathered through analytics
  • and market knowledge best practices.

We’ve developed accessible personas for many organizations, including Flagler College, the Gilder Lehrman Hamilton Education Program, and the UCSF Department of Urology.

While it may seem like a daunting task, taking small, incremental steps can improve your site’s accessibility over time. For example, you could start by focusing on your website’s forms.

AI and Web Accessibility: Help or Hype?

Posted on by allison

Web accessibility ensures that everyone – regardless of ability – can use and benefit from your website. For some users, that means being able to navigate a site using a keyboard or screen reader. For others. It means understanding content despite vision, hearing, or cognitive challenges. It’s not just good practice; it’s increasingly required by law. And it opens your digital doors to a wider audience. 

AI is creeping into every part of digital life, including accessibility. But does it help make websites more inclusive? Or is it just another shiny tool that creates more problems than it solves?

Here’s a quick take on how AI can support accessibility, and where it might do more harm than good.

Where AI Helps

  • Auto-generated alt text. AI can analyze images and suggest descriptions, filling in gaps when content editors forget. It’s convenient on large, content-heavy sites, but human review is still essential. AI may “see” a mountain, but it won’t know why the image matters in context.
  • Real-time content feedback. Some platforms now offer accessibility checks directly in the content editing workflow. These tools help flag issues like missing headings, poor color contrast, or unlabeled buttons as content is created, making accessibility more achievable for teams without deep technical skills.
  • Conversational interfaces. AI-powered chat and voice tools can improve navigation and usability for people with mobility or vision challenges. For example, a WordPress site might integrate a voice-driven search that helps users find content without typing, while a Drupal site might use AI to guide users through complex forms using natural language cues.
  • Video and audio transcription. AI-generated transcripts and captions can make multimedia content instantly more accessible. Think about a site with hundreds of podcast episodes or instructional videos — AI can drastically reduce the time and cost of providing accessible alternatives while still allowing for human review to ensure accuracy.

Where AI Hurts

  • “One-line” accessibility overlays. These scripts promise to make your site instantly accessible. In reality, they rarely fix the underlying code and can interfere with screen readers and keyboard navigation. Worse, they give a false sense of compliance and have even led to lawsuits. Learn more about overlays.
  • Poor language translation. AI-powered translation tools can be helpful, but they often miss nuances, idioms, or culturally sensitive phrasing. A poorly translated error message or form instructions can confuse users who rely on clear, simple language.
  • Voice recognition limitations. AI-powered voice navigation tools can struggle with users who have speech impairments, strong accents or use assistive speech devices.
  • AI bias. Because AI is trained on existing data, it can reflect biases or overlook the needs of users with disabilities. What seems “smart” might miss key accessibility issues entirely.

The Bottom Line

AI can support accessibility, but it’s not a substitute for doing it right. The best results come from using AI as a helper to flag issues early, reduce manual effort, and support your team. But it still takes real people, clear standards, and smart design decisions to build truly inclusive websites.

Kanopi writes a lot about accessibility. Check out our dedicated page.

The new federal ADA guidelines: what they mean for websites

Posted on by allison

In an era where digital inclusivity is becoming increasingly critical, the new ADA (Americans with Disabilities Act) guidelines for web accessibility aim to help create a more equitable online experience. 

For those of us responsible for maintaining websites, this will require an ongoing commitment to ensuring your site is navigable, readable, and compatible with diverse technologies at all times. 

Who specifically has to follow these web and mobile app accessibility requirements? While everyone certainly should, this particular set of guidelines are targeted to the following:

  • Public transit agencies
  • State and local government offices that provide benefits and/or social services, like food assistance, health insurance, or employment services
  • Public schools, community colleges, and public universities
  • State and local police departments
  • State and local courts
  • State and local elections offices
  • Public hospitals and public healthcare clinics
  • Public parks and recreation programs
  • Public libraries

Site owners have been tasked with achieving and maintaining WCAG 2.1 AA compliance by April 24, 2026. Adopting these standards not only fulfills your organization’s legal obligations, but will also enhance user experience and foster a more inclusive digital environment.

But first, a brief history.

Timeline:

  • In 1990, the Americans with Disabilities Act (ADA) was signed into law as a landmark civil rights measure aimed at preventing discrimination based on disability. This legislation mandates reasonable accommodation requests by employees and establishes accessibility requirements for public spaces, such as wheelchair ramps. 
  • In 1998, Section 508 was added to the Rehabilitation Act of 1973, requiring that all federal agency information technologies — including websites — be accessible to both employees and the public.
  • Additionally, under Title II of the ADA, state and local governments are now required to adhere to federal accessibility regulations that went into effect as of June 2024. 
  • Government entities have until 2026 to achieve compliance; however, those serving populations of less than 50,000 have until 2027. 
  • Consequently, websites with a .gov domain are now expected to meet these accessibility standards.

The four principles:

At the heart of these guidelines — as well as providing the technical standards for compliance — are the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. These guidelines outline four fundamental principles to ensure that web content is accessible to everyone: 

  • Perceivable: Can the content be seen and read?
  • Operable: Can the content be navigated? Think keyboard accessibility.
  • Understandable: Is the content organized? 
  • Robust: Is the content compatible with technology? Screen readers, for example.

Otherwise known simply as P.O.U.R.

What does this mean for web maintenance?

To effectively navigate the new guidelines and ensure your website remains inclusive and compliant, it will be important  to focus on the following key areas:

1. Accessibility Standards: Ensuring your website content meets the P.O.U.R. principles described above.

2. Regular Accessibility Audits: Audits will need to be performed on a regular basis to identify and fix issues. This might include using automated tools and manual testing to ensure ongoing compliance.

3. Inclusive Design: Updates to your site should be designed with accessibility in mind from the start. This means incorporating features like alt text for images, proper keyboard navigation, and accessible forms. (We’ve posted extensively about this subject; please check out the links below.)

4. Legal Compliance: Non-compliance with ADA guidelines can lead to legal challenges and potential lawsuits. Ensuring that your website meets the latest guidelines helps mitigate legal risks.

5. Training and Awareness: Web development and maintenance teams should be trained on accessibility best practices to ensure that new content and features adhere to these standards.

6. User Feedback: Incorporating feedback from users with disabilities can help identify and address accessibility issues that might not be caught through automated testing alone. As with user testing in general, when done correctly it is definitely the added time investment.

We love web accessibility.

We take web accessibility seriously at Kanopi. It’s a key part of being an inclusive organization, which is one of our core values. We’ve built accessibility practices into every step of our process, including research, discovery, content auditing, and persona reviews. Several of our team members are IAAP certified experts who frequently write articles and give presentations about website accessibility and inclusion. In fact, here are a few related blog posts our team has written:

It’s also worth mentioning that every site we build and support is AA WCAG compliant or better. So if you need help ensuring your organization’s website meets the new guidelines, please reach out to us! Working in collaboration with your internal teams, we’ll help you align your brand with modern web accessibility best practices. 

A more inclusive web is a better web.

The new ADA guidelines underscore the need for a proactive approach to web accessibility. As digital spaces become central to everyday life, embracing these standards not only ensures legal compliance but also enriches every user’s experience and promotes inclusivity. By integrating accessibility into the core of your web maintenance strategy — through regular audits, inclusive design, and responsive user feedback — you contribute to a more equitable digital world.

Want more? We held a webinar about it

Interface of ON24's webinar platform with Candice Dexter giving a webinar on the ADA guidelines.

Want to dig deeper into the guidelines? Kanopi’s Candice Dexter gave a webinar for our client the University of California San Francisco called “Making Your Websites Accessible: An Overview of the New Federal ADA Guidelines.” (30 minutes)

‘Spring Cleaning’ Your Website

Posted on by allison

As spring breezes sweep away the cobwebs of winter, it’s not just our homes that deserve a thorough cleaning: your websites do, too! Like any living space, your website can accumulate clutter over time, impacting its performance and user experience. 

Join us as we explore some of the tasks that should be on every website owner’s spring cleaning checklist. 

Remove and update 404 links

Imagine you’re tracking down an important piece of information on the internet, only to hit the dreaded 404 error — foiled again! If your website aims to attract and delight end users, providing them with a positive user experience while they visit your site is crucial. When end users encounter a broken link, it can be frustrating and diminish their trust in your website.

From an SEO (search engine optimization) standpoint, 404 errors can be a red flag to search engines, suggesting a lack of upkeep that can negatively influence your site’s ranking. Additionally, broken links disrupt the flow of search engine crawlers, hindering the site’s ability to be indexed correctly, which impacts how easily a user can find your website when performing an online search.

Ensuring that all links lead to the intended content keeps users engaged, encourages them to explore more of the site, and helps maintain a positive reputation with visitors and search engines.

How to check for 404 links

This task may seem daunting, especially for e-commerce or large-scale websites, but various free tools scrape your website for not only 404 errors but other unsuccessful HTTP response codes. As Quality Assurance (QA), I’ve used the following links and can vouch for both their thoroughness and a pleasant user interface. 

Manually review content

Among the most time-intensive yet vital tasks in your website’s ‘spring cleaning’ regimen is the thorough review of your content. Whether you’ve recently upgraded to the latest version of Drupal or are creating a new website, the content you initially uploaded was current. The real challenge lies in maintaining that freshness over time. But the more you can keep it current, the better it is for your site’s SEO.

It is imperative to regularly evaluate and update your website’s content to ensure that your information remains relevant, engaging, and meets user’s needs. This task, unfortunately, does require manual effort (but can be made more enjoyable by pouring a glass of wine while you review your content.)

Are you thinking it may not be worth the effort? This Semrush report found that 53% of marketers noted increased end-user engagement simply by updating their content. 

Screengrab of an SEMRush report with a bar chart demonstrating how engagement went up by 53% after content was updated on a website.

How to keep your content current

A content update or refresh can be as in-depth as you’d like. We’ve created a helpful content scorecard for anyone wishing to do a full content audit of their site. 

Additionally, look at Google Analytics so you can review which pieces of content are getting the most traffic. Then look at which ones aren’t getting enough. Can those be refreshed or updated? Can you add more images? Lastly, check your keywords as well to ensure your content is ranking the way you wish. 

Trends come and go, memes go viral and then fall out of existence (does anybody remember the ‘Dancing Baby’ 3D rendering from the 90s?), and while continually updating your website’s content to keep it bussin’ is lowkey tedious, taking the time once or twice a year to glow up your cheugy content shows you and your website got rizz. No cap. 

Note: The author wants to apologize for the last few sentences on this topic.

Audit meta tag/schema data

Updating your Schema markup and meta tags is a crucial but often overlooked aspect of website maintenance, as updating these fields yields no visible, immediate results. What does this data even mean, and what does it do?

Schema, a specific type of microdata, creates a description (or “rich snippet”) that appears in search results. For example, use a search engine to look up information on an upcoming event. Schema can provide you with where the event is taking place, the date and time of the event, images related to the event, and dozens more options.

On the other hand, meta tags provide metadata about the HTML document itself, giving potential site visitors more details about what kind of information your website has. Meta tags also help curate a better online experience by specifying images, titles, and descriptions appearing when a page is shared via social media. 

How to update your meta tags and schema

/blog/wordpress-maintenance-and-support/While there are thousands of configuration opens for schema markups, it is an excellent opportunity for more detail-oriented folks to get in there and refine the data as much as they’d like. As an added bonus, this data is easily configured within the Configuration settings for both Drupal and WordPress. 

Want more information on how many configuration options there are for Schema markups, or do you want to know more? Check out our blog post or visit schema.org’s ‘Getting Started’ section at schema.org. Or are you curious as to how your website appears for end users? Validate your schema markup here, and check your meta tags here. 

Verify media items have appropriate alt text and captions

The importance of website accessibility cannot be overstated and here at Kanopi, we have stated this importance plenty of times:

When we think about enhancing website accessibility, we aim to create a seamless user experience, regardless of how one interacts with the site. Consider this: while a user who doesn’t rely on assistive technologies can instantly appreciate an image of the world’s cutest puppy snoozing with its tongue poking out, these delightful details may escape a user depending on a screen reader. 

The backend of a website showing how and where to enter alternative text for a photo of a sleeping puppy.

How to add alt text and captions

Thankfully, it’s really easy to update alt text and captions in your media. When doing a content audit, simply check the images in your CMS when doing a ‘spring cleaning’ for your website to ensure the alt text and captions are there. 

By dedicating just a few hours a couple of times a year to update your images with clear titles, descriptive alt text, and informative captions, you not only comply with accessibility standards but also enrich everyone’s browsing experience. This small investment of time will ensure that all users, regardless of their mode of access, can view and interact with all of your site’s content, so you don’t lose any visitors along the way.

It’s time to get tidy!

Like many of life’s endeavors, consistent upkeep is not merely beneficial; it’s essential. This same logic applies with equal force to your website. The amount of time you choose to invest — a modest four hours or a more substantial forty — rests entirely in your hands, but remember that dedicating time to refresh and enhance your website will inevitably draw more visitors and significantly improve their user experience.

Are you interested in a spring clean but find yourself strapped for time? Reach out to us. Let us fine-tune your website to perfection.

Alt Text, and Captions, and Titles, Oh My!

Posted on by faye

When looking at image media in a CMS like WordPress or Drupal, it can seem incredibly overwhelming at first.

There are so many fields and though they each have a specific intended purpose, for many of us, we didn’t worry so much about them at first. Now with increasing awareness of the role of textual content for accessibility purposes, we all want to pay closer attention. So let’s take a quick peek at what those are and how they’re used. 

Alternative (Alt) Tags

Alt tags are the most commonly used tags. Their purpose is to be an alternative in case the image cannot be shown.  Decades ago these were most widely used to help account for images taking a long time to load on dial-up connections. As our technologies have changed since then, the purpose of the Alt tag has taken on a more important role.

Accessibility: Alt text is primarily used to describe the content of an image to those who cannot see it. This includes visually impaired users or users who have chosen to disable images. Without alt text, these users might miss out on crucial information conveyed by the image.

SEO: Search engines cannot directly understand what an image is about. Alt text helps search engines understand the content of an image and its context within the page, which can improve your site’s SEO. Search engines can use this information to index images correctly, and it can help your site appear in image search results.

Provides Context if Images Fail to Load: If an image fails to load due to a poor internet connection or an error in the image file, the alt text will be displayed instead. This helps users understand what should have been there.

Supports Non-Visual Browsers: Alt text also benefits people using text-only browsers or command-line browsers, which do not display images.

Compliance with Standards and Regulations: Adding alt text to images is a requirement under the Web Content Accessibility Guidelines (WCAG) and, by extension, regulations like the Americans with Disabilities Act (ADA). Non-compliance with these standards can have legal implications.

Overall, alt text plays a crucial role in making the internet more inclusive and accessible, helping to ensure that everyone, regardless of their physical abilities, can use and understand web content.

Alt Text in Action

Since alt text need to convey an image to someone who may not be able to see it, it needs to be descriptive, concise, and meaningful in context. Let’s look at an example.

One possible alt text for this could be “chair” or “balloon. Those were the search terms that found this image on Unsplash. Technically it may be accurate to use “chair” or “balloon” or even “chair and balloon” as the alt text, but it doesn’t give adequate information for a user to understand why this image has been included. What is the information that is being conveyed?

We could say, “white chair with a large pink helium balloon attached to its back” which would be highly descriptive and better explain the image. Or if this is a part of a short story about a lonely birthday, maybe the greater context would be given by something along the lines of, “the empty chair sat alone with its balloon in the room.” This would invoke a feeling that would enhance the storytelling experience.

The end goal should always be to give a user a connection to the image without relying on the image being visible. Remember to convey the same feeling or meaning that it’s meant to give those who can see it. If it’s important enough to show a user, it’s important enough to describe to a user who can’t see it.

It also needs to be concise. The alt text is only a short space to help give context. If your image is complicated or needs additional detail then a long text format such as a caption would be a better choice. Try to keep your alt tags around 120-125 characters. 

Of course not every image offers a user great value or an emotional connection. Often icons with labels and other decorative patterns just don’t have non-visual context. In this case, you need to indicate that you would provide alt text if there were any and that this image is merely “decorative”. This means that you need an empty alt tag – that signifies to assistive technology that this image has nothing contextual to share. This can look like this:

<img src="istock250871.jpg" alt="" />

<img src="istock250871.jpg" alt />

Either is fine as long as it’s there. If it’s not there, then the image alt will become its file name and istock250871.jpg just doesn’t give a lot of helpful context.

Captions

Some images convey complex meanings or details that can’t be fully captured in just 120 characters. These images benefit from what is known as a ‘long description’. This isn’t a replacement for alt text, but rather an optional addition. It usually appears as a caption under the image, providing a more in-depth explanation or context.

Longer descriptions that aren’t captions can also be attached behind the scenes or nearby as part of the standard presentation, such as the paragraph immediately following an image. Developers can also connect these longer descriptions for those using assistive technology to make the relationship perfectly clear, but typically captions already include these connections and are easily edited through the CMS (Drupal does not have this field by default but it can be added). If a caption will do the job, there’s no need for additional content.

Situations that may require an image caption include:

  • Charts and diagrams
  • Complex Images
  • Images that need additional information to create more context
  • Images that need a heading 
  • Images that require a source credit

The idea behind captions is to be able to describe the meaning, visual content, or any additional context. They can be longer or, if the surrounding text gives lots of content, could simply supplement that data (such as a source).

Let’s look at a few examples.

Decorative Image with Caption

In this situation, the website chose not to give the image alt text but did include an empty alt tag to indicate that the assistive technology could bypass the image. The caption was included to acknowledge that an image was present and to give an accompanying description. Though there are several reasons to choose this approach, perhaps they wanted to allow the articles to add as much content as desired without character limitations. It might cause some confusion as users have bypassed the image the caption is referencing, but it does technically meet the criteria.

An image from another site that was missing alt text. Alt text provided here just to identify image presence.

URL:
https://www.nasa.gov/history/honoring-african-americans-in-space/

Alt Text: none/decorative

Caption: Guion S. “Guy” Bluford photographing the Earth with a video camcorder through the shuttle’s overhead window. NASA.

Image with Alt Text and a Caption

This is what we’d consider a better approach. We have alt text that acknowledges the image is there and gives a description of that image. Then a visual caption to identify the image, and expand on the source. As much as accessibility is a legal need, every piece of content should be geared toward informing the user. What would make this slightly better would be if the alt focused solely on the visual description of the uniform and let the caption provide the details of who and when, but that’s just nitpicking at this point. The current content is perfectly acceptable.

U.S. Army green service uniform worn by Colin L. Powell as General and as Chairman of the Joint Chiefs of Staff. Uniform is hanging on a pole facing forward.

URL:
https://nmaahc.si.edu/explore/stories/honoring-general-colin-powell

Alt Text: U.S. Army green service uniform worn by Colin L. Powell as General and as Chairman of the Joint Chiefs of Staff. Uniform is hanging on a pole facing forward.

Caption:

A U.S. Army green service uniform worn by Colin L. Powell as General and as Chairman of the Joint Chiefs of Staff.

Collection of the Smithsonian National Museum of African American History and Culture, Gift of General Colin L. Powell, USA (Ret).

Choosing Your Approach

These are just two ways this was handled and are simple examples. In some cases there may be a need to showcase something much more complex, like a pie chart, or a technical diagram. In those cases a simple alt text of “Named Chart” and a detailed caption that explains the important data points would be a possible option. Or maybe there’s a need for a developer to connect a “long description” to the image. Overall your team needs to consider the data and what its value is to the user to choose the best approach.

Image Description

This is the general description field made available within WordPress and isn’t typically used within a theme, though it could be utilized in a number of ways if desired. It could even be used as a long description field in a custom theme. Drupal may or may not have a similar field since developers can add any number of additional fields to media based on type and display. By default, Drupal has fields for the image, the alt text, and the title. If you wanted to include a long description, or any additional information, your developer can make those adjustments.

Titles

Tiles are often under utilized in themes since the alt text is the preferred method for providing accessible information regarding an image, but both WordPress and Drupal have these fields. A title is only given to the user when a developer has written code to display it, or to have it appear on a specific interaction such as hover or click. By default, the title goes unnoticed by the average user. Screen readers can always access the title if they choose to, but the alt text is read automatically upon reaching the image so the title is often skipped. Search engines will always be able to see the title, so keep that in mind if you choose to fill it in.

One Final Note

Drupal and WordPress are incredibly flexible! They can allow for many customizations and allows you, as a content manager, to add so much value for your end users. Empower users to understand the meaning of your site’s visual content, regardless of their device, technology, or level of vision. Allow people to be the hero of their own story as they consume, understand, and act on next steps. If you keep that strategy in mind as you approach your image management you’ll be successful in accessibility, content strategy, SEO, and the overall experience for your users. 

Web Accessibility Mistakes: The Good, The Bad, and The Ugly

Posted on by allison

Let’s dive into the quirky world of web accessibility, where mistakes are as common as cat videos on the internet. Trust me, these blunders are not just face-palm moments but also huge learning curves. So, buckle up for a rollercoaster ride through the most common accessibility missteps!

1. Overlays: A Digital Band-Aid

Let’s start with overlays. Ah, overlays, the digital equivalent of slapping a Band-Aid on a broken arm. They promise a quick fix to accessibility, but in reality, they’re about as effective as a chocolate teapot. Overlays often fail to address the underlying issues, leaving users with disabilities in a virtual lurch, and possibly in legal jeopardy. Instead, follow the best practice approach referred to as “native Accessibility” which means building accessibility into the design and code from the onset.

2. Testing Tools: Don’t Put All Your Eggs in One Basket

Next up, testing tools. Relying on a single tool for accessibility testing is like painting a house with a toothbrush. Sure, you might make some progress, but you’re missing out on the heavy machinery! Diverse tools uncover different issues, so mix them up. Use automated tools, manual testing, and – the secret sauce – real user feedback when possible.

3. Contrast Catastrophes: More Than Just a Fashion Statement

Now, let’s talk contrast. Poor contrast on websites isn’t just a design faux pas; it’s an accessibility nightmare. It’s like trying to read a book in a dimly lit room while wearing sunglasses. Not fun. And it’s so easy to check! Ensure your text stands out against its background like a zebra in a field of horses. Your users’ eyes will thank you.

4. Keyboard Navigation: Don’t Leave Anyone Stranded

Imagine navigating a website with just your keyboard and getting stuck on a digital island with no way out. Welcome to the world of poor keyboard navigation. It’s essential for motor-disabled users but often forgotten like last year’s New Year’s resolutions. Make every interactive element reachable via keyboard. Your users shouldn’t need a map and compass to navigate your site.

5. Alt Text: A Picture is Worth a Thousand Words, But Only If You Describe It

Images on your site are invisible to screen readers unless they have alt text. Skipping alt text is like showing a movie with no sound and no subtitles. Describe those images! It’s not just a courtesy; it’s a gateway to a richer experience for users who rely on screen readers.

6. Forms: The Bermuda Triangle of Accessibility

Ever filled out a form online and felt like you entered the Bermuda Triangle? That’s what it’s like when forms aren’t accessible. Labels disappearing, confusing instructions, and error messages as clear as mud. Make your forms as straightforward as a LEGO instruction manual — easy to follow and frustration-free. The more inclusive and accessible, the better.

7. Multimedia Mayhem: Don’t Just Play it, Say it!

Multimedia content without captions and transcripts is like a joke without a punchline. It just doesn’t work. Captions aren’t just for those with hearing impairments; they’re a boon during noisy commutes or when your headphones decide to play hide and seek. Transcripts? They’re the MVP for users who prefer reading over watching.

Wrapping Up: The Path to Inclusive Web Wonderland

So there you have it, folks: a whirlwind tour through the wild world of common web accessibility mistakes. Remember, creating an accessible website opens doors; it’s not about being perfect, it’s about being better. Let’s make the web a wonderland for everyone, one accessibility fix at a time!

If you need help with the accessibility of your website, contact us.

Want more accessibility info via a webinar?

Interface of ON24's webinar platform with Candice Dexter giving a webinar on the ADA guidelines.

Kanopi’s Candice Dexter gave a webinar for our client the University of California San Francisco called “Making Your Websites Accessible: An Overview of the New Federal ADA Guidelines.” (30 minutes)

An Assistive Technology Rundown

Posted on by faye

When I was a kid, if you wanted to call someone you either had to know their number by heart, or have it written down somewhere. Some people had little notebooks of contacts or a rolodex, and in Canada everyone had this big fat phone book, half white and half yellow. The white side had all the local residential numbers, and the Yellow Pages had all the local businesses.

As time went on, and it became normal to have cell phones, people started storing numbers in their devices. Many stopped registering landlines. Personal numbers were no longer something you looked up. Soon the big phone book that landed on our front step every year was reduced to just the Yellow Pages.

Not long after cell phones became the norm, smartphones quickly took over. With easy access to the internet, and the ability to dial the number straight from a website, even the Yellow Pages became obsolete. Mostly they went into the recycling bin. People complained about the waste of paper for books no one needed. Finally in 2019, the Yellow Pages went fully digital and the phone book became a thing of the past.

In the last decade so much of our life has moved online. In part this was expedited by the pandemic and the need for remote access to all kinds of services, but our world was already headed in this direction. Just ask the Yellow Pages.

Before you know it, some real life service providers may become obsolete and make the same jump to be exclusively digital. But when that happens, will it be usable by everyone? That’s where assistive technology comes in.

What counts as assistive technology? 

At its core, it’s anything that helps people with disabilities maintain, improve, or increase their capabilities. It might be the easiest to think of something visible and obvious like a wheelchair or a scooter, but it’s really a much broader category of equipment. Something as simple as a pencil holder that helps a child learn how to hold their pencil correctly is an assistive tool. 

Here’s a few more examples of assistive technology. What would you add to it?

  • Hearing aids
  • Wheelchairs
  • Glasses
  • Prosthetics 
  • Speech synthesizers
  • Crutches or slings
  • Braille
  • Scooters
  • Braces and casts
  • Power lifts
  • Communication boards
  • Adjusted school curriculum
  • Computer software
  • Elevators, escalators, and ramps

There’s also a wide variety of people using assistive technology. Some will use it for their entire lives, and some maybe just for a few minutes. They can be old, young, and anywhere in between.

Typically Permanent

  • Motor control difficulties
  • Cognitive difficulties
  • Learning and reading disabilities
  • Low literacy
  • Non-native speakers
  • Hearing loss
  • Low or no vision
  • Deaf-blind
  • Color blindness

Typically Temporary

  • Injuries that limit mobility like strains, sprains, and fractures
  • Medications that cause side effects like tremors or cognitive impairment
  • Eye injuries / eye infections
  • Broken eardrum / ear infections
  • Concussions
  • Recovering from surgery 
  • Plus any number of things that aren’t due to a disability, injury, or illness:
    • Intoxication 
    • Broken / missing computer mouse 
    • Being in a moving vehicle traveling over a rough surface
    • Only having one hand available while the other holds a toddler, a laundry basket, grocery bags, an angry cat, etc. 

With all of those in mind, take a look at this list and think about how you would typically accomplish these tasks in a brick and mortar world. Persons with disabilities have to do these  same things, and are generally able to because we live in a society where accessibility is regulated and enforced (though there is room for significant improvement).

  • Register for events
  • Apply for jobs
  • Order food
  • Financial management
  • Fill out taxes
  • Look up phone numbers and hours of operation
  • Go to school
  • Book flights & hotels

But now think about doing these things digitally, with a limited capacity to perceive or interact with the internet. What if you couldn’t read? Or speak? Or see? Or hear? Or move? How would you do those things? Could you even do those things digitally? What if there were no other options? No one should be restricted from these activities simply because of a disability. 

What kinds of assistive technologies are used online?

Incredible advancements made in bringing assistive technology into the digital world and ensuring anyone can have access to content and services online. It is actually possible to navigate and use a website using just your eyes!

Here’s some of the amazing assistive technology that’s being used today around the world:

Screen readers 

  • Synthetic speech spoken aloud provides the ability to consume digital content audibly.
  • Price range from free to $1,200 USD

Braille Displays 

  • Converts screen content into braille characters and sends them to a display where the individual can feel the output. Some devices also allow for braille input.
  • Price range $1000 to $7000 USD

Voice Recognition Software 

  • Allows users to speak instructions that can be utilized to navigate and instruct a digital display such as a website or other software.
  • Price range free to $500 USD, yearly subscription models are common

Eye Tracking*

  • Sensors that track eye movements in real time, identifying where the user is looking, responding to head / eye movements for engagement.
  • Price range $100 – $10,000+ USD

*Note: Some eye tracking software / devices are not created for accessibility and only track eye movements for data collection.

Switch Devices  

  • Provides binary input via foot pedal, Sip ‘n’ Puff, joysticks, and more. Some Switch Devices can receive non-binary input for more complex instructions.
  • Price range $20 – $2,000+ USD 

Sip ‘n’ Puff 

  • Allows users to utilize a straw like device to provide switch input through the use of their breath and can be customized for the user.
  • Price range $200 – $800 USD

You’ve seen some of these in action even if you didn’t realize it. Stephen Hawking used a switch device for much of his life to control his wheelchair and voice synthesizer via his thumb, in addition to eye tracking / blinking. He eventually had a custom switch device made when he was no longer able to use his thumb that would sense the tensing of muscles in his cheek to receive similar inputs. These advances in technology allowed one of the most brilliant minds of our time to continue his work for 55 years after he became paralyzed.

What needs to happen to make a website usable by these devices?

These devices will not work on a website unless they are built according to the WCAG 2.1 guidelines, meeting the Level AA standard as a bare minimum. This opens up a site to be understood by assistive technologies. Accessible websites will inform these devices what content is being reviewed and how to interact with it. It allows users to fill out forms, use navigation, find relevant information, download or upload files, check their email, everything you need to be able to do to operate in a digital world.

How can I improve my site so it’s accommodating to these devices?

While I advocate for all websites being Level AA compliant, it’s especially imperative if your site is in an industry such as  higher education, government, healthcare, etc. Both the USA and Canada have regulations regarding accessibility requirements so be sure to check that you are in compliance with the appropriate laws.

We can’t fix the entire internet in one push of a button, but you can start now by getting a sense of how accessible your current website is. Once you have an idea of what needs to be done, find an agency that prioritizes accessibility and can help you get your site across that line. 

Moving forward, make accessibility a part of your ongoing website goals. Because one day you too might need a little help from assistive technology.

Want more accessibility info via a webinar?

Interface of ON24's webinar platform with Candice Dexter giving a webinar on the ADA guidelines.

Kanopi’s Candice Dexter gave a webinar for our client the University of California San Francisco called “Making Your Websites Accessible: An Overview of the New Federal ADA Guidelines.” (30 minutes)

How to Test Your Website for Accessibility

Posted on by faye

There’s something wonderful about putting on adult shoes as a kid. They’re enormous and floppy and shuffle around on your feet as you lift and walk. I remember doing this often with my dad’s shoes, regardless of the smell, giggling all the way.

Somewhere along the line between then and now, walking in someone else’s shoes loses that magical charm. It’s more comfortable to maintain the status quo. What works for us must work for everyone, right?

Except it doesn’t. Humans are not “one size fits all” and this is also true when it comes to the internet. Like a building needs accessibility access, a website needs accessible code so that it can be used by everyone.

Many people have vision problems, hearing loss, physical limitations and more. In fact, 27% of adults — a full 61 million people — in the United States alone are permanently disabled in some way. Once you include temporary disabilities (such as a broken wrist), or extend the range to teens and children, that number soars even higher.

Your site could be unusable for up to a quarter of your audience, and it’s worth it to check. Follow this guide to do some quick testing, or jump down to our tl:dr.

Why automated tools are useful but also insufficient

We’re often asked for metrics and automatic scans that can “score” a site for accessibility. As appealing as that may sound, it’s simply not an option in the current technical landscape. In reality, it is generally accepted that automated tools can only detect about 30% of WCAG’s 2.1 success criteria. Any tool or service that claims 100% automation is 100% lying.

The reason for that is there are many accessibility issues that Artificial Intelligence (AI) simply cannot understand, and while a scan could possibly identify a place where a human mind should take a look, it couldn’t say with any certainty whether or not there is an error there. In fact, the more aggressive the scanning tool, the more likely it is that there are false positives in the results.

A common example of this are images. Automated tools can detect whether or not an image has alternative text (a requirement for accessibility) but they can’t tell if the alternative text is appropriate for the image.

Because of this, testing requires both automated tools and manual tests. And since each tool is different in what it can detect, and how it presents its errors, it’s recommended that you use multiple tools when testing website accessibility. Each tool has its own pros and cons, things it does really well, and areas that need improvement.

By the way, the disparity between automated testing and manual testing is also why we highly recommend you avoid quick fix solutions like overlays. There are a number of other reasons, including legal reasons, but when it comes down to it automated tools are only part of the process.

Automated scanning tools to use

Lighthouse (Google)

Pros:

  • Provides scores out of 100 (for people who love metrics)
  • Gives advice for manual checks
  • Easy to use extension
  • Generally no false positives
  • Identifies target size errors
  • Can also provide SEO and Performance audits
  • Links errors to Deque’s aXe ruleset

Cons:

  • Very simple scan
  • Only audits 44 possible accessibility errors
  • Provides minimal information regarding errors

WAVE

Pros:

  • Easy to use via URL
  • Allows toggling styles and javascript on and off for scans
  • Attractive visual interface
  • Shows Level A and AA items as errors (red)
  • Shows Level AAA, and Best Practice items as warnings (orange)
  • Identifies all ARIA used
  • Identifies all structural elements
  • Identifies accessibility features applied
  • Identifies contrast errors separately
  • Provides helpful information regarding error
  • Links errors to WebAIM’s WCAG 2 Checklist
  • Links directly to code in Developer Tools
  • Has built in contrast checker

Cons:

  • Cannot scan javascript injected content
  • Generates a few false positives each scan

aXe

Pros:

  • Shows Level A and Level AA errors
  • Best Practice items can be toggled on and off
  • Groups errors by serious, critical, moderate, and mild errors
  • Groups uncertain items for manual review
  • Links errors to Deque’s aXe ruleset
  • Explains specific fix options for each error
  • Links directly to code in Developer Tools
  • Rarely gives false positives

Cons:

  • Extension can be overwhelming and difficult to use
  • Does not scan hidden items
  • May or may not scan javascript injected content

SiteImprove

Browser extension
Paid Platform

Pros:

  • Platform version can scan site wide
  • Platform scans for Level A, Level AA, and Level AAA errors
  • Includes scans for Best Practices
  • Platform provides a score out of 100 (for people who love metrics)
  • Extension can be configured to scan for specific levels, such as warnings, items to review, best practice, items likely related to content entry, etc
  • Links errors to WCAG 2:1 Guidelines
  • Links directly to code in Developer Tools
  • Groups errors by guideline

Cons:

  • Aggressive scan causes frequent false positives
  • Considers many Level AAA and Best Practice items to fall under Levels A and AA
  • Difficulty understanding javascript injected content

ANDI

Pros:

  • Extremely easy to install
  • Very visual interface
  • Provides information on how a screen reader might interpret some elements
  • Great entry into understanding what kinds of errors can exist
  • Has built in contrast checker

Cons:

  • Does not link errors to guidelines
  • Limited suggestions for fixes

Add manual testing to find what the automated tools didn’t

Once you’ve run your site through some of the automated tools, it’s time to get some hands-on experience about what it’s like to use your site in someone else’s shoes.

How to do keyboard testing

Believe it or not, keyboard testing is actually “low key” and easy to do. There are only a few things that you need to know in order to do this testing on your own.

Tab, Shift + Tab

Pressing tab will move you down a webpage through interactive elements like links, buttons, and form fields. Pressing shift + tab will take you backwards through those same elements.

Spacebar / Enter

These keys “activate” interactive elements. When you are focused on a link, hitting one of these will open that link. Sometimes they can also move you into an “application” state where other keys become usable (see Arrow Keys).

Arrow Keys

These keys will scroll the page up and down, but not always. Tabs, accordions, sliders, and menus can be designed as applications. That means once you are focused on them (or enter them using the spacebar), using the arrow keys will navigate you through those interactive elements instead of scrolling the page.

Esc

If you have entered an application, or a popup window, the escape key should exit that area and allow you to continue down the page where you left off.

Knowing these interactions, you should be able to use your webpage without a mouse. Try it for yourself and see if you can reach and use all of the interactive elements.

  • Can you see where your focus is (what your next keypress will activate)?
  • Can you navigate through your menu?
  • Is tabbing logical, or does the focus move to unexpected areas?
  • Can you use sliders, accordions, galleries, videos, and tabs?
  • Can you enter form information and submit?
  • Do you get “trapped” anywhere and need to use your mouse to move on?

If you can’t use your page without a mouse, or if the keyboard experience is generally frustrating, then there’s some improvement to be made with accessibility. Keyboard functionality is vital to most assistive technologies, and if you had a hard time then chances are so is someone else.

A note about screen reader testing

You will likely need to hire someone to do this for you, as it takes a high level of skill and experience to operate. But using the ANDI tool on your site can show you some of the things a screen reader will present to a user, so if you’re interested give that tool a try.

To learn more about screen readers and assistive technology, check out our Screen Reader 101 blog post.

Where to find real users to test your site

Putting your site in front of real users with a variety of disabilities will most certainly uncover any issues missed by automated and keyboard testing.

Here are some resources for finding those users:

If you think there’s a problem, it’s time for a deep dive audit

While the methods mentioned here can give you an overall picture of a single page’s level of accessibility, it doesn’t reflect the full breadth of your site. For that, you’ll want a deep dive accessibility audit.

This type of work typically takes someone with a good deal of experience in the accessibility space. It would entail automated and manual testing of multiple pages to try and get a sample of each template used, in addition to some randomly selected pages. The auditor needs to know how to use multiple tools, how to test via keyboards and screen readers, how to investigate Javascript injected content, and know what to look for in criteria that can’t be caught in an automated scan.

Kanopi specializes in accessibility for our clients and we do offer deep dive accessibility audits, including itemized results for remediation. If you’re interested, send us a message!

TL:DR for testing your website’s accessibility

Try to use your website without a mouse.
If it’s frustrating for you, it’s frustrating for someone else.

Imagine someone was trying to navigate your homepage only by headings and links.
If someone couldn’t see the page and only had these elements to navigate by, would they know where to go?

Run your most popular page through two or three of the tools mentioned in this article.
A single issue can prevent someone from buying a product, viewing a service, or understanding your content. Take any errors seriously.

Re-test your site every so often.
Updates to code and content can unexpectedly change your site’s accessibility. Regular testing helps keep you informed about potential barriers on your site.

Want more accessibility info via a webinar?

Interface of ON24's webinar platform with Candice Dexter giving a webinar on the ADA guidelines.

Kanopi’s Candice Dexter gave a webinar for our client the University of California San Francisco called “Making Your Websites Accessible: An Overview of the New Federal ADA Guidelines.” (30 minutes)