The Layout Lab

Resources for building your layout and design

• The Contrast Checker allows you to pick colors for text and background and get a preview at 12pt and 18pt. It gives a live report of which accessibility standards the combination satisfies. I try to meet all of them, but I like the fact that you can choose if that's right for you. Hovering over each of the standards will give you a quick explanation about what they mean.
• An argument for larger body text. (lemme find that link...)

A case study of layout accessibility

Here, I'm going to do some experimenting with different layouts, for educational purposes.

Sadgrl's old layout builder

• Generator
• Demo

  I swapped out the default lorem-ipsum of this layout with the default content of the new layout because it's a better example of a real web page. I might also widen the layout a bit, because the sidebars are a little too crowded to be readable, and that's just distracting.

• WAVE Scanner
• HTML-only view (not yet implemented)

Sadgrl's new layout builder

• Generator
• Demo
• WAVE Scanner
• HTML-only view (not yet implemented)

I'm going to summarize the results of the WAVE scans. Then, I'm going to do a diff of the HTML and look at them as a case study of how a layout can be refactored to be more accessible. (We'll talk about the CSS too, but more the results of it than the actual code.) We'll also talk about how this is an example of how a page can have few errors or warnings on WAVE but still need improvements.