Accessibility Archives

Four ways to optimize your higher education website

Posted on September 21, 2020January 29, 2025 by allison

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

Posted on May 7, 2020May 28, 2024 by allison

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.

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

Posted on November 25, 2019April 15, 2025 by kanopi_admin

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.

Web Accessibility: 4 Best Tools & Technologies

Posted on October 4, 2019May 28, 2024 by allison

Here at Kanopi, we’re always paying attention to web accessibility testing. Ensuring that our clients’ websites adhere to accessibility standards is something for which we budget, because having compliant websites is important to guarantee that everyone has access to the web. As such, this is a list of our favorite web accessibility tools.

The World Wide Web Consortium (W3C) says, “The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.“

A11Y testing overview

A11Y is a numeronym for accessibility. “A” and “Y” being the first and last letters of the word accessibility with the “11” being the number of letters in between. Using specialized A11Y testing tools, we can run a website audit to determine how it can be improved for accessibility standards. These tools check for key elements on a webpage such as color contrast, heading levels, link focus and visibility, buttons, form inputs, alt text for images, and content.

Testing tools serve as a means of getting a good baseline on where your website rates in terms of accessibility standards. However, a person navigating through a site while tabbing with a keyboard or using specialized text to voice or screen reader software such as Voiceover for Mac or JAWS for Windows is considered invaluable.

We also evaluate the need for ARIA (Accessible Rich Internet Applications) as a means to provide extra information for assistive technologies. In this case, it might be an ARIA label added to some HTML markup. It’s important to note that ARIA can be overused, semantic HTML goes a long way on its own. The nice thing about testing tools is that it will indicate if ARIA is not being used properly or conversely if there needs to be something added to improve our code.

For example, a <button> element is usually fine on its own but there might be cases where you have a link <a> that needs to appear as a button, for example in the case of a call to action. In the case of a link, we might add something like this:

<a href="/register" role="button" aria-pressed="false">Register Now!</a>

What we’ve done here is indicate that the role of this link is to serve as a button.

In another example, one might have a <span> or <div> tag that needs keyboard focus while tabbing. In this case, we can add tabindex=”0″, indicating that the element should be in the natural flow of tabbing through the page.

Getting started: our favorite web accessibility tools

There are a variety of tools that can be employed for A11Y testing and many are available as browser extensions. The testing tools we’ll discuss include Axe, Lighthouse, Tota11y, and Siteimprove.

Lighthouse

Chrome’s built in audit tool, Lighthouse, is a general testing tool for webpage performance, SEO, best practices, and accessibility. The underpinnings of the accessibility piece in Lighthouse is based on Axe, an open source accessibility testing suite for websites and other HTML-based user interfaces. When a test is run, Lighthouse judges a webpage’s score up to 100 for each piece mentioned above.

Pictured above, Lighthouse Accessibility score from Chrome’s Lighthouse audit tool.

Lighthouse’s advantage is that it’s built right into Chrome and test results give you a great overview of potential A11Y issues on a given webpage. We are excited about implementing automated testing with the integration of Lighthouse into our Circle CI deploys.

Axe

Axe is available as a command line interface (CLI) tool or as a Chrome browser extension. Though Lighthouse uses Axe, the Axe tool on its own gives more specific and granular results and suggestions for accessibility fixes.

Screengrab of Axe CLI with links for information to fix a given problem, one of our favorite Web Accessibility Tools.

Pictured above is Axe CLI with links for information to fix a given problem

Siteimprove

Siteimprove is an extremely thorough and detailed A11Y testing tool, it is also available as a Chrome extension. Siteimprove gives an ultra-detailed report about accessibility best practices. The nice thing about this tool is, it goes into depth with a drill-down approach with several options for filtering by conformance level, severity, and responsibility.

Pictured above is Siteimprove’s test results screen

Conformance refers to the three ranks used to grade a site based on its level of accessibility. These levels,“A”,“AA”, and“AAA”, are set forth by the Web Content Accessibility Guidelines (WCAG) with “AAA” being the highest / most accessible level to strive for.The neat thing about Siteimprove is that you can expand a section to drill down to see more specific info about an issue with recommendations, a link to specific code in dev tools, as well as external documentation for a given issue.

Tota11y awesome

One other of our favorite web accessibility tools is Tota11y for its “screen reader wand” which simulates a screen reader as you navigate through a page. This really comes in handy. In addition, Tota11y has an annotation feature for things like missing alt tags, headings, contrast, and more.

Tota11y’s screen reader wand in action, on of our favorite Web Accessibility Tools.

Pictured above is Tota11y’s screen reader wand in action

Implementing fixes

What’s great about all these tools is that they give real actionable fixes to implement. So if you’re a developer working in your local environment, you can make some of the suggested code fixes and then see the new results in real time. The same holds for content editors as well.

It should be noted that in some cases, there might be false flags that require a manual review. A good example of this is, let’s say you have a website about books and reading showing book cover images on a grid. These will probably be flagged as having “Text within images.” In context, this is fine but it’s important to ensure that these images have appropriate alternative text tags that mirror each book’s image text. Let’s say we have the book, “Ender’s Game.” The image tag for it might look like this:

<img src="enders_game.jpg" alt="Book cover of Ender's Game by Orson Scott Card">

In this case, the alt text accurately describes the text pictured on the book cover image. There will be other cases where a manual review is required so judgment and best practices come into play as well.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
— Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Assistive technologies: tabbing and screen reader software

Of course, nothing replaces real world testing whether that is using your keyboard to tab through a page or using a screen reader such as Voiceover for Mac (VO) or JAWS for Windows. It might be that in these cases, you will find accessibility issues that were not evident with any of the standard testing tools.

When we test with these kinds of assistive technologies, we gain a lot of insight into how a page is ordered and if navigating either using tabbing or with software makes sense to the user. This is why tools like Siteimprove often say that a “manual review” is required for certain elements.For example, carousels present a difficult challenge as they are notoriously inaccessible. We strive to make carousels and other widgets like this accessible using keyboard listeners, tabbing detection, and custom ids and indexes to help with assistive technologies.

This carousel is a good example. We’ve added, custom roles, labels, data elements, and ids to help with being able to fully navigate it with a keyboard.

<div class="carousel-dots" role="tablist">
    <button role="tab" class="carousel-dot" data-target="#carousel-92" aria-label="1" data-slide-to="1" id="tab-0-1" aria-selected="true"></button>
    <button role="tab" class="carousel-dot" data-target="#carousel-92" aria-label="2" data-slide-to="2" id="tab-0-2" aria-selected="false"></button>
</div>

Summary

This is just the tip of the iceberg when it comes to A11Y testing, but in this day and age, it’s something that can no longer be ignored.

Accessibility teaches the most important skill a designer can have. That skill is empathy. Because what is design if it is not the practice of giving empathy a form? Design is putting ourselves in other people’s shoes and solving their problems.
John Brownlee

Resources

Join us October 8th for a Free Webinar on Accessible Media

Posted on September 16, 2019April 15, 2025 by allison

If you’re in charge of your website, you have a lot of things to cover between keeping it up to date, entering and managing content, and making sure it’s all accessible. As part of an inclusive content strategy, how accessible is your media?

Join us for a webinar led by Kanopi’s own AmyJune Hineline where we’ll do a deep dive on making your media more accessible. We’ll cover definitions, standards, guidelines, as well as images, videos, captions, transcripts, and more. Don’t worry about which CMS you’re using: creating accessible content is achievable regardless of which content management system you use!

DATE: Tuesday October 8th
TIME: 2:00 ET
COST: Free!

UPDATED POST-EVENT: below is video of the webinar.

Demystifying Website Accessibility Compliance

Posted on August 30, 2019September 1, 2020 by allison

Bringing #clarity to common website accessibility terms

Like much of technology, the world of online and website Accessibility is full of letters, numbers, acronyms and other terms that can be confusing to important stakeholders who are invested in your site’s success. Here we will break down a few of the terms that we’ve been asked the most about.

WCAG

(“W.C.A.G.” or “Weeekag”)

This acronym is short for “Web Content Accessibility Guidelines” and in short, these are the internationally recognized standards that determine what it means for a website to be Accessible. They are based on the P.O.U.R. principals:

Perceivable: can users get to the information on the screen?
Operatable: can users who are using assistive technologies operate the function of the site?
Understandable: are users able to decern the meaning or the value of the content?
Robust: is the site robust enough to work in a variety of ways to allow all users an equal experience?

WCAG 2.0 vs WCAG 2.1

In this case, the numbers are reverencing accepted version numbers. Version 2.0 had marked a big step forward in these guidelines and this is the version that has been accepted as the “Go To” resource for some governments including the U.S. government.

Version 2.1 was the next evolution in these requirements, adding additional criteria to keep up with changing technologies. For example, screen orientation had not been considered in 2.0 as it was not as widespread, but now, it is part of standard user experience. Different orientations may present different challenges for differently-abled users and that is now recognized in 2.1.

Version 2.1 is gaining adoption internationally, including the Canadian government.

A, AA, AAA

When discussing Accessibility requirements, stating the version alone is not enough. You then need to identify what level of Accessibility you are trying to reach. What do we mean by “level”? Well, there are different benchmarks in terms of how accessible you make a website. These are broken down into A, AA, and AAA. Let’s take a moment to talk about these in more simplified terms.

A: this is the minimum you can do on a site to help reach that larger, differently-abled audience.
AA: widely accepted as the industry standard, this reaches a wide range of users, accounting for disabilities.
AAA: this is the most strict set of criteria and is often considered going ‘above and beyond.’ For some audiences, however, it should be the norm (such as organizations where a majority of users are impaired in some way, such as the National Council for the Blind (NCBI)). This formats a website to be the most compatible with assistive technologies

508 Compliance

In the U.S., the American with Disabilities Act (ADA) was signed in 1990 to help ensure Americans are provided with equal access. Over the following decade, this expanded more into the digital world as well. Section 508 was created to eliminate barriers in the digital realm. In January 2017, this was updated to be in alignment with WCAG 2.0 Level AA requirements.

But what is Section 508?

This is a set of standards, based on WCAG 2.0 Level AA. These are “standards,” not “laws”. Organizations are required to be in compliance with them however it is handled, from a legal perspective, differently than laws. Please consult your legal counsel for their interpretation.

OCR

Ironically, OCR can mean two different things in the world of Accessibility. Those who are familiar with trying to make PDFs more accessible are familiar with the phrase “Optical Character Recognition.” This is when you scan a printed document and relay on the computer to recognize the images of characters and read it as text.

This is not what we are referring to here.

In this case, OCR is referencing the Office of Civil Rights. The Office of Civil Rights is a sub-agency of the U.S. Department of Health and Human Services. They focus on ensuring equal rights by enforcing laws, regulations, and standards that prohibit schools from behaviors that may discriminate on the basis of race, color, national origin, sex, disability, age, or the like. Though responsible for enforcement, the Office of Civil Rights first acts as a neutral party that tries to resolve the issues presented.

Bill C-81

The Accessible Canada Act: An Act to Ensure a Barrier-free Canada

The US government is far from the only country making big strides in Accessibility. In May of 2018, Bill C-81 had unanimous support by the House of Commons. On June 21, 2019, the Accessible Canada Act became law after receiving Royal Assent.

What does this mean for website Accessibility in Canada?

It means that Canada now joins many other countries that use the international WCAG guidelines as the standard for success with online Accessibility. They strive for a minimum level of WCAG 2.1 Level AA compliance.

#clarity

If you build these terms into your organizational culture, it will promote continued clarity as you expand your audience to include differently-abled individuals.

Also check out our blog post about Web Accessibility 101 to help you get started with the tools you need to be more accessible.

Let us know if you need help with creating more accessibility around your website.

8 Reasons Governments Should Use Drupal CMS

Posted on July 19, 2019May 28, 2024 by kanopi_admin

The right website content management system can help government websites establish citizen trust, provide relevant and timely information, maintain solid security, and make the most of limited budgets. At Kanopi Studios, we believe that Drupal for government is an especially strong choice, further validated by the fact that governments across more than 150 countries have turned to Drupal to power their digital experiences. This includes major sites in the United States like The White House and NASA.

What makes Drupal the best choice? Read on for our top 8 reasons why Drupal should be the content management system of choice for government websites.

1. Mobility

Website traffic from mobile devices surpassed desktop traffic years ago. In fact, according to Pew Research Center, one in five adults in America are smartphone-only internet users, and that number is likely to continue to grow. Government websites need to prioritize a superior mobile experience so they can meet the needs of citizens of all ages and economic levels and allow users to access critical information on the go.

Drupal can help. Drupal 8 was built to scale across devices, load mobile content at top speeds, provide a wide selection of responsive themes, and more. Drupal also allows content editors the ability to add or update site content via mobile, unlocking the ability to make emergency updates from anywhere.

2. Security

Offering a secure site that protects your content and sensitive user information is critical for maintaining your reputation and public trust. Drupal offers robust security capabilities, from regular patches to prominent notifications about updates to security modules you can install for additional peace of mind. Unlike other open source platforms, Drupal has a dedicated security council that keeps an eye out for potential issues and develops best practices to keep sites stable and secure.

3. Accessibility

A number of federal, state and local laws require government websites to serve the needs of all citizens, regardless of their abilities. Focusing on accessibility compliance from the very beginning of your website project can help your team avoid costly re-work and launch delays.

Drupal has accessibility baked in, with all features and functions built to conform to the World Wide Web Consortium (WCAG) and ADA guidelines, including the platform’s authoring experience. That means that people of all abilities can interact with your Drupal website, whether they are adding and editing content, reading news, filling out forms, or completing other tasks. Drupal allows screen readers to interpret text correctly, suggests accessible color contrast and intensity, builds accessible images and forms, supports skip navigation in core themes, and much more.

If you’re a content editor, we recently wrote about eight things you can do to make your site more accessible.

4. Simple content management

Drupal’s content editor helps busy government website administrators add posts, pages, and resources in an environment that’s nearly as simple and familiar as a Word document. The what you see is what you get (WYSIWYG) editing mode supports text formatting, links, embedded media, and more.

Drupal also enables administrators to set up customized roles, permissions, and content workflows. This allows any number of team members to contribute to the site while maintaining administrative control of the content that gets through to the public.

5. Ability to handle significant traffic and data

Many government websites store hefty data and resources and see significant spikes in traffic based on seasonal demand, news cycles, and many other factors. Drupal has the power to deal with large databases and intense site traffic with ease, another good reason to choose Drupal for government sites.

Drupal’s database capability includes a wide range of ways to sort and organize content via its module system, supporting the needs of almost any content library without the need to create custom code.

Drupal powers a number of heavily visited sites including NBC’s Olympics, The Grammy Awards, and Weather.com, keeping them going strong even when traffic levels are enormous.

6. Flexibility

The helpful features included in Drupal core are just the beginning. Many, many additional modules have been contributed and tested by the Drupal community and are ready to be added to your site as needed. How many? The Drupal community has contributed well over 40,000 modules, so it’s a safe bet that there’s something already out there that can help meet the needs of your project.

Modules can be added to your site at any time, like building blocks. A few popular examples include social sharing, image editing, calendars, metatags, and modules that support integrations with external systems, from email platforms to customer databases.

7. Affordability

Government budgets are often tight, with plenty of competing priorities for every dollar spent. With Drupal, you tap into a free, open-source system that’s supported by an enormous community of developers. Building your website on an open-source platform means you can focus your budget on creating an ideal experience for your citizens through professional services including content strategy, user experience, and design rather than dedicating funds to software licensing fees. And Drupal’s flexible modules reduce or even eliminate the need for custom code, helping you save even more.

8. Support for multiple sites in multiple languages

It’s not uncommon for government entities to have multiple websites. Whether your government maintains a few sites or hundreds, building each one individually would require an incredible amount of time and funds. Thankfully, Drupal’s multisite feature allows your site’s code base to be copied and adjusted to create as many new websites as you need, leveraging features that already exist without the need to build them from scratch. To meet language requirements, Drupal offers Content and Entity Translation modules that help content authors translate pages, individual elements, or specific fields into more than 100 languages.

Kanopi Studios loves government website projects

At Kanopi, we’re Drupal experts. We’ve harnessed its power to create citizen-focused sites for the San Francisco Police Department, San Francisco Health Service System and more. We’d love to hear from you, learn about the problems you are trying to solve, and share even more details about why you should choose Drupal for government.

Accessible Websites: 8 Steps for Content Editors

Posted on July 1, 2019September 1, 2020 by kanopi_admin

A brief overview of the whys, whats and hows of accessible content

Once upon a time I used to be a designer and front end theme developer. Though I’d love writing and would frequently manage content, my focus was on the building with the goal of creating a consistent brand presence. When that was my focus, I thought, like so many do, that the way to keep a website formatted in the way it was originally designed was to restrict an editors ability to change things. I was wrong. I was ignoring accessible content.

Over the span of my career to date, I’ve seen more than an evolution in the technologies we use but also in the way people approach the day-to-day issues on their teams and when looking at their company’s website. We’ve gone from hard coded websites fully managed by webmasters to building dynamic CMS driven digital experiences that empower users to build a connection with the sites they visit. Think about that for a moment: we’ve changed our focus from what we can do, to empowering people to drive their online user journey and get the most from their online experiences. With this movement, inclusion and it’s subset, accessibility has been given increasing attention; the more users who have rewarding user experiences means a better web for us all.

So now it’s time to continue this movement of empowerment by opening the floodgates of possibilities and educating content editors, including you, so that we can all build and maintain accessible content. In the following article we’ll touch on why accessibility is important, what to look for, and how to start incorporating it into your content publication workflow.

Why is Accessible Content Really Important?

We’ve all seen the shift in the digital ecosphere to be more inclusive. Companies have been adding non-binary options for gender on their sign up forms and writers have used more neutral content when needed. It has not saturated the web (yet) but it’s there and often discussed. A huge factor in this as been the role that accessibility has played. With nearly 1 in 5 US adults self-identifying as having some sort of disability, there’s no question accessibility is critical.

By the numbers:

~20% of U.S. Adults self-identify as disabled
~2.4m have Alzheimer’s disease, senility or dementia
~7.6m Americans experienced difficulty hearing, including 1.1m whose difficulty was severe
~8% of males from northern European descent are colorblind
~2m Americans are blind or unable to see
According to Austin Learning Solutions, 40 million American adults are dyslexic

And, once we take into account those who may not see themselves as disabled (I know a few colorblind men who do not identify as such) as well as those who are underage, than the people impacted by accessibility blocker grows. And then there are the temporary disabled: broken wrist, injured eye, and so on. And then (yes this keeps going!) there are those who are experiencing a poor user experience such as a poor internet connection, a glare or cracked screen, or a loud/crowded location: these users benefit from accessible best practices too!

So you’re thinking, “okay, the numbers support what she’s saying but I’ve heard this all before,” and you know, you probably have. So as much as we all WANT to focus on the feel-good, lets touch base on some of the other ways accessibility is important.

An SEO friendly site may not be more accessible but an accessible site is more SEO friendly. Google uses a lot of the same information as assistive technologies.
Legal pressure is building. In the US, since the Winn-Dixie case in 2017 that set the precedent that a website can be a gateway to a brick and mortar location and therefore is subject to the ADA’s 508 compliance, hundreds of organizations have had legal action taken against them. An accessible site keeps you out of legal trouble as well as gains a lot of goodwill among your customer base.
Voice recognition is not just for assistive technology! How often do you ask Alexia or Siri for information? You’re likely using some of the same code that those who use assistive technologies are using every day.

So . . . after all these words, why is it important to build accessibility best practices into your content creation and editing workflow? Because if you don’t you are missing out on millions of potential conversions while potentially placing your team at risk of being found non-compliant.

“Okay Okay, I get it — accessibility is important but where do we even start?!”

I’ve heard something along those lines from marketing teams as well as those new to government website management. Somewhere along the lines we’ve mistakenly sent the message that everyone needs to be some sort of expert to put efforts into effect. That’s not true!

One of the most inclusive and talented writers/speakers I know keeps telling me that she’s not the expert, and yet at this point she’s learned so much she’s assessing more sites and guiding more people than I am. Why? Because she started by looking at what the biggest blockers were for users from an accessibility point of view, and helped the content managers figure out what they can do to fix them. And then she learned more, and she kept going, helping others learn along the way. It’s now a part of her everyday life, not because she set out to be an expert on accessible content, but because she collected knowledge and started putting that into practice.

That’s all any of us need to do: start with some common issues and keep learning.

With that, let’s dive into eight of the most common issues that content editors will see and how to fix them for more accessible content.

1. Alternative Text

What is it? Alternative (alt) text is a word or phrase that can be inserted as an attribute in an HTML image tag to describe the meaning of the image on the site. If the image is purely decorative, it can be indicated as such by having the HTML tag present but empty.

How to implement:

Don’t get wordy: keep it to around the same length as a Tweet: approximately 120 characters.
Use descriptive text: describe the image itself without using phrases such as “image of” or “photo of” (that’s a given!).

2. Descriptive Text Links

What are they? The text that we include in a link matters. When we link only the words “learn more” in a given sentence, this gives users (and search engines) little idea of the value of the linked text. If we link a full phrase or sentence such as, “To learn more about sloths, read this article.” we are setting more complete expectations as to what will be learned by clicking that link.

How to implement:

Use text that explains the context and value of the link to the user.

3. Linked Images

What are they? Linking images can be a powerful visual tool but this can present problems to non-sighted users (and offers less of an SEO benefit).

How to implement:

Use alternative text.
If there is too much information to convey via alternative text, you can give that image an empty alt text and then provide an image caption.
Do not use both alt text and a caption if the information is redundant in any way.

4. Video Captions & Transcripts

What are they? Video captions and transcripts are the written text of the material audible in a video. Captions are presented inline as words are spoken and sounds are included. Transcripts are separate from the video and often provided below the media or via a link.

How to implement:

Captions must be consistent, clear, and readable.
Make sure the meaning of what is said is preserved: identity who is speaking, and how (such as [yell] or [whisper]).
Accuracy is critical!
Sound effects can be included with brackets.
User proper page structure (headings) and grammar in transcripts.

5. Avoid All Capital Letters

What are they? It’s a common practice to use all uppercase letters as a stylistic choice but this can cause readability issues for those who are dyslexic.

How to implement:

Only use all capital letters for acronyms, and not for style.

6. Unique Page Titles

What are they? The page title sets the stage for all content on the page and your websites theme should already have programmed this to be the H1 of your page. This tells both users and search engines why the page is important to them. Duplicate page titles lead to confusion and can contribute to either a frustrating or abandoned user journey.

How to implement:

With each title to be informative and unique.
Be brief: each title should be between 55 and 60 characters.

7. Heading Structure

What is it? When we’re talking about heading structure we’re talking about the proper use of the header tags (H1, H2 and so on). Headers give users of assistive technologies cues as to where they are on a page and what they will find in it. Search engines use these tags to better determine what is valuable on the page. Poorly used or omitted heading tags can create a poor user experience while misleading search engine rankings.

How to implement:

Use Header Tags in sequential order.
- An example of the correct order is H1, H2, H3, H4, H2, H3, H3 etc.
- An example of an incorrect order is H2, H6, H6, H2, H4
Make the content of the Header Tags relevant to the content on the page.

8. Table Formatting

What is it? Tables can be the most accurate way to present data. However they can create barriers for those using assistive technologies. The best rule of thumb is this; if you can present the information in a way that does not utilize a table, then do not use a table.

How to implement:

Avoid tables unless absolutely necessary.
Provide table captions.
Utilize column and row headings.
Never nest tables.

There you have it. Educating yourself and your team on these eight steps sets you up for success and on the road to compliance. If you want to learn more in-depth tricks, watch Kanopi Community Ambassador AmyJune Hineline give a talk on Inclusive Content Strategy (50 mins).

Accessible Content is About Everyone’s Empowerment

The days of content editors being restricted are long gone. The digital ecosphere is changing and with that comes opportunities and the ability to create positive user journeys for all of our users. Though professional growth and incremental education, teams are able to evolve their web presence to be more inclusive, accessible and search engine friendly, while building in safeguards for the organization as a whole. You have the tools and the ability to make a difference!

Want to learn more or have a team member take a more in-depth look at the things that make your challenges unique? Reach out to us: we want to empower you to make accessible content.

Kanopi Studios is a Top Provider on Clutch

Posted on December 11, 2018September 10, 2019 by sean

It’s not easy to find a development partner you can trust. Particularly if you’ve never been immersed in the world of web development, it may take you some time to learn the language. That can make it even more difficult to know whether your partner is really staying on track with what you want to accomplish.

Luckily, knowing what to look for in a business partner can save you from all of the potential troubles later on. Ratings and reviews sites like Clutch can help you get there. This platform focuses on collecting and verifying detailed client feedback and then using a proprietary research algorithm to rank thousands of firms across their platform. Ultimately, Clutch is a resource for business buyers to find the top-ranked service providers that match their business needs.

Luckily for us, users on Clutch will also find Kanopi Studios at the top of the list to do just that. Kanopi has been working with Clutch for a few months to collect and utilize client feedback to find out what we should focus on in the coming year. Through the process, we’ve coincidentally been named among the firm’s top digital design agencies in San Francisco.

Here are some of the leading client reviews that led us to this recognition:

“They were fantastic overall. We had great success communicating to their team via video conferencing, and they were able to answer every question we had. They also worked quickly and were very efficient with their time, so we got a great value overall.”
“Kanopi Studios’ staff members are their most impressive assets — extremely intelligent, experienced, and personable. Building a website is never easy, but working with people you both respect and like makes a huge difference.”
“Kanopi Studios successfully migrated our Drupal platform while preserving all the content that we’ve built up over the years. They worked hard to achieve a responsive design that works well on both mobile and large desktop displays.”

Not only have these kind words earned us recognition on Clutch, but we’ve also gained the attention of the how-to focused platform, The Manifest (where we are listed among top Drupal developers in San Francisco), and the portfolio-focused site, Visual Objects (where we are gaining ground among top web design agencies site-wide).

Thank you, as always, to our amazing clients for the reviews and the support.