Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Pages: [1] 2

Author Topic: [MOD] Accessibility Boost Two-step (sNews 1.5)  (Read 13123 times)

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
[MOD] Accessibility Boost Two-step (sNews 1.5)
« on: November 16, 2006, 01:26:46 AM »

This mod applies to sNews 1.5
It adds these accessibility features to your site: Jump links generator for "skip nav" and similar links, and a PHP styleswitcher that works. Props to Mika and bakercad for the additional coding.
********************************************************************************************************************

1. "SKIP NAV", "SKIP CONTENT" AND "BACK TO TOP" LINKS // EDITED WITH MIKA'S CODE
Updated 12.19 with modification by mpancorbo from this post.
Updated 12.21 with correct php tags (thanks key')


An important part of the Web Content Accessibility Guidelines (WCAG) is providing users with a shortcut to go directly to the main content, or directly to the page navigation, and also to give users a quick way to go from the bottom of the page back to top. This is especially important for users browsing with screenreaders or other assistive technologies. Here's how to do that in sNews.

In snews.php
(Extra language variables no longer necessary so they've been removed.)

a) Add functions. Go to ~line 310, directly after // LOGIN LOGOUT LINKS. Add the following functions:
The newest code
Quote
// JUMP TO link generator
function jump_to($id, $label) {
$categorySEF = get_id('category');
$articleSEF = get_id('article');
$link = '<a href="'.db('website');
$link .= !empty($categorySEF) ? $categorySEF.'/' : '';
$link .= !empty($articleSEF) ? $articleSEF.'/' : '';
$link .= '#'.$id.'" title="'.$label.'">'.$label.'</a>';
echo $link;
}
Save the changes and go to your index.php file.

In index.php
b) Add the links at the top of your page. The links created by the code in snews.php produces <a href="..."> strings so you can stick them in any HTML item you like, <p>, <li>, <td>, whatever. Like this:
Quote
<div id="quicklinks"><a id="top" name="top"></a>
<p><?php jump_to('content', 'Skip navigation') ?> | <?php jump_to('subnav', 'Skip to quicklinks') ?></p>
</div>
and for the bottom link:
Quote
<p><?php jump_to('header', 'Go to top') ?></p>
Then simply add the corresponding anchors in your index.php (<a id="top"> at the top, etc. See the code above for a quick example.

**************************************************************************************

2. THE STYLESWITCHER
Style switchers are useful both for aesthetic reasons and for accessibility reasons. Here's how you can make your site more fun for users, more useful for users with vision impairment and/or other special needs, and remain in control of your layout. More or less.

a) Copy the following code and paste it into a good text editor, then save the document as styleswitcher.php in the same folder as your site document (snews.php, index.php). This is important.
Quote
<?php
// SET COOKIE FOR 1 YEAR
if(isset($_REQUEST['SETSTYLE'])){
 if(setcookie('testcookie',true)){
  setcookie('STYLE',$_REQUEST['SETSTYLE'],time()+31622400);
 }else{
  $_SESSION['STYLE']=$_REQUEST['SETSTYLE'];
 }
}
// RETURN TO CALLER PAGE
header('Location: '.$_SERVER['HTTP_REFERER']);
?>
Styleswitcher.php creates the cookie that needs to be set, otherwise user selected stylesheets won't stick.

b) Copy the following code, paste into a good editor, edit the stylesheet array for your own purposes and save the document as stylearray.php -- you can save it anywhere in your site hierarchy but it's recommended to save it where you store your stylesheets. I save mine in my css folder for example.
Quote
<?php

$styleSheets = array();

// DEFINE STYLESHEETS
$styleSheets[1]['text']='Normal style';
$styleSheets[1]['title']='Normal Style';
$styleSheets[1]['sheet']='<link href="css/default.css" rel="stylesheet" type="text/css" media="screen, projection" />';

$styleSheets[2]['text']='Zoom style';
$styleSheets[2]['title']='Larger Text';
$styleSheets[2]['sheet']='<link href="css/zoom.css" rel="stylesheet" type="text/css" media="screen, projection" />';

$styleSheets[3]['text']='Contrast style';
$styleSheets[3]['title']='High Contrast';
$styleSheets[3]['sheet']='<link href="css/contrast.css" rel="stylesheet" type="text/css" media="screen, projection" />';

// DEFAULT STYLESHEET
$defaultStyleSheet=1;

//SET STYLESHEET
if(!isset($_COOKIE['STYLE'])){
 echo $styleSheets[$defaultStyleSheet]['sheet'];
}else{
 echo $styleSheets[$_COOKIE['STYLE']]['sheet'];
}
?>
The original code, from the gr0w collective, had the array start at 0 but this does not work in some environments, so if you start with [1] it should work just about everywhere. You can add as many stylesheets/variables as you like to the array, just keep the order in sequence.

c) ]in snews.php, add the following on ~line 348:
Quote
//STYLESWITCH
function switch_styles($styleSheets) {
   $categorySEF = get_id('category');
   $articleSEF = get_id('article');
   while (list($key, $val) = each($styleSheets)){
   $link = '<li><a href="'.db('website');
   $link .= 'styleswitcher.php?SETSTYLE='.$key.'" title="'.$val['title'].'">'.$val['text'].'</a></li>';
   echo $link;
}
}
d) In index.php, add a couple of things to call in the different pieces. In the <head>, somewhere after <? title ?> but before </head>, add this include statement:
Quote
<?php include('css/stylearray.php'); ?>
and in the place where you want the switch controls to appear, add this:
Quote
<?php switch_styles($styleSheets); ?>
Note that the "switch_styles" code in snews.php outputs with <li> tags in the example. That is not a requirement, you can exchange the <li> tags for anything you like, as long as the tags you use fit your index.php construction.

And that should be it. I hope to have a site online in a couple of days with these mods in place, for visual reference, but it's fairly easy to implement them. One-two, accessibility boost!
(Sorry about the post size, but it seemed better to keep these mods together than to do separate posts.)
« Last Edit: August 22, 2007, 06:13:43 AM by Phil Martin (Philmoz) »
Logged

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #1 on: November 16, 2006, 11:41:52 AM »

Agent... I'm so curious as to where you've got these sNews sites ?? I might have missed out on posts, although I shouldn't, and therefor not seen your sNews sites... Would you please put an URL or  more here so that I could "nagelfara" them :lol: ...

Your site is worldpress, no ?
Logged
"It's only dead fish that goes with the flow... "
Updated

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #2 on: November 16, 2006, 12:52:40 PM »

Quote from: Patric
Your site is worldpress, no ?
Nope. Lovingly hand crafted, which explains the pitiful lack of updates on it. (Time is always against me, it seems.)

My sNews sites are currently in development. There's one that I can't show you at all until it's officially launched :) , another that should be ready for launch within the week, my own site which will be ready ... god knows when, and a site I'm doing for a firm I work with which needs to be ready for launch fairly soon. So. Nothing spectacular to show just yet. But, you know, good things come to those who wait etc bla bla bla. :lol:
And, once the current developments are done I might just get around to fixing my next project -- pimpmycms.com (coming to a browser near you "soon").
Logged

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #3 on: November 16, 2006, 01:44:59 PM »

pimpmysnews.com is also a suggestion, but you go wider, eh ? Just give us a hollar when you got something to show us...
Logged
"It's only dead fish that goes with the flow... "
Updated

Mika

  • Hero Member
  • *****
  • Karma: 9
  • Posts: 1377
    • http://www.ni5ni6.com/
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #4 on: November 16, 2006, 06:47:26 PM »

Small optimization/improvement snippet
this code refers to smithie's jump links MOD only

Only seven agents were harmed while creating this snippet - you really should make a backup before you harm another one, okay?

1. "SKIP NAV", "SKIP CONTENT" AND "BACK TO TOP" LINKS

a) follow smithie's steps

b) Add functions. Go to ~line 310, directly after // LOGIN LOGOUT LINKS. Add the following
Quote
// JUMP TO link generator
function jump_to($where) {
$categorySEF = get_id('category');
$articleSEF = get_id('article');
$link = '<a href="'.db('website');
$link .= !empty($categorySEF) ? $categorySEF.'/' : '';
$link .= !empty($articleSEF) ? $articleSEF.'/' : '';
$link .= '#'.$where.'" title="'.l($where).'">'.l($where).'</a>';
echo $link;
}
c) usage - similar to what smithie already said, but with some additions
Quote
<div id="quicklinks"><a id="top" name="top"></a>
<p><?php jump_to('skip_nav'); ?> | <?php jump_to('jumpto_nav'); ?></p>
</div>
and for the bottom link
Quote
<p><?php jump_to('top'); ?></p>
You can notice that jump_to($where) function is expanded to generate links on the fly, that is, you can jump to any link you want, as long as you update values in language variables section. Here's the example:
Quote
// lang variables (snews.php)
...
$l['mika'] = 'Go fetch me some coffee!';
...
// somewhere in your html code (index.php)
...
<a id=mika" name="mika"></a>
...
<?php jump_to('mika'); ?>
« Last Edit: August 22, 2007, 06:14:46 AM by Phil Martin (Philmoz) »
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #5 on: November 16, 2006, 11:05:52 PM »

Quote from: Mika the spelling bee champion
Only seven agents were harmed while creating this snippet
Son of a smoking .32 Beretta... That's way cool!

----------------------------------------------------------------
/* EDIT: First post updated with Mika's optimized jump_to function. */
Logged

brauck

  • Hero Member
  • *****
  • Karma: 18
  • Posts: 556
    • http://www.hbw-webdesign.nl/
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #6 on: November 16, 2006, 11:47:48 PM »

Hey guys I love this one; it gets better and better :) Thanks!
Logged
Confidence is reduced complexity.
brauck.nl for free css templates

Mika

  • Hero Member
  • *****
  • Karma: 9
  • Posts: 1377
    • http://www.ni5ni6.com/
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #7 on: November 17, 2006, 07:21:35 AM »

:D :D
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #8 on: December 20, 2006, 09:47:01 PM »

Agent Smithie... While applying the updated mod in the first post above, I received the white screen with Parse error: parse error, unexpected T_STRING...(etc) on the lines in index.php containing the opening php-tags. This was caused by having a space between <? and php in all 3 instances. If you get time, might be a good idea to remove the spaces in your strings in post #1. Oh... and Mika's touch-up post is no longer relevant I suppose... since the use of language variables was made redundant... yes?

Works great, BTW... but I still need to figure out what to do with the Skip navigation | Skip to quicklinks links... like what to do with them... what are the really for?  :/
« Last Edit: August 22, 2007, 06:15:22 AM by Phil Martin (Philmoz) »
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #9 on: December 21, 2006, 06:30:17 PM »

Thanks, key, I've updated the first post accordingly. Sorry for the page cleaning...
What is it good for? Hm.
Quote from: I
An important part of the Web Content Accessibility Guidelines (WCAG) is providing users with a shortcut to go directly to the main content, or directly to the page navigation, and also to give users a quick way to go from the bottom of the page back to top. This is especially important for users browsing with screenreaders or other assistive technologies...
Meaning: suppose you're blind. Suppose you use a screenreader to 'view' web pages. Suppose you want to go directly to the main contents of a web page, without having to listen to that whole preluding navigation, introduction and other small print yada yada -- probably this happens more on frequently visited pages. You need a way to skip to the main content. Or sub navigation. And once your reader reaches the end of the page (it stops) -- you might want to go back to the top of the page. So, that's what this mod is for. To make life easier for people who do not have 20-20 eyesight. "Normal" users won't care much. Oh, but you score accessibility points! ;D
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #10 on: December 21, 2006, 07:57:18 PM »

OK... I guess I should have made myself clearer. The "back to top" is always useful on any page... and I understand the value of having links to... say... a plain text page without all the rest of the layout (in a larger font-size, perhaps)...but the Skip navigation | Skip to quicklinks links currently don't lead to anything... the Home Page continues to display as-it-was-before-clicking-the-link. Does this mean I need to replace the #-sign in the 4th $link string in the function with a link to something... so that clicking the links will take the viewer to another page... ?
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #11 on: December 21, 2006, 08:23:47 PM »

sorry. those are examples, the explanation could perhaps be clearer ;D The first part of the string defines the anchor and the second part creates the title text and clear text. For a "top" anchor, you would hardcode <a id="top" name="top" into the top of your index.php, for example on the first available div ("id" is the modern term for "name", "name" is incorporated as a fallback for older browsers --read Netscape 4). Then, at some place near the bottom of your page, you add the "< jump_to('top', 'Go to top'); > function where the first statement creates the href attribute and the second statement is what's used for the title and clear text. So
Quote
<?php jump_to('someplace', 'Go to this anchor'); ?>
equals
Quote
<a href="domain-name.tld/category/article/#someplace" title="Go to this anchor">Go to this anchor</a>
The mod is necessary because if we simply write the href "#top" as we would normally do in a static page, we get reverted to the index page top every time. This is a flexible way of letting you add any anchor you want in a page and create jump links to those anchors (within the same page) easily.

Short version: a) create an anchor, say "page_middle", in your index.php.
b) Use the jump_to function to create the link from any other part of the page to the 'page_middle' point.

Does that make things clearer?

/* Side note: The only problem I've come across is: creating and referencing anchors within an article. Well, creating anchors isn't a problem, it's the links leding to those anchors that is. But that's matter for another mod when/if someone comes up with a solution. */
« Last Edit: August 22, 2007, 06:15:47 AM by Phil Martin (Philmoz) »
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #12 on: December 21, 2006, 09:37:25 PM »

I really appreciate your patience and explanation Agent. Let me walk through this one step at a time.

Quote from: Agent:
The first part of the string defines the anchor and the second part creates the title and clear text. For a "top" anchor, you would hardcode <a id="top" name="top" into the top of your index.php.
So for test purposes... I added <a id="top" name="top"> within my header division (index.php) since the header is at the top of the page. I then added the Back to Top link under the center() function statement within the main content area division (index.php) like this:
Quote
<? center(); ?>
<p><?php jump_to('header', 'Back to Top') ?></p>
</div>
and this link returns me to the top of the template no matter which article is displayed in the center content area. Good to go.

Quote from: Agent:
This is a flexible way of letting you add any anchor you want in a page and create jump links to those anchors (within the same page) easily.

Short version: a) create an anchor, say "page_middle", in your index.php.
b) Use the jump_to function to create the link from any other part of the page to the 'page_middle' point.

Does that make things clearer?
Ummmm... not really. "page_middle" in index.php is somewhere within the body text of the article(s) being generated by the center function itself (from snews.php)... so we cannot just insert an anchor there in index.php.
Added Note:
So... as a test... I inserted <a id="middle" name="middle"> in the middle of a long article (within the edit textarea), then changed my link - the one already inserted under the center function statement within its div in index.php - to jump_to('middle', and... the link takes me to the middle of the article. So the link is communicating with the anchor within the article data delivered as content on the page via center function.

So... our only  challenge then... appears to be how we can use the jump_to function from within the article textarea... am I getting any closer?
« Last Edit: August 22, 2007, 06:16:06 AM by Phil Martin (Philmoz) »
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #13 on: December 21, 2006, 10:13:29 PM »

Quote from: Keyrocks
"page_middle" in index.php is somewhere within the body text of the article(s) being generated by the center function itself (from snews.php)... so we cannot just insert an anchor there in index.php.
Yes, that is correct, but "page_middle" was only used to show the possibilities. Perhaps not a good example. The point is that you can create an anchor on one spot in your index.php and then reference it at another, completely separate spot. They can be named whatever you wish. Top, page_middle, sidebar, quicklinks, what ever you want. That is how the mod works. Next step is ...

Quote from: Keyrocks then
By your description... if I wanted to use a link to take the viewer from one point to another within an article... I would need to insert the anchor and the jump_to function within the content of the article itself. But you note that creating the jump_to links leading to anchors within an article is a problem... and a matter for another mod/solution not yet available. Am I fairly accurate with this assumption... or am I really out to lunch?
You're quite correct Key. The problem is of course that we can't input php code directly in articles and have the code executed. Which is good. I don't know of any way  around this, but then my programming skills are incomplete ... so to speak ... :lol:
Maybe with a login check admin's could be allowed to input executable code strings in articles?
Something for the Real Gurus to mull over. ;D
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
[MOD] Accessibility Boost Two-step (sNews 1.5)
« Reply #14 on: December 22, 2006, 02:54:38 AM »

Executing PHP within sNews Article Content:
AKA: An exercise in thinking "outside the box".
Agent - I've come up with a simple way of executing the jump_to() function from within an sNews article, and it doesn't involve changing anything in sNews. Give this a test-run and let me know what you think. It's working for me.

One - Create an anchors folder in your root directory, create a .txt file called middle.txt ... paste the function link into the file and save it in your anchors folder:
Quote
<p><?php jump_to('middle', 'Go to Middle') ?></p>
Two - Create a new article in the normal sNews fashion with lots of paragraphs in it (I used about a dozen "lorem ipsum" paragraphs). Insert the <a id="middle" name="middle"> anchor somewhere in the middle of it all. Then, at the bottom after the last paragraph... insert a link to the middle.txt file like so:
Quote
[include]anchors/middle.txt[/include]
... and save the article. When you view it, you should see the function link "Go to Middle" at the bottom... and clicking the link will place the location of the anchor at the top of your screen.

This method ought to work for any links you need... it would just be a matter of creating separate .txt files for each function link, then using the include tags to include that file displaying the link where you need it.
« Last Edit: August 22, 2007, 06:16:28 AM by Phil Martin (Philmoz) »
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU
Pages: [1] 2