Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   HTML and CSS (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=170)
-   -   Accessibility (http://www.dreamweaverclub.com/forum//showthread.php?t=34787)

Morrile 12-29-2009 09:24 AM

Accessibility
 
Hello,

I will openly admit I am still very green when it comes to creating websites, however I have a major problem in making a website accessible. I am currently using Dreamweaver CS4

I have tried viewing other sites and tried looking at the source code to see how they do it, but without any luck http://www.bbc.co.uk/accessibility/win/sub_root.shtml has precicely what I want, but I don't know how they did it :confused: can anyone help?

It's the part of the website "Change font size and colours on this site" including the A A A & the 4 C within boxes

I have visited the W3 website, but it's all gobbledegook, so knowing there are some clever people within this forum, can someone advise in laymens terms?

Many thanks in advance

Morrile

kate 12-29-2009 03:55 PM

Hello Morrile,

Its in this bit

<!-- ## End JSTools ## -->
<!-- Head code for Accessibilty widget which changes font size/colour scheme -->
<!-- Include default theme -->

If you have Firefox then get firebug and the web developer toolbar.

Morrile 12-29-2009 05:11 PM

Hello Kate,

You are a star but my skills are lacking. I have managed to copy the code - and not sure if I have it all - but how do I use it? I have copied what I found and assume .js is Java script perhaps?!?! which I haven't a clue about. Futher help required...

thanks

@charset "utf-8";
.js body {
}
#switcher {
display:none;
}
#switcher {
min-width:300px;
width:27em;
}
#switcher p {
font-weight:bold;
width:auto;
}
#switcher a {
margin-top:5px;
}
#access-widget-panel {
float:left;
}
#access-widget-right {
display:block;
float:left;
min-height:51px;
width:10px;
}
#access-widget p, #access-widget ul, #access-widget li {
float:left;
}
#access-widget p {
margin:0 10px 0 4px;
}
#access-widget a {
font-weight:bold;
text-decoration:none;
}
ul#font-sizes {
margin:0 13px 0 0;
position:relative;
}
ul#font-sizes a {
display:block;
font-weight:normal;
margin-left:3px;
}
#font-normal {
font-size:1.6em;
margin-top:5px;
}
#font-bigger {
font-size:1.8em;
margin-top:3px;
}
#font-biggest {
font-size:2em;
}
ul#themes {
margin:0;
}
ul#themes li {
margin-left:4px;
}
ul#themes a {
border:1px solid;
display:block;
font-size:1.3em;
line-height:1.2em;
padding:0 3px 0 4px;
}
#theme-default {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
color:#000000;
}
#theme-blue {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#9FCFFF none repeat scroll 0 0;
color:#000066;
}
#theme-hiviz {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 none repeat scroll 0 0;
color:#FFFF00;
}
#theme-soft {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFF9D2 none repeat scroll 0 0;
color:#000066;
}

kate 12-29-2009 05:23 PM

I have never touched JS Morrile..ever.

David may know more.

Two problems with JS.

Your own host may not allow and people who view your site can have JS turned off in case of bad scripts.

Most will I think use 'view -> zoom in to increase size.

I will look see if there is any other way to have font resizing like at BBC.

DWcourse 12-29-2009 05:29 PM

Since JavaScript runs in the browser, not on the server, you don't have to worry about your host turning it off. And, while I don't have any stats for it, I'd suspect the number of users with JavaScript turned off is minimal.

Morrile 12-29-2009 05:51 PM

Hello Kate & DWcourse,

You have both been helpful; more so Kate, but is this possible to achieve in just CSS, no java, flash or whatever?

My website has very few images, as it's mainly text, no flash, java or other flashing gimmicks; and for good reason which I shall disclose once completed.

Morrile

kate 12-29-2009 06:50 PM

Study this tutorial Morrile

http://labnol.blogspot.com/2006/12/a...ange-font.html

Its for a blog but you should be fine as its to go in the HTML

Morrile 12-29-2009 07:37 PM

:mrgreen: Many thanks :mrgreen:

kate 12-29-2009 07:46 PM

Are we done Morrile?

:mrgreen:

Morrile 12-29-2009 09:34 PM

Quote:

Originally Posted by kate (Post 171605)
Are we done Morrile?

:mrgreen:

not quite, as it looks like I cannot do what I want in just CSS; which I have a basic understanding. It looks like it's either Java, PHP or such like which I know nothing about; not even where to start.

I have found another forum accessifyforum which hopefully can provide more information, as I feel my request is obviously specialised; no disrespect any one on this forum, but once I can visualise an idea, I don't let it drop.

The information you prodived has given me idea, as parts of the code I can use when I discover how

Morrile

DWcourse 12-29-2009 09:47 PM

You will need to use JavaScript. For a single page, something like this might work for you:

1. Set up your CSS with all font sizes as either a percentage or ems.

2. Set the initial font size using a style for the body tag:

Code:

body {
        font-size: 100%;
}

3. Then add links like this:

Code:

<a href="#" onclick="document.body.style.fontSize='200%';return false;">200%</a>
If you want the font-size to be changed for all the pages in your site, it gets more complicated. You'll need to use a cookie so that the browser "remembers" the setting.

d a v e 12-30-2009 06:44 AM

you could also use an alternative style sheet but this too would rely on js - no good if js is disabled. to be honest i think these things are best left to the browser and/or users' own stylesheet.

Corrosive 12-30-2009 07:47 AM

Quote:

Originally Posted by d a v e (Post 171626)
you could also use an alternative style sheet but this too would rely on js - no good if js is disabled. to be honest i think these things are best left to the browser and/or users' own stylesheet.

I 100% agree with Dave here. There are browser options for all of this including zoom and using your own stylesheet.

Make sure your code is well written and things such as alt tags are used on images and you'll have done most of what you can.

Having said that... Rob tried this a while back. Check out this thread http://www.dreamweaverclub.com/forum...ad.php?t=30750

DWcourse 12-30-2009 12:28 PM

I'd agree with Dave as well. Just because it can be done doesn't mean it's a good idea.


All times are GMT. The time now is 08:06 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com