Page Layout

Writing Content for the Web

Think in “bullet points”

  • Sign up for class
  • Register for the seminar
  • Download the form
  • Find out more

More is not better when you cannot easily read and digest the content.

Engaging Content

  • Your copy should speak to visitors; not at them.
  • Use words your visitors know and understand. Your content should be engaging and understandable.
  • Avoid insider-speak, jargon, and acronyms, (MCC, AJS, LEC, etc.). These are a turn-off.
  • Check your content for fast comprehension and impatient readers.

Do you want them to do something?

  • Then be simple and clear.
    • Tell them what to do.
  • Register for class. Download the syllabus. Make an appointment.

Write content that is descriptive and easy to grasp. Be succinct. Use an active voice. Use: "Register for class" NOT "All returning students are encouraged to register for class".

Basic Page Layout

When laying out your pages it’s good to remember a few important things:

  1. Screen readers and users of assistive technology (AT) generally use the arrow keys ( ‹ ›) and the “tab” key to navigate a webpage.

  2. If your page layout is in a horizontal format – the content is more easily “read” by an AT user.

  3. If you include Headings and Subheadings to organize your content an AT user can easily “skip” to relevant parts of the page by scanning the content – similar to what a sighted person does when visiting a webpage.

  4. Do not use tables for layout purposes. Use tables for correlated or relational data only and include a “descr” tag that describes the table and how the data is to be read.

  5. For more on layout and ADA readability, click here

  6. The most important idea(s) should be at the top of the page. If there is a step-by-step process – use a list.

Semantic Hierarchy

Proper use of titles, headings, subheadings, etc., is the key to making your webpages ADA accessible. Html can distinguish clearly between a document’s hierarchical outline structure (Headline 1, Headline 2, paragraph, list, and so on) and the visual presentation of the document (boldface, italics, font, type size, color, and so on). Html markup is considered semantic when the use of titles, headings, subheading are used to convey meaning and content structure. not simply to make text look a certain way in a browser.

Structural Markup to Provide Meaning

Primarily, this means using heading tags, such as <h1>, <h2> and <h3>, to break pages into logical sections and subsections. There are a few simple rules to follow when using headings:

  • Every page should have an h1 heading. (In Drupal, this is already done for you – Page Title).
    Without an h1 the user has no simple way to learn what the page is about
  • Only one h1 tag is allowed per page.
    The page should only be about 1 thing.
  • Headings must be properly nested.
    H1 is followed by H2 then H3. Don’t jump from H1 to H3.

Headings are for structure, not formatting

Headings should be used to divide content into meaningful sections, not to format text. Rather, the headings (no matter what their styling looks like) should be used to designate content structure.

If done correctly, your webpage layout will make sense to anyone using Assistive Technology and to sighted visitors.