Building an Accessible WordPress Theme

I’ve recently set up a new site where I can focus on Web accessibility — particularly the accessible themes I’m creating for WordPress.

It’s The Web For All Y’all at a11yall.org. Please stop by and check it out.

Five Fundamentals of Accessible Responsive Web Design

What are the key techniques for building a responsive website that’s also accessible? I’ve been scouting the Web the last few days hoping to find clear answers to this question, but there’s precious little out there. You can find scads of great information about both accessible and responsive web design, but what about the intersection of the two?

The most frequent point is an important one – to wit, RWD (responsive web design) is a great entree into accessible web design. The two do have quite a bit in common. In particular, both depend heavily on adhering to standards. Related to that, RWD has emerged as the first popular venture beyond the stranglehold that desktops using Internet Explorer had on web design for over a decade. And accessibility is all about needs beyond “normal” desktop views of a websites.

I love this point. However, it’s not what I needed to know.

Rather, I was concerned that if you develop a site using standard accessibility and standard RWD, the latter would be fine, but the former might be compromised.

It turned out my concern was legit. However, it seems as if there are just a few straightforward things you need to pay attention to. For me, these boil down to the following.

1. Responsive, unlike accessible, requires all in

You can’t peicemeal responsive. If you can’t do all of the major pieces explained by Ethan Marcotte in his seminal article on RWD together, it’s better to wait — particularly if you want the site to be accessible. In other words, save responsive for a redesign or a site facelift. With accessible code, on the other hand, while it’s best to get as much done initially as you can, there’s so much to it that a partial effort is considerably better than none at all.

2. Don’t code responsive images until you have a wholly responsive site

This is actually a specific part of the first point. However, since it’s a rabbit hole I’ve gone down, I thought it worth being explicit. At the very least, rendering images responsive in a site that’s not otherwise responsive makes for deceptive desktop testing. However, my real concern is it can have accessibility ramifications that aren’t worth the time to test and untangle.

3. The viewport must permit zooming

There’s much debate in the RWD community about how best to code the viewport. However if you’re committed to an accessible site the answer is clear. Do not add parameters like “maximum-scale=1.0″ or “user-scalable=no” to the content attribute. In other words, optimal RWD code looks like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

The end. Period.

By the way, the reason developers add code such as “maximum-scale=1.0″ is that without it on some smart phones a switch in orientation causes the layout to go haywire. As someone with one of those phones, I hear the developer pain behind leaving this code off. But it’s simply bad accessibility ju-ju to sacrifice zooming — and hopefully over time all of the major vendors will address this issue at their end.

4. Extra credit: use em or % for layout, not pixels

I think this one may be less critical. However, George Zamfir has the best overall information I could find on accessible RWD, and he recommends it. I, in turn, recommend reviewing the slideshow from his most recent presentation: Responsive Web Design – An Accessibility Tool (The Accessibility Conference in Guelph, May 29, 2013).

5. Test carefully

Of course, right, but….

The thing is it’s not easy to figure out what to test without completely and utterly bogging down. And my hunch is this quagmire is one of the main reasons many awesome web developers shy away from accessibility. In this perfectionist bog, not only do you never get the thing finished, you never want to bother with accessible code again. But good news…. Henny Swann has created a first-rate list at Mobile accessibility tests. It hits the sweet spot someone like me needs — with a list that’s carefully crafted, but not debilitatingly exhaustive.

So that’s what the accessible RWD landscape looks like to a front end developer like me. I’d be most grateful if those who know more about this topic than I would tell me if I’ve got this right or if I’m missing something.

Rites of Retirement: A Passage

I’m one of the lucky ones. Offered early retirement. Great timing, generous package, no issues around healthcare coverage. It sounds so simple. And in many ways it is. But underneath there’s an astonishing complexity and richness — the tenderness, the grief of partings, the possibility of new adventures, the flashes of understanding as this 40 year door closes.

Waking up the first day, awash in these fragments, I suddenly realized the obvious: retirement is a rite of passage.

Background

For as long as I can remember, I’d assumed I’d be at least 65 before I could afford to retire — and more likely a good deal older. But then, last year (at 61) I was flabbergasted to learn I could retire at any time. As I absorbed this wonder, I realized I wanted to remain working. I loved my job too much. These last few years have been the happiest of my long career — surrounded by fellow gear-heads and Web challenges, growing at my not-so-tender age into the latest technologies (HTML5 and responsive, in particular), leveraging my skills in some ground-breaking projects, and, most of all, belonging to a fantastic team.

My team

Best team ever

Fast forward seven months…. In July, Mr. Web Diva and I set off on what turned out to be the trip of a lifetime. While that’s a story for another day, the thing is it changed me.

In one of those twists of fate, those same three weeks were a pivotal time for my institution; and it too changed. Responding to a budgetary crisis, enormous reductions in staff had been announced. Returning, my astonished eyes saw fear and discouragement where I never had before. It seemed to have percolated through the system in next to no time.

In retrospect, that first day back I began a grieving process. Four days later, I was one of 650 offered an early retirement package. This time I leapt at the opportunity. I’ve never once in the intervening weeks doubted that decision. But oh the grief… and the confusion of simultaneously tapping into deep wellsprings of joy and possibility.

The sweet grief

As my team bid me farewell last Wednesday and Thursday, first with a stunningly tender retirement party and then a myriad kaleidoscope of good-byes — the hugs, the kind words, the many smiling faces — I was dumbfounded with appreciation. What struck me is something I had never realized before. You don’t talk about it at work. You don’t even think about it. It’s love. It’s that deep pulse of happiness I’ve felt the last few years belonging to such an amazing group of people.

Why, I wonder, do we avoid this thought? If I’m any gauge, it’s at least in the best interests of productivity to squash it. But my best guess is it has to do with the English language. This poor single word has such a range of significant meanings — each with its own resonance. Greek does it much better with four words. I can’t tell whether this is philia or agápe. But whatever it is, it feels wonderful and right — even for the workplace. And it means parting is truly a sweet sorrow — filled with tears and laughter and the best of memories.

I’ll never forget walking into our large light-drenched break room — packed this time not just with cheerful furniture and autumn views of Centennial Park, but also with people, balloons, banners, flowers, even a slideshow of my work. It took my breath away. And I’ll never forget all the hugs and good-byes from my last hour on the job. It’s like a photo album in my heart.

Up next?

So here are a few of the things I’ve been itching to do, and now presumably will have time.

  • Work more with the W3C’s WAI (Web Accessibility Initiative). Such fun. I’m crazy about this team too, and now I’ll have more time to really dig in. Maybe I’ll even figure out the perfect code for an accessible and responsive illustration. Ha! But I’ll have a blast trying.
  • Along similar lines, I can’t wait to finish up Accessible Nashville for the WordPress Cities project.
  • Learn more NVC (Nonviolent Communication).

What’s is all about, Alfie?

In Buddhism, there is long (very long) honored transformation around my age from what’s termed “householder” to monk or ascetic. Of course it’s traditionally associated with men — wealthy Asian men at that — not baby boomer American geek moms. But still… somehow… it fits.

It’s not that I’m leaving behind house, family or (heaven forbid) the Web. Instead my focus is naturally shifting — like my stars tugging me gently towards forgotten longings for a rich inner life.

The details elude me. Writing, perhaps? Or scuba-diving with my better half?

Whatever it is, I’m doing my best to ride its wave — encouraging it with my own peculiar brew of NVC, podcasts, Kindle daily deals, church politics (of all things unholy), and of course, creating for this wondrous medium, the Web.

An Homage to Accessibility

I just happened to look at this blog of mine and was most surprised to discover I haven’t said a word about Web accessibility. I’d thought this was where I was storing such snippets. But it must have been on other blogs. No matter — this is where my accessibility output will be going forward.

Jennifer Sutton and Andrew Arch

Jennifer and Andrew of EOWG

So…. life unfolds in astonishing ways. This fall I had an amazing opportunity fall into my lap. It was to expand my professional development — and I cannot thank my employer enough.

Unlike my pervious career (librarianship), in Web development there is an astonishingly rich smorgasbord of professional possibilities. For about a minute I was overwhelmed. But then, bubbling up from deep inside, I knew beyond a shadow of doubt that I wanted to pursue accessibility.

Why? I explained it (mostly) some years ago in another blog: My Father’s Daughter Blogging Against Disablism.

The big question was how? The only person I knew to reach out to was Shawn Lawton Henry of the W3C’s Web Accessibility Initiative (WAI). I’d seen her keynote nine years before at HighEdWebDev. I don’t usually remember speakers nine weeks, let alone nine years. But there was this moment. She was pulling up a news site, probably to demonstrate its accessibility or lack thereof, and there front-and-center was the news that Christopher Reeve had just died.

Shawn was so stunned she put her head down on the podium. It took me a second to realize why, but then the light dawned. In front of a hundred or more people, she had just lost one of her heroes – a champion of the disabled. That probably would have been enough, but she cinched it a few weeks later. During her talk she mentioned that if we emailed her she would send us business-card-sized summaries on Web accessibility. The cards even had Braille. I took her up on this offer, fully expecting to never hear back. But a lovely packet arrived exactly as promised. How could I ever forget such a speaker?

Fast forward to autumn 2012 — and yet another surprise. Shawn was still at the W3C. I asked her how I might do professional development in Web accessibility. And here’s the biggest surprise of all…. I was invited to join Shawn’s group – the WAI’s Education & Outreach Working Group (EOWG).

This then led to my attending an EOWG face-to-face and the 2013 CSUN International Technology and Persons with Disabilities Conference. And now (two weeks later) I’m starting to truly absorb this new adventure and put the pieces together. The three that emerge the most clearly at this juncture are:

1. A resolve to share my passion for accessibility as broadly as I am able.

Since I first learned of Web accessibility (1997, perhaps?), I have been doing this work when I know how and have the opportunity. Usually it’s been those moments when I’m coding a core theme and make a decision about something most people have no inkling is on my plate. For example, do I code the logo in <h1> tags? And how do I make that logo’s text not show visually yet be available to screen readers?

I’ve been very quiet about this work and what I know. But no longer. I must speak up. I must learn how to convey what I see — that making Web technologies accessible is a win for everyone. Obviously it’s a win for the disabled. Actually it’s much more than that for them. It’s justice and respect. But it’s also an enormous win for management and authors. The business case is not rocket science. Roughly one in five people in the U.S. is disabled. That’s 20% of their potential customers. And it’s a big win for developers. Accessibility principles future-proof our work and foster innovation.

2. Understanding the importance of that other web — the interdependent one.

It’s people from my past who made my decision last fall so obvious. And they continue to inspire me. Among the most important are:

  • My father, whom I miss more than I can say. He would have been so proud to know I’m part of the WAI.
  • My dear friend Patty Jenkins, who keeps pestering me to tell her about CSUN. Patty — I will this weekend. I promise.
  • My dear friend Marguerite Mills, who called me (appropriately) a knuckle-head when, for weeks, I forgot to tell her about the WAI.
  • My main report Scott Sobecki, who really needs another photo — and lunch.

3. Hats off to EOWG members for their passion and hospitality.

They too inspire me. Here are the ones I’ve met thus far.

  • Shawn Lawton Henry. Of course. Our fearless leader.
  • Andrew Arch. He flew in from Australia, and tackled this work with no signs of jet lag. Not to mention he’s spearheaded the great work on WAI Training.
  • Helle Bjarnø. A fellow librarian who has embraced the Web.
  • Jennifer Sutton. She took me under her wing, taught me how to guide a blind person (which I learned is a joy), and inspired me to tackle Twitter — yet again.
  • Shadi Abou-Zahra. He’s clearly a brainiac developer, and non-stop good-humored. Wow.
  • Sharron Rush. Someone (Dennis Lembree?) dubbed Sharron “Accessibility’s Mom.” Yes. From her very first email to me, she has been a bedrock of support and encouragement.
  • Wayne Dick. A soul brother. And what an inspiring advocate for the low vision community.

Next up…. I plan to actually look at my notes from CSUN. And call Patty.

My July Challenge: “Geek In”

July. Like most people in the U.S., I associate it with watermelon, fireworks, hot days. But this July for me is a “geek in” — my term for spending between 10 minutes and 10 hours each day coding for the Web.

I’ve been doing a monthly practice of forming new habits or changing old patterns in my life since February. It’s my version of what Leo Babauta so tirelessly recommends in his fabulous blog, Zen Habits.

At the same time, I managed to over-extended myself in a big way – having committed to far too many volunteer activities. I truly cared about each of the many things I was doing, but it was just too much. And I paid the price I hear many wise people speak of in many places — in particular Thomas Merton.

“There is a pervasive form of contemporary violence to which the idealist… most easily succumbs: activism and overwork. The rush and pressure of modern life are a form, perhaps the most common form, of its innate violence. To allow oneself to be carried away by the multitude of conflicting concerns, to surrender to too many demands, to commit oneself to too many projects, to want to help everyone in everything, is to succumb to violence… It destroys the fruitfulness of his own work, because it kills the root of inner wisdom which makes work fruitful.”

Thomas Merton
Conjectures of a Guilty Bystander, 1966

I happened on this quote in May, when I was at my lowest ebb. Nothing was wrong in my life. My family is the best. I love my job. My team is stellar and the work rewarding. I loved volunteering too. I can’t say enough good things about my church and the other non-profits I’m involved with. There were even moments of joy.

Nevertheless, I was reduced to that mode of putting one foot in front of another — having trouble sleeping many nights, teeth clenched on my worst days. And I lived with great fear that I would lash out from exhaustion when faced with life’s inevitable conflicts. I’m pretty sure I didn’t — at least not directly. But that fear is every bit as draining as remorse. In a way, it’s reliving remorse.

Then I heard Tara Brach read the words of Thomas Merton. As this wisdom percolated into me, the quote served as a clarion call to return to myself, to the present moment, to what matters most.

For me one of the things that has mattered most over the last 18 years has been creating the Web. As with most momentous things, I have trouble articulating why it matters so. The word creation is certainly a key part . As The Artist’s Way points out so beautifully, we humans are all about creating. Another key part is the generous sharing of information — how countless numbers of people put incalculably valuable information out there where anyone with Web access can help themselves.

But over the last year, I’ve drifted further and further from this soul-source of mine. Actually, it’s been in the making for longer than that. As best I can tell the reason is not fully believing how important this is to me. How could something mean this much to me when it didn’t exist when I was born? (Not even in science fiction.) I don’t know the answer to that one. Perhaps it’s a koan. I just believe that it is so. And this month is an exploration of that possibility.

One week has been a strong affirmation. Mostly I’ve been digging into the fundamentals of responsive design. I’ve taken the Skeleton boilerplate and from it have built the rudiments of a foundational WordPress theme. It’s nothing I can share, but of course I have ideas for the future — once I’m a tad bit more comfortable with this.

But this first week I’ve been on vacation. Next week will be a much more real test of my belief in the Web as a soul-source, not to mention my resolution. Hopefully I’ll keep you posted, since this blog is now a way to hold me accountable….

Nashville Rocks SEO

Thursday evening I went to the local SEO meetup for the first time — and my stars was I impressed. Why?

  • Ross Jones gave an excellent presentation on the whys and hows of link building.
  • The people attending represented an astonishing variety of interests and backgrounds — salvage industry, mommy blogger, web 2.0 marketing for lawyers, wedding photography, magazines, etc.
  • But most of all, I was delighted by how thriving and active this group is.

Meanwhile, so I don’t forget, here’s a list of some of Ross’s favorite link building strategy bloggers and resources.

The last one had that serendipitous magic going for it, and whisked me off to the site of some women SEO consultants: Outspoken Media. And this reminds me…. I need to blog about being more-or-less the only woman speaker at WordCamp Nashville. Perhaps perusing this blog will help me formulate my thoughts about this?

But I wander. Thanks again, Ross, for an excellent meetup!

Inspired

Yesterday was one of those magical days. I knew I would enjoy getting together with fellow WordPress geeks. That’s even though I didn’t like the big attraction — beer — and, as expected, there were very few of us. (Seven, I believe. “Small, but mighty,” to quote Randy.) Nevertheless it vastly exceeded my wildest dreams. A shooting star, it was.

Some of the pieces. I….

  • Was given the courage to try purchasing Adobe CS6 Design & Web Premium. Although it didn’t work out (somehow I ended up getting the Windows version when ordering from and for a Mac, and am now in the throes of getting a refund), I had enough hutzpah left to download the demo version. Oh my stars. Photoshop is a drool fest and Dreamweaver FTP is screaming fast. This in turn started me on a tear of….
  • Actually doing web design and development again (until 12:30 last night). Astonishing. That’s the heart of the inspiration. It was a moment waiting to happen. I’ve been clearing my deck of volunteer work the last couple of months, and suddenly have a little home time where I can do whatever I darn well please. So guess what I please?
  • Am inspired to tackle Git and GitHub. Hubba, hubba. Gonna git me some me some social versioning — and hang out with the real cool webbies.
  • Tuned into the gorgeousness that is the website Media Queries. Hola, España!
  • Then saw the amazing stuff my good pal Sister Bubba is up to. Site-Shack — you rock the responsive!
  • And quite a few other things, but if I keep enumerating them, I will not actually do any real web design or development, and therein lies danger — danger of snuffing out this glorious spark.

So onward. And thank you, thank you, thank you fellow Nashville WordPress Developers!

P.S. If you spot typos, please let me know. In the interests of getting back to code, my copy editing suffers….

My WordPress SEO Slides

Dear WordCamp Friends,

What an awesome day!

I just did a quick upload of my slides to SlideShare. Here’s the link for now. (I plan to go back and make it faster, at which point the URL may change.)

http://www.slideshare.net/happywebdiva/search-engine-optimize-for-wordpress-in-3-easy-steps

I hope to see you at the Nashville SEO Meetup soon!

Geek on,
Anna Belle

 

Top Picks for SEO Resources

Here’s a list of some of my favorite Search Engine Optimization resources for my friends at WordCamp Nashville 2012. I hope you find them helpful.

Beginner

Intermediate

 Advanced

Resources to Subscribe To

An Assortment of Tools

Clean Up 404s with Google Analytics

I’ve been on a 404 bender of late.

It all began with a server migration and improving the way 404s were rendered. While poking around the Web, I happened across a promising Google Analytics tip on tracking these evasive creatures. So I captured the code, pasted it in, and a day later looked at the results.

Nada. I then looked at the code more closely and realized it was the old format, which one usually puts in the footer. No problem. But a day later still nothing.

Now it was a challenge and I was determined. I found one blog post using newer code format, but one part of the JavaScript looked off. Given that I’m no JS ninja, I tried it. It turned out to be a step in the right direction, but sure enough — that one bit of JS was indeed off. All of the results were the same. “404.html?p=/page_not_found_uri/”.

More scrambling…. and somewhere along the way, buried in a forum as I recall, I found some code that looked right. Jackpot. Now when I check our Google Analytics Top Content and enter /404.html in the page filter at the bottom I get a lovely tidy list of 404s, including their source.

To save others who might be on the same quest, here’s the code to use in your 404 html pages. Just replace “UA-xxxxxxx-x” with your account number. Then get out your virtual feather duster and start cleaning out those cobwebs.

<script type="text/javascript">
google.load("jquery", "1.4.2");
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>