Search Kanopi

Category: Accessibility

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.

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.2 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.

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.

Screen Reader 101

Posted on by faye

It’s time to take a look at screen readers and get a better understanding of who uses them, and what it’s like to use assistive technology on the web.

What’s a screen reader?

A screen reader is a piece of software that is able to review textual content from a computer and present it to a user via synthetic speech. It’s what we call “assistive technology” and essentially “reads the screen” out loud to the user. You may have heard the term used specifically in regards to the internet, likely because screen readers are an invaluable asset for the accessibility community. 

Screen readers present a website as plain text, including important semantic information such as region, headings, links, and interactive elements. Where most users might perceive a website as an interactive brochure of sorts, a screen reader’s experience is closer to an interactive audiobook.

Because of this, screen readers make the internet accessible to users who otherwise might not be able to perceive or understand content being presented visually.

Who are screen readers for?

It’s tempting to think of screen readers as used only by people who have limited vision, but that’s not the sole use case. In fact screen readers are so helpful, they’re used by many different groups of people.

  • People who are blind
  • People with low vision
  • People who have learning and reading disabilities
  • People with cognitive impairments
  • People with motor disabilities
  • People with low literacy
  • People who are non-native speakers
  • People who prefer to listen to content rather than read it

That’s a wide range of needs, and there’s a good chance that any given website’s audience overlaps with one or more of those categories.

What’s it like to use a screen reader?

This is a basic example of the JAWS screen reader going through a small chunk of website content. The experience is quite linear, just straight down the page without any additional context and demonstrates the “plain text” aspect of how a screen reader regurgitates information.

For a more extensive look at screen readers in action, here are a few videos under 5 minutes that can give you deeper insight into the experience.

UCSF Screen Reader Demo

SLCC Screen Reader Demo by individual with no vision

TPGI Accessible Page vs Inaccessible Page

How does website inaccessibility impact screen readers?

Structure & Order Matters

Screen readers understand a page in a linear pattern, apart from the design and layout, following what is known as the “DOM order” (Document Object Model). Essentially, the DOM order is the html of the page in the order that it is written. 

Why does that matter? Because while I can style a button from the footer to visually appear as though it’s in the header, someone using a screen reader will not reach that button until the application reaches the footer. This could be a confusing experience if the user could see the button, but not hear its function.  

Consider if a form’s labels were all on the left side of the page and the inputs where you enter information were all on the right side of the page, but they were coded as two columns instead of rows. A screen reader would read all of the labels first (down the first column), then all of the inputs second (down the second column). Without visually being able to line up the label to the input, a user wouldn’t know how to fill out the form.

To create an accessible experience, the DOM should follow a logical structure. It needs to make sense to someone who can’t see the page, but also to those who can see it. Remember, many users of screen readers are also viewing the page; it would be confusing to bounce around illogically ordered content. Users might lose their place on the page, or start confusing the relationships between headings, content, and links. For those with cognitive difficulties, this would be incredibly frustrating.

Landmarks & Headings Become Waypoints

If you think about a webpage like an essay, it has an introduction (the header), the body (the main content), and a conclusion (the footer). And every good essay has an outline (the headings).

A screen reader has the ability to move down a page using these kinds of landmarks as waypoints. Users could choose to move from the header to the main content, to the footer. If a page is created without essential landmarks, the screen reader can’t find those elements for the user. A site with proper semantic html will automatically inform assistive technologies of those regions, making it easier for users to navigate the page.

Aside from landmarks, screen readers can also travel via headings, allowing their users to select a sub heading that piques their interest and start reading from there. If your headings don’t follow a logical outline structure, this could misdirect and misinform users. In an essay you would never put the opening paragraph above the title, yet online this is a common faux pas done under the assumption that everyone can visually see and realize the intention.

When you visit a webpage, typically you’ll see a large number of links. Sometimes this is limited to the main navigation, but often there are links within the content, call to action buttons, or lists of quick links for navigating to popular pages. Screen readers are capable of pulling out all of the links from a website and presenting them to a user so they can more easily find where to go.

Take a look at your webpage. Look at all of your links and compile a list of them in your head. Do they make sense without surrounding content? If not, then it’s possible your site would give a screen reader some trouble.

Let’s say you had a sub-page called “About” in the main navigation going to a page service/about. But then down in the footer area you had a page called “About” going to company/about-us. A screen reader would present each link as “About” and the user would have no idea they were two different urls, or that one was about your services and the other your company.

Likewise, generic link text can be incredibly frustrating. Buttons and links reading “click here” or “read more” or “view now” are poor descriptions and don’t offer any information about where the user will be taken when activated. Read more about what? What am I going to view? Why should I click here?

These problems and more can quickly make your website unnavigable by screen readers, but these problems can also be solved with good accessibility practices. There are ways to include more information that only a screen reader can “see” and present back to a user to provide additional context to potentially confusing links.

What other kinds of assistive technology are there?

Beyond screen readers, consider these other technologies:

Braille Displays – these refreshable displays output textual content with braille that updates as a user moves throughout the page.

Voice Control – allows users to speak instructions that can be utilized to navigate a page through the same waypoints and elements that a screen reader uses.

Eye Tracking – tracks eye movement to trigger page elements and interactions.

Sip & Puff – allows users to utilize a straw like device to provide binary input through the use of their breath.

Switch Devices – provides binary input via foot pedal or other interactive equipment that can be extended for more complex inputs.

Magnification – provides the ability to zoom in and out on content.

While screen readers are just one branch of the assistive technology tree, at their core is the idea of turning a visual website into textual content understandable by a machine. Because of that, all of this other technology typically benefits from screen reader accessibility, making your site available to many more people who otherwise might not have been able to access your products and services.

Where to get a screen reader?

It’s fairly easy to find browser extensions or apps to add screen reader capabilities to a device, but here are the top three tried, tested, and true full solutions that are preferred by the accessibility community at large.

JAWS

Operating Systems: Windows® 11, Windows 10, Windows Server® 2022, Windows Server 2019, and Windows Server 2016.

Cost: Paid

This incredibly powerful screen reader solution has a robust suite of features and abilities. It integrates with other assistive technologies extremely well; in fact it is so popular that more than 53% of screen reader users are using JAWS.

NVDA

Operating Systems: PCs running Microsoft Windows 7 SP1 and later

Cost: Free

While the main product is free (supported by donations), there is additional support and resources offered in paid package deals. One of the really nice features of this software is it can be run from a USB drive, which makes it ideal for those using community computers at a library or café.

VoiceOver

Operating Systems: Most Apple devices

Cost: Free

If you’re using an Apple device, you likely already have this installed. From watches to computers to TVs, you can use a variety of VoiceOver accessibility settings. It’s also compatible with a huge range of refreshable Braille displays.

For further reading, American Foundation for the Blind has additional information on free and paid screen reader services.

Inclusive Language

Posted on by allison

At Kanopi, we strive to be inclusive in as many ways as possible: from our hiring practices, to accessibility within our documents and website, to social media. We also work as a company to make our verbal communications inclusive. Some everyday phrases have problematic origins, and we may not have awareness of that. The following lists contain phrases/words that are problematic, some suggestions for what to use instead, and some links that explain more. 

As many of these phrases have been used for decades, a person using problematic language may be unaware of the issues surrounding particular words or phrases. So we suggest giving the individual the benefit of the doubt (within reason, of course), talking to that person about the word or phrase by approaching them privately, telling them what you noticed, your understanding of why the word or phrase is problematic, and suggesting alternate language they might use to get their point across.

Trigger Warning: the following content includes examples of abelist, gendered, racist, and gatekeeping language. While some examples may be specific to the US or to Canada, we realize that this is an evolving list that can and will grow and change over time.

Ableist Language

Ableist language encompasses words and phrases that deliberately or accidentally hurt individuals who live with disabilities. Rather than using ableist language, we strive to use people-first language.

Resource: https://gcdd.org/news-a-media/people-first-language.html 

Problematic LanguageUse Instead
Lame Stodgy | Tacky | Cheesy
Crazy | Insane | Schizophrenic | Hysterical | Manic | Psycho | Spaz | MoronUnbelievable | Silly | Preposterous | Illogical | Irrational | intense | Wild | Vehement | Impassioned | Piercing
ADHDUnfocused
OCDTidy | Organized
That’s so gay…Cheesy | Tacky
Blind to, deaf toDidn’t understand | Couldn’t perceive
RetardedSilly | Confusing
Click (when referring to mouse action)Select
See URLVisit URL
Suffers from….Lives with… (ex: “Suffers from Aids” versus “Lives with AIDS”)
BingeingIndulged | Satiated | Spree | Wallowed
A table of ableist language and recommended alternatives

Gendered Language

Resource: https://writingcenter.unc.edu/tips-and-tools/gender-inclusive-language/

Problematic LanguageUse Instead
Umbrella terms like “homosexual” or “gay”Use LGBTQIA or LGBTTIQ2S
Brother or sisterSibling
Man the boothStaff the booth
MankindHumankind
Guys or Dudes (as in, “Hey guys!”)Hey everyone | Y’all | Folks or Folx
Pronouns (she/her or he/him)Neutral pronouns (they/them), or use the person’s name
LaymanLayperson
A table of gendered language and recommended alternatives

Pronouns

Not every person identifies as part of a gender “binary” (meaning, either male or female). Gender identity and expression fall upon a broad spectrum, and individuals may identify anywhere on or outside of that spectrum. Non-binary individuals may identify as gender fluid, agender (without gender), genderfluid, genderqueer, or something else entirely. Knowing this, we should never assume a person’s gender identity strictly based upon the clothes they wear, the timbre of their voice, or even their physical attributes. 

One way that we can be clear about our own gender expression (if we are comfortable doing so) is to name our pronouns. We can do this in conversation (“My name is XXX, and my pronouns are XX/XX”), through our email signature, Slack profile, Twitter handle — there are many avenues! What’s more, by identifying our own pronouns, we may make another person feel comfortable identifying their pronouns for us. 

If you are not clear on a person’s pronouns, or the information is not presented by the person, it is also okay, when speaking to someone, to ask for their pronouns. Some ways to do this might be to simply say:  “What pronouns do you use?” or “What pronouns should I use for you in this space?” or “My name is [NAME], and my pronouns are [XX/XX]. What about you?”

Racist and Colonialist Language

Problematic LanguageUse InsteadResource
Peanut Galleryhecklers, interrupters, botherers, cheap seatsLink
White Trash, RedneckLink
Inner City, Urbanlow-income city, high-need locale, metropolitan population, city-dwellersLink
Ghetto, GhettoblasterLink
Grandfather (as in, “grandfathered in”)Legacy, old rule, inherited, precedentLink
Gyp, GyppedRipped off, cheated, conned, swindled, shortchanged, bamboozledLink
Master | SlaveLeader | Follower, Teacher | Student, Parent | ChildLink
Indian give(r)UngiftedLink
No can do | Long time no see | Me likeyI can’t, I cannot | I haven’t seen you in a while | I like itLink
Spirit Animal“Patronus” (Harry Potter reference), familiar, raison d’être / reason for living, kindred spiritLink
Paddy WagonPolice vehicleLink
Call a spade a spadetell it like it is, it is what it is,
“if it looks like a duck and it sounds like a duck, it is probably a duck”		Link
Colored (people)People of ColorLink
Sherpaguide, coach, commander, leaderLink
Guruexpert, virtuoso, authority, maestro, captainLink
Ninjaexpert, ace, virtuoso, maven, jediLink
Naziauthoritarian, absolutist, boss, sticklerLink
Scalpedrobbed, hustled, fleeced, pulled a fast oneLink
Tribegroup, crew, squad, community, circleLink
Powwowchat, brainstorm, ideateLink
Hip Hip Hooray!Hooray! (“Hip hip” is the problem)Link
Eenie Meenie Miney Moflip a coin, ask a friend, just make a decision without singing.Link
Moronfool, doofus, nitwitLink
Nomad / digital nomadremote worker, location-independent workerLink
Tipping Pointboiling point, reached the limit, crossroad, the final straw.”Link
The “ok” Emoji and/or Hand GestureThe “thumb’s up” Emoji and/or Hand GestureLink
Low Hanging FruitQuick Wins, easy tasksLink
SpookyCreepy, scary, frighteningLink
SavageFierce, cruel, violent. In some contexts, this is used as a synonym for “expert” – in those instances, use expert, ace, virtuoso, maven, jediLink
Stakeholderinvestor, sponsor, partner, collaborator, colleague, associate, participantLink
A table of racist and colonialist language, with recommended alternatives and further reading.

Gifs and Digital Blackface

“Digital blackface” describes the act of producing, posting, or circulating ‘black reaction gifs’ online and especially on social media threads. The practice is problematic because it re-enforces stereotypes of Black Americans as exaggeratedly comic personae, or, especially in the case of women, as archly sassy, but in a way that does not detract from their fundamental availability to the project of white identity construction. Several good articles about digital blackface can be found here, here, and here. 

So, as a practice, reaction gifs are fine to use, but be mindful of the individuals pictured within those gifs, and the big-picture message the content you choose may be sending. 

“Knowledge Gatekeeping” Language

Knowledge gatekeeping relates to an assumption of another’s level of understanding and/or education level, and inferring a level of ease as a result (for example: “It’s so easy” “as simple as”). 

Problematic LanguageWhy It’s Problematic
“It’s so easy”This assumes the recipient’s skill level
“Common knowledge”This assumes a level of education or exposure to information
“Wait, you have never used a [Git client]?”This not only assumes a level of education or exposure to information, but it discourages folks that are new to a concept from speaking up or reaching out for help.
A table of knowledge gatekeeping language and why it’s problematic.

Evolving from Violent Language

Credit to Anna Taylor for this compilation, and posted with her permission.

Problematic LanguageUse Instead
“We’re going to pull the trigger.”“We’re going to launch.”
“I’ll take a stab at it.”“I’ll take a pass at it.”
“Did we jump the gun?”“Did we start too soon?”
“I’ll bite the bullet.”“I won’t avoid it any longer.”
“What’s the deadline?”“What’s the due date?”
“We have to pick our battles.”“We have to choose our opportunities.”
“Can you shoot me an email?”“Can you send me an email?”
“That was overkill.”“That was a bit excessive.”
“I bombed the presentation.”“I didn’t do my best.”
“Let’s roll with the punches.”“Let’s move forward.”
“We can soften the blow by …”“We can make it a little easier by …”
“I’m going to take a shot in the dark.”“I’m going to take a guess.”
“Let’s not beat a dead horse.”“Let’s not focus on that anymore.”
“I was blown away by her presentation.”“I was impressed by her presentation.”
“I was kicking around an idea.”“I was thinking through an idea.”
“He’s a straight shooter in meetings.”“He’s pretty direct in meetings.”
A table of violent phrases with potential substitutes.

Microaggressions

“Microaggression” is a term used for commonplace verbal, behavioral or environmental slights, whether intentional or unintentional, that communicate hostile, derogatory, or negative attitudes toward stigmatized or culturally marginalized groups. The Micropedia is a wonderful and beautifully designed website that outlines what these look like, gives an opportunity to offer suggestions, and gives advice on how to address them.

Other Resources

Disability Language Style Guide by the National Center on Disability and Journalism

Inclusive Language Guide from Educause

5 Simple Ways to Improve Website Content Accessibility

Posted on by faye

Accessibility is a growing demand on the internet as our world shifts from in person to online in a variety of aspects. The pandemic has escalated that shift, and it’s becoming increasingly clear that all websites need to be accessible regardless of legal requirements.

While WCAG 2.1 compliant websites are coded following accessibility guidelines, it’s easy for a site to slip away from compliance through regular content entry. Or perhaps accessibility isn’t something that you’ve prioritized before and you’re just getting started on making improvements. Either way, here are five simple actions you can take right now to improve your website accessibility from a content perspective.

  1. Review / Revise Acronyms & Abbreviations
  2. Remove All Caps
  3. Use Sequential Heading Structure
  4. Alt Text
  5. Descriptive Links

Review / Revise Acronyms & Abbreviations

Acronyms and abbreviations are common in a number of organizations and industries. What’s often overlooked is how those are interpreted by screen readers.

I once came across some website content where they were comparing Generation X to Generation Z, but they used the abbreviations “Gen. X” and “Gen. Y”. Screen readers will often try to expand an abbreviation for clarity. When I tested the content, I discovered it was being read as “General X” and “General Y”. So while the original intent was to save on space, the meaning was confusing to anyone using a screen reader.

Likewise, some acronyms can be troublesome. P.O.W. would be read as “Prisoner of War” while POW would be read as “pow!” like the comic book action. It’s a good idea to read aloud to yourself the content on your website, and consider the potential for misinterpretation by someone hearing rather than seeing it.

Remove All Caps

Whenever I think of all caps, I think of AmyJune Hineline, former Kanopian and winner of the 2021 Aaron Winborn Award (she really loves that being mentioned). She used to regularly remind us all of how all caps can be a common source of frustration and miscommunication with the hashtag #NOWTHATCHERISDEAD. AmyJune would then ask, “Who’s dead? Cher or Thatcher?”

Switching to all lowercase in this circumstance won’t help either. If you are looking for a way to make hashtags more readable, capitalize the first letter of each word (NowThatcherIsDead). It’s called Camel Case (or Pascal Case, depending on who you ask) and it improves readability considerably. For the record, I promised AmyJune that if I ever had a child I would name them Cher Thatcher so the original hashtag would still be true when they passed. Problem solved.

Of course we typically use spacing and punctuation in website content, which helps alleviate some confusion, and all caps are typically used as an easy way to identify something as a heading or to indicate additional importance. But due to the uniform shape that capital letters give words, they become more difficult to identify at a glance and therefore reduce readability. Using Title Case (Now Thatcher Is Dead) is considered easier to parse, both visually and cognitively.

Use Sequential Heading Structure

HTML headings are structured similarly to an essay outline. Your page starts with an “H1” and should only have one of these. This is the heading that tells search engines and users what the focus of the page is. This is typically the title of your page or blog post. The remaining heading values (H2 – H6) are used to identify the content hierarchy of the page. 

Screen readers depend on headings to navigate a page, as users will typically bounce through the headings to find a section to read. If your page skips heading levels, or uses heading levels incorrectly, these users will not be able to correctly navigate your content.

  • H1 – Page Title
    • H2 – Section Title
      • H3 – Subtitle
      • H3 – Subtitle
        • H4 – Subtitle
        • H4 – Subtitle
      • H3 – Subtitle
    • H2 – Section Title
    • H2 – Section Title
      • H3 – Subtitle
      • H3 – Subtitle
      • H3 – Subtitle

Alt Text

Alternative text, commonly known as the alt text, displays when an image link is broken and can’t be displayed. And it’s far more useful than you may realize. Search engines use alt text to further understand the context of your web page and so it’s also useful for SEO purposes. But even more important, alt text is what’s read aloud by a screen reader. For someone with low or no vision, this description helps them identify the content of an image without needing to see it.

Decorative images, such as swoops or waves or other abstract design elements don’t require alt text, but your average image does. But not all alt text is created equal. When describing a picture, consider the purpose of the image and the feeling it’s meant to convey. Identify what is important to understand from the context of the image and the content around it, then articulate that in the alt text. Remember, if it’s valuable enough to show to a sighted user, it’s worth describing to users of assistive technology.

Take a look at this image taken by the James Webb Telescope, uploaded by NASA. The alt text reads, “A large pink, speckled galaxy resembling a wheel with a small, inner oval, with dusty blue in between on the right. Two smaller spiral galaxies about the same size are to the left, all against a black background.” This accurately conveys the image content without being too wordy.

A large pink, speckled galaxy resembling a wheel with with a small, inner oval, with dusty blue in between on the right, with two smaller spiral galaxies about the same size to the left against a black background.
Credits: NASA, ESA, CSA, STScI, Source

Most CMS platforms offer the ability to easily add alt text to your images and it’s highly recommended that you take advantage of the option to do so. Visit your website’s media library and review uploaded images, updating as needed. Then remember to add alt text when new images are added and you should be good to go.

Links are plentiful on almost any webpage. From the navigation bar, to the footer, there’s bound to be several links leading to other areas of your website or even to external sites. One of the most common types of links seen in content is the “read more” link. Generic phrases such as “Learn More,” “Read More,” “View,” and “Click Here”  offer little content to assistive technologies which often scan the links of a page and simply provide them to a user without the surrounding context. 

For example, if your page has three cards for news articles and the links for each are “Read More”, assistive technologies may present them as “Read more, link, read more, link, read more, link.” That is useless to the user if they cannot visually see the title of the article that goes with the link. 

In fact, this type of link is so discouraged, Google penalizes it when calculating a website’s SEO score. And yet this is an incredibly common practice. Even Kanopi’s website utilizes read more links in a number of situations. So how can you get around this ambiguity? 

Ideally it’s done by having hidden screen reader text added in addition to the “read more.” You’ll find an accessible website often has additional content that’s hidden visually but presented specifically to assistive technology. Instead of reading “Read more, link,” the screen reader is presented with, “Read more [about our blog post on accessible design], link.” This is how we do it with Kanopi’s site, making it possible to use “read more” as link text.

But because this method requires some behind-the-scenes code, it’s more commonly used in templated areas that automatically present content with read more links. When you’re adding textual content to your site, you may just want to add a button or link to send the reader onto more information. When that happens, it’s important to remember the link may be reviewed independently of the content around it. Being descriptive will help your SEO and your accessibility. 

I could tell you to “read more,” but it would be better for me to point you to an article about inclusive and accessible webforms.

Beyond Content Entry

Accessibility is an absolute necessity as assistive technology opens up the internet to more and more people. If you’re interested in achieving a WCAG 2.1 compliant website, get in touch with Kanopi. We’d love to help you create a site that is accessible to all.

Accessibility Overlays: Buyer Beware

Posted on by faye

Whether it’s the Americans with Disabilities Act (ADA) and Section 508, the Accessible Canada Act, or the governing legislation in your area, the reality is your site has to be compliant with WCAG 2.1 Level AA guidelines or risk legal ramifications.

What is website accessibility, also known as A11y? Accessibility is “the quality of being able to be reached,” or, basically the idea that every part of your website can be accessed and used by anyone. So how do you achieve that? Well, on one hand you can spend the time, effort, and money having your website audited and remediated, then set up an ongoing process to ensure your site stays current with accessibility needs and requirements. Or you can install an accessibility overlay and call it a day.

The question is, do you feel lucky?

First, what is an accessibility overlay?

Accessibility overlays (including widgets and toolbars) are automated software solutions that serve third-party scripts intended to resolve accessibility problems on websites and applications. 

Firstly, they usually apply a series of controls to a website that allow the user to adjust aspects of their viewing experience, such as colors, text size, and contrast.

Secondly, they use JavaScript to alter the code and content of your website on the fly to try and make up for existing accessibility errors with automated “repairs.”

Thirdly, they are really, really, really, really, really, really bad.

Wait, what? Why are accessibility overlays so bad?

Overlays may run into conflicts with user privacy.

Because users of assistive technologies often have specific settings on their devices and browsers, some overlays automatically detect those settings and attempt to utilize them for their configuration. To maintain this, it stores a cookie on the user’s machine, saving info about their disability settings without any kind of opt-in from the user. 

To make matters worse, any other website using the same overlay can access that same cookie to apply the same configuration. Information about an individual’s disability is incredibly personal, and this is essentially a privacy breach the user never opted into. Having an accessibility overlay on your site could risk noncompliance with GDPR, CCPA, and the like.

They increase your site’s security risk.

Anytime you load a third-party script onto your site, you are putting part of your site’s safety in the hands of the vendor. If their server is insecure, then you could be directly impacted.

Your website performance will suffer.

This is a tale as old as time; the longer it takes for your site to load, the more likely it is that the user is going to leave. JavaScript always increases page load, and third-party scripts are even worse because it’s the vendor’s server dictating the speed of that script. It’s a known fact that Google and other high priority search engines monitor site speed and that metric is utilized in your SEO ranking. Slowing down your site with an accessibility overlay will directly impact your search ranking with Google.

Website creators may become reliant on them.

Overlays are insufficient bandaids to problems that designers and developers will continue to make if they are not required to solve them. This gives the team a false sense of security and no motivation to create inclusive, accessible websites.

The “repairs” made by overlays may not be reflected in the source code. 

If you were to “view source” on a webpage, what’s reflected there may not match up with what you see being delivered by the overlay JavaScript. This means anyone using assistive technologies that rely on the source code would not be served the accessibility changes.

Overlays may be blocked by the intended audience.

Extensions designed to block ads are known to also block overlays, but ad blockers are a common tool users employ to ensure their assistive technologies are working properly. Instead those users will be served your existing inaccessible website without the overlay.

They actually create barriers to accessibility.

This is the big one. Most users of assistive technologies agree that overlays are ineffective at best, and detrimental at worst. These widgets often require activation via buttons or toolbars which of themselves may not be accessible to the user. Remember, not everyone is using their eyes and a mouse to navigate the page. Just because you can see and click on them doesn’t mean everyone can.

Moreover, users requiring assistive technologies already have solutions which impact the experience across their entire device and web browsers. An overlay can override or conflict with these settings, or even adapt unreliably (if at all), creating a frustrating experience for the user.

Companies using accessibility overlays are subject to brand damage.

Yeah. They are regarded that badly by the A11y community and those who use assistive technology. Companies caught using overlays have been called out for it on social media, and it is not a good look. The general feeling is that those organizations care more about their legal obligations than the actual end user.

  1. They require no actual accessibility knowledge or expertise.
  2. They provide controls that seem very helpful, like color contrast and text size.
  3. They promise fast and easy accessibility compliance.

It’s that last one that draws in companies and organizations looking to meet regulations. Accessibility overlays look like a temptingly cheap and quick fix for a big, expensive problem.

But accessibility overlays do fix accessibility problems, right?

No. A thousand times, no. 

There is currently no way for a single automated tool to detect all accessibility issues on a website. This is widely known in the A11y community. When we do accessibility audits at Kanopi, we use a minimum of four different automated tools, in addition to manually testing via keyboard and screen reader. Most automated tools can only detect up to 30% of potential problems, leaving up to 70% undetected. It takes a human user with training, additional tools, and a good chunk of time to find the remaining items. How then could an overlay possibly identify all accessibility issues on a webpage?

Unfortunately, they can’t. And therefore, they cannot meet the WCAG 2.1 Success Criteria. Conformance is defined as meeting all of the requirements of the standard; partial compliance is not sufficient. Any accessibility overlay provider claiming conformance is misrepresenting their product.

Just a few examples of issues an overlay is not going to be able to address, but are basic A11y requirements:

  • Detect / repair missing headings, or misused headings
  • Fill in missing alt text with appropriate content
  • Add missing labels on form fields or submit buttons
  • Fix missing or incorrect error management and handling
  • Provide reliable focus control on form inputs
  • Provide reliable keyboard access
  • Correct JavaScript content injected independently of the overlay
  • Enable zoom
  • Correct the usage of layout tables
  • Reliably correct focus order
  • Prevent keyboard traps

There’s more, but these are areas that are known to be big problems for users of assistive technologies and can make your site completely unusable for part of your audience.

What’s the worst that could happen?

In 2020, more than 250 lawsuits were filed against companies using overlays to solve accessibility issues on their sites. In fact, around 70% of accessibility cases are brought by the same ten law firms who are actively seeking websites using overlays. These law firms specialize in accessibility lawsuits and are looking for easy targets. 

Hunt Huey (PLLC) confirms this is a known strategy, stating: “The law firms who file website accessibility lawsuits and their pet clients start the process of finding a target using automated tools that scan for compliance with the technical requirements of the Web Content Accessibility Guidelines 2.0 or 2.1.”

“The conclusion is simple. If avoiding litigation is your goal, an overlay or widget won’t do the trick.” 

Hunt Huey

The reality is, if you want to avoid legal action then you need to reach WCAG 2.1 Level AA compliance.

So, back to the original question: Do you feel lucky? 

How do you become compliant?

It takes time, it takes expertise, it takes commitment. It takes caring about real people who use assistive technologies. Folks with disabilities are worthy of respect and inclusion. Design and build your website with inclusion and accessibility in mind, so that your site can be ‘reached’ by all. Dedicate resources to ongoing automated and manual A11y audits of your site, addressing issues at the root of the problem instead of applying bandaids.

Kanopi can help. If you’d like to know more about our A11y audits, or our dedication to building Level AA websites, get in touch with us.

Why do we need to make accessible websites?

Because it’s the right thing to do. 

Forget the legal ramifications. Forget the fact that there’s a strong business case for it. Consider for a moment the ethical responsibility to ensure your site is barrier free to anyone regardless of who they are. Consider that your clients and customers are people to respect, not problems to solve.

It’s time to make your website accessible.

4 reasons for choosing an all-in-one design and development agency

Posted on by allison

Whether for your higher education institution, nonprofit, or your software as a service (SaaS) firm, a website build is often thought of as a two-phase process during its construction. 

Firstly, you need a platform design and strategy. You’ll want to study your typical website visitors, organize and audit your pages and content, and create an information architecture while thoughtfully choosing fonts and colors for your user interface. The UX design process is a crucial part of every platform build, ensuring your site will be a pleasure to navigate while meeting website visitors’ needs.

Website development naturally follows once you have your design. Engineers code, test, debug, and retest every component of your site to ensure it’s functional, accessible, and secure before it’s ready to go live. 

It’s not uncommon for companies to think of each of these vital phases — design and development — as two distinct and separate entities. Because of this, folks often consider partnering with one agency to design their platform and another to develop it. 

We don’t deny this strategy can produce fantastic websites. In some instances, choosing a specialized agency to focus on a single phase of your site build makes sense. However, we’d like to highlight how design and development are not as independent as some think, and there are advantages to having the two phases connected. 

Working with one agency that’s mastered both design and development can save you time and money while ensuring your site is a joy to use and will be for many years to come. We’ve pulled together our top four reasons firms should consider choosing one agency for designing and developing their website.

Four reasons for choosing an all-in-one design and development agency: 

1) You’ll launch faster.

When gaining both design and development from the same agency, your project life cycle is more efficient, meaning your website is able to go live faster. This valuable time-saving is the result of consistent alignment between designers and engineers.

Whenever Kanopi inherits a platform designed elsewhere, we ensure the strategic thinking isn’t lost in the transition as this is one of the most common blockages when your platform moves from the design agency to a development agency. Accessibility issues, missed content requirements, and an unworkable CMS can also crop up when working with separate design and development firms.

One agency can ensure your site is accessible.

Design agencies that don’t offer website development in-house can sometimes create design specs that don’t meet accessibility and usability guidelines. When it comes time to build your site, engineers may need to do extra work or modify your agreed-upon design to meet the needs of everyone who uses your website. 

With design and development working together, accessibility isn’t an afterthought and can be included in the strategy and design of your website from the very beginning. 

Understanding your content requirements is more seamless.

Another challenge that can extend project timelines are missed content requirements, as design agencies can occasionally overlook your company’s content requirements due to focusing on aesthetics. Unfortunately, we’ve seen designs break when it comes time to migrate a company’s actual content over to the platform design. Without a technical review of the actual content that needs migrating, designers might miss any number of needs, including not taking image size requirements into consideration, ensuring that content isn’t being broken up into multiple components, or creating space for headlines that are too short to accommodate actual headline length. 

Conversely, what if the designers create visuals around content that doesn’t yet exist? It can look great having all the bells and whistles in the design, but if the content doesn’t exist, someone has to make it, or the design may look flat.  Make sure things like images, videos, and content fields exist or can be created before signing off on that design.

With development and design working hand-in-hand, engineers are able to provide expertise on content needs while designers are beginning to craft a beautiful website that’s functional. 

You’ll get a CMS that’s easier to use. 

Lastly, disjointed design and development can sometimes leave behind the unique needs of content managers. Busy content teams need a content management system (CMS) that’s a breeze to use. With a focus on front-end design, design-only firms sometimes provide designs that do not lend well to editing specific assets in the CMS (for example, image sizes that require Photoshop or another outside tool to crop to proper sizes). Development can lean into the design process to help integrate a CMS that’s user-friendly, no matter the skill level of your content team members. 

Additionally, having a pattern library within your CMS is crucial to keep your site’s design consistent over time. Design firms tend to design each of your web pages, but rarely design full pattern libraries that work across an entire site that help maintain a smooth workflow between design and code when it’s time for development. Creating every web page in isolation leads to multiple ways to display content, slowing down your project.

When Kanopi develops websites, we look for patterns we can apply site-wide to eliminate gaps that commonly appear through separate page design. Without pattern libraries, numerous patterns may be created for similar content, which can lead to increased complexity, longer development time, and the need for additional project management support with a heftier price tag.

2) Feature development is easier.

When you decide to partner with an agency providing both design and development, designers and engineers work in tandem and are able to understand the nuances of the features necessary to make your website the best it can be. 

When the Golden Gate National Parks Conservancy and Institute of Golden Gate partnered with Kanopi, we were able to take a strategic approach to their visual design, factoring in their complex infrastructure and functionality requirements. 

Mapping, in particular, is a complex feature for the park and one that needs to look great while providing an intuitive user experience and a CMS behind the scenes that’s fit for purpose. Kanopi created a content administration experience, allowing for polygon drawing and mapping files to direct intricate paths for hiking in the park: 

An example of one of the many available maps of the trails managed by Parks Conservancy. This one overlooks the Golden Gate Bridge.

3) Project management is more cohesive.

When you partner with an all-in-one agency, you ensure the smoothest transition possible as your platform passes from the designers to the engineers.

Designers within an all-in-one agency understand the skillsets, workflow, and limitations of the engineers with whom they work. They’re familiar with what design practices are going to make the job of the developers as smooth as possible, and which ones might come up against issues in the build phase. Those built-in efficiencies make a huge impact on time and budget.

Working with separate design and development agencies can lead to numerous layers of project management with a costly transfer (in terms of both time and money) between them all. 

Working with an all-in-one agency can also help your internal project management go more smoothly. You can avoid misaligned team expectations with the help of the agency, which will work to meet with senior-level stakeholders regularly and keep them up to date on your web strategy. Learn more about this process in our guide to avoiding the “Swoop and Poop.”

4) Your designs will have more longevity. 

The final reason for choosing the same agency for both design and development comes down to the sustainability of your site. Websites designed and developed by the same team prove the test of time because designers, engineers, and project managers can collectively gain a deep understanding of your company’s mission and long-term goals. They are able to strategize a plan for your website post-launch, so it continues to support your business goals and remain a great site to interact with next year and the year after next.   

With design files at the ready, simple navigation enhancements and tweaks to key elements can be made quickly and easily, keeping your website looking sharp and delightful to navigate.

Weeks can stretch into months for design updates that need to go back to an original contractor that crafted your initial platform design. An all-in-one agency becomes an expert in your business, armed with a thorough understanding of your history and unique growth plans.

Build a better, more sustainable platform with Kanopi.

Kanopi is a close-knit team of designers, engineers, and project managers, who are all working towards the same mission of pairing creative solutions with solid and sustainable architecture while keeping our client’s entire ecosystem in mind.

We’re incredibly proud of the award-winning websites we’ve designed and built for our clients. In addition to design and development, we provide robust support after your website goes live, going above and beyond basic bug fixes and security updates. 

‘When I describe Kanopi to others, I talk about customer service, great services, a sustainable site, and a relationship that gets better over time. Every project we have done with Kanopi has improved our site and made it work harder and better for us.’

Laura H, Digital Marketing Manager, Stratford Schools

Are you interested in partnering with us? Reach out if you want a better, more sustainable site.