Making WordPress Accessible to All

I have written previously about our focus on accessibility in the WordPress mobile apps. Both iOS and Android provide an array of options focused on making their platforms fully accessible to everyone who might want to use them. Mobile apps get to benefit from these accessibility tools for “free,” it’s just up to those of us who make apps to support them. Over the past few years, we’ve worked hard to do a better job of that with WordPress.

Designing and developing the apps to support accessibility options isn’t difficult in itself. What’s often hardest is simply remembering to make it important. Having a diverse team helps here; when the team building a piece of software is diverse, it’s not so difficult to keep in mind that not everyone can read the “default” text size, or tap a tiny link on a touchscreen, or understand the narration in a tutorial video. Another way we’ve been making this a priority on our team is by spending time talking to real people who use the apps, to expand our sense of empathy for the problems they might have when doing so.

A few months ago, my colleague Cesar provided a great example of this for our team. During his support rotation, Cesar had interacted with a person with a visual impairment who uses our apps. That experience made him want to learn more about the challenges that using our app might present for people who are blind or visually impaired. Eventually, he was able to connect with a group of students at a local university who have a visual impairment or other disability, to get their perspectives and talk about their experiences using WordPress and other mobile apps. Cesar listened to their comments with empathy, and left with some important lessons, including:

  • The WordPress apps currently do a great job of supporting VoiceOver (all the students he spoke with used iOS, but we also support TalkBack on Android).
  • That said, there are some interactions in our apps that are tough to navigate with VoiceOver — the process for adding media to a post was one area for us to improve.
  • One student with a visual impairment mentioned that they use VoiceOver because of insufficient color contrast in a few places in the apps. We don’t always think about color as being a significant accessibility concern, but it can mean the difference between needing an accessibility tool like VoiceOver or not, for some people.
  • We need to test with Braille displays, and find people who can help us learn more about how our apps work with that kind of technology.
  • People come to rely on the accessibility options provided by native apps, and they miss it when they have to switch to web interfaces. One student mentioned that they didn’t use WordPress because there wasn’t a desktop app that provided all of the accessibility features that they’ve come to expect from mobile apps.
  • Localization is more than just translation! These students go to school in Hong Kong, and said our app felt “very Hong Kong.” As Cesar put it: “This has always been a recurring theme… the feeling than localisations for Traditional Chinese were made with the Taiwanese market in mind (even though both Taiwan and Hong Kong use traditional characters, Taiwan speaks Mandarin, while Hong Kong speaks Cantonese).”

Accessibility impacts everyone who uses WordPress: the bloggers, builders, and business-owners who create sites. But it’s also important for the readers, followers, and visitors who come to their sites. Seeking out differences and thinking about how they affect the products we create is an important part of the process of designing and building. Without reminding ourselves regularly to think about people who experience the world differently than we do, we can’t design products that meet their needs.

Cover image by Søren Astrup Jørgensen via Unsplash.

Jetpack Identity

I ordered Identity: Chermayeff & Geismar & Haviv a few months ago, and today it surprised me when it showed up at my doorstep. Over my lunch break, I took a quick look at it, and it’s a beautiful book I can’t wait to spend more time with.

The official product shot

After a few minutes I wondered whether Jetpack’s new logo would be included in the book. I figured it wouldn’t, since there were only a few months between when CGH did the logo and the book’s publication. Lo and behold…

Continue reading “Jetpack Identity”

Garden Design i2

At Automattic we call new rounds of design work “iterations” and post them in the format i1, i2, i3, etc. These first few days of spring, I’ve been working with my garden designer Humzah Khraim on i2 of my garden. More pictures once everything’s done and the weather is nicer, but here’s a taste of some of the changes so far.

IMG_0921

Here’s the before picture from one year ago.

Enabling Network Link Conditioner on iPhone and iPad

Network Link Conditioner is an Apple tool that lets you simulate adverse network conditions on your Mac or iOS device. If you’re a designer or engineer who makes things on the internet, it should be considered an essential part of your toolkit. Without it, you can’t possibly imagine what it’s like for people to use the websites or apps you create out in the real world.

But Apple makes it kind of difficult to find. My colleague John Maeda wrote a guide that walks you through using it on your Mac. I couldn’t find a simple, up-to-date set of instructions for using it on iPhone, so here’s how you do it as of iOS 11.

Continue reading “Enabling Network Link Conditioner on iPhone and iPad”

Go Vote.

In 2004 I voted for the first time. I was so excited that year, because it felt like we were on the cusp of change. Needless to say, that election was a letdown. I spent that night at Huc-a-Poo’s on Tybee, surrounded by Bush supporters, trying to forget about the weight of my disappointment.

But two years later, I voted again. And Democrats took back the Congress. And two years after that, I voted for Barack Obama. The progress that LGBT people made during his presidency was astonishing, especially to a young gay kid from Alabama who never thought he’d be treated equally under the law.

Last year was the most soul-crushing election I’ve ever experienced, and that’s probably true for some of you, too. However badly I felt in 2004, 2016 was an order of magnitude worse. But I can’t help but remember how fast things changed after 2004. With every election, we have the chance to make our government a little bit better, and more responsive to its citizens. We have the chance to support incumbents who truly care about their communities. We have the chance to lift up new voices and to give them power.

Today, I’m proud to cast my ballot for Cathy Woolard for Atlanta mayor and Natalyn Mosby Archibong for my city council representative. If there’s an election where you live, and you’re able to do so, I hope you’ll go vote today.

Running an effective remote design team

Around this time last year, I got an interesting call on Slack.

callingyou.png

Automattic had recently organized its mobile teams into a new division called Hogwarts, and our new division lead Cate Huston had embraced her new identity. I was coming off of several weeks of time off after surgery to repair a nerve in my hand that I severed during a cooking accident. Feeling down and sorry for myself, I was having a hard time getting back into the rhythm of work. But I was jolted out of my inertia by the reason for Cate’s call: to talk about forming a mobile design team within Hogwarts, with me as its lead.

I love mobile design, and with a second product designer set to join Hogwarts, I knew it was the right time to start a design team. Despite having never really felt like much of a leader, I thought it made sense for me to do it. And so, the Ministry of Magic was formed. I was nervous at first, and made plenty of mistakes. But through a process of constant iteration not unlike how we make products at Automattic, I’ve gone from being a reluctant leader to an enthusiastic one. I’m far from an expert on this topic, but Hogwarts, once an organization where design was often an afterthought, has become one that has an effective design team at its center. Here’s a few of the things I’ve learned in my first year as a lead.

Continue reading “Running an effective remote design team”

Designing Login for the WordPress apps

Earlier this year, a project squad in our mobile division set out to work on a surprisingly tricky task: creating a simple login flow for our mobile apps that works with any WordPress site.

Why would that be hard? Because there isn’t just one flavor of WordPress. Endless hosting configurations, an almost infinite number of plugin combinations, and competing APIs make it challenging to create a single login experience that works for everyone. There are users with multiple sites, and users with no sites at all. Users who are accustomed to desktop computer interfaces, and those who have never used WordPress on anything other than their mobile phone. Multiple paths for logging in had been added over time, each optimized for different kinds of users. As a result, our existing login flow was complex, to say the least.

Continue reading “Designing Login for the WordPress apps”

Improving Accessibility in WordPress with Dynamic Font Sizes

At Automattic, I lead a team of three designers dedicated to our native apps. We focus our time on the design of WordPress for Android and iOS.

Over the last few months, the developers and designers who work on our apps have been improving our support for the accessibility features available on mobile devices. This includes ensuring our apps properly support features like VoiceOver on iOS, and TalkBack on Android, which make the apps accessible to blind users.

One new feature I’d like to highlight is support for dynamic type sizes. This lets users choose larger (or smaller) text, to find the size that’s most comfortable for them to read. We recently made a change to the text used for blog posts and pages on iOS to make it even more readable. Now, no matter what text size the user prefers — even the largest sizes, which are huge — WordPress responds as the user should expect. This makes the app accessible to users with low vision, in a way that wasn’t possible before.

Screenshots of dynamic text on iOS

If you use an Android device, you can customize your device’s font size, too.

Screenshots of enlarged text on Android

We’re continuing to perfect this feature, so if you notice parts of the apps where it doesn’t work quite right yet, drop us a line, and stay tuned for future improvements.

For more information on adjusting the font size on your device, see these articles:

Originally published on A8C Design.

Just a Bunch of Silly Pictures of Me and my Dog, on the Occasion of Her Adoption Day

L1010919.jpg

Exactly 11 years ago, I brought Maggie home for the first time. A few days later, I took this picture.

This was the first in a long line of silly pictures of Maggie and me.

Eventually, I realized how much she hated being picked up, and I found new ways to make her hate being photographed.

The past eleven years have had many ups and downs, but the constant source of happiness, stability, and love is this pup.

L1050483.jpg
IMG_1159.jpg

I took this one on the scariest day of our lives together; the morning I dropped her off for her cancer surgery.

IMG_1215.jpg

And took this one once she was home.

We’ve both got a little more gray in our beards these days, but we’re going to keep taking silly pictures every chance we get.

Maggie D, you’re the best. Happy adoption day, little bear.

The Big Reveal

After much planning, estimating, digging, hauling, welding, grading, planting, adjusting, and obsessing, my back yard is complete. I’m thrilled with how it turned out and am excited to share the first pictures of it today. But before we get to that, here’s a 2-minute timelapse video that shows where we started, and how we got here.

Shouts out to Humzah Khraim here in Atlanta for a beautiful design and a job well done — if you’re in Atlanta I highly recommend working with him.

Now… I’ve got to buy some furniture for this back porch.

See more in #House