Accessibility Overlays: Buyer Beware

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

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. 

Reflecting reality: finding diverse and inclusive stock images for your designs

Diversity is a broad term. When used in relation to image sourcing and representation of content on a web design, blog post, press release, or other live content viewed by an audience, it’s important to address the full scope of diversity within the audience. This scope may vary based on the topic of the content. But to be inclusive we need to take into account the demographic of an audience from multiculturalism, age, identity, sexuality, and physical or mental impairments.  

Images are the first step to capturing your audience’s attention. Content represented with images has been shown to have a much higher engagement than content without images. So while sourcing an image, it is critical that it not only properly represents the topic, but takes advantage of the opportunity to appeal to multiple demographics within your audience. 

The demographic of an audience varies depending on the product, service, or information being shared with the viewer. While addressing inclusivity we should take into account what images will best help tell the story of our brand and best align with our target audience. Consider the following:

  • Do they have disabilities or impairments of any type?
  • Is the clientele of a certain age?
  • Is the clientele of a certain gender?
  • What are the gender roles we wish to portray or speak to (e.g. who is pictured doing the dishes or mowing the lawn)?
  • Are we assuming romance is heterosexual? 

Currently there’s a lack of inclusion in media

Research from the Geena Davis Institute has suggested that while 19% of people globally are 60+, only 7.0% of characters in images in the media today are ages 60 and older. Similarly, 7.2% of characters are shown with large body types (though 39% of people globally have large body types), and only 1.8% of characters represent the LGBTQ+ community (while 10% of people globally identify as LGBTQ). That is just a small window into the lack of inclusion, making it even more important to be mindful when addressing the varying demographics within an audience. 

Chart showing the lack of representation in media for those who are 60+ years old, have larger body sizes, and identify as LGBTQ+.
Source: the Geena Davis Institute

In order to make the search for more inclusivity easier, you’ll need to make a conscious effort to narrow down not only what would best speak to a target audience, but also best represent your brand. Knowing the who and what sets the foundation for how to search for what we’re looking for.

Keywords control our results

When conducting an image search on any platform, keywords help narrow the search by allowing the algorithm to better understand our visual needs. There are a few different algorithms running that control how our search results. The primary algorithm is based on keywords, popularity, and engagement — essentially, how many times a photo has been downloaded. 

This also means that based on historical bias, the highest popularity and most engagement on images results in highlighting that historical bias e.g., a range of potential white people with a few token people of color included. This means we might not get offered the images that best represent our target audience or brand right away.

In order to help counteract the impact historical bias has had on image search results, stock photography platforms such as Getty and Shutterstock have created a secondary algorithm. This secondary algorithm looks at the region where the search is being made and tries to match that region’s racial demographic when providing the results.

This is one action the platforms have taken to help us in our search for more inclusive images, but what else can we do? Add detailed keywords. 

When we don’t have the ability to add filters detailing ethnicity, sexuality, or physical and mental impairments, keywords should be prioritized to help refine our search for more inclusive images. For example, searching for a “person walking” may lead to various people walking, and they will most likely be white individuals. If we change our search to “black person walking”, “latino person walking”, or “mature adult walking” it allows the algorithm to refine our search based on keywords.  

Where to look for inclusive images

Because caucasian individuals are overly represented on stock photography sites, sometimes keywords don’t always lead us to our perfect image. Below is a list of free and paid resources that allow for more diversity. 


CreatHER Stock:

Run by founder & brand designer Neosha Gardner and photographer I’sha Gaines, this authentic stock site is a finely-tailored “for-us-by-us” set of lifestyle and business visual content or images featuring Women of Color. A subscription runs $10/month, with the option for more advanced plans at a higher fee. Although a subscription is required to access a majority of the photography on this platform, they do have a section of select “freebies” one can download. 


Homepage for pocstock.com

pocstock

pocstock is a global media company committed to creating and delivering premium stock photos, videos, and illustrations where people of color are front and center. They have flexible pricing plans so you can access their 150,000+ assets within your budget.


Nappy.co

​​Nappy.co is a free stock photography site dedicated to making it easy for companies to bring people of color into their designs, presentations, and marketing collateral.


The Gender Spectrum Collection

The Gender Spectrum Collection is a free image sourcing resource intended to help media better represent members of non-gender conforming communities. This collection helps depict people not necessarily defined by their gender identities, but rather simply people with careers, relationships, talents, passions, and home lives, just like everyone else in the world.


Pexels

Pexel is a well-known stock photography site with no subscription required. When it comes to diversity and inclusion they have created an environment where underrepresented communities have an opportunity to shine … as long as you include the ethnicity in your search. Multicultural, LGBTQ+, and impaired individuals are represented. 


Gallery Stock is a subscription-based stock photography with an extensive collection of images accompanied with an extremely detailed filter to refine the search. Their subscriptions prices vary based on the needs of various users. In contrast to a majority of its competitors, Gallery Stock has the option for a custom shoot. This is a great option if you don’t quite find what meets your needs amongst all the resources at hand, don’t have a photographer, and have a budget that allows for custom shots. 


Getty Images

Getty (also owner of Shutterstock) is one of the largest and most well-known image sourcing platforms, and as such, has a great depth of diverse and inclusive images, videos, and animations for all demographics. For inclusivity, specifically Project #ShowUs, project is a category dedicated to providing more inclusive imagery. Getty also has a meticulous filter system that allows you to add detailed filters to refine your selection during your search for diversity. There are a variety of paid subscriptions or packs. Because Getty is a pricier option, it’s best for teams, agencies, or anyone who consistently sources new images as there will be a high return on investment. 


Shutterstock

Shutterstock (also owned by Getty) is another well-known paid image sourcing tool from which many designers and marketers source. While there are a variety of images for inclusive imagery, one search in particular that really stood out for having an abundance of photos for such an underrepresented demographic — ”disability in tech”. When searched, the result leads to 1,714 high-quality photos, vectors, and illustrations. This collection makes sourcing images of those who may have disabilities working in tech that much more visible.


Adobe Stock

Adobe Stock is another well known source amongst the creative community as it is part of the Adobe platform. This is a source that is recommended for teams, agencies, or anyone who consistently sources new images as there will be a high return on investment. Although Adobe is not equipped with detailed filters, they do have an abundance of images. Using keywords will make those diverse images more visible within your results. 


Flickr 

Mapbox has taken to Flickr, a stock photography sourcing and sharing site (much like Pinterest), to create a board of more inclusive imagery. They recently launched a collection dedicated to “Queer in Tech” in order to promote the representation of queer and gender-nonconforming individuals in tech. As a demographic that is often underrepresented throughout the industry, Flickr has created an opportunity to help shift that statistic using a collection of images ranging from collaboration and teamwork, leadership, design, engineering, to mobile development.

The inspiration for this collection arose from a Twitter post about a board created by Stephanie Morillo and Christina Morillo dedicated to Women of Color (WOC) in Tech, also an underrepresented demographic within the industry. The collection, titled #WOCTechChat, has a wide range of WOC in various technical professional settings. 

Flickr in itself is a useful and free image sourcing tool with the option for a pro subscription.


Macro

Macro is a new and emerging stock photography project providing free stock photography to its visitors. The platform allows users to download diverse imagery, captured by diverse photographers. Macro benefits communities by ensuring the photographers themselves are paid and have a full profile to showcase their work and information in order to reach potential new clients or opportunities. 

“I think diversity in front of the camera is easy. Diversity behind the camera is difficult. Often black or trans photographers see the world very differently, even behind the lens.”

Zora Khiry, New Orleans, Macro featured photographer

Diverse images exist to support your brand

Brands should create content that speaks to their audience as a whole. Young, white, straight, able-bodied, cis-gender men in imagery are very common, but not representative of every audience. Hopefully these resources will assist you in finding images that best represent your brand and give you a more inclusive voice for all demographics within your audience. 

Inclusive & Accessible Forms

Imagine you’re just outside of a coffee shop. You can smell the warm smells of coffee and teas, and freshly baked cookies. The air outside is brisk and the promise of tasty warmth is too much to resist so you go to enter the store and… 

  • someone is standing in front of the door saying “you don’t belong here”.
  • you are allowed in, able to order and pay but you have to let them call you “Lamp” 
  • you are allowed in, able to order and pay but only if you order in gibberish — and you must take whatever they think you ordered.
  • you enter the shop but are not told how much the coffee will cost and you’re not allowed to pay for it anyway.

Seems like a pretty awful experience, right? When we reach out to our website users to ask them to engage with us it’s like saying they should come in and buy a cup of coffee. And when the experience is not inclusive… well, I think you get the idea.  

Your website is the doorway to your organization. From higher education, to non-profit, to commercial establishments, you don’t want to turn people away because a form isn’t inclusive. 

What does it mean to be inclusive?

One of the key challenges is the intimidation surrounding the term “inclusive.” Some leaders simply don’t know where to start, and may be tempted to do nothing rather than risk taking a misstep. In reality, this approach is like the coffee shop owner continuing to call someone the wrong name because they are afraid to ask that person what their name is. Instead, it’s a better approach to admit you may not get it perfect the first time, but that you are open to learning. 

While it might seem vast and impossible to account for all the variables, and there’s a risk of not doing it correctly the first time, doing nothing is not an option. We live in an increasingly diverse world, with people coming from different cultures with different naming conventions and needs, and we have to accommodate different standards to include as many people as possible. You are responsible for how you present your information. That means that the answer is to find a way to make this easier to adopt into your organizational culture.  

In this article we’re going to break down inclusivity into three easy to manage concepts:

  1. Identity
  2. Accessibility 
  3. Usability

From here, we’ll discuss how to apply this to your website’s forms. Improve your website and your culture with greater understanding and empathy by knowing how to better respect your users so we can all enjoy a great cuppa and a cookie. 

Identity

I take my coffee seriously and no one can tell me how to take it. I don’t take it the same way as I did at 14 (yes, I regularly drank it back then) as I do now. And that’s just coffee. How can we impose, even ‘harmless’ limitations, on the important aspects of someone’s identity if we wouldn’t want our coffee order defined for us?

Every website visitor looks at your site through the lens of their identity and the experiences that have helped shape their perception of that identity. But how can we break that down? We cannot but we can focus on key areas that make it easier to be more inclusive to all.

  • Gender 
  • Cultural 
  • Ability 

But what do those terms mean? 

Gender identity is the understanding that the societal imposition of binary gender assignments, or specific roles/limitations associated with an assignment are exclusive and unjust. The acceptance of the idea that gender is binary is that it’s “just how it has always been,” but studies of ancient histories show that to be false. It is just how it has never been.  

Cultural identity shapes who we are in relation to where we come from. Though racial background is an aspect of this, this also includes focuses such as language, religion beliefs and other aspects by which one defines their personal history.

Ableism assumes a person’s abilities: physical, mental, environmental or otherwise. Going back to our coffee shop: it would be like the stairs to the doorway that assumes all those who want to purchase coffee and a cookie have the ability to ascend those steps. Ableism is often hidden in the most innocent language. The way in which we navigate the world around us, online or off, impacts how we interpret content. 

This leads us to our second point: accessibility

Accessibility

Accessibility has gotten a lot more press over the past few years, and though most of the press has been on the legal side, it has a greater impact than that. It can be very much like being told to buy something without being told the cost or having the ability to pay. Like the whole of inclusivity, this can feel like a lot but really, it’s based upon one principal, POUR:

  • Perceivable
  • Operatiable
  • Understandable
  • Robust

It basically means that users, regardless of ability, need access to an equal online experience. Here are some examples of challenges that may impact the usability of your site:

  • Cognitive: ADD, ADHD, ASD, Alzheimer’s etc.
  • Mobility: Parkinsons, ALS, Muscular Dystrophy
  • Visual: partial or complete blindness, color blindness, vertigo
  • Audio: partial hearing loss, deafness

Let’s talk about that coffee shop more — moving onto cookies (because who doesn’t love the occasional cookie?). Each of these challenges, alone or in combination, can impact the overall usability of a website. Website content that is unable to be navigated with assistive technologies (such as  those that do not use a mouse) is as exclusive as a person standing at the doorway to your favorite store saying “you, you cannot go in there. You don’t belong. We don’t think it’s important for you to come buy a cookie.” We wouldn’t do that in real life, we cannot do this online. 

Usability

User experience has been a focus for years and it goes beyond accessibility to overall usability. Some additional ways usability can be impacted include:

  • Low bandwidth
  • Browser level blockers or plugins
  • Other environmental factors from lighting, noise, and those that may distract the mind or limit mobility.

An overall inclusive form takes these considerations into account as well, acting like the awning over the shop’s door. 

How to make inclusive forms

In our coffee shop example, to know if the shop was inclusive we’d look at the doorways, signs and images, we’d see if there was room for us to wait in line and to pick up their drinks. We’d move through a space to make sure the shop itself was set up for us to go in and buy that cup of coffee and a cookie. We’d know, walking through there, what we are doing and why.

This is not so different online. The first step to making your forms inclusive is to really think about why you are collecting information. 

  • What is the strategically chosen goal or KPI I am focused on when I am asking these questions? 
  • How will the information I am collecting help me reach that goal or KPI? 
  • Am I asking questions I don’t really need the answer to?

In many cases we find ourselves wanting to collect information on a form to help us get to know our users better, to build better personas and the like. We don’t have the small talk about the day as the coffee is poured to learn about our customers, so, online we try to get more info at each touchpoint. We recognize that information can be valuable when it comes to learning about your customers. The idea is that digital connections and trust have to come in another form. As an industry we’re coming to this with greater respect for the end user’s right not to share or be forced to check boxes that do not align with their identity. 

Here are some common form fields to think about when considering your approach:

  • Honorifics: often the first field on a form, it can set the stage for the rest of the experience. Expand your options to include non-binary as well as professionally respectful selections such as  Dr., Mx., Rev.
  • Names: how we call ourselves matter. Overall name fields need to lose many of the restrictions we place on them. That means no minimum (so that individuals with last names such as Yu are validated) or a maximum (Balasubramanian and other longer names have no reason to be abbreviated) character limit can be imposed. Some names are hyphenated or have apostrophes which can be flags as having special characters.
    Additionally, be mindful when using validation as history is full of people with names, such as Crazy Horse and Black Hawk that can teach us not to make assumptions. The easiest way to accomplish this is to allow for a single name field without character limits and minimal, if any, validation requirements.
  • Pronouns: there are more than binary genders and some individuals may have more than a single set of pronouns. Start by adding them/them to the selections and allow for these options to be presented as checkboxes to allow for individualized experiences. Be mindful of how these fields are asked for as well; they are not “chosen” pronouns, they are simply a person’s pronouns. 
  • Gender: do you need this information? If you are not an organization that requires a gender to perform its duties, consider adding “I’d prefer not to say” and making this an optional field. If you’re a medical institution, perhaps biological sex is a necessary field and gender may play into how a medical situation is discussed (ie: a transgendered man becomes pregnant). If you do need this information, be mindful and respectful in the words chosen and what those words mean to the end user.
  • Race: many histories tell the story of newcomers imposing racial identities on peoples without respect to how they identify themselves. This still echoes in many forms as they collect this data. To break away from those impositions, allow for a wide variety of options, acknowledging differences between similar sounding options: for example “Black” may not be the same as “African American” and “Hispanic” may not be the same as “Hispanic” or “Latin(a/o), & Latinx”. And always present this information with the ability to select multiple options. 
  • Relationships: ensure that when asking for an individual’s relationship to another we continue this practice of respect: use “spouse” over “husband/wife”, use “parent/guardian” over “mother/father”, “child” over “son/daughter” and “sibling” over “brother/sister”. This sends an immediate message to the user that you respect those in their lives. 
  • Contact Information: if collecting email addresses or phone numbers, do not limit character counts as this may discourage those with longer names and/or phone numbers originating from a country different than yours. If you intend to call someone, please ask for timezone information.

In real life most of us are nimble and practice so many of these methods: you’d be a great coffee shop owner and we’d all love buying coffee from you. Really, this comes down to doing more online of what we do when we are face to face. 

And this isn’t theoretical. Here’s an example:

And here is a recent example where someone with a last name of only two letters can’t fill out a form:

An example of a Twitter user demonstrating a non inclusive form.

This is no different than someone standing in front of the coffee shop denying you entrance. If you expect your users to provide you information you need to ensure barriers to entry have been removed. 

How to make accessible forms 

On the weekends I love really dark roasted coffee with (preferably raw, local) honey in it. The bitter sweet warmth fills my soul and fuels my morning. But imagine you’re behind me in that shop. I’m at the station off to the side where we’re adding in sweeteners and getting napkins and what not. You see that the honey jar is on a shelf just out of my reach. I cannot get it. Would you, presumably being taller than I, help me? Again, in real life you’re wonderful and you’re all about accessibility; it’s just bringing these practices into our digital lives. And it’s important; more than 20% of adults in the US and Canada self-identify as disabled, and worldwide that percentage is nearly the same. 

And consider this: all users are differently abled from time to time due to temporary or environmentally controlled factors, like a broken wrist, or being on a noisy train. 

Here are a few things to look out for to ensure your forms are inclusive to all users, regardless of abilities. 

  • Keyboard Navigation: ensure all form fields are able to be navigated to (and away from) only using a keyboard. From assistive technologies to broken track pads — this is a must do.
  • Form Labels: include descriptive and meaningful form labels to alert all users as to what is expected of them.
  • Instructions: create clear and concise indications as to what you’re hoping to accomplish, how the data will be used, and what you are hoping the user to share. 
    • Example: Asking for a number.
      • Please indicate what kind of number you’re asking for: phone, zip code etc. 

Though progress bars can be nice, they are not required. It’s more about making the expectation as to what information is needed from the end user in each step clear. 

  • Error Messages: non-visual users won’t perceive the visual error message.  Make sure that it’s location makes sense in their journey without having to backtrack and search for why something isn’t working.
  • Time Limits: time limits can create a barrier for some users. Determine if this is even necessary, and if so, look for ways to break the form into smaller, saveable pieces to allow users as much time as they need to complete the journey.
  • Contrast: many forms try to use stylish, grayed out text. A grayed out button or text is acceptable if it’s an inactive element that is not usable but if a user is to derive information about the form or interact with a field, proper color contrast is required.

Human-Centric Respect

Meeting our needs is the most human of qualities. It doesn’t matter if it’s succumbing to the desire for a cup of joe and a treat or accomplishing a task online; if we need to complete a task we must feel welcome and able to do so. Overall it’s important to keep the forms, and all aspects of your user journey, human focused. Mindful choices that show humility on the part of your organization indicate that your users are of value to you — not only you to them. We need to start with our language, user phrases of “people of” and “people who” — acknowledging that the individuals and not an imposed demographic label is what is important to you. 

Forms are asking your users to provide their personal data as they engage with your site. An inclusive approach breaks down barriers and builds trust. It’s a big world and we’re excited to make connecting with all those humans in it a little easier. Reach out if you need help with inclusive forms or overall inclusive content strategy. 

Want more related information? We’re big on inclusion and accessibility here at Kanopi. Here are a few related articles:

50% Of All Big Projects Fail, including Websites. Why?

Marketing leaders have the best intentions going into an expensive and large six-figure website overhaul. However, according to the Harvard Business Review, as many as half of big projects like these are considered failures when all is said and done. And you’re left wondering…

  • Why did this take longer than I was told?
  • Why was more funding needed than was estimated?
  • Why were there so many surprises and scope changes?
  • Why do I feel so burned by the agency my team selected?

Now you find yourself facing down another big website overhaul and all the risk associated with it. How will you feel confident it will be successful this time? How will you be sure you won’t be left with heartburn and the same frustrating questions as last time?

In my 15+ years working in this industry, I’ve learned there are three key elements to ensuring a big website design and development project is successful.

Think of it like a three-legged stool…

1) Stakeholder Alignment

Performing candid and skillfully focused stakeholder exercises which tease out the goals and intentions of important leaders in your organization. These exercises force invaluable conversations, and ultimately lead to buy-in.

2) User Experience

Target audience data mitigates risk by replacing assumptions with defined needs and specific pain points. These eventually inform the site experience that’s most helpful to each audience.

3) Design & Development Planning

With stakeholders aligned and users defined, design and development planning can begin using models such as sitemaps and wireframes. Technical and functional requirements can start to be dialed in as well.

Unfortunately, most agencies focus only on one or maybe two of the legs described above, resulting in a shaky foundation to your project. But not Kanopi. We focus on and thrive at all three, and we make it fun along the way. 

We call this endeavor the Website Growth Plan (WGP). Through this proven process, we’re able to answer questions such as:

  • I know my site is not working for me, but how do I improve it? 
  • I will need to migrate from Drupal 7 to D8 or D9, but what will that budget look like?
  • How can I improve my SEO? How is my site performance now?
  • I need a new content strategy, but how can I do this properly when I am already so busy?

After taking factors (like the ones illustrated below) into account, the WGP delivers an all encompassing action plan for your website. By setting expectations early and often, this helps avoid the heartburn-inducing questions you were left with after your last website project.

Which website growth plan is right for me?

More information can be found here, but below is an overview of our various plans:

Website Reimagine

This plan is a concentration of UX research, content strategy, and a bite-sized amount of design. It helps formulate a game plan that drives clarity for the team and gets some early design thinking on the table. Plus, it is actually a wonderful use of time as it is the first step in an overall design and development project, as the deliverables include a roadmap to launch.

Usability and Design

This is a data-informed optimization plan incorporating user experience, visual design and content recommendations delivered in an actionable plan for next steps.

Content Strategy

Amplify your message through a powerful analysis of important information, including user needs, competitor analysis, personas and Customer Decision Journey mapping — from Awareness to Advocacy. This plan focuses on storytelling content, user experience, visual design recommendations, and more.

Drupal 7 Transition Plan

You should feel secure planning and budgeting for the transition from D7 to D8/9 or to WordPress. This plan removes the “unknown” and illuminates the details for your organization to make an informed decision and take action on next steps.

Technical SEO

This is a deep-dive to analyze your website’s SEO technical health and set you up for search engine optimization success.

GDPR & Compliance

The General Data Protection Regulation (GDPR) is a legal framework that sets guidelines for the collection and processing of personal information from individuals who live in the European Union (EU). This plan gets you compliant.

Accessibility

Reach your audience and meet compliance with Website Compliance Accessibility Guidelines (WCAG 2.1 AA or higher) through a skillful analysis and recommendations action plan.

Technical Review

A comprehensive technical deep-dive into your site’s code and technical health to provide foundational recommendations for optimization and stability.

And if one of those doesn’t quite fit? Don’t worry. Our nimble nature finds us creating custom packages for our clients to best meet their needs. Contact us to chat about which plan is the best fit.

What is an Inclusive Content Strategy?

You’ve likely invested in your content strategy to some extent, and know it’s an important part of any good business. But the term ‘inclusive content strategy’ may not be something your organization has considered. Many value-driven organizations are overlooking this vital part of creating content that puts their audiences’ unique needs at the forefront. 

The Content Marketing Institute defines it this way: We define inclusive marketing as creating content that truly reflects the diverse communities that our companies serve. It means that we are elevating diverse voices and role models, decreasing cultural bias, and leading positive social change through thoughtful and respectful content.

What is Inclusion?

“Diversity is being invited to the party. Inclusion is being asked to dance.”

Verna Meyers, Public Speaker

Often Diversity and Inclusion are lumped together, or used interchangeably. But it’s important to make the distinction, especially when creating an Inclusive Content Strategy. 

  • Diversity: Refers to the vast array of human differences.
  • Inclusion: Refers to the intent of individuals or systems to actively include and support this vast array of differences.

In other words, diversity is the “what” and inclusion is the “how”. And, that’s exactly what we’re going to cover in this article: how you can create and implement an Inclusive Content Strategy.

Inclusive Language 

The foundation of an Inclusive Content Strategy is inclusive language. When we strive to understand the ways that language often unconsciously makes assumptions about people, we can work to increase inclusivity. There are many ways we unintentionally reinforce dominant norms (like language related to gender, sexual orientation, race, class, ability/disability, and age).

To really understand what it means to use inclusive language, it’s helpful to compare it to language that isn’t inclusive. 

Ableist Language

Ableist language is any word or phrase that devalues people who live with a disability. Though often inadvertent, ableist language suggests that people with disabilities are abnormal.

Inclusive content strategy takeaway:

  • Use “people with disabilities” instead of “the disabled”
  • Use “people living with HIV/AIDS” rather than “AIDS victims”
  • Use “people who use wheelchairs” rather than “wheelchair-bound” or “someone confined to a wheelchair.”
  • It’s become rather common to use descriptive words like “crazy,” “dumb,” or “retarded” in the workplace, Using “crazy” might seem harmless, but giving negative value to words like crazy or insane can marginalize people.
  • ADD, ADHD, and OCD are common terms that are misused and can be hurtful. Obsessive-compulsive disorder is a mental illness that means so much more than a knack for organization. It is an obstacle that some people live with every day. Use words like “clean” or “organized” instead.

Gendered Language 

Another aspect of inclusive language is being sure words are gender neutral. Use words that encompass all genders, rather than only two.

Inclusive content strategy takeaway:

Use gender neutral terms:

  • Nouns
  • Titles and names
  • Pronouns

Gendered words and their better alternatives:

  • Man the booth → Work the booth
  • Man Hours → Work hours
  • Freshman → First year student
  • Stewardess, Steward → Flight attendant
  • Man-made → artificial
  • Mother / Father → Parents
  • Waiter, Waitress → Server
  • Sissy → Coward
  • Forefathers → Ancestors
  • Mr. and Mrs. → Mx.

Racial Undertones

Our language is littered with symbolism of white as positive and black as negative. Let’s eliminate using the word “colored” when describing people, instead use “people of color,” which is a widely accepted umbrella term that includes any non-white person.

“Gypped” comes from the word “gypsy,” which refers to Romanian people who are often characterized unfairly as swindlers. 

“Ghetto”  is suspected to derive from an Italian slang term for waste, and dates back to the concentration camps of World War II. it also has been used to label the neighborhoods that marginalized communities were forced to inhabit due to social and economic disadvantage. Classism and racism come into the picture when you call a place, or a person “ghetto.”

Cultural racism in phrases like “culturally deprived,” “economically disadvantaged” and “underdeveloped” are other terms which warps the truth to and frames a sense of  superiority.

Inclusive content strategy takeaway:

Avoid negative or demeaning language:

These common phrases unfortunately have negative origins:

Privilege

There’s also a lot of hidden bias around the idea of privilege when it comes to our language

For example, we shouldn’t assume that all people have graduated from high school and/or gone to college (or will go to college after high school), and we should use language that keeps this in mind.

It’s also important to use language that does not assume a certain level of financial means or certain type of vocation. For example, we should not assume that everyone is presently employed, has a stable living situation, or can afford to meet their basic needs. Using phrases like “real job” and “honest living” can be problematic by perpetuating discriminating against certain sectors of the labor force.

Inclusive content strategy takeaway:

Consider areas of privilege when writing content:

  • Level of Education
  • Socio-Economics
  • English as a second language
    • Situational privilege 

Be mindful in your writing.

It’s unfortunate how many non-inclusive examples there are in our language that have snuck in over the decades, and we aren’t even aware of it! This is why it’s important to be mindful of what you write.

Want to learn more? I’ve created an entire presentation around inclusive content strategy. 

If you need help creating an Inclusive Content Strategy, we’re here! We’ve helped many organizations create accessible and inclusive websites. Reach out to us to start the conversation. 

Four ways to optimize your higher education website

Higher education students, like many others, are facing hard choices this year. COVID-19 has changed things, and though some students are happily returning to school, others have opted to wait. McKinsey’s student enrollment survey found 15% of students are very likely to defer by at least a semester in 2020. Other studies predicted that nearly 30% of students would delay. Though the actual numbers vary by school, area, and so on, there is a lesson for us to learn from and a unique opportunity to optimize your higher education site. Start the conversation and build a connection with prospective students who need to decide what they will do for the 2021 winter semester. 

Let’s start by recognizing the great work you’ve done so far! We know many institutions have had to quickly pivot and make changes to address user needs. We’re into the fall semester, and you’ve helped many students figure out what they’re doing for the next few months. 

Now is the time to ensure your website meets your users’ needs and supports your institution’s goals for the rest of the calendar year. A college’s website is the most influential resource used by prospective students for their higher education search. You can risk losing your audience by not paying attention to your website and the power it yields. Additionally, there’s a risk of your school looking out of touch and underprepared if you don’t adjust your content strategy in light of COVID-19. 

A McKinsey report stated, “normal operations may not resume for US higher education institutions until summer 2021.” By strengthening your online presence now, you can turn people nervously researching your post-secondary school into enrolled students who feel confident and safe starting their education with you next year.

Here are 4 content strategy fixes you can make to your higher education website to increase student enrollment:

Review user personas 

We suggest taking a close look at your existing user personas and exploring how the pandemic may be affecting what they need and expect from your website content. We looked at the most common user personas held by our higher education clients and how shifts in their needs may affect your content strategy:

  • Prospective students may want reassurance their education won’t be negatively affected by changes your college or university has made as a result of COVID-19. Moreover, they may fear the choice to defer a semester could negatively impact their long term success. Ensure your content addresses their concerns, and manages their expectations. Be transparent about what you are doing to alleviate their worries, and what you’ll do to make the experience as genuine as possible. In the end, every user needs to feel valued and heard. Make content relating to their needs (financial aid, admission updates) and desires (you paused, not stopped) easy to find and simple to scan.
  • A parent of a prospective student worries about the long and short term impact COVID-19 will have on their child’s education. 85% of parents said they need to know more about what colleges and universities are doing to ensure student safety. Others are looking for what comes next. It’s vital to bring this information front and center on your website.
  • Alumni often have a deep connection and want to support their school. Make it easy for them to make a difference: from clear user pathways to donations to empowering users to share their stories, updates to your strategy can give them a clear path forward to support you during this unprecedented time.

Improve site navigation

Make it easy for students to find what they are looking for by improving your website’s navigation. 

  • Make sure your site has multiple welcome mats. Research from last year explains more and more that students are not always entering your website through the front door (your homepage). People search the web using keywords and phrases and are navigating directly to pages on tuition fees, particular majors, top professors, and campus life. Wherever a prospective student ends up on your site, they should find consistent, relevant, and up-to-date information that guides them on their journey through your site.
  • Improving your website’s search functionality can do wonders for students trying to navigate to the content they want and need, quickly and easily. Explore “fuzzy” search or optimize a no results page to help them find what they are looking for. 
  • Ensure users can access your content. Users cannot take action if content is out of their reach:
    • More than 60% of users are surfing on their phones, and more than 50% of searches take place on a mobile device; it’s vital your website offers a robust mobile experience. 
    • Approximately 25% of US and Canadian adults self-identify as disabled. With nearly a quarter of your audience affected, accessibility is more than a legal matter. 
    • Many sources have estimated that nearly 50% of searches will be done via voice by the end of this year, which means that the accessible features you build in will help more of these users find you. 

Your content should be as easy to perceive and navigate regardless of what medium the site visitor uses. Take a look at Kanopi’s top tools and tech to use to help you meet accessibility standards.

Refine call to actions (CTAs)

Audit the existing CTAs on your landing pages through the lens of someone who may be anxious about enrolling in college during a pandemic. Do your CTAs take into account people’s current fears? Do they reassure prospective students while at the same time convincing them to do something? 

  • Make it personal. Use pronouns ‘you,’ ‘us’ and ‘we’ to build a digital connection with prospective students.
  • Use empowering, reassuring language, and an empathetic tone. The unpredictable nature of COVID-19 has made students anxious about starting college. Address this in your call to actions to connect with your users emotionally to empower students to take action.
  • Simplicity converts. The key to a successful call to action is to tell people what they should do and why they should do it in the most direct way possible. 
  • Make CTAs accessible. don’t use vague language like “learn more” or “read more.” For blind users, it might not be clear what will happen when they click. Instead, get specific, such as “download the white paper” or “subscribe now.”

Where possible, go virtual  

We know the pressure is mounting on many colleges and universities to embrace more online learning tools due to the COVID-19 pandemic. If your institution has plans for virtual learning, you should focus on moving towards that, and your online presence should reflect and complement this.

  • Virtual tours can give people a greater sense of what your school represents and help prospective students decide if it’s the right fit for them. Even if you choose to deliver a large proportion of classes online, virtual tours can strengthen your school’s brand, presence, and create a sense of community. Make sure to include captions so all users can perceive this valuable content. 
  • Consider new ways to connect prospective students with faculty, staff, guidance counselors, and each other through your website. Could short video clips give students a clear idea of what they should expect from a particular curriculum, and what enhanced support is available? If you go that route, remember that representation matters! 
  • Help alumni tell their success stories online. Allowing for user-generated content will make it easy for them to share photos, videos, and quotes explaining how attending your school impacted their lives and careers for the better:
Image from the San Francisco Conservatory of Music case study
San Francisco Conservatory of Music case study

Building connection

Engaging prospective students through a robust online presence and by building a digital connection with them, you can build on students’ trust that your online classes now and the 2021 courses you’re planning will be just as rewarding. 

Need some assistance with how to optimize your higher education website to increase enrollment? Kanopi can help! Kanopi has years of experience building and supporting higher education websites across the United States and Canada. We’ve partnered with UCLA, Stanford, and the University of British Columbia, to name a few. Contact us to start the conversation

How to Make a Website Last: Best Strategies and Tools

One of my favorite things to talk about with clients is how to get the most of your budget. As Kanopi’s CEO, I spend every day doing exactly that. So much so that I created the above webinar around making your site last for the long-term. But I also wanted to touch on some of the principles and tools here in a post

In the older days of the web, it was standard to redo a site every few years. There were enough drastic changes in the early days of the internet that every few years it was imperative to overhaul a site to keep up. It cost a lot of money, and could take anywhere from 6 to 12 months depending on the scope. 

But here at Kanopi, we’ve recognized that the internet has grown up, and we’ve gotten away from that approach. Can we do a full overhaul if it’s the best option for your project? Absolutely! But we prefer to adopt a more Kaizen approach. Why? Because websites are never done. We like to say the first day of your project is actually the day your site launches, because yes, it’s wonderful that you’ve built a site, but now it has to evolve and grow over time. And the best way to do that is via a continuous improvement approach that improves it in small, positive increments over time. It’s more sustainable for both your team and your budget.

How do I apply continuous improvement to my website?

Usually you know when it’s time to give your site some love. It’s typically when you can say yes to any number of the following questions: 

  • Has your organization evolved?
  • Has your industry evolved?
  • Can your users find what they are looking for?
  • Have your users’ needs changed?
  • Is your content presented effectively for your users?
  • Is your conversion rate declining?
  • Have your search engine rankings changed?
  • Have your competitors changed their approach?
  • Is your site fast enough?
  • Does your site overuse design trends?
  • Does your site look great on mobile devices?
  • Is your site easy to use and edit?

So let me ask you: even if you can answer yes to just ONE of these questions, why not make that small improvement now? Why wait until you have lots of issues that require a larger lift? If you had a 100 year old house, you wouldn’t ignore all the small problems that accumulate over time. You’d fix them as they presented themselves, or else your house becomes an expensive money pit (or a total tear-down). 

This is where you need to think about your site in terms of a circular flywheel. Don’t think about your site in terms of Strategy > Design > Development > Launch, and then let it sit untouched for a while.

Instead, think of a circular process of Strategy > Implement > Learn & Iterate, where after you Iterate, you revisit Strategy again! This will translate into a site that is always being refreshed and improved without breaking the bank.

Traditional vs Growth-Driven

Start with Strategy

No matter what we do, at Kanopi we always start with strategy. Here is where I recommend focusing on what matters most to your user and stakeholders, and don’t waste your time on things that don’t matter. This is where you can look at doing any of the following activities; 

  • SWOT analysis: outline your strengths, weaknesses, opportunities and threats. 
  • User journeys: look at how your users go through your site. What pathways do they take, and do those align with the pathways you want them to follow?
  • Personas: how well do you know your users? Are you targeting the right audience?
  • Competitive Analysis: what do your competitors do well? What do they do poorly?
  • Data & Analytics: what does your data tell you? Do you know how to interpret it?
  • Site Audit: is your content old and irrelevant? It may be time to either update or archive it.

Once you’ve taken a look at all those items, then it’s time to make a plan for moving forward. There are many areas of your site where you can make incremental — but positive — improvements to address the above strategic questions: 

  • Information architecture: should you rework your links, or change how your site is structured?
  • Usability: how can you make it easier for visitors to use your site? 
  • Design: small design enhancements
  • Accessibility: how accessible is your code and your content?
  • Performance: is your site as fast as you need it to be?
  • Content: are your calls to action clear? Does your content speak to your users?

Consider these quick wins

Decide which of these matter the most to you and can propel you forward in the best way. You can start with some low-hanging fruit, such as:

  • Navigation: remove links people click on the least.
  • Simple theme changes: refining the type and tweaking the color palette.
  • Focused design: make design alterations to the homepage or key landing pages.
  • Accessibility: make sure your content is accessible as possible, including your images. 
  • Reimagine or archive content: freshen up content that needs it, and archive content that is no longer useful or relevant. Check out this presentation about auditing your site for additional help, as well as this one on content strategy improvements you can make today.

Now it’s time to Implement

Here’s where we operationalize the plan. Break the work into two- or three-week long sprints. Determine what you can get done in that concentrated timeframe that will get you the results you need. It sounds a bit like agile development, and it is in the sense of breaking it into smaller chunks. A sprint schedule helps deliver value quickly and consistently. As we like to say: small bites create big wins!

Learn and improve from there

Now that you’ve completed that one discrete piece, measure it. How did it go? What can be improved? 

Doing these activities can also help keep the momentum going: 

  • Share wins and successes: talk with your team about what worked and how it can be made even better.
  • Measure regularly (weekly/monthly/rolling): by doing regular data checks, you can keep on top of what is still working over time. 
  • Schedule user testing: remember, your site is all about meeting your users needs. Test with users regularly to make sure you’re still meeting their needs. 
  • Use sprints to integrate feedback: you can even set up feedback on a sprint schedule. 

Will all that information, keep the momentum going and head back to Strategy! 

Continuous improvement keeps you nimble: you’ll to get into a place where you’re doing less, launching more often, and making more impact. And if something doesn’t work as well as expected, luckily it’s over after a short time frame, so you can move on to the next piece. 

And if you have a Drupal 7 site, we wrote a whole blog post specifically about how there’s still life in your D7 site. You can keep it going for a while past its expected end of life in Fall 2021. (On the other hand, if you’re determined to upgrade to Drupal 9, check out our guide on D9 planning: a guide to upgrading or extending the longevity of your site.)

Tools for making your website last

Here are some tools that can help you extend the life of your site. This is not a comprehensive list (each category has many more great options), but these are some of our regular go-tos:

SEO 

Search engine optimization is an ever-evolving practice of increasing the quality and quantity of website traffic by increasing the visibility of your website (or a specific web page) to users. But you don’t have to be an expert in SEO to make demonstrable improvements to your site with some handy tools:

  • Google Search Console, Bing Webmaster Tools: if you are not communicating directly with the search engines, you are missing out on valuable tools and information.
  • SEM Rush: research both your and your competitor’s keywords, and identify pages that rank for the terms for which you want to rank.
  • Screaming Frog SEO Spider: crawl your site like a search engine does, and see exactly what they see.  Helps identify issues and opportunities.
  • Moz Local: if you manage a local business, check out this suite of tools that helps you define data about your business, and distributes it to aggregators and sites where you want to be found.
  • Majestic: research and develop backlink strategies with Majestic’s incredibly vast link database.

Accessibility 

These days it’s imperative to make your site accessible. In many industries — and the number is growing — it’s illegal to have an inaccessible site. These tools can help you get there: 

  • Wave: a browser extension that checks for compliance issues found in Section 508 and WCAG 2.1 guidelines.
  • Lighthouse: an open-source automated accessibility testing tool. Available as a browser extension, from the command line, or as a Node module, this tool will scan the URLs for performance, accessibility, SEO, and more.
  • Axe: Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It’s fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.
  • SiteImprove: their content and accessibility audits use Web Content Accessibility Guidelines (WCAG 2.1) as its guide. The tool checks that there are no broken links or misspellings, and also identifies when page content is too dense or hard to comprehend.
  • TotA11y Plugin: this tool helps visualize how your site performs with assistive technologies.

Additionally, here’s another blog post we wrote about Kanopi’s Favorite Accessibility Tools. Also read our thoughts on how content editors hold the keys to an accessible website.

Usability 

It’s critical to test with your users to make sure they are getting the information they want when they want it. These tools will help achieve that:

  • UserTesting.com: a usability customer experience testing platform that gets on-demand feedback about a product or service from real users.
  • HotJar: HotJar uses heatmaps so you can see how visitors are really using your website, collect user feedback and turn more visitors into customers.
  • Crazy Egg: you can use Crazy Egg to learn what your web visitors are doing. Heatmaps, recordings, A/B testing & more.
  • Optimizely: It’s best known for its A/B testing, and allows for terrific segmentation for more accurate results. 

Measuring Data 

We always recommend measuring what matters, and that will be different for every organization. What matters to you? Is it the number of page views? Is there a certain conversion goal you are trying to hit (like number of donations, or email newsletter sign-ups)? Is it page views? Or perhaps speed? 

  • Google Analytics: this is Google’s free web analytics service that allows you to analyze in-depth detail about the visitors on your website
  • Google Tag Manager: a free tool that allows you to manage and deploy marketing tags (snippets of code or tracking pixels) on your website or mobile app without having to modify the code.
  • Lighthouse (again): because this open-source automated testing tool does so much more than just accessibility, we had to include it here as well. Available as a browser extension, from the command line, or as a Node module, this tool will scan the URLs for performance, accessibility, SEO, and more.
  • GTmetrix: a free tool that analyzes your page’s speed performance. GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them.

However you measure your data, you will have to track your users. And it’s critical to find the balance between learning from your users without getting insidious with how the data is being collected. We all want to know more so we can make better websites that attract users, but we need to be responsible about it!

With small bites, you can make your website last!

At Kanopi, we love to say, “small bites create big wins!” And it’s just so doable: you really can make huge improvements in smaller chunks to avoid feeling overwhelmed and also keep your budget in check. 

But if you do need the assist to make your website last for the long-term, that’s our specialty. Contact us. We’d love to help. 

Inclusive Storytelling

What is an inclusive content strategy? It is about presenting your digital content in such a way as it is able to reach and speak to (not talk at) the largest audience, regardless of what makes us different. There are countless variables that allow users to be truly individual. It sounds like a big mountain to climb, but it doesn’t have to be. Let’s look at what we should consider and how we can approach our content to be inclusive with inclusive storytelling.

“Diversity is being invited to the party; inclusion is being asked to dance.”

Verna Myers

Diverse vs Inclusive

Diversity is the acknowledgment of what makes us different, where inclusivity invites all the different users to participate in the conversation. The diversity of your users can be calculated through statistical or survey data — it is reliant upon who they are. On the other hand, how inclusive your content is, is all about you. You’re fully able to make a positive impact. 

How are we different?

Each of us is unique and continually in a state of growth. While some differences may present challenges online, all will impact the way in which we consume content. Accessibility is focused primarily on the challenges and works to create equal online experiences for those who live with ambulatory, visual, audio and/or cognitive differences. An Inclusive approach takes Accessibility into consideration while looking at a larger picture. Things such as gender identity, socio-economics, sexuality, and familiar differences play a large role in how we interpret information. 

Let’s break this down a bit: Many years ago my mother held up a plate in front of me and asked what shape I saw. I told her I saw a circle. She tilted it slightly and asked what shape I saw: an oval. She then held it flat and asked again: a line. The plate had not changed, its content and composition were the same. My perception of it changed and though I intellectually knew the shape of that plate — it did not change the distinctive differences in point-of-view. 

Unlike the plate, your content is more malleable. Inclusive content acknowledges the different ways and tries to invite all perspectives to participate in the user journey you’re building on your site. 

What are the keys to speaking to a larger audience?

Empathy

Empathy is at the heart of all effective communication. 

“Great marketers have immense empathy for their audience. They can put themselves in their shoes, live their lives, feel what they feel, go where they go, and respond how they’d respond. That empathy comes out in content that resonates with your audience.” – Rand Fishkin

Practices such as the unconscious use of gendered language, financially-dependant sense of accomplishment, or the bias towards those who do or do not choose a family life are present all throughout society. To be clear, yes, there are times that your subject matter may focus more on a specific target market that meets demographics. If you sell diapers you’re going to use more family-focused language. If you are a men’s health publication, your content will be geared towards a gendered crowd. That said, in both of these examples, there are secondary, “stakeholder” personas that you’re reaching out to too and those personas need to feel included. 

Having inclusive content does not mean you are never going to reference the expensive new car or any particular gender. Having empathy means you are making a conscious decision to speak to an audience while acknowledging that others may also want to learn about this too. You’re inviting others to participate without losing your focus.

Awareness

Most marketers spend countless hours identifying their target market and building personas. You make yourselves aware of demographic information, buying histories and other patterns of behavior. You mix data and instinct to create a picture of “Robin Smith” and put their picture on a cubical wall so everyone in your department will remember to whom you are speaking. 

  • Do all of your personas all self identify as a binary gender?
  • Are they all married and if so, are same-sex couples represented?
  • Are all of your personas neurotypical or are they ADHD or on the spectrum?
  • Do they experience physical challenges? 

Representation matters. 

The words we choose and the imagery we use can include or exclude audiences without intent. Ensure that your process is building awareness: starting from your personas and straight through to execution. Let your users see themselves in your content. Inclusive content lets them know that you are aware of them – that they are seen and matter to your brand. 

Accessibility

We cannot talk about inclusive storytelling without talking a bit more about Accessibility. With a lot of the focus typically put on visual and audio challenges – there are many out there that can be assisted through an inclusive content strategy. Here are a few ways to help:

  • Determine the reading level you’re writing for and use a free online tester such as a Flesch Kincaid Grade Level to assess if your content is speaking to or at your user. 
  • Keep each phase of the user journey as succinct as needed to help users who may struggle with focus make it through to the next step.
  • Be wary of words that may inadvertently alienate a portion of your market.
  • Remember that Accessibility often focuses on allowing users to take in the meaning of content through more than one way simultaneously; ensure your words and images (and their alt text) compliment each other and create a clear message. 

Empower Users

Every great user-journey ends with the user being the hero as they cross the line to conversion. We are not selling products or promoting a service any longer, we are building a brand’s story one piece of content at a time. Let your users be seen, be acknowledged and become a part of the story through inclusive practices. 

Want to learn more about inclusive storytelling? Visit our own AmyJune Hineline’s recent talk from NTC on Inclusive Content Strategy.