Writing for the Web

Alt Text

"Adding alternative text for images is the first principle of web accessibility." Web Accessibility in mind has a lengthy article on Alternative Text. 

Just what is a good Alternative Description? John's article explains the nuances emotion adds when writing alt descriptions for images.

Here are the HTML specs on the alt attribute for images.

Wondering why alt descriptions are so important? Consider what it's like browsing Instagram while blind.

Writing Guidelines Checklist

Content

• The content of the website provides value to the user.
• The writing supports the reader’s task.
• The user is not required to read or navigate through irrelevant material to reach relevant material.
• The text includes a call to action.
• The reader interacts with the text as much as possible.
• The information is accurate, authoritative, and up to date.
• The information will be easy to maintain.
• Items that need to be regularly updated have been documented.

Readability

• The text is comprehensible and targeted at the right reading level.
• Sentences are short, direct, concrete, and active.
• New information is grounded in known information.
• Text is in lay language, avoiding jargon, insider references, and
• obscure humour.

Legibility

• The typeface is legible and the font size is sufficient.
• Italics are avoided except at large sizes.
• Boldface and all caps are only used for short pieces of text. (Boldface is preferred overall caps.)
• The text has sufficient contrast with the background colour and is not placed
• over a conflicting pattern.

Scannability

• Emphasis is provided with appropriate headings, lead-ins, and pull quotes.
• Opening sentences and paragraphs summarize the content.
• Text is short, simple, and concise.
• Text is specific and objective.
• Text is broken into useful chunks and bulleted

Orientation

• Page titles provide useful orienting clues.
• Headings match the reader’s goals.
• Readers know where they are and what each page is about.

Pagination

• The text is divided between pages based on user tasks (i.e., pages are divided so users can skip portions irrelevant to them).
• If scrolling is required, the user has appropriate cues within the text that more material is present, and horizontal rules are avoided.
• Pages are self-explanatory: each page stands on its own.

Technique

• Fundamentals are sound: grammar, spelling, capitalization, and punctuation.
• The tone is natural and accessible.
• Style is consistent.
• Terminology is unambiguous.
• Active sentences are used.

Links

• Static text is never blue or underlined.
• Text links are left in the default colour.
• Different types of links are distinguished graphically (e.g., audio clips
• vs. video clips).
• Link text is descriptive and specific.http://www.w3.org/QA/Tips/noClickHere
• Email links explicitly show the email address.
• Links don’t cross punctuation or line breaks.

Forms

• The order of steps through the form is clear.
• Submit buttons are clearly labelled with descriptive text.
• Reset buttons are avoided.
• Required fields are clearly labelled.

Metatext

• Metatag description and keywords are provided for each page.
• Non-body text is specific and consistent: titles, ALT text, captions,
• headings, and buttons.

Writing for Screen Readers

• The text is concise.
• The top of the page contains meaningful, page-specific information.
• Link names are self-explanatory.

Format

• The layout does not depend on a specific typeface or font size.
• The specified typeface works well on all platforms.
• The default font size of the browser is used.
• Semantic tags, rather than format tags, are used wherever possible.
• Text aligns with graphics on the page and with other text blocks.
• All centred text on the page is centred around one axis of symmetry.
• The related text doesn’t appear in multiple columns.
• Headings are closer to their body text than to other text on the screen.

Intellectual Property

• The copyright notice is present and in the correct format.
• Trademarks and service marks follow corporate standards.
• Company branding is strictly adhered to.
• No information is confidential or sensitive.

Standards

For each of the following, specify the standards this site will follow:

• Person: [1] 1st and 2nd person (recommended), or [1] 3rd person
• Commas before the last item in a list:

[1] “A, B, and C” (preferred), or [1] “A, B and C”

• Punctuation within quotes: [1] traditional punctuation (“text,”), or [1] logical punctuation (“text”,) (preferred)
• Header alignment: [1] left, [1] center, or [1] right
• Paragraph format: [1] double-space between paragraphs, or indented opening of paragraphs
• Common spelling, hyphenation, and capitalization conventions, e.g., Internet or [1] internet, [1] web site or [1] website, [1] email or [1] e-mail
• Preferred file format for text files (e.g., plain text, RTF, Word, HTML)
• Preferred file format for figures (e.g., EPS, Photoshop, TIFF, PICT, BMP, gif, jpeg)

Users visit your sites to find out how your organizations' processes work and how your products work is a process. The more time you take to identify these processes and put them on the Web, the more users you'll have.

Principles and guidelines are general advice given by experts who have developed a knack for doing something well. The experts  use "gut  instinct," "intuition," "feelings."  Experts follow certain guiding ideas and insights, tweaking here and there when something differs. They use procedures and processes but in different ways each time.

REPRESENTING CONTENT TYPES ON THE WEB

This section suggests some ways to create the five content types on­ line. Some of these suggestions are relatively basic. Ample literature has been written concerning the appropriate way to represent the con­ tent types in multimedia  (see Ruth Clark, 1992). Following are recom­mendations for displaying them on the Web.

Facts Which is which?

Concept/Definitions What is it?

• Use graphics. JPEG images. Photographs to explain new terms. Ideas.
• Use text for short—brief glossary links.
• Take time to explain what the concept is not.
• Test your users with games. Trivia questions. Contests. Etc.

Procedure/Steps How do you do it?

• Provide numbered lists that explain how to do the procedure.
• Write one step per line.
• Use short. terse sentences with action  verbs.                 .              •
• Insert small graphical screenshots to emphasize which one.
• Use links to show possible decisions or actions you might take.
• Include reasons to perform a step.

Process/Stages How does it work?

• Use animation and video to dramatize how the process works.
• Rely on audio for quick reviews.                                                                 
• Provide text that explains how the process works or what happens during the process.
• Separate process into phases or stages.
• Focus on functions, movements, conditions and their results.

Principle/Guidelines What would an expert do?

• Explain the cause and effect of the principle.
• Identify the experts and introduced them asap.
• Identify guidelines and encourage flexibility.
• Provide varying opposing opinions. Not a single rule or order.
• Get users online chatting. E-mailing. Responding to newsgroups.
• Provide a successful database.

Further Reading

Is There a Perfect Paragraph Length for the Web?