accessible web content

Let’s figure out the best way to convey information, no matter who our audience is.

How people read online

When reading online, people: 

• Skim and scan for the information they need 
• Pay the most attention to information at the top of the page
• Only read about ⅓ of the words on the page

Understand your audience

• Who is your audience, and how do they talk about the subject
• What questions do they have, and how they would phrase them
• How they describe things, and what words they use 
• Apply that understanding to your writing

Organize your content

• Answers to primary questions should be front and center
• Focus on your primary messages and what matters the most to your users
• Less important content comes next
• Save the least important content for last

Plan your content before you write!

Content planning example

Name of page	Remote Access to Resources
Primary audience	Employees
Secondary audience	Upper management
Content goals	As a researcher who is working remotely, I need to know how to find the library’s electronic resources since I can’t access the physical materials
Primary message(s)	The Library can provide a lot of support remotely, and depending on what you need, there are ways to find what you need through our intranet pages
Secondary message(s)	While we aren’t staffing our physical location, we are working hard to make sure our electronic resources are available and up-to-date
Call(s) to action	Contact the library if you have a research question or submit a request if we don’t have access to what you need

Headings

Once you organize your content, break apart the words with headings so that scanning becomes an easy and helpful task. Take this blog post as an example, each section is broken up with Headings.

Voice and tone

• Write like you talk!
• Write how you would respond to someone on the phone or in person
• Say “I”, “we”, or “us”
• Use active voice

Keep it short and simple

• Use lists
• Make use of parallel grammatical structure wherever you can
• Support active space between lines, headings, and paragraphs
  • give your content room to breathe!
• Cut unnecessary text
  • meaningless modifiers (please note, keep in mind)
  • redundant instructions (fill out the form below)
  • adverbs (very, helpfully)
  • weakening phrases (maybe, perhaps)
• Re-think how you’re using screenshots on web pages

Meaningful links

• Users should have a good idea of where they’ll end up when they select a link
• This is critical for visually impaired users who use a screen reader and may skip through the text to read links
• Don’t use…
  • Click here
  • Learn more
  • Click for details
  • Full URL in the text (unless it’s needed in a reference list)

Alternative text (Alt text)

• Text substitute for audio, visual, and other non-text content on web pages
• Ask yourself:
  • What is this image doing here?
  • If I couldn’t use this image here, what would be in its place?
  • alt text should be accurate, equivalent, and succinct
• Let’s work through an example together (adapted from WebAIM)

The alt text for this image needs to be more descriptive based on the context of the caption. “Painting of George Washington” isn’t adequate, given that the user is most likely more interested in the painting itself rather than the subject. Rather than describe the painting in the alt text, I’ve written “Painting of George Washington crossing the Delaware River” which provides enough context to allow the user to identify the image. I intend to go into detail about the painting in the body text.

Accessibility in action

All the tips shared here and in my other blog posts are not only useful for communication but also will help you create accessible web pages. Minor changes have broad impacts, as these web user stories show.