Welcome to Geeklog, Anonymous Sunday, November 24 2024 @ 09:44 am EST
Geeklog Forums
Changing Layout for Visually Impaired/Disabled
Anonymous
Anonymous
Dear All
In the UK we have the Disability Discrimination Act. As part of this, it is a requirement that websites are accessible for those with a visual impairment.
I am currently running a number of websites and ideally do not want to tinker too much with the general layout/design, but am aware that some sites have the facility to increase the font size or change the colours to make it easier to view. Is there a plug in or other mod for GL to achieve this?
As GL is template based with CSS, it may be relatively straightforward and I suppose that the theme changer offers this function.
Is GL W3 Web Accessibility Initiative compliant? (and if so, could their logos be incorporated into the GL footer?). Or is this template dependant?
Just thinking out loud.
Many thanks
Anonymous
In the UK we have the Disability Discrimination Act. As part of this, it is a requirement that websites are accessible for those with a visual impairment.
I am currently running a number of websites and ideally do not want to tinker too much with the general layout/design, but am aware that some sites have the facility to increase the font size or change the colours to make it easier to view. Is there a plug in or other mod for GL to achieve this?
As GL is template based with CSS, it may be relatively straightforward and I suppose that the theme changer offers this function.
Is GL W3 Web Accessibility Initiative compliant? (and if so, could their logos be incorporated into the GL footer?). Or is this template dependant?
Just thinking out loud.
Many thanks
Anonymous
6
5
Quote
Anonymous
Anonymous
Thank you - has this already been attempted in Geeklog? I notice that on Plone (another Opensource CMS) they have accessibility information available (and the template looks like Tabular Dynamics?):
http://plone.org/accessibility-info
If it is not already in Geeklog, it may be a useful feature to add? Clearly some of the aspects will depend on the templates in use on a particular site, but using the above example, being able to offer the ability to change text size (seems to be a quick change on stylesheet) and provide informaton on access keys would be useful, plus encouraging template designers to validate to ensure compliance with XHML and CSS conventions of WCAG. You also see on the above page that at the bottom they indicate which conventions the sites meet, which adds another dimension when people are considering the sites.
Many thanks
Anonymous
http://plone.org/accessibility-info
If it is not already in Geeklog, it may be a useful feature to add? Clearly some of the aspects will depend on the templates in use on a particular site, but using the above example, being able to offer the ability to change text size (seems to be a quick change on stylesheet) and provide informaton on access keys would be useful, plus encouraging template designers to validate to ensure compliance with XHML and CSS conventions of WCAG. You also see on the above page that at the bottom they indicate which conventions the sites meet, which adds another dimension when people are considering the sites.
Many thanks
Anonymous
7
8
Quote
Anon
Anonymous
Joomla are doing something similar
http://help.joomla.org/content/view/805/60/
Is this being considered in the Geeklog community?
Many thanks
Anon
http://help.joomla.org/content/view/805/60/
Is this being considered in the Geeklog community?
Many thanks
Anon
6
11
Quote
Status: offline
Anon
Forum User
Junior
Registered: 10/18/06
Posts: 21
I have come across a piece of free script that can be added in to change the font size - I include it below for information. However, it only changes the css on that particular page (I created the page in staticpages and was logged in as admin) not to the site as a whole - does anyone know how to make it remain until it is changed again by the user (logged in or not)?
Many thanks
Anon
The code from here
1. Copy the coding into an external file named "changeStyle.js"
2. Place a link to the external file into the HEAD of your HTML document
3. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into an external file named "changeStyle.js" -->
<HEAD>
<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Pascal Vyncke :: http://www.SeniorenNet.be */
// These are the variables; you can change these if you want
var expDays = 9999; // How many days to remember the setting
var standardStyle = '2'; // This is the number of your standard style sheet; this will be used when the user did not do anything.
var nameOfCookie = 'switchstyle'; // This is the name of the cookie that is used.
var urlToCSSDirectory = ''; // This is the URL to your directory where your .css files are placed on your site. For example: http://www.seniorennet.be/URL_TO_STYLESHEET_DIRECTORY_OF_YOUR_SITE/
// These are the names of your different .css files; use the name exactly as on your Web site
var ScreenCSS_1 = 'screen_1.css';
var ScreenCSS_2 = 'screen_2.css';
var ScreenCSS_3 = 'screen_3.css';
var ScreenCSS_4 = 'screen_4.css';
var ScreenCSS_5 = 'screen_5.css';
// If you use different .css files for printing a document, you can set these. If you don't even know what this is, name then everything exactly the same as above.
// So: make then PrintCSS_1 the same as ScreenCSS_1, for example "screen_1.css".
var PrintCSS_1 = 'print_1.css';
var PrintCSS_2 = 'print_2.css';
var PrintCSS_3 = 'print_3.css';
var PrintCSS_4 = 'print_4.css';
var PrintCSS_5 = 'print_5.css';
/***********************************************************************************************
DO NOT CHANGE ANYTHING UNDER THIS LINE, UNLESS YOU KNOW WHAT YOU ARE DOING
***********************************************************************************************/
// This is the main function that does all the work
function switchStyleOfUser(){
var fontSize = GetCookie(nameOfCookie);
if (fontSize == null) {
fontSize = standardStyle;
}
if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ' ' + ScreenCSS_1 + '" media="screen">'); }
if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen">'); }
if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '" media="screen">'); }
if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '" media="screen">'); }
if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '" media="screen">'); }
if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }
if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }
if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '" media="print">'); }
if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '" media="print">'); }
if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '" media="print">'); }
var fontSize = "";
return fontSize;
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
// Function to get the settings of the user
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
// Function to get the settings of the user
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
// Function to remember the settings
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
// Function to remove the settings
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
// This function is used when the user gives his selection
function doRefresh(){
location.reload();
}
// This will call the main function. Do not remove this, because otherwise this script will do nothing...
document.write(switchStyleOfUser());
-->
</script>
</HEAD>
<!-- STEP TWO: Place a link to the external file into the HEAD of your HTML document -->
<script type="text/javascript" src="changeStyle.js"></script>
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<BODY>
<div align="center">
<h2>Choose your style!</h2>
<p>
<input type="radio" name="grootte" value="1" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 1<br>
<input type="radio" name="grootte" value="2" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 2<br>
<input type="radio" name="grootte" value="3" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 3<br>
<input type="radio" name="grootte" value="4" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 4<br>
<input type="radio" name="grootte" value="5" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 5<br>
</p>
</div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 7.53 KB -->
Many thanks
Anon
The code from here
Text Formatted Code
<!-- THREE STEPS TO INSTALL CHANGE STYLE:1. Copy the coding into an external file named "changeStyle.js"
2. Place a link to the external file into the HEAD of your HTML document
3. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into an external file named "changeStyle.js" -->
<HEAD>
<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Pascal Vyncke :: http://www.SeniorenNet.be */
// These are the variables; you can change these if you want
var expDays = 9999; // How many days to remember the setting
var standardStyle = '2'; // This is the number of your standard style sheet; this will be used when the user did not do anything.
var nameOfCookie = 'switchstyle'; // This is the name of the cookie that is used.
var urlToCSSDirectory = ''; // This is the URL to your directory where your .css files are placed on your site. For example: http://www.seniorennet.be/URL_TO_STYLESHEET_DIRECTORY_OF_YOUR_SITE/
// These are the names of your different .css files; use the name exactly as on your Web site
var ScreenCSS_1 = 'screen_1.css';
var ScreenCSS_2 = 'screen_2.css';
var ScreenCSS_3 = 'screen_3.css';
var ScreenCSS_4 = 'screen_4.css';
var ScreenCSS_5 = 'screen_5.css';
// If you use different .css files for printing a document, you can set these. If you don't even know what this is, name then everything exactly the same as above.
// So: make then PrintCSS_1 the same as ScreenCSS_1, for example "screen_1.css".
var PrintCSS_1 = 'print_1.css';
var PrintCSS_2 = 'print_2.css';
var PrintCSS_3 = 'print_3.css';
var PrintCSS_4 = 'print_4.css';
var PrintCSS_5 = 'print_5.css';
/***********************************************************************************************
DO NOT CHANGE ANYTHING UNDER THIS LINE, UNLESS YOU KNOW WHAT YOU ARE DOING
***********************************************************************************************/
// This is the main function that does all the work
function switchStyleOfUser(){
var fontSize = GetCookie(nameOfCookie);
if (fontSize == null) {
fontSize = standardStyle;
}
if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ' ' + ScreenCSS_1 + '" media="screen">'); }
if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen">'); }
if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '" media="screen">'); }
if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '" media="screen">'); }
if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '" media="screen">'); }
if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }
if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }
if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '" media="print">'); }
if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '" media="print">'); }
if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '" media="print">'); }
var fontSize = "";
return fontSize;
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
// Function to get the settings of the user
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
// Function to get the settings of the user
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
// Function to remember the settings
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
// Function to remove the settings
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
// This function is used when the user gives his selection
function doRefresh(){
location.reload();
}
// This will call the main function. Do not remove this, because otherwise this script will do nothing...
document.write(switchStyleOfUser());
-->
</script>
</HEAD>
<!-- STEP TWO: Place a link to the external file into the HEAD of your HTML document -->
<script type="text/javascript" src="changeStyle.js"></script>
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<BODY>
<div align="center">
<h2>Choose your style!</h2>
<p>
<input type="radio" name="grootte" value="1" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 1<br>
<input type="radio" name="grootte" value="2" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 2<br>
<input type="radio" name="grootte" value="3" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 3<br>
<input type="radio" name="grootte" value="4" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 4<br>
<input type="radio" name="grootte" value="5" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 5<br>
</p>
</div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 7.53 KB -->
8
4
Quote
Status: offline
Anon
Forum User
Junior
Registered: 10/18/06
Posts: 21
Anytime anyone wants to chip in on this thread, please feel free as there only seems to be me replying to me (apart from 1000ideen - thank you!). I would have thought that this would be a topic of interest to the Geeklog community (unless of course you have already discussed it and are wondering why I am asking silly questions - if that is the case, sorry!).
Further to my message about the script, I have had another look at my site (logged in, and not) and I see that the changes do work and remain - but on;y on those pages created as staticpages rather than the other areas of my site (filemgt, faq, link and contact plugins and core page)? The code is included in the header.thtml file therefore something must be overriding it?
I would really welcome ideas on this as I suspect that it would be really useful for more than just me. I suppose this could also be achieved by using the Themechanger block, but I understand that it again would only work properly for logged in users (I need it for anonymous as well).
I would also appreciate any answers to the questions elsewhere on this thread about ensuring Geeklog complies with XHML and CSS conventions and addressing the accessibility issue.
Many thanks
Anon
Further to my message about the script, I have had another look at my site (logged in, and not) and I see that the changes do work and remain - but on;y on those pages created as staticpages rather than the other areas of my site (filemgt, faq, link and contact plugins and core page)? The code is included in the header.thtml file therefore something must be overriding it?
I would really welcome ideas on this as I suspect that it would be really useful for more than just me. I suppose this could also be achieved by using the Themechanger block, but I understand that it again would only work properly for logged in users (I need it for anonymous as well).
I would also appreciate any answers to the questions elsewhere on this thread about ensuring Geeklog complies with XHML and CSS conventions and addressing the accessibility issue.
Many thanks
Anon
10
8
Quote
Status: offline
Dirk
Site Admin
Admin
Registered: 01/12/02
Posts: 13073
Location:Stuttgart, Germany
Quote by Anon: I would have thought that this would be a topic of interest to the Geeklog community
I'm open to suggestions / progress in that area (and we already have a feature request for this).
However, most of the work here will have to be done in a theme. Plus, I think this should be coordinated by someone who's actually familiar with with the issues involved here.
I'd suggest that someone actually tries to create an accessible theme and then we can talk about any changes that are required in Geeklog itself.
bye, Dirk
7
7
Quote
All times are EST. The time is now 09:44 am.
- Normal Topic
- Sticky Topic
- Locked Topic
- New Post
- Sticky Topic W/ New Post
- Locked Topic W/ New Post
- View Anonymous Posts
- Able to post
- Filtered HTML Allowed
- Censored Content