I am open to any suggestions any of you may have to make this forum more accessible. I'm primarily wishing to assist people with the visual aspects.
This forum uses phpBB, and it is not the greatest for people using assistive technologies, such as screen readers or magnified text. Screen readers can have problems with complex tables, or the way a table is used assumes the user is able to look at a column header and/or a row header and know what some number means. Also, because phpBB relies on font sizes in pixels set with cascading style sheets, for Internet Explorer text scaling (View+Text Size) is ignored.
phpBB can possibly be worked around by using an accessible style template to eliminate unnecessary tables and complexity. However, the font scaling issue is a sticky one. If I were to change the font size using the size BBCode, that size is stored with the message and is rendered in HTML as an inline style using pixel (px) height. It is very difficult to override an inline style and still keep the relative sizes proportional. I made an attempt at this.
| Code: |
| <html>
<head> <style><!-- body { font-family: sans-serif; } --></style> <script language="javascript"><!-- function MakeFontSizeRelative() { var aSpans = document.body.getElementsByTagName("SPAN"); for ( var iSpan = 0; iSpan < aSpans.length; iSpan++ ) { with ( aSpans[iSpan].style ) { if ( fontSize && fontSize.indexOf("px") > 0 ) { alert(fontSize); var sz = parseInt(fontSize); if ( sz <= 7 ) fontSize = "small"; else if ( sz <= 9 ) fontSize = "medium"; else if ( sz <= 12 ) fontSize = "large"; else if ( sz <= 18 ) fontSize = "x-large"; else fontSize = "xx-large"; } } } } //--></script> </head> <body onload="javascript:MakeFontSizeRelative();"> <span style="font-size:7px;">Tiny</span><br /> <span style="font-size:9px">Small</span><br /> <span style="font-size:12px">Normal</span><br /> <span style="font-size:18px">Large</span><br /> <span style="font-size:24px">Huge</span> </body> </html> |
This sample will first show what the standard font sizes in phpBB look like. Then it will use Javascript to iterate through all the span tags looking for pixel-sized fonts. For each one it finds, it pops up an alert box to tell you the pixel size, then it replaces that size with a relative size.
There are several table-less templates available that people have created. If you know of a good one that is available for others to use, please speak up. I am open to any suggestions as well.