Estos últimos días hemos estado certificando en accesibilidad por AENOR un proyecto web realizado en Joomla y para rematarlo todo nos hacía falta los Access Key o atajos de teclado para navegar por las diferentes secciones de la web.
¿Cómo se hace esto?. Al ser un proyecto Joomla que los menús te los genera el core, tenemos que modificar unas cuantas líneas para desde el backend añadir el accesskey que queramos. No sé si hay otra forma, pero es la más limpia que he encontrado. Vamos allá…
Lo primero que tenemos que hacer es irnos al archivo ‘component.xml’ del componente menú, que se encuentra en la ruta ‘\administrator\components\com_menus\models\metadata’. Aquí añadiremos las siguientes líneas que lo único que hacen es crear el campo AccessKey en el backend del menú:
<param name="accesskey" type="text" size="1" label="AccessKey" default=""
description="Access Key de la pagina al que el item del menu apunta" />
Con estas nuevas líneas guardaremos el archivo que quedará así:
<?xml version="1.0" encoding="utf-8"?>
<metadata>
<state>
<name>Component</name>
<description>Component Parameters</description>
<params>
<param name="page_title" type="text" size="30" default="" label="Page Title"
description="PARAMPAGETITLE" />
<param name="show_page_title" type="radio" default="1" label="Show Page Title"
description="SHOW/HIDE THE PAGES TITLE">
<option value="0">No</option>
<option value="1">Yes</option>
</param>
<param name="pageclass_sfx" type="text" size="20" default="" label="Page Class Suffix"
description="PARAMPAGECLASSSFX" />
<param name="@spacer" type="spacer" default="" label="" description="" />
<param name="menu_image" type="imagelist" directory="/images/stories" hide_default="1"
default="" label="Menu Image" description="PARAMMENUIMAGE" />
<param name="@spacer" type="spacer" default="" label="" description="" />
<param name="secure" type="radio" default="0" label="SSL Enabled" description="PARAMSECURE">
<option value="-1">Off</option>
<option value="0">Ignore</option>
<option value="1">On</option>
</param>
<param name="@spacer" type="spacer" default="" label="" description="" />
<param name="accesskey" type="text" size="1" label="AccessKey" default=""
description="Access Key de la pagina al que el item del menu apunta" />
</params>
<advanced />
</state>
</metadata>
Ya tenemos el campo creado para darle, cuando sea oportuno, el valor al AccessKey. Ahora solo nos falta irnos al frontend y recoger ese valor para que lo inserte en el enlace de nuestro item del menú.
Para esto, nos vamos a ‘\modules\mod_mainmenu\’ y editamos el archivo ‘helper.php’
Tenemos que añadir dos partes. La primera donde recogemos el valor del accesskey. Para ello:
// Primera parte
$accessKey = $iParams->get('accesskey');
$tmp->accessKey = $accessKey;
Y la segunda, donde insertamos el campo accesskey en el enlace, si este existe:
// Segunda parte
if ($tmp->accessKey)
$data = '<a href="'.$tmp->url.'" accesskey="'.$tmp->accessKey.'">'.$image.$tmp->name.'</a>';
else
$data = '<a href="'.$tmp->url.'" >'.$image.$tmp->name.'</a>';
La primera parte la colocaremos de esta forma:
$iParams = new JParameter($tmp->params);
if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
$image = '<img src="'.JURI::base(true).'/images/stories/'.$iParams->get('menu_image').'" alt="" />';
} else {
$image = null;
}
// Primera parte
$accessKey = $iParams->get('accesskey');
$tmp->accessKey = $accessKey;
switch ($tmp->type)
{
case 'separator' :
return '<span class="separator">'.$image.$tmp->name.'</span>';
break;
Y la segunda, en el case 0 del switch:
switch ($tmp->browserNav)
{
default:
case 0:
// _top
// Segunda parte
if ($tmp->accessKey)
$data = '<a href="'.$tmp->url.'" accesskey="'.$tmp->accessKey.'">'.$image.$tmp->name.'</a>';
else
$data = '<a href="'.$tmp->url.'" >'.$image.$tmp->name.'</a>';
break;
case 1:
// _blank
$data = '<a href="'.$tmp->url.'" target="_blank">'.$image.$tmp->name.'</a>';
break;
...
That’s all! Ya tenemos todo listo para poner los accesskeys en los items de nuestro menú.
