[RESOLVED] Customising text size for web accessibility

Tezread

So I have been asked to make our web site accessilbe by having a feature which changes the text size of the whole site like on www.ageconcern.org.uk

How can I do this? I have a template created in Dreamweaver like so.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Quality Quest</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}
body {
	background-color: #FFFFFF;
}
.style1 {font-size: 18px}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

</head>
<body>


<table width="1041" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <!--DWLayoutTable-->
  <tr>
    <td width="15" height="128">&nbsp;</td>
    <td width="262" valign="top"><img src="../quest%20logo.gif" alt="Quality Quest logo" width="106" height="65"></td>
    <td width="63">&nbsp;</td>
    <td colspan="4" valign="top"><img src="../logo_v1.gif" alt="Notts Infrastructure Consortium Logo" width="600" height="100"></td>
    <td width="16"></td>
    <td width="85"></td>
  </tr>
  <tr>
    <td height="21">&nbsp;</td>
    <td><div align="center"><a href="../index.php">Home</a></div></td>
    <td>&nbsp;</td>
    <td width="205" valign="top">Accessibility options </td>
    <td width="91" valign="top">PDFdownload</td>
    <td width="126" valign="top">Site map </td>
    <td width="178" valign="top">Search function </td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td height="34"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td height="563">&nbsp;</td>
    <td rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr>
          <td width="262" height="50" valign="top"><a href="../why_look.php"><img src="../button%20panel%201.gif" alt="Why look" width="262" height="42" border="0"></a> </td>
        </tr>
        <tr>
          <td height="50" valign="top"><a href="../what_cover.php"><img src="../button%20panel%202.gif" alt="What does quality cover?" width="262" height="42" border="0"></a>          </td>
        </tr>
        <tr>
          <td height="50" valign="top"><a href="../where_at.php"><img src="../button%20panel%203.gif" alt="Where are you" width="262" height="42" border="0"></a>          </td>
        </tr>
        <tr>
          <td height="50" valign="top"><a href="../what_you_want.php"><img src="../button%20panel%204.gif" alt="What you want" width="262" height="42" border="0"></a> </td>
        </tr>
        <tr>
          <td height="50" valign="top"><a href="../what_they_want.php"><img src="../button%20panel%205.gif" alt="Funders" width="262" height="42" border="0"></a>          </td>
        </tr>
        <tr>
          <td height="50" valign="top"><a href="../whats_best.php"><img src="../button%20panel%206.gif" alt="Deciding whats best" width="262" height="42" border="0"></a>          </td>
        </tr>
        <tr>
          <td height="50" valign="top"><a href="../what_approaches.php"><img src="../button%20panel%207.gif" alt="What approaches?" width="262" height="42" border="0"></a>          </td>
        </tr>
        <tr>
          <td height="50" valign="top"><a href="../find_info.php"><img src="../button%20panel%208.gif" alt="Information and support" width="262" height="42" border="0"></a>          </td>
        </tr>
        <tr>
          <td height="50" valign="top"><a href="../faq_categories.php"><img src="../button%20panel%209.gif" alt="FAQs" width="262" height="42" border="0"></a>          </td>
        </tr>
        <tr>
          <td height="50" valign="top"><a href="../jargon_buster.php"><img src="../button%20panel%2010.gif" alt="Jargon buster" width="262" height="42" border="0"></a>          </td>
        </tr>
        <tr>
          <td height="50" valign="top"><a href="../contact_us.php"><img src="../button%20panel%2011.gif" alt="Contact us" width="262" height="42" border="0"></a>          </td>
        </tr>
		<tr>
          <td height="50" valign="top"><div align="center"><a href="http://qualityquest.blogspot.com" class="style1">Click here for news updates and a chance to have your say! </a></div></td>
        </tr>
		<tr>
          <td height="19">&nbsp;</td>
        </tr>
		<tr>
		  <td height="31" valign="top"><div align="center"><a href="../disclaimer.php">Disclaimer</a> </div></td>
        </tr>
        </table></td>
    <td></td>
    <td colspan="5" valign="top"><!-- TemplateBeginEditable name="EditRegion1" -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr>
          <td width="616" height="62" valign="top"><h1>&nbsp;</h1>          </td>
        </tr>
        <tr>
          <td height="364">&nbsp;</td>
        </tr>
      </table>
    <!-- TemplateEndEditable --></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="175">&nbsp;</td>
    <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="88"></td>
    <td>&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</body>
</html>

BTW- this may well not be a PHP question but I did not know where ask and im a regular user of this forum.

Thx in advance

codeordie_com

You can associate the "size of the font" such as "big" (the variable received by GET method) with a number of pixels, and do some thing like:

.body { font: <?php echo associatedPixels; ?> px Verdana; }

I haven't done anything on accessibility, but I would do it that way...

Hope it helps 🙂

Tezread

how would that be implemented in the template I pasted above?

codeordie_com

uhm, for example, the top of your code would be:

<?php
$size = 12;
if ($_GET['size'] > 0 && $_GET['size'] < 20)
{
	$size = $_GET['size'];
}
?>

and the body like this:

 font-size: <?php echo $size; ?>px;

Now you can alter the size of the font this way: /myscript.php?size=15 or 16...

Tezread

What I am trying to accomplish is a template which utilises CSS whereby the user can choose between size font size 14,18 etc. How are the fontsizes changed exactly and how is the control built?

bogu

Tezread wrote:
What I am trying to accomplish is a template which utilises CSS whereby the user can choose between size font size 14,18 etc. How are the fontsizes changed exactly and how is the control built?

Create 3 css classes:

.font_small {font-size:10px;}
.font_medium {font-size:12px;}
.font_large {font-size:14px;}

everywere u have text u add:

<span class="<?=$font_size;?>">Your text</span>

where $font_size will be the name of the css class u need to have (font_small, font_medium or font_large).

U can try to load that style directly into your body tag, so u dont need to format all text on the page, but this will not work for text that have style directly on them ...

What template do u have there, it is a smarty template loaded from php, or just a simple HTML page?

Tezread

my pages are created from a Dreamweaver template (dwt). I have come across something holding my back. Everytime I try to apply a style from my CSS settings i get a message saying:

a request to create a new style, link, import failed. if you are working with a instance of a template make certain there is an editable region within the HEAD tag.

Now I know it seems obvious just to change where the HEAD tag is but im just a little uncertain where. To be honest im a little cagey about a the issue of how mayn editable regions I should have as well. Is one enough? What are the protocols for CSS and templates?

bogu

in this part of your template:

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}

the line marked with darkred should be editable, dont ask me how, cause I've never worked with DWT.

I could show u how I make this with smarty ...

in my php file I set a smarty var after I set a cookie for font size:
$smarty -> assign("font_size",$_COOKIE['font_size']);

load the template
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: {$font_size}px;
color: #000000;
}

Tezread

I am thinking there is no way I can have the CSS editable in the DWT template as unless I keep it inside an editable region it defeats the object.

Now I have this at the top of each of my web pages:

<?php
$smarty -> assign("font_size",$_COOKIE['font_size']);
//load the css template
.bodytext {  font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding-right: 3px; padding-left: 3px}
.mainheading {  font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #333333; padding-right: 3px; padding-left: 3px; text-align: left}
.subheading {  font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #666666; padding-right: 3px; padding-left: 3px}
.stresstext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	color: #333333;
}
.pictext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: italic;
	color: #666666;
}
?>

Question- how do I add three href links saying largest, larger, medium, smaller and smallest that effectively do the same job as changing text size via Internet Explorer i.e clicking View, Text Size and choosing between largest, larger, medium, smaller and smallest

bogu

Tezread wrote:
Question- how do I add three href links saying largest, larger, medium, smaller and smallest that effectively do the same job as changing text size via Internet Explorer i.e clicking View, Text Size and choosing between largest, larger, medium, smaller and smallest

That doesnt work if the text have the font-size style on it. Try to change it on this forum and u'll see that it doesnt work ...
After 5 min. of search look here.

Tezread

this is just the kind of thing I was after - I am now having a go at incorporting it into my web template architecture

I will let you know in terms of progress. Thanks for now!!

Weedpacket

bogu wrote:
That doesnt work if the text have the font-size style on it.

...and the browser you're using is IE.

'Course, if I want to change the size of text on the page it's a ctrl-mousewheel. If I'm feeling adventurous I can pick "text size" from the View menu, or even change my font preferences.....

I generally don't bother larding down all my pages with extra frills to do things that the user can do already with a program they're already more familiar with using.