Estás en... Home > Diseño > Problema de accesibilidad con elementos flash y menús DHTML

En el ejemplo siguiente podemos ver un problema típico de accesibilidad al usar un elemento flash e intentar mostrar un elemento html por encima del mismo, por ejemplo un menú dinámico.

Nota: Este problema no ocurre con Mozilla Firefox, por lo que para reproducirlo necesitar visitar esta página con otro navegador como Internet Explorer, Google Chrome o Safari

<div class="menuWrapper">
  <ul class="d_menu">
    <li class="d_menu-item">Menu 1
      <ul class="d_submenu" style="display:none">
        <li>Submenu1</li>
        <li>Submenu2</li>
        <li>Submenu3</li>
      </ul>
    </li>
    <li class="d_menu-item d_last">Menu 2
      <ul class="d_submenu" style="display:none">
        <li>Submenu1</li>
        <li>Submenu2</li>
      </ul>
    </li>
  </ul>
  <div style="clear:both"></div>
</div>

<div class="d_content">
  <object width="400" height="225">
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=13026281&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ff9933&amp;fullscreen=1" />
    <embed src="http://vimeo.com/moogaloop.swf?clip_id=13026281&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ff9933&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
  </object>
</div>

El código del vídeo es el código que se puede obtener desde la página de vimeo para embeber un vídeo en cualquier página.

El código css es el siguiente:

.d_menuWrapper{
  background-color: black;
  color: white;
}
.d_content{
  display:block;
  margin:20px 0;
}
ul.d_menu, ul.d_submenu{
  list-style: none;
  margin:0;padding:0;
}

ul.d_menu li.d_menu-item{
  position:relative;
  padding:0;margin:0;
  float:left;
  padding: 20px;
  border-left: 1px solid #fff;
}
ul.d_menu li.d_last{
  border-right: 1px solid #fff;
}

ul.d_submenu{
  background-color:black;
  position:absolute;
  left:0;
  top:60px;
  width:212px;
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid white;
}
ul.d_submenu li{
  padding:20px;
  border-bottom:1px solid white;
}

El código jQuery del menú es el siguiente:

$(document).ready(function(){
  $('.d_menu-item').hover(function(){
    $(this).find('.d_submenu').show();
  },function(){
    $(this).find('.d_submenu').hide();
  });
});

El resultado es el siguiente:

El comportamiento normal sería que el submenú se mostrara sobre el elemento flash. Sin embargo esto no es así y el submenú se muestra por debajo del elemento flash.

A la vista de este problema podemos pensar en la siguiente solución que consiste en forzar un valor menor a la propiedad z-index del elemento flash que el de los submenús.

Por ejemplo:

.d_menu, .d_submenu{
  z-index: 2;
}
.d_content object, .d_content embed{
  position:relative;
  z-index: 1;
}

Sin embargo, ¡esto no resuelve el problema!

La razón es que los elementos Flash se muestran siempre en la capa superior, independientemente de la capa donde se encuentre (z-index).

La solución pasa por configurar el modo de ventana del elemento flash con el modo transparent. En este modo permite mostrar sobre el elemento flash otros elementos de la página.

<object width="400" height="225">
      <param name="allowfullscreen" value="true" />
      <param name="allowscriptaccess" value="always" />
      <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=13026281&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ff9933&amp;fullscreen=1" />
      <embed src="http://vimeo.com/moogaloop.swf?clip_id=13026281&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ff9933&amp;fullscreen=1"
                type="application/x-shockwave-flash"
                allowfullscreen="true"
                allowscriptaccess="always"
                width="400"
                height="225"
                wmode="transparent">
      </embed>
    </object>

Ejemplo: