Search Engine Optimization (SEO) and Accessibility
A Quick Guide
It's an easy win-win to optimize your content for search engines and accessibility.
How and what you write for assistive-technology users also improves how you rank with search engines, such as Google or Bing, which can drive more traffic to your website.
Behind the scenes, search engines and assistive technologies read the same Hypertext Markup Language (HTML) to understand your content. HTML is the language of the web.
But as an author, you don’t have to write in HTML to attract the attention of search engines.
You have control over content structure and word choice, the fundamental variables for content optimization.
How to Optimize Content for All Users
Write a Unique Title for Every Page
The page title [<title>] is what appears in search results, in the tab of an open browser window, and often as a link in navigation or a link on social channels. On the web, the page title orients all users, and it's often the first thing a screen-reader user hears.
Use keywords in your title that make the substance of the content clear for everyone — favor clarity over cleverness.
Use True Headings and Use Them in Order
“True headings” refers to the use of actual headings [<h1>, <h2>, <h3>] instead of boldface or other styling. Technology does not recognize styling as a heading.
Use headings to break up blocks of text. This makes it easier for users to scan content and find what they need.
Headings also communicate content relationships and hierarchies, so always use headings in order.
Use keywords in headings to provide clues to users about the substance of a particular section.
A key tip: Assistive technology users must use headings to navigate your content — imagine listening to your entire page.
Highlight Key Information with Lists
Lists are a great way to break up blocks of text and highlight important content.
Lists make it easier for users scanning the page to notice important information, and lists are a cue for both assistive-technology users and search engines about the significance of the content.
As with headings, create true lists instead of symbols, such as dashes or hyphens.
Create an unordered list [<ul>] with bullets, or create an ordered list [<ol>] when the items in a list are sequential or hierarchical.
Write Meaningful Alt Text for Images
Alt text for an image, also known as a text equivalent, serves one of three main purposes:
- Describes the image (how would you explain it to someone over the phone?)
- Relates the meaning or mood an image conveys
- Defines the function of the image, such as a link (the alt text should be the link text)
Keep alt text concise and use clear language.
Avoid writing:
- “Image of” or “photo of” — assistive technologies announce to users that it is an image
- Characters like “* ! #,” emoticons, and excessive punctuation
Write Out Text
Avoid images of text. Images of text do not scale across devices, and neither assistive technologies nor search engines can read the text. Logos with text may be an exception.
Consider writing a caption for the image or explaining the text in the content or body of an article.
Write Clear Link Text
Write link text that makes sense out of context and makes the destination clear.
Descriptive link text helps all users. A page full of “learn more” and “click here” links negatively affects your site’s usability and the accessibility of your content, and is a missed opportunity for search engine optimization (SEO).
Instead of "learn more" for a link to a conference registration page, write, "Register for the Name of Your Conference."
Descriptive links are particularly important for screen-reader users who may hear a list of links on a page without the surrounding context.
Descriptive links are also important for visual users as they scan the page. By design, links may stand out from the rest of the text, while the link text communicates the destination.
And finally, think strategically about the purpose and value of every link; more doesn’t mean better.
"Every link is an invitation to leave the page" —Mike Shebanek, Sr. Director of Accessibility, Yahoo.
Easy to Learn HTML Markup to Structure a Page
Notice opening and closing tags around the page title, headings, paragraphs, and lists.
<title>The Page Title: Content Zen</title>
<h1>Heading 1 Quick Tips for Headings</h1>
<p>The page title usually appears in search results and in the tab of a browser window, and it’s often the first thing screen reader users hear.
Write a unique title for every page that clearly indicates the substance of the content — this helps users and search engines. Think about words your users use to search for content. Use those keywords or short phrases towards the beginning of concise headings. This makes it easier for users to scan a page quickly and find what they need.</p>
<h2>Heading 2 Nested Under an h1</h2>
<p>Use headings in order to communicate content hierarchies and relationships. Follow this h2 with an h3. Breaking up blocks of text with headings makes it easier to read, whether users are scanning your content on a desktop or on a mobile device. </p>
<h2>Heading 2 Tips for Writing Web Content</h2>
<p>Always:
<ul>
- <li>Define acronyms</li>
- <li>Use plain language for clarity</li>
- <li>Break up walls of text with headings, lists, and white space</li>
</ul>
</p>
<p>Avoid:
<ul>
- <li>All caps</li>
- <li>Jargon</li>
- <li>Blobs and walls of text</li>
</ul>
</p>
If You Think You are Too Busy
Consider how long it will take you to do the simple things discussed here versus how time-consuming and frustrating it is for users to read unstructured copy, guess at what's on the other side of a link, try to read a blurred image of text and so on.
Still not convinced? These days you cannot predict where or how users will consume your content.
Consider, for instance, how many users access content on a mobile device instead of a desktop. Adhering to the best practices described above will ensure your content behaves as intended across all technologies.
You and everyone you know benefits from these best practices. Everyone experiences situational disabilities that interfere with the ability to read, understand and interact with a website.
Examples of situational disabilities include the challenges of reading a screen in bright light, scanning an article on a crowded, noisy train or trying to book an airline ticket on a site that bombards you with pop-up ads (does anybody actually like pop-ups?).
Consider all of the ways and all of the devices you use to access content, and what makes the content easy or difficult to consume.
Remember, your website is not about you; it’s about your users.
Definitions
- Accessibility:
Everyone can read, understand, navigate, and interact with your content, regardless of ability - Assistive technologies:
Equipment, devices and software that help people access and interact with the web, including screen readers, screen magnifiers, and switches - Content:
Everything on or attached to a website, including text, documents, images, videos, podcasts, PDFs, etc. - Search engine optimization (SEO):
Search engines, such as Google, can find, index, rank and connect users with your content
Tips: Writing for the Web
Always:
- Define acronyms
- Use plain language for clarity
- Break up blocks of text with headings, lists, and white space (it’s acceptable for a sentence to stand on its own)
Avoid:
- Jargon
- All caps. In addition to being perceived as shouting on the web, all caps makes it difficult to distinguish the shapes of letters and thus more difficult to read
- Content just for the sake of content. Say what you need to say and end it there
Additional Resources
- Plain Language at a Glance
- SOAP (Stanford Online Accessibility Program)
- WebAIM (Web Accessibility in Mind)
Interested in more on SEO? Start by reading the Moz Beginners Guide to SEO.
For comments and questions about this article, contact Wendy Moltrup, Content Strategist with the Office of Communication and Public Affairs.