Tuesday, February 20, 2018

How I Learned to Stop Worrying and Make My Website Accessible

In February of 2017 I got a tweet in the middle of the night congratulating me on my firm’s website making the Lawyerist 10 Best Law Firm Websites of 2017. I was completely surprised and delighted … and a little concerned. I was knee deep in a partial overhaul of my site that would add video and create a clearer message for my target market. I managed to migrate to a faster host and finish remodeling mid-summer and foolishly thought “Yes, that’s great, I can stop working on this for a while!”

Fast forward to September when I’m attending Ramit Sethi’s Forefront conference. The event is full of some of the most ambitious, out-of-the-box thinkers and business owners I’ve ever known. We’re standing around showing each other our websites (as entrepreneurs do) when one of my colleagues points out that my website isn’t accessible. This guy was deaf and although he could read lips to communicate at the conference, he needed closed captioning to follow the video’s content. OW, BURN! There’s nothing quite like the shame of having a differently-abled person straight up tell you you’re failing on the basics.

I went home from the conference armed with loads of self-improvement and business-improvement ideas and the internal directive to make my website accessible—NOW.

Understanding Web Accessibility Issues

If you do some basic Googling on the topic, you can find plenty of information about how your site should be set up to make the content accessible to every audience (including the blind, low-vision, deaf, non-native English speaking or keyboard only users). There are some great articles out there (like this one and this one or this other one) that can provide a general understanding of what people struggle with and how you can address it. Go read them!

The gold standard in website accessibility is to have your website certified to meet Web Content Accessibility Guidelines (WCAG). There are several firms in my area that offer to update your website to meet the standards, so I got a quote from one of them. You should’ve seen my jaw hit the floor. They quoted me a price of over $6,000 to make my (very small, very lean) website WCAG compliant. I thought maybe they were pulling my leg because I’m a lawyer (we do get ripped off a lot in the web arena), so I asked around with other folks in the same business. Nope, that quote was reasonable. Cheap, even! I was told that a quote of $30,000 for WCAG compliance is not unreasonable for a site.

No wonder nobody does this. $6,000 is basically a year’s rent at my co-working space! I can’t even imagine getting a higher quote and deciding to go forward with that when you could spend that money on Google AdWords or other marketing.

So … what now? Just don’t make the site accessible? No way, I thought, screw that. If I fancy myself a techie lawyer I can figure this out. Yes, I work with nonprofits, and I don’t have $6,000 to spend on this, but I was sure I could make my site better myself.

The Starting Point

I was working on my existing site, but you may not be. Pro tip: If you are just getting started or completely overhauling your website with a new look, start with a WordPress theme that is known for being accessible friendly. If you’re working with your existing site, your theme may hamper your ability to get an A+ on this project—it did for mine.

Despite limitations, in the end I made my site much more accessible (although it’s not certified) and I did it for less than $500. Here’s how.

Meeting WCAG Standards

First, I read the articles online and tried to understand what kind changes I might need to make. From there, I audited my website using WebAIM’s WAVE tool and saw all the ways it was broken from an accessibility standpoint—ouch! There were a lot of alerts in that first run.

Next, I contacted my web developer, Chris, and worked up a project brief with him to make the website substantially compliant with WCAG. He dug in and got started. We made a bunch of fixes right away.

WAVE makes it pretty easy to see what is wrong. Red = error. Yellow = possible error. And it gives you clear information about each issue. But given the WordPress theme I use, accomplishing the fixes was often beyond my skill set. Here’s an example fix from Chris:

Custom CSS is beyond me, so thank goodness for web developers!

But, a week or so into the project I started getting despondent emails from Chris about the complexity of WCAG. Turns out there’s a reason you have to hire an expert to get a certified website. The standards are as thick and verbose and complicated as a major federal regulation. (Here, go look, I’ll wait). You’d swear lawyers were involved in the drafting because no regular human is going to be able to wade in and figure it out in short order.

It was all becoming clear … the expensive $30,000 quotes, the fact that you never see this certification on anything but the biggest or most government-y websites. I get it now.

Making a More Accessible Website—without WCAG

Okay. Time to start over. I now knew we weren’t going to meet WCAG or even “substantially” meet WCAG. So, I went back to the plain English articles. Let’s write this project brief again. This time I focused on the audience, not the standards. Now the project became “make it easier for XYZ readers” and what did we need to do for them? Update the alt tags, fix the font size and contrast, get transcript for video, make sure fillable form elements were labeled, etc.

I focused on the actual items that would make my firm’s site more useful to these audiences, whatever the standard. I went with what I could read and understand:

  • Install the WordPress Accessibility Plugin.
  • Create a Site Accessibility page.
  • Create a Site Map page for keyboard-only users.
  • Add captions to the videos and make embedded transcripts available.

I discovered that my video host, Wistia, will generate captions for your hosted videos for a very small fee and you just flip the switch to turn on the caption option. Although, now when I produce a video, I just order captions and transcripts from Rev.com. It’s seriously cheap (between $1–3 per minute of video). Then you can embed it yourself before uploading to the host (i.e. YouTube, Wistia, the website, or wherever it’s going to live).

We were back on our way with the project.

Chris made all the updates, and we re-audited the pages with WAVE and the Google Accessibility audit using the developer extension for Chrome (available here). So, how did we do?

The Good, the Bad & the Ugly

First, the good. At the end of the day, we got the WAVE audit down to zero errors on all main pages. Yai! And the main pages ranked in Google Accessibility as follows:

  • Home: 91/100
  • Contact: 94/100
  • Who is Jess: 94/100

The bad: There are still a few alerts in WAVE, but they are related to the site’s design or theme. So we can’t modify those issues without making a new site. The Google Accessibility tool still had some issues, even with those Grade “A” scores. Certain elements of my site’s theme can’t be described well enough, and a couple of other items still pop up as insufficient even though they’re technically fixed.

The ugly: I found we are hampered by our choice of Wistia as a video player. Like many players, it does not allow embedded transcripts. Wistia partners with a company called 3PlayMedia, which can embed a transcript in a Wistia video, but the cost of the subscription to 3PlayMedia is $800!! That was way outside my reach for this project, but I’m hopeful that the closed caption option is sufficient for most people.

The Ongoing Process of Accessibility

Every time you change or add to your firm’s website, you will need to keep accessibility in mind and re-run your audit. For example, recently I added another main page to the site “Articles” and I didn’t even think about the accessibility implications because it’s not a habit yet. And look …

DANG IT!! >:(

11 errors on the main “Articles” page, and every individual article has its own errors. And when I log in to the back end, I can’t figure out why the errors are there. Sigh. By the time you read this I will have fixed it (or hired Chris to), but it just goes to show: accessibility not a set-it-and-forget-it kind of thing.

Does that mean it’s not worth doing? No way. We should be doing this stuff. And like any new habit, it’s going to take awhile to get used to. But I know you can do it!

If you’d like a copy of the project brief I used, you can download it here so you can replicate this process for your own firm’s website. It’s always easier to get started when you have a jumping off point.

How I Learned to Stop Worrying and Make My Website Accessible was originally published on Lawyerist.com.



source https://lawyerist.com/make-birkenlaw-website-accessible/

No comments:

Post a Comment