Designing for low-vision users
With a recent visual upgrade and some heavy back-end improvements, the new, new Newtype USA site is alive and well. There were some kinks to iron out and still some pages to transition over and populate, but for the most part, people seem to like the new look and organization overall. It was another proud moment for me, being the sole individual behind putting it together. It’s definitely keeping me busy these days—staying on top of it all.
Then I received this e-mail:
The print on your site is way too small and it is difficult to read. I have to copy and paste the words into a document inorder to get my way around the site. Could you please do something about that?
In all my work to make a flexible design that would render across almost all major browsers, all my work to stick to the strictest of specs and standards, I had managed to overlook an entire portion of the audience. I had made a giant assumption about our visitors and their accessibility needs and someone called me on it. The shame…
Coming from a print design background, I know that legibility is sometimes an afterthought. Can’t read it? Move the page closer to your face.
As it turns out, I had read about this very issue a few months back and decided to back-track and find out more about how I could address it on our site. The concept of low-vision design has been around for years, going all the way back to large-print versions of books and even the early computer displays, with the large blocky orange (or green) text on a black background. Yet, when the modern GUI became commonplace, rivaling the quality and flexibility of print design, most users became accustomed to smaller print and a wider palette of colors.
And the simple truth is that while technology has changed, people haven’t. There will always be people who have a hard time reading “normal” text on a screen. Hell, I even have a hard time reading on-screen sometimes, especially when my eyes are tired. I know I have a hard time getting anything done, and so I can only imagine how discouraging it must be for someone who sees that way all the time.
From what I’ve read, the most important aspect of a low-vision design is readability. Now, one clear way to increase readability is to use light text on a dark background, presumably because it’s easier on the eyes. I imagine it like looking at stars in a clear night sky as opposed to looking at birds flying in the middle of the day. When you think about it, we’re all essentially staring into a light as it is. The wear and stress on the eyes can be too much. Unfortunately, I had to stick to the black-on-white color scheme, at least until I can take the time to develop it a bit further.
Another way to increase readability is to enlarge text size and spacing. This I was able to adapt fairly easily. Just change a few properties and there you have it. Added a little margin here, increased the text size there and I ended up with a serviceable version of the existing design that both increased text size and made the task of visually separating items easier for readers.
One other change I made was to increase the amount of real estate the design occupied. The default view was a centered but flexible design that left space on the sides for super wide monitors, but would stretch proportionally so as to not leave a ton of white space. With this new low-vision design, I thought it’d be even better for readability, not to mention scaling, that the page occupy the entire window and reduce to two columns instead of three. That meant that ads would be relegated to the bottom of the page, far below the fold, but it was that or the secondary navigation that had to go.
It turned out to be a lot easier to do than I expected, and thanks to the power of CSS and me just being a stickler for proper code and design, I was able to cook up a low-vision stylesheet in about ten minutes. It mostly comprised of some adjustments to the page and column widths and some tweaking of text sizes and colors, but that was about it. Then I uploaded the CSS, and called it in the site-wide template. Then, all I had to do was implement a style-switching cookie so that visitors could set their preferred style and keep it when returning to the site in the future. I even cooked up a quick page explaining the view options and why they’re important.
I’m starting to realize just how important the experience is for the visitor. Coming from a print design background, I know that legibility is sometimes an afterthought. Can’t read it? Move the page closer to your face. It used to be there was no easy and consistent way to do that with web design—not so anymore. I’ve learned that there’s really no excuse for a site to not be as full-featured and universally accessible to everyone and all devices.
Leave a comment