Writing to be read… by a screen reader

Screen readers? What?

If you’ve heard anything about web accessibility, you’ve probably heard of screen readers – devices that allow blind or vision-disabled people to access websites by listening to a speech synthesizer or, in some cases, via a braille display. There are a number of different screen readers; this recent review of three popular screen readers is interesting – the comments in particular illustrate that “accessibility” is different for different users with different needs, an important thing to keep in mind.

If you’ve never seen a screen reader in use, by the way, there are some good videos out there. I like the one embedded below; using JAWS – one of the more popular screen readers – the narrator goes through the BBC website and shows you how it works. Pay particular attention to how the screen reader handles links and headings, and you’ll understand why we always say that you should use heading tags when your page has sections rather than just making the section title bold and why we always say that your links should be semantically meaningful rather than just saying “click here.”

WebAIM, a great source for web accessibility information in general, has an extensive overview of how screen readers work and how to design for them. One of the most important points they make is that, while sighted users tend to quickly scan the entire screen and focus on what stands out as looking important to them, screen readers present content in a linear fashion. (Another “what it’s like to use a screen reader” video I found mentions that in another context: if a student receives a lengthy email from an instructor, they  have to go through the entire email and remember what they have to do or respond to once they’re finished, or even literally take notes on the email as they listen – they can’t just scan the email or easily go back and forth between the email and the response they are composing.)

But I’m not a web designer. Should I care?

What does this mean for those of us who don’t design entire websites, but who do write and publish content on the web? Well, for one thing, a giant block of text is going to be a huge pain for someone using a screen reader. Since they can’t quickly scan to figure out what the most important points are, they are going to have to sit and listen to the entire block of text. It would be much easier for these users to break up your content into smaller portions, using heading tags to separate them.

You’re not breaking it up at random, of course – more than just controlling font size and weight (for sighted readers), heading tags describe how your content is structured. Think of how an outline works – you have section I, and below that sub-sections A, B, C – then section II, and so on. Headings work the same way. H1 is generally your title, then H2, then on down as far as H4 if your content is that complex – then back to another H2, and so on. Or, think about a book with sections and chapters – or even feature story in the newspaper, which may have a headline and multiple sections, each with its own smaller title or headline.

This post, for example, uses heading tags instead of just rambling on and on nonstop. Ta-da!

Great news: Structuring your content using these semantically meaningful, well-organized heading tags also makes it easier for sighted users to scan your page and quickly spot the content they are looking for.

Accessibility benefits everyone.

This is a recurring theme that you find once you start learning about accessibility: many of the measures you take to make your website usable for disabled users are actually usability improvements for most of your users. This is true of accessibility features in the offline world, too – the button that lets someone using a wheelchair open a door is also helpful for a non-disabled (I love the term “temporarily able-bodied“) person whose arms are full of packages.

"Accessible" painted on pavement
flickr: Jonathan Moore CC BY-NC 2.0

The thoughtful folks over at GOV.UK (run by the Government Digital Service, the group responsible for designing digital services for the UK government) recently published a great post, “How to create content that works well with screen readers.” They don’t offer a bulleted to-do list, but rather discuss how screen readers work and some of the potential implications for writers of web content. For example, it’s useful to think about how screen readers interpret acronyms. It shouldn’t come as any surprise that this article concludes that writing content that works well for everyone will benefit screen reader users. Proofreading your content to make sure words are spelled correctly and using consistent standards for how you deploy acronyms and abbreviations, for example, will benefit everyone.

Of course, blind and vision-disabled users aren’t the only people with disabilities who use the web. People with color-blindness, deaf or hard-of-hearing people, people with limited fine motor control or who have difficulty using a mouse, and people with cognitive or memory disabilities can all have a better experience on the web if content is thoughtfully designed.

Captioning your videos will make them usable not only by deaf users but also by those who may want to watch your video in a public place but don’t have a pair of headphones handy. Plain language helps dyslexic users, those for whom English is a second language, and people who are in a hurry. And breaking up those intimidatingly huge blocks of text into more manageable chunks helps pretty much everybody. Making your web content accessible isn’t about providing “special” access to a few users – it’s about providing good access to ALL users, including those with disabilities, while remembering that for some users it means the difference between being able to access your content and being told “no, this content is not for you.” (Besides being a violation of the ADA, that’s just plain rude.)

Want to learn more?

If you find yourself intrigued by these issues, WebAIM’s Introduction to Web Accessibility is a great place to start. For IU-specific accessibility information and some great resources to help you create accessible content, visit Accessibility at IU. The UITS Assistive Technology & Accessibility Center, conveniently located in the Wells Library, has tremendous expertise in web accessibility and is available for consultations, trainings, and presentations.  And we in DUX are always happy to answer – or find an answer to – any specific questions you might have!

Microcopy Matters!

Can one word change user experience on your website, for better or worse? YES. Think about the labels you experience on websites – and in the non-web world – every day. Most of them are just a word or two, and yet you rely on those words to give you confidence that you know what is going to happen if you take a particular action.

A real world example that has been bugging me for years: The gas station closest to my house has instructions on the gas pumps. After you swipe your credit card, it says to “push start.” THERE IS NO “START.” NOWHERE is there anything that says “START.” There is, however, a button that says “PUSH.” Sure, I can figure out that I’m supposed to push that button, but why on earth not use the word that actually matches up to what you’re looking for? What if someone who isn’t fluent in English tries to use the gas pump? Or, for that matter, a nit-picky word-nerd? Insert “banging head against wall” emoji here. (The more you learn about UX, the more stuff like this drives you crazy… it ain’t pretty, folks.) A good rule of thumb, by the way, is to use a label that relates to “what’s going to happen if you take this action” as opposed to “the method by which you take the action” – “submit request” is a much better label for a button on your website than “click.” (If your user is submitting a request, that is.)

Windows 95 "Start" menu including "Shut Down" option
Just try explaining this to my mom.

And speaking of “start,” did anyone else attempt to do tech support for less computer-literate coworkers or relatives in the days of Windows 95? “Okay, now to shut down your computer, click the Start button.” WHO COMES UP WITH THIS? THIS DOESN’T EVEN MAKE SENSE! “To stop the thing, click on the thing that starts the thing.” WHAT. And then, when Microsoft did away with the “Start” label and just offered a round buttony thing that does all the things, everyone still called it a “start button” and then they complained when it went away in later versions of Windows – but that’s another story.

On a more local note, a few years ago our department did a little bit of lightweight user testing on some website labels we were considering. We were about to roll out new-and-improved subject pages that would include lists of databases, and we were trying to decide what to call a short list of databases that were the most generally useful within a subject. Start here? Best bets? Core databases? Research starters? Be like Google and call it “I’m feeling lucky”?

I personally thought “best bets” would be a great label. Short, snappy, suggests that you might want to try these first if you’re floundering, without necessarily tying them to a particular point within the research process (you might also find them useful when you’re in the middle of things). Boy, was I wrong. Thank goodness our user testing involved asking some international students, because “best bets” was all but meaningless to many of them. Idiom, people! Plus, who wants to be gambling if they’re using a library website, anyway? (We ended up using “Start here.”)

On a slight tangent: What even is a “database”? What do you call those things? Subscription electronic resources? Library research tools? I’ve heard students call them “specialized search engines” which is technically not accurate, but understanding how our users think about things helps us use friendlier language sometimes. The same brief user interviews that saved us from “best bets” told us that the word “resources,” within the context of a library website, more or less made sense to people. I’ve never been confident that any label we can come up with for those things will make sense to everyone… but you gotta use something. (If you work on a library website, and you’ve come up with a great label that works well for your users, let me know, eh?)

And don’t get me started on “Useful Links.” The day I retire, I’m gonna go through and change all those labels to “Useless Clicky Things,” which is just about as meaningful.   …Okay, I’m not. But I’m sure gonna think about it.

More recently, as we were about to go live with a totally redesigned search box that was much more prominent on the Libraries’ home page, we had a long conversation about how to label it. We wanted something welcoming, something that would put the search box in context so you feel like you know how to use it. We thought about “What are you searching for in the library?” Well, there’s a saying that “only librarians like to search – everyone else wants to FIND.” (You know it’s true!) And we didn’t want to set a tone of “you’re going to be searching… and searching… and searching.” Eventually, and after some discussion of the relative merits of “what do you want to find” versus “what would you like to find,” we went with “What would you like to find at the library today?” And we also put “Search…” in the box for those who might be looking for that particular word out of habit.

Search box on the Libraries' website

Which brings me to a fascinating article I just read. The very smart folks who run the GOV.UK website found that pages with buttons labeled “Start now” often ended up with users going around in circles rather than clicking the “start now” button. They observed this behavior in the lab when running tests, and then reviewed usage stats to find out whether the same thing happened “in the wild.” It did, so they set about testing different labeling options, using A/B testing to weigh several options and see which performed best. You can read about their testing methods, and the results they ended up with, in “A/Bsolutely fabulous testing” on the “Inside GOV.UK” blog.

There are so many other examples of this kind of thing. Have you ever seen a confirmation dialog box pop up and been completely uncertain about which option you actually want? (“Do you really want to cancel?” with your choices being “YES” and “CANCEL” is a sad but true example.) Beth Aitman, who’s also in the UK – those wonderful UK word-nerds! – wrote a great article about how to write a confirmation dialog.

This stuff – tiny little bits of text that make a big difference – is called “microcopy.” And it matters. It’s more than just labels and buttons; think about link text – what people click on to go somewhere else. Do they know where they’re going? Does the link make sense to them? What about somebody using a screen reader to access your page – do things make sense to them? Iain Broome (another Brit, it appears!) has a fantastic piece on “How to write good hyperlinks” which I highly, highly recommend. In fact, Broome’s article will help you think through the process of writing other things on the web, not just hyperlinks – that is, if you want to write things that are accessible and understandable to your users. I hope you do.

So yes, I may sometimes spend twenty minutes deciding on the absolute best word for a particular purpose. And I may fuss at you more than you may think is warranted if you have a link that says “click here” on your web page. But this stuff matters. Microcopy is the difference between “Please come in; we’re so happy to see you!” versus “This is a door.” Choosing the right words for your website, especially in places that are crucial decision points for your users, can be the difference between “this sucks!” and “success!”

Image-ine That: Writing good “alt text” for images on the web

As the Libraries prepare to move into our new Drupal-powered website, we are also preparing to think differently about how we use images. The new site, in keeping with current trends on the Web, will be somewhat more image-heavy than the old one. Working with our colleagues in the Advancement Office, we plan to offer guidance to help content creators find and select images that will convey the tone and “brand” our website needs to communicate while being both pleasing and informative for people using the site.

Once you’ve chosen an image, you will want to consider providing “alt text” – a text alternative to the image, stored in a metadata field along with the image (any content management system, including our new Drupal system, provides for this to be entered when the image is uploaded or edited). This text is used by people who use a screen reader to “see” the site for them, and may also be useful for people on a low-bandwidth connection (perhaps in a rural area or a developing country) or even people who are browsing via mobile device who may have images turned off to save on data charges or speed up the time it takes to load web pages. Like most design techniques that can be implemented to improve web accessibility, adding alt text benefits more users than just those with disabilities!

At first glance it may seem like a simple thing to input a few words describing your image. But like all web content (and yes, alt text is content!), it’s worth taking a moment to think about how to create this text so that it will be as useful as possible. Think first about what you are trying to convey with your image. What information does a sighted person gain from it? What is the image’s purpose? As WebAIM explains in an excellent article about appropriate use of alt text, context is super-important here. What purpose does the image serve in the context of the rest of your page? A picture of cute kittens may be simply decorative, or it may be used to describe the stages of kitten development. In the former case, you may not need to provide alt text since the image is not contributing to the intellectual content of the page. In the latter, your alt text may read something like “Two-week-old kittens whose ears have not quite begun to stand up.”

Three kittens illustrate the point about using kitten pictures.
In this case, a kitten is just a kitten.
Credit: Mathias Erhart/flickr

There are some special cases when you may change your alt text depending on context, and 4 Syllables has outlined several of them. For example, what if your image has a caption? And what do you do differently if your image is actually a map?

4 Syllables has also created a great decision tree for use in developing alt text:

decision tree - see 4 Syllables article linked above for full description
credit: 4 Syllables

Like all things related to user experience, a little thoughtfulness goes a long way when creating alt text. Take a moment to consider who’s using your content and what they’re trying to gain from it, and the effort will pay off in web content that is more accessible, more usable, more useful – in short, better for everyone!

Two Quick Rules for Readability

I’ve been frequenting a website recently for purposes of obtaining a particular certification.  The site (which will remain nameless) is broken up into learning modules, each with foundational information a user must read in order to complete a series of quizzes and move on through the certification process.  I have found, sadly, that the longer I engage with this site, the worse I am doing on the quizzes.  Now, I could chalk this up to my becoming increasingly dumber as the hours necessary to go through each module sluggishly go by, or I could look for a scapegoat for my poor performance.  I choose the latter.  My scapegoat, then, entrenched as I am in all things usability, is the site’s absolutely user-unfriendly design and its mind-numbing effects on me, the user.

I was reading this article on Mashable.com, and I think it is so on point with its outline of how to make your Website usable.  The offending site I mentioned above is failing on all points, especially when it comes to readability.  Two salient and simple suggestions for improving readability are:

  1. Keep Content as Concise as Possible
  2. Help Readers Scan Your Webpages Quickly

The article’s author, Jacob Gube, states that content should be “easy and pleasant to read, easy to understand, and skimmable.”  The pages on the site I’ve been visiting include extremely long lines of text, filled to the brim with information (including much technical jargon), and tons of embedded links within the text.  I feel constantly disrupted and distracted, having to click on links that navigate away from the main content in order to give me yet more huge pieces of information. Ugh.

Tech blogger Philip Webb stresses the importance of what he calls “chunking up” content for greater usability.  “That’s technical talk,” he says, “for make your page more scan-friendly.  Large blocks of dense text intimidate the reader and causes ‘information overload.’”  With web content, conciseness is a virtue—especially within instructional websites.  Dale’s Cone of Experience, which is an instructional-design model and not the name of a totally awesome PBS Kids science series, shows that people tend to retain only 10% of the information they read.   And studies show that in the hyperlinked world of online reading, attending to wordy text and remembering its content is even more limited.

Here’s where a cool tool can help.  The Readability Test Tool analyzes the readability of your website’s text—whether that be an entire page or a specified section—using several key readability indicators, the most popular of which are probably the Flesch Kincaid Reading Ease and Grade Level tests.  Just paste in your URL or directly input the text you’d like to analyze, and the RTT will tell you how it scores.

http://www.read-able.com/
http://www.read-able.com/

So, for instance, I cut and pasted the text of this very blog post, and it returned a reading level of about the 11th-grade, which is pretty good, considering much of IU’s blog readership consists of young adults—undergraduates and graduate students in their late teens and early twenties.  However, that website that has me in a shame spiral due to my lackluster quiz scores? It has a grade level of about 17, which means more easily understood by 22 to 23 year olds.  A recent report by Nielsen Norman Group stresses the importance of writing web content that is quick to scan and includes easily digestible chunks of information: “If your site targets a broad audience, aim to write at a 6th-grade reading level (or lower). Writing at this level will help audiences of all ages—young and old—quickly understand your content.”

When you aim, especially, to have your audience engage with your site at length, as with the site I’ve been visiting regularly for certification purposes, you need to be economical with words—cutting clutter, enhancing white space, and emphasizing ease of use.  Keep these two simple rules in mind: Be concise and support scanning.

References

Gube, J. (2011). 7 best practices for improving your website’s usability. Mashable. Retrieved from http://mashable.com/2011/09/12/website-usability-tips/

Nielsen, J. (2013). Teenage usability: designing teen-targeted websites. Nielsen Norman Group. Retrieved from http://www.nngroup.com/articles/usability-of-websites-for-teenagers/

Webb, P. (2013). Improve the readability of your web page. Webcredible. Retrieved from http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-page-readability.shtml

Writing for the Web: Tip o’the Week – Twitter

Twitter logoEverybody’s tweeting these days! Libraries, university departments, local mom-and-pop businesses, mega-corporations, even actual human beings. Twitter can be a great tool for libraries to communicate with their patrons, but it can be (and often is) done very badly, doing more harm than good to the library’s public image.

I found a very good, brief slide presentation from The Library Marketing Toolkit: How Not To Tweet. The slides show some example tweets from a fictional library account and explain what’s wrong with them – for example, the fictional account is not making good use of the “bio” field, and some of their tweets are full of jargon. This quick 23-slide presentation is on-target and makes some excellent suggestions.

Minnesota librarian Emily Lloyd put together a useful and engaging “dos and don’ts” list for public libraries using Twitter – well worth reading for academic libraries too: Some Notes on Tweeting for Public Libraries. For example (and this is a mistake I’ve seen many, many times):

Importing a Facebook status, with no re-editing to make it work for Twitter, often results in ellipses followed by a link–and often what’s preceded the ellipses gives no real indication of what you’ll find by clicking the link (so why would you take time to do so?). Sometimes the ellipses come at a particularly awkward or embarrassing point, too, like the one I saw about an author visit that started out slowly describing the speaker: Name of Writer is from blah blah blah, where he was a son of a…[link] Sonofagun.

For those who are new to Twitter, this basic introduction from Mashable will explain some of the basic concepts and terminology: The Beginner’s Guide to Twitter.

Do you follow @iulibraries – or any other library accounts – on Twitter? (If you’re still looking for tweeters to follow, check out my Twitter list of library, tech, and UX folks.) What seems to work best? What gets your attention? Even when you have only 140 characters to work with, it’s still writing – and a little strategy goes a long way!

 

Writing for the Web

Comic: Venn diagram depicting intersection of "things on the front page of a university website" and "things people go to the site looking for"

I presented a workshop on “Writing for the Web” at the Libraries’ In-House Institute in early May. While I could certainly go on and on about this subject, here I will just provide a quick(ish) wrap-up and share my list of suggested readings. (You can find my slides and reading list at https://iu.box.com/s/3665524cdd7bf24464c9.)

Clear communication is essential to delivering an excellent user experience, which is why we have a Website Editor (me!) in the Digital User Experience department.

Writing for the web includes a broad range of strategies:

  • Style/usage (and careful proofreading – typographical errors impact our site’s credibility)
  • Understanding user needs
  • Content strategy

Who’s reading your content?

  • Who are you writing for? Different audiences respond to different terminology, tone, context. For example, if international students or stuffy faculty members are part of your expected readership, you probably want to avoid slang.
  • Context. Where are your readers in the research process? What have they already read?
  • Metrics can help you understand your readers – in the Libraries we use Google Analytics and Crazy Egg.

How are they reading your content?

  • People read differently on the web. They scan pages quickly.
  • LESS IS MORE – don’t bury the important content in filler
  • Mobile devices are heavily used, especially by college students. Will your content work on a smartphone or on a tablet? Does it need to?
  • Content may be repurposed. It might be included on a class page, listened to via a screen reader, shared on Facebook or Pinterest, maybe even (gasp!) printed out on paper.
  • Content structure and metadata make it easier for your content to flow into these various containers. Improved content management systems make this easier to accomplish.

Some practical suggestions.

Content Strategy!

Kristina Halvorson: Content strategy plans for the creation, publication, and governance of useful, usable content.

  • Plans – there is an overall plan for how content is created, stored, displayed, used and reused
  • Creation – style guide, training for content writers, metadata strategy
  • Publication – editorial strategy/workflow, appropriate use of metadata to help identify, organize, and reuse content
  • Governance – responsibility for content is clear; standards are communicated to content providers; content management systems are optimized to help writers provide well-managed content; search systems and info architecture are optimized to help users find and use published content; content lifecycle is defined so that content is regularly reviewed (ROT analysis: Redundant, Outdated, Trivial)
  • Useful content – we understand our users’ needs and provide content that helps them to further their goals
  • Usable content – content makes sense to our users; they can find what they need and they know what it is when they find it; it is placed in appropriate context for them

To sum up: We need to talk to our users and listen to them so that we understand why they are here and what they need to do. We can then create calls to action that make sense to our users and help them fulfill their goals.

Suggested Readings:

Continue reading “Writing for the Web”

Writing for the Web: Tip o’the Week

I recently stumbled across a pretty good conference presentation about writing Web content, given by writer/information architect Steph Hay last year in Dusseldorf. (Isn’t technology great? There’s no way I could have attended a conference in Dusseldorf, but I can watch the video!) I thought this might be of interest to folks who attended my “Writing for the Web” presentation at the Libraries’ In-House Institute, or those who thought about it but chose another presentation instead.

In the presentation, Hay notes that the three elements of compelling web content are focus, credibility, and consistency. She also says that in order to fulfill these goals, content should be meaningful, helpful, and results-oriented (there is a “call to action” involved and the user knows what will happen if they take the suggested action). Those are all good points, and she elaborates on them somewhat in her presentation – but the tip that really stood out for me was this one:

Rewrite anything that sounds ridiculous when read out loud.

Now, as a poet I’ve done this for years – when revising a poem I always, always read it out loud to myself (and yes, my cats think I am a nut who walks around the house muttering to herself all the time). But I will admit that I never actually thought about doing this for web content, and it’s a rather brilliant idea. Not only will it help you to identify tone that isn’t quite right – too wordy, too stuffy, too flip – but it will also help you to typos.

Wait. I just read that out loud. It will also help you to IDENTIFY typos. Yeah. See? It works!

So give it a try, and let me know what you think…

You can view Steph Hay’s full 34-minute presentation here (it’s pretty engaging), or go to http://vimeo.com/34840666