Search Kanopi

Category: Accessibility

Web Accessibility: 4 Best Tools & Technologies

Posted on 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.

Screengrab of Lighthouse Accessibility score from Chrome’s Lighthouse audit tool, one of our favorite Web Accessibility Tools.

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.

Screengrab of Siteimprove’s test results screen, one of our favorite Web Accessibility Tools.

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 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 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 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 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 by sean
Screen grab of the Clutch website home page

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.

Contact us if you’d like us to do amazing 5-star review work for you.

Website Musts: How to Define Everything That Your Website Needs to Do

Posted on by will
Woman enjoying a website on her computer

Every good, juicy story is built from three basic elements: a compelling beginning to draw the reader in,  action throughout the plot to keep people engaged, and a strong ending that wraps up the story elements in a satisfying way.

Like a good story, your website needs to draw your desired audience in, keep the user engaged, and offer a means for them to take the desired actions to complete their journey, whether that means making a donation, purchasing a product, or applying for a job.

In this post, we explore how to write that story. Or in other words, how to define everything it needs to do to create a proper customer journey on a website. Utilize this no-fail approach to outlining the needs and requirements of your organization and audience to ensure that everyone gets the results they’re looking for.

Chapter 1: Defining your Audience

All websites must start by defining an audience. If you don’t know who you are writing, designing, or developing your website for, your story will read like a complicated mystery that doesn’t end well for your brand.

Start with two incredibly valuable and fairly simple exploration activities that will help you 1) uncover your user segments and 2) craft value statements for them.

You can uncover your user segments by working through these simple five questions:

  • Who is this website / mobile app for?
  • Why will they use it?
  • When will they use it?
  • How will they use it?
  • Why will they keep using it?

As an example, we’ll use a Community Garden nonprofit organization looking to build a site to promote their events and information on healthy food choices.

Their target audience would likely be: Families and individuals looking for a way to eat healthy on a low income

Next, we’ll craft value statements, using a simple xyz formula:

For [target audience X]

that [cares about topic Y]

[your organization]

is a [your solution/product/service]

that [provides benefits Z]

The community garden would write a statement something like this: For families who are looking for a way to eat fresh and healthy food, Our Community Garden is an organization that provides opportunities for people to help grow, harvest and enjoy locally-grown produce.

Chapter 2: User Personas

User personas represent the different types of people who will interact with your website or product. These fictional characters can be based on real users or the types of users you’d like to attract to your site. Creating personas can help  identify the features and functionality that will needed on your website to support user needs. HubSpot provides a great set of questions that can can be the basis for your user personas. In addition, we have a few tips for creating effective user personas below.

  • Represent a user group for your website – Include existing clients or buyers. It can also be helpful to  consider users of competitor websites.
  • Write your personas as if they were real people with backgrounds, goals, and values. Include the four pillars:
    • Geographical – country, city, population, density
    • Demographics – age, gender, family size, occupation, income, education
    • Psychographic – lifestyle, personal values, activities, interests, opinions
    • Behavioral – occasions, usage, readiness
  • Express and focus on the major needs and expectations of your most important user groups and don’t be afraid to prioritize them.
  • Describe user’s expectations and how they’re likely to use the site
  • Express common concerns and objections

Chapter 3: Tactics to Create User Personas

Here are some basic questions that can help to define your user personas.

  • Define your priority initiative. What triggered the user to visit and browse your site?” Example: A flyer sent home from your child’s school about your weekend gardening program
  • Identify the factors that will define success and what this will look like. What is the result or outcome they are expecting from visiting your site and what might prevent them from achieving this result? This could be easily finding information about dates and locations of weekend gardening programs.
  • Frame out all the potential barriers (and don’t be afraid to be honest). Barriers could include a poorly designed homepage where events are difficult to find.
  • Agree on your decision criteria. What criteria would the visitor use during their evaluation of your offerings? For example, ease of finding event locations and times.
  • Map your conversion path.What is the key factor that will trigger the decision to act? What resources will they trust in helping them make a decision to move forward? For example, knowing that their child’s’ school is sponsoring a gardening day through the community gardening program may motivate the parents to participate.

Don’t forget to review your current data – it will speak volumes. Look at your site’s analytics for at least the past 6 months, focusing heavily on the “Audience Reports” within Google Analytics. This information can feed directly into your user demographics.

Additional approaches to acquire data include:

Interview your internal sales, customer service or support teams. Their interactions with your clients can provide a wealth of first-hand insight.

Administer a survey to your users. Set up a simple survey on your website through a third party program or webform like SurveyMonkey. Send the survey out to your email list to expand your reach and results.

Interview your audience. Establish a set of basic questions, then reach out to your users or clients to schedule an in-person, phone or online interview. Consider offering an incentive like a discount or coupon or small gift to make it easier to secure interviewees and to show your appreciation for their time.

The bottom line: any research is better than no research. It doesn’t have to be complicated or costly to be effective, so don’t skip this crucial step!

Chapter 4: User Stories

Start by establishing your organization’s objective (the action you want the user to complete on your site). Next, extract the objectives, needs, and desires of your users as defined in your user personas.

Then, fill out the following template:

As a [type of site visitor] I need a way to [do something] so that I can [benefit somehow]

Don’t forget to let your value statements be your guide to ensuring that user stories map to high-level user goals.

Chapter 5: Defining Features

What are the actions your users need to take on your website? These should correlate to features, which can include everything from downloading a program schedule, to contacting you for more information, to  registering for a class online.

For example:

Action: Families need to be able to see a list of nearby gardening events that are appropriate for their children.

Corresponding website feature: An event content type that can be sorted by date, age range, and geographic location.

Happy ending

Using the information from your user personas, map each user’s tasks to create a feature and functionality document for your website. Through this process it’s common for the highest value features to be consistent across multiple personas and rise to the top. These become your site’s core features. Any additional features become your subset features. Depending on your budget and timeline, you can start by developing your site’s core features and save your subset for subsequent releases or when additional budget is available.

Finding the sweet spot between your organization’s needs, your user’s needs and your technical needs will ensure strong results and a happy ending for your website project.

If you or your organization needs assistance with creating a customer journey on a website, contact us today! We can work with you on any aspect of this process, from developing personas to crafting user stories to defining feature requirements.

Web Accessibility 101

Posted on by allison

Confused by web accessibility? Don’t know where to start? Below is our Web Accessibility 101 guide. This should help you with the tools and high-level explanations of what to look for to make your site accessible online. We also have another post about the specific definitions and acronyms used in web accessibility.

What do we mean by Web Accessibility?

At the highest level, web accessibility means that all the information and functionality on your website is accessible to any person, regardless of their individual needs and challenges. Sites that are well-designed and developed make it possible for everyone to be included in the exchange of information online.

What is “Section 508,” and why does it matter to me?

When people talk about “Section 508,” they are referring to Section 508 of the Rehabilitation Act of 1973. It’s a mouthful, so we tend to shorten it. It’s the section of this Act that focuses on US requirements for making government electronic systems usable and accessible for people with disabilities. All federal government institutions are required to be compliant with Section 508.

In practice, though, many people use “Section 508” as a catchphrase to refer to anything related to compliance with the Americans with Disabilities Act (ADA). Section III of this Act protects the rights of users with disabilities with regards to websites and digital media.  These rules apply to broader state and local government, businesses, and non-profits. Legally, disabled users have a right to access any service online that is accessible to the able-bodied public. Just like the requirement that businesses have ADA-compliant physical locations, a website has to be compliant as well.

Section 508 (and the related Section 255 of the Communications Act of 1934) has received much-needed refresh as of January 18, 2017. You can read all about the changes on the Access Board website. As a part of the refresh, they have fully incorporated the WCAG 2.0 A and AA guidelines as a basis for the revised standards.

Wait, what? What’s WCAG 2.0?

The W3C’s Web Content Accessibility Guidelines, or WCAG, is the most fundamental set of accessibility recommendations for the web. The difference is that these guidelines are only that — a recommendation — and not historically a mandate. But with the refresh, they are the most straightforward answer to how to get your website up to ADA and Section 508 compliance.

The WCAG group accessibility features into three levels of compliance. In order of least to most accessible are A, AA, and AAA. At Kanopi we focus on meeting level AA compliance with the WCAG 2.0 standards for our clients; that’s a safe benchmark for universities and progressive organizations who are focused on comprehensively supporting their users. And now, as of the beginning of the year, it’s the mandate for governmental compliance.

Do I really have that many users who need this kind of support? Why is it important?

When we think about users with special needs and disabilities, it’s easy to focus on the most extreme cases, and feel like these users are such a small percentage of the population that the likelihood that they will visit your website is likewise small. But according to the CDC, 22% of the population in the US have a disability today. Any of us may experience a disability in our lifetime. The reality is that many able users or users with situational disabilities also benefit from a well-constructed, accessible site. Keyboard warriors. People with tired eyes and screen fatigue. People using a device one-handed. Search engines. Users with lousy bandwidth. Maximizing your site’s accessibility maximizes the reach of your message. And with all the noise on the internet, that’s a great thing.

How challenging are these kinds of things to fix?

Kanopi recently undertook the challenge of performing accessibility audits on several of our support client sites. We wanted to test ourselves: could we retrofit an existing site to be WCAG 2.0 AA compliant? One of the sites we tested was CRDFGlobal.org, an independent nonprofit organization that promotes international scientific and technical collaboration through grants, technical resources, training, and services. We had done the initial build of the site, but accessibility hadn’t been a focus at the time. Now we wanted to layer a deeper level of it in.

The base HTML we’d build was very solid and well structured, and semantically architected to support both content accessibility and SEO. So those fundamentals were already in place. So were basic best practices like skip links, active/focus states and alt text for site imagery.

So what was our first step to get this to a more compliant state? There are numerous tools available to run automated checks on a site to see where the gaps are in your accessibility accommodation, and this is the approach we took to our initial testing. Every audit we ran turned up something different. And even after resolving those issues, no automated tool is a replacement for extensive human review on any voice browser, text browser, keyboard, or other alternative browsing platform you can get your hands on. There are challenges that an automated review simply won’t find. In a review of a number of automated testing tools, Gov.uk found that these options only picked up an average of 71% of the accessibility problems on a given page.

Ultimately we found two automated tools to be the most helpful.

  • Tenon.io – this site has an API available, but we just used their web-based tool to run our audits. The visual results are clean and easy for developers to digest, and the export let us quickly create meaningful tickets in our project management system so we could integrate these changes into the support workflow. And overall, this found the most issues with our site.
  • aXe JavaScript API – this API has a Chrome Plugin available that we found yielded solid initial results without a lot of false positives we were seeing with other auditing tools.

Many of the enhancements our support team implemented are invisible to sighted users. The biggest visual challenge we faced was adjusting the color palette of the website to still adhere to the brand guidelines for look and feel, but to support a high enough contrast ratio to be usable to people with vision impairments. Our designers presented some subtle alternatives that still adhered closely to the active site experience, and we worked directly with the client to get to an adjusted palette that worked for both the brand image and the site’s audience.

As a result of these efforts, the site is more broadly accessible, more easily navigable, and ensures that every researcher has greater access to funding opportunities that enable them to collaborate with their international peers as they work towards solutions to our most pressing global scientific challenges.

What about external code that I use on my site that comes from other vendors, like analytics platforms or social media?

You’d be surprised, and probably shocked, how many vendors out there choose not to make their products accessible. Or they are simply not aware of the barriers they create for end users on their partners’ sites. Kanopi is not only a seasoned development agency, but we do a lot of deep user experience work for our clients as well. Before you build something, you need to be sure it’s the right something, and that it meets the needs and goals of your target audience. As a part of our user experience research, we’ll frequently opt to send out a simple questionnaire. It can be as basic as just a popup that says “What are you looking for today?” and that alone will yield a wealth of insights into what users really need from your web presence.

There are a number of tools we use for these types of surveys. In working with the San Francisco Public Library, we wanted to prompt users to fill out a few questions about their reasons for visiting the site and their experiences while there. We also needed to have support for multiple languages for survey respondents. So we used one of our standard set of tools that fit the criteria for the questionnaire.

The SFPL has a deep commitment to accessibility and making information available to everyone. It turns out that the popup tool we were using made the site unusable for anyone who was using alternative or assistive navigation and tools. There was no way for these users to opt out of the survey or get past it.

As soon as we received feedback from our clients on behalf of these users, we pivoted. We adjusted our questions to use SurveyMonkey and Google Forms, which are both fully compliant and accessible options. When we went to our initial survey vendor with our concerns and to advocate for a more accessible tool, we were met with a brick wall. Accessibility wasn’t a priority for them, and it wasn’t an item that they had on their roadmap. It was disheartening. But now we have greater insight into the weaknesses of the platform. We have found the right tools to use to ensure we reach as many of our clients users as possible. And the decision whether or not to keep disabled users in mind will have an ultimate effect on the bottom line for all parties involved.

What kinds of tools can I use to assess the compliance of my website?

Ultimately, these issues are much easier to build in during the initial site development process than they are to fix after launch. That’s why working with a skilled and knowledgeable team is so important if you’re looking at redesigning and rebuilding your site. The good news though is that there is a wealth of tools out there for supporting anyone beginning their journey to creating a more accessible online experience.

One very simple check you can do is to just turn off CSS on your site and see how the content flows and how readable and structured it is. As for going deeper… here are just a few options for you to check out if you’d like to see how your site currently performs for disabled users.

Screen Readers
Checklists 
APIs and Online Tools
Accessible Pattern Libraries