I created my first Web site design intended to be used by people with cognitive disabilities. It is only a first draft, but it employs many of the cognitive-accessibility attributes I have been discussing since I started this blog.
This post focuses on the CSS-based layout. Subsequent posts will describe the new text-size switcher experiment and the image-based menu. The test page itself has a list of text-accessibility features.
The motivator for this draft was a desire for a two-column design that would not break no matter how much text size is increased. To accomplish this, I used a hybrid of elastic- and fluid cascading style sheets (CSS) layouts.
Elastic Layout Definition
An elastic page layout scales as text size is changed. To do this, the height and the width of a page’s main CSS container and other elements are defined by a unit of measure known as an “em”. Since ems are proportional to text size, containers and elements measured by them adjust themselves relative to changes in text size.
Fluid Layout Definition
A fluid layout, otherwise known as a liquid layout, adjusts itself to fit the size of the window in which it is being viewed. By using CSS container sizes based upon percentages, fluid designs typically take up an entire window without producing a horizontal scroll bar.
Combined Layouts
The body of the test page has a width of 56 em. The two columns, “primary” and “sidebar” have widths of 65 percent and 30 percent respectively. The combination of the widths for the body and for the primary column means that lines of text, no matter how large, will not be longer than 80 characters. This is a best practice of cognitive accessibility.
The remaining 35% of the body width is taken up by the margin space (5%) between the two columns and by the sidebar / menu column. This is enough room to enable the menu text to be enlarged without breaking the page design.
Design Problems
- In aesthetic terms, the best I could say about the design is that it is “not pretty”. I can create functional designs, but not eye-pleasing ones. I will have to outsource to a professional designer.
- The tab order is a problem. People who are sighted, but who can not use a mouse, instead use the tab key or a single-switch device to navigate a Web page. Doing so with my hybrid design does not immediately bring such a user to the primary content. Worse, it appears tabbing through the page skips the primary content entirely. This is mitigated by the “Skip to content” link at the top of the page, but it is still something I would have to fix were I to use this design on the production site.
Notes
- The W3C CSS Validation Service validates the test page as CSS level 2.1.
- WebAIM’s WAVE accessibility evaluation tool reports no accessibility errors.
- I considered CSS 3. At the time of this writing, its multi-column feature does not support column widths of different sizes.
- The text-to-speech application on the test page is one I reviewed in my post, “Text-To-Speech Experiment & Evaluation: Cognable Speeka“.
- I would love feedback about how to make the test page’s design better, or on alternative designs. Suggestions? Please contact me or post a comment.