Tutorials on designing for accessibility

[sbryan]

Hello all,

I'm interested in making my sites more accessible and intuitive and I'm looking for tutorials on the following:

1) Designing for different font sizes. I'd like for users to be able to switch between small, regular, and large font sizes for the content, without interrupting the design of the page.

2) Designing printer-friendly page alternatives. Let's say my site is article-driven. Each article should offer a printer friendly page that opens in a new window.

3) Designing a breadcrumb trail. Example: Home > About > Board of Directors > Contact. If I'm on that Contact page, I'd like to jump to the about page by clicking on "about."

Thank you for your assistance.

Feel free to recommend other tutorials which will improve accessibility and the user experience.

 

[Dunmail]

Hello all,

I'm interested in making my sites more accessible and intuitive and I'm looking for tutorials on the following:

1) Designing for different font sizes. I'd like for users to be able to switch between small, regular, and large font sizes for the content, without interrupting the design of the page.

Use CSS in an external stylesheet. Then have rules like:

p{line-height: 130%; font-size: 85%; }

h1 {font-size: 260%; line-height: 120%; text-align:center;}

h2 {font-size: 200%;}

h3 {font-size: 150%;}

Doing it this way lets the user decide what size they wish to view your site but everything will scale in a consistent way.

2) Designing printer-friendly page alternatives. Let's say my site is article-driven. Each article should offer a printer friendly page that opens in a new window.

Again use CSS - link in a stylesheet for viewing online and one for printing, that way you don't need to keep two copies of each page of your site in sync.

<link rel="stylesheet" type="text/css" href="./style/style.css" title="style" media="screen">
<link rel="stylesheet" type="text/css" href="./style/print.css" title="print" media="print">

In my print CSS file I hide all the navigation stuff, sidebars, headers, footers and have the background white and the text black, after all if someone is printing off one of your pages it's for the content not the framework and adverts!

3) Designing a breadcrumb trail. Example: Home > About > Board of Directors > Contact. If I'm on that Contact page, I'd like to jump to the about page by clicking on "about."

Plenty of tutorials for this on the web, have a look at the stick topics in this forum to see if there are any links there.