Access Keys for Joomla 1.6

[O3D]

Hi everyone,

I am currently building a site using 1.6 and needed to add accesskey fucntionality for accessibillity reasons.

After much reseach, i didn't find any suitable methods of doing this so i went a created a hack to achieve my goal. The building blocks were taken from a tut i found on a sub site of Joomlashack but i found it didn't work so i put my own spin on it.

Works for me so i thought i would share it with you all. Hopefully accesskeys will be included in future releases of Joomla.

----------------------------------------------------------------------------------------------
We first need to add the access key field to the menu item attribute. To do this we need to edit:

administrator/components/com_menus/models/forms/item_component.xml

Around line 31 (before the closing fieldset) add the following code:

Code: Select all

<!-- Accesskey Hack Joomla 1.6 -->
		<field name = "menu_accesskey" type = "text"
 				label = "COM_MENUS_ITEM_FIELD_MENU_ACCESSKEY_LABEL"
 				description = "COM_MENUS_ITEM_FIELD_MENU_ACCESSKEY_DESC"
			    size = "1" default = "" />
		</fieldset>

We then need to add the label and description text to the default language file.

administrator/language/en-GB/en-GB.com_menus.ini

Once you have uploaded the files, you should now be able to access the accesskey attribute in the edit main item page under "Link Type Options" (Right hand side panel)

We now have to edit some of the core files so the access key displays in the outputted HTML.
Open modules/mod_menu/helper.php (make sure to open the modules folder from the root and not the admin folder.)

Around line 113 add the following line of code:

Code: Select all

$item->accesskey = htmlspecialchars ($item-> params->get('menu_accesskey',''));

You should now have a block of text this like:

$item->title = htmlspecialchars($item->title);
$item->accesskey = htmlspecialchars ($item-> params->get('menu_accesskey',''));
$item->anchor_css = htmlspecialchars($item->params->get('menu-anchor_css', ''));
$item->anchor_title = htmlspecialchars($item->params->get('menu-anchor_title', ''));
$item->menu_image = $item->params->get('menu_image', '') ? htmlspecialchars($item->params->get('menu_image', '')) : '';

Now open the following file: modules/mod_menu/tmpl/default_component.php

On line 27 we need to change the Case 0 from:

Code: Select all

?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
                break;

to

Code: Select all

?><a accesskey="<?php echo $item->accesskey; ?>"<?php echo $class;?>href ="<?php echo $item->flink; ?>" <?php echo $title; 

?>><?php echo $linktype;?></a><?php
		break;

Thats it! You have now added accesskey functionality to your Joomla 1.6 site.

Hope it helps other out there. Enjoy.

[O3D]

Hi everyone,

I just realised i made a small mistake in the above code. Even when no access key is definded in the menu item parameters , it was rendering out accesskey= " " in the outputted source code. This creates a warning in some accessibillity tools.

To solve this i did the following.

Open up: modules/mod_menu/tmpl/default_component.php and replace Case 0: (Line 27 approx)

Code: Select all

?><a accesskey="<?php echo $item->accesskey; ?>"<?php echo $class;?>href ="<?php echo $item->flink; ?>" <?php echo $title;

?>><?php echo $linktype;?></a><?php
      break;

to

Code: Select all

?><a <?php
if ( $item->accesskey == '' ) {
	echo "$class";
} else {
	echo "accesskey=\"$item->accesskey\" $class";
}
?>href ="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype;?></a><?php
		break;

This will now only render the access key if defined

[ember]

Hi O3D,

I am trying to utilize this method to add access keys to my 1.6 site. Thanks for the hard work and sharing this!

I am having some difficulty, but it could easily be user error. I accomplished the first two steps (editing the item_component page and the language file), and uploaded them. However, when I tried to access the menu item, it gave me an internal error message. Should I have been able to access that after uploading? I have not yet completed the last two steps.

I was not completely clear on the 2nd step (the language file), so here is what I added:

COM_MENUS_ITEM_FIELD_MENU_ACCESSKEY_LABEL="Access Keys"
COM_MENUS_ITEM_FIELD_MENU_ACCESSKEY_DESC="Add Access Keys"

Is that correct?

If I'm missing something important, please let me know. I need this badly!

[ember]

Never mind... I figured out my problem... an extra keystroke. DUH. Thanks again for this!

[dazbot]

Thanks for this. Works on 1.7 too. can I just add that if you copy and paste the </fieldset> from the first code it won't work. You just need the code above it and place above closing fieldset already there.

Code:
<!-- Accesskey Hack Joomla 1.6 -->
<field name = "menu_accesskey" type = "text"
label = "COM_MENUS_ITEM_FIELD_MENU_ACCESSKEY_LABEL"
description = "COM_MENUS_ITEM_FIELD_MENU_ACCESSKEY_DESC"
size = "1" default = "" />
</fieldset>

[dazbot]

Hi, trying to get this to work in 2.5 now 03D, any ideas? http://forum.joomla.org/viewtopic.php?f=615&t=700588

[O3D]

Hi Dazbot,

The above hack works on Joomla 2.5 as well.

I just tested on one of my sites and it worked as expected. Are you having issues?

The biggest issue is now that you can upgrade Joomla core from the admin, it overwrites the hack files. You will need to upload the above mentioned files again to get it working.

Ollie

[dazbot]

Hi, thanks for replying. I can get the access field to appear in menu item admin, but its not rendering, heres what it renders:

Code: Select all

<ul class="menu">
<li class="item-101"><a href ="/" title="Home page" >Home</a></li><li class="item-110"><span class="separator">\</span>
</li><li class="item-107 parent"><a href ="/about" title="About us" >About us</a></li><li class="item-111"><span class="separator">\</span>
</li><li class="item-108 parent"><a href ="/what" title="What we do" >What we do</a></li><li class="item-112"><span class="separator">\</span>
</li><li class="item-109 current active"><a href ="/contact" title="Our contact details" >Contact</a></li></ul>
</div>

Interestingly If I use the first code you posted it renders this...but still doesn't include the access key

Code: Select all

<li class="item-101"><a accesskey="" href ="/" title="Home page" >Home</a></li><li class="item-110"><span class="separator">\</span>

Heres the code I have in default_component.php

Code: Select all

<?php
/**
 * @package		Joomla.Site
 * @subpackage	mod_menu
 * @copyright	Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access.
defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
$class = $item->anchor_css ? 'class="'.$item->anchor_css.'" ' : '';
$title = $item->anchor_title ? 'title="'.$item->anchor_title.'" ' : '';
if ($item->menu_image) {
		$item->params->get('menu_text', 1 ) ?
		$linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" /><span class="image-title">'.$item->title.'</span> ' :
		$linktype = '<img src="'.$item->menu_image.'" alt="'.$item->title.'" />';
}
else { $linktype = $item->title;
}

switch ($item->browserNav) :
	default:
	case 0:
?><a <?php
if ( $item->accesskey == '' ) {
   echo "$class";
} else {
   echo "accesskey=\"$item->accesskey\" $class";
}
?>href ="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype;?></a><?php
      break;
case 1:
		// _blank
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
		break;
	case 2:
	// window.open
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo $title; ?>><?php echo $linktype; ?></a>
<?php
		break;
endswitch;

Any pointers would be great.. D

[claudio1]

Hi

This is just great! Thank you ever so much! I have finally implemented access keys on my Joomla 2.5 site. Yes, it works just fine on 2.5 too.

Thanks again!

Claudio

[nmanglik]

For This to work on Joomla 2.5, the default_component.php file that needs to be changed is located under:
\templates\<template used>\html\mod_menu\default_component.php

and not modules/mod_menu/tmpl/default_component.php as mentioned for joomla 1.6 and 1.7.

in the above file(\templates\<template used>\html\mod_menu\default_component.php), replace the following code:

case 0:
$attributes['href'] = $item->flink;
break;

with

case 0:
$attributes['href'] = $item->flink;
$attributes['accesskey'] = $item->accesskey;
break;

The rest of the file changes remain the same

[dj darius]

I've tried the same hack on Joomla 3 and it works!

[oj09]

This is just what I'm after, as I'm creating a new whole website for a disability charity, that I'm carrying out my ICT Foundation Degree internship with and naturally need to include as many pertinent web accessibility things.

However, before I start "hacking" the core joomla code, am I right in thinking with this being a hack, each and everytime that we / they update Joomla in future, this hack will be overwritten and hence could become a bit of a pain in the backside for them?

I look forward to hearing from somebody regarding this.

Regards,

[oj09]

Now open the following file: modules/mod_menu/tmpl/default_component.php

On line 27 we need to change the Case 0 from:

Code: Select all

?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
                break;

to

Code: Select all

?><a accesskey="<?php echo $item->accesskey; ?>"<?php echo $class;?>href ="<?php echo $item->flink; ?>" <?php echo $title; 

?>><?php echo $linktype;?></a><?php
		break;

I have got to the above but now and as I'm using Joomla 3.x.x is this where I take it, I need to ignore the above section and do the following;

For This to work on Joomla 2.5, the default_component.php file that needs to be changed is located under:
\templates\<template used>\html\mod_menu\default_component.php

and not modules/mod_menu/tmpl/default_component.php as mentioned for joomla 1.6 and 1.7.

in the above file(\templates\<template used>\html\mod_menu\default_component.php), replace the following code:

case 0:
$attributes['href'] = $item->flink;
break;

with

case 0:
$attributes['href'] = $item->flink;
$attributes['accesskey'] = $item->accesskey;
break;

The rest of the file changes remain the same

If so, looking in my files and directories on the remote server, I don't see: \templates\<template used>\html\mod_menu\ mod_menu folder let alone mod_menu\default_component.php file... I'm now a little confused and clearly at present can't move on to finish this off without knowing why I can't see this folder and it's resultant file?

Any help or guidance in this matter would be as always much appreciated.

Regards,