Content Layout and Styling

Discussion

Icons and colors can be useful for signifying functionality. However, without textual content, a screen reader user will be unable to comprehend the information. The textual content can be either text that is proximate to the icon or color or, in the case of icons that are HTML image tags, "alt" values. However, the problem is more complicated than this. Color blind students may be unable to distinguish between certain colors and testing is necessary to determine the effectiveness of the color choice. Also, there are very few universally understood icons for computers—perhaps the "save" computer disk icon, the "clipboard" copy icon, and a small number of others are recognizable. Students with cognitive disabilities may be unable to understand even relatively "universal" iconography. And the ability to use the mouse or keyboard to make the icon's help icon display may be non-obvious to some students. The overriding lesson is that, if you use color or iconography to deliver content or indicate functionality, accompany the color or icon with a visible textual equivalent.

Example

Screen Shot: Use text to make the purpose of icon buttons clear:

Figure BP-Content Layout-1. Click image to enlarge.

Discussion

Students with low visual acuity, cataracts, retinitis pigmentosa and other disabilities, usually grouped under the category of "low vision," may have severe difficulties if there is not sufficient contrast between text and background colors. The W3C recommends a minimum color contrast ratio of 3:1. Students with one of the varieties of color blindness may be affected both by low color contrast and color differences that are indistinguishable. Rather than guessing if you are achieving proper foreground-background contrast or if your color choices are perceptible by students with color blindness, use a tool to test the page. There are a number of online services that can summarize contrast results by scanning the styles in your page or provide a screenshot of how your pages look to people with various forms of color blindness and can suggest color combinations. We reference some of these below (JuicyStudio, Pixy's tool, Accessibility Color Wheel, Wickline's). However one of the easiest and most effective tools is included in the Web Accessibility Toolbar by the Paciello Group, the "Colour Contrast Analyzer".

Resources

• Colour Contrast Analyser: http://www.paciellogroup.com/resources/contrast-analyser.html
• Juicy Studio: http://juicystudio.com/
• Accessibility color wheel: http://gmazzocato.altervista.org/colorwheel/wheel.php
• Colorblind Web Page Filter: http://colorfilter.wickline.org/
• Color Scheme Designer 3 (Pixy Tool): http://colorschemedesigner.com/

Discussion

Cramped text is difficult for anyone to read. The stakes are heightened for a student with a cognitive or reading disability. There are no hard and fast rules for margins or line height (sometimes called leading). It may also be the case that your LMS determines margins and leading. However, if you have the ability to control it, ensure that margins are simultaneously tall enough for the eye to easily distinguish between paragraphs yet still be able to clearly discern that paragraphs which come after one another are sequential rather than wholly separate elements and that neighboring paragraphs "feel" related. Likewise, there should be right and left margins ample enough to clearly distinguish paragraphs in the main body of the text from elements in the sidebar. Line height of text should between 130% and 150% of the base font size.

Discussion

Heading styles should differ enough that level changes are visually apparent—and meaningful and that an H3 "feels" subordinate to an H2, etc. This can be achieved not only through size differences but also through changes in indentation and the spatial relationships between the heading and the preceding and subsequent elements.

Discussion

Anecdotal evidence suggests that sans-serif fonts are easier to read than serif fonts for students with dyslexia and other reading disabilities. Though Arial is the default sans-serif font for many web browsers, Trebuchet MS, Verdana, Helvetica, or Lucida Sans are probably preferable because similar-appearing characters—for example, "b" and "d"—and characters that visually run together—for example "rn" and "m"—are more easily distinguished than in Arial.

Discussion

Though the default font-size in most browsers may seem big (it is typically 16 pixels), try to avoid a smaller font for main page content. Even if there is a need for a smaller default font, make sure that students can increase text size by using standard browser commands, such as View > Zoom or Ctrl + + increase the font size. Make sure, as well, that when fonts are enlarged in the browser, the page design does not break. Separation between columns should hold, text should not become cramped or overlap, etc.

Discussion

Course designers will have the easiest time maintaining uniformity of style across the course web site if they put all presentational styles inside an external style sheet. Modifications to styles then affect all of the pages/courses that use the style sheet.

Example

Screen Shot: Basic page typography should ensure proportional margins, heading, and paragraph text with adequate line heights and margins:

Figure BP-Content Layout-2. Click image to enlarge.

Code Example: CSS snippet with suggested proportional text:

h1, h2, h3, h4, h5 { color: #444; margin-bottom: 4px; font-weigth: bold; }
h1 { font-size: 189% }
h2 { font-size: 174% }
h3 { font-size: 153.9% }
h4 { font-size: 138.5% }
p 
{
  line-height: 1.2;
  margin-bottom: 15px;
}

Resources

• Eric Meyer's Reset-CSS, A way to get rid of browser inconsistencies: http://meyerweb.com/eric/tools/css/reset/

Discussion

The most common screen resolution for computers is 1024 x 768. A page that is around 900 pixels wide can fit relatively well into such a screen resolution. However, many students will have screens that are smaller or larger than 1024 x 768.

Having a fixed-width design at 900 pixels may force those with smaller resolutions to have to scroll side to side, which increases cognitive load for students. And, of course, it does not take advantage of the extra screen real estate available to those whose computers have larger screen resolutions.

A design that scales well for low resolution monitors and prevents horizontal scrolling can be a boon for low vision students who enlarge the text in the browser or who use screen magnification software. However another problem may arise; a design which is completely "flexible" and scales infinitely wide can leave us with paragraphs that are too wide to be readable, especially for students who have reading disabilities.

A compromise is what is commonly called an "elastic" design. Elastic designs scale both up and down to a certain width. They will get wider only until the body text (or other elements) gets so wide that it becomes difficult to read. They will get narrower until the design breaks and text begins to overlap so that readability is negatively affected. An elastic design leverages CSS to set minimum and maximum page widths so that the course designer can guarantee strong readability, regardless of browser view-port width or computer screen resolution.

Example

Code Example: "Elastic", variable width for content accommodates different screen resolutions. For Internet Explorer (less than version 7) we set a fixed width:

<style type="text/css">
  #wrapper 
  {
    max-width: 960px; /* width for 1024px wide displays */
    min-width: 740px; /* width for 800px wide displays */
  }
</style>
<!-- Below we target only IE less than or equal to version 6, which do not understand min- or max- widths -->
<!--[if lte IE 6]>
<style type="text/css">
  #wrapper
  {
    width: 960px;
  }
</style>
<![endif]-->

Resources