Writing for the Web: Quick Tips for Friendlier Pages Robyn Ness & Beth Snapp July 2014

Housekeeping Sign in Evaluation Documentation –go.osu.edu/writingfortheweb –Handout –Instructions on CarmenWiki –Videotaped Questions

Goals Web Governance Committee web standards library.osu.edu  About Us  Policies & Procedures Improve usability of our websites

OSL Web Standards screenshots

5 Quick Tips for Friendlier Pages 1.Scannable Text 2.Clear Links 3.Correct Headings 4.Clean Formatting 5.Basic Web Accessibility

What’s wrong with this page? Not Scannable Unclear Links Poor Headings Inconsistent Formatting Broken Accessibility

Scannable Text

Word Wall vs.Scannable Text

Scannable Text Short paragraphs Bulleted lists White space

Clear Links

Unclear Linksvs.Clear Links ✔ Example 1

Unclear Linksvs.Clear Links ✔ Example 2

Unclear Linksvs.Clear Links ✔ Example 3

Unclear Linksvs.Clear Links ✔ Example 4

Good Links Descriptive text –Title of the document or page –Short descriptive phrase Not the full URL Not Click Here

Correct Headings

Incorrect vs. Correct Headings

Correct Headings Concise Content Hierarchy of heading levels –Use them for meaning, not for text size. –Don’t skip levels.

CMS Tip Due to our site template, the editable content starts at Heading 3.

Clean Formatting

Inconsistent Styles vs. Clean Formatting

Clean Formatting Don’t use ALL CAPS. Use bold and italic text sparingly. Don’t use underlines, which implies links. If you feel the need to use a lot of text formatting, revisit your text for scannability and appropriate section headings.

Special Cases Use Styles for special formatting. If you need help, ask for advice from AD&S.

Web Accessibility Is... Removing barriers that prevent access to websites by people with disabilities. We need to design for visitors with: Visual impairments Auditory impairments Motor/mobility impairments Cognitive impairments

Web Accessibility Some elements of our sites are in your control; some elements are part of the CMS. Focus on elements of content that are in your control. Most regular text content is highly accessible. Focus on a few easy changes...

Focus on… Correct heading hierarchy Clear links Image description tags (“alt” attributes)

No ALT Content vs. Accessible Images

Trickier Cases for Accessibility Data tables –require special labeling PDFs –require special formatting Videos/Audio –require captioning or transcripts Online Forms –require special labeling For these, ask for advice from AD&S.

Accessibility Red Flags Images of text (in place of text content) Conveying meaning with only color

Putting it all together…

Before After

go.osu.edu/writingfortheweb Questions?