Soluções inclusivas, em minha opinião são vitais para profissionais não só da web.

Entre tanto o que se vê por ai não é exatamente isso, mas se você está lendo este texto é porque você está há vários passos na frente de outros profissionais, e está com o pensamento certo e inclusivo.

Esta solução de menu acessível é muito fácil e funciona bem em vários navegadores como no IE6 + e em todos os browsers que dão suporte a web Standards. Funciona com teclado e mouse, e se o JavaScript estiver desabilitado dá pra acessar todos os links, mas os subitens não aparecem visualmente.

Veja o menu funcionando e vamos aos detalhes:

XHTML

É o documento de marcação onde vamos criar os nós do menu.

Vamos criar uma lista não ordenada “ul” e seus respectivos filhos e adicionar id e classes para podermos manipular alguns elementos.

<!-- As tags como o DOCTYPE, head, body e demais não vou descrever aqui para o post ser mais objetivo -->
<ul id="nav">
	<li><a href="index.html">Home</a></li>
	<li class="submenu"><a href="#" class="bullet">Portfólio</a>
		<ul>
			<li><a href="sites.html">Sites</a></li>
			<li class="submenu"><a href="#" class="bullet">Interfaces</a>
				<ul>
					<li><a href="graficas.html">Gráficas</a></li>
					<li><a href="digitais.html">Digitais</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="quemsomos.html">Quem Somos</a></li>
	<li><a href="contato.html">Contato</a></li>
</ul>

CSS

É o documento de apresentação, onde vamos posicionar e dar beleza ao nosso menu.

Aqui é onde você provavelmente ira mexer mais, para poder customizar seu menu acessível.

#nav, #nav ul {
	width: 70em;
	list-style: none;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
 }
#nav li {
	float: left;
 }
#nav a {
	display: block;
	width: 10em;
	height: 2em;
	line-height: 2;
	text-align: center;
	text-decoration: none;
	background-color: #69c; /* IE precisa desta declaração */
	color: #fff;
	border: 1px solid #ccc;
	border-width: 0 1px 1px
 }
#nav a:hover {
	text-decoration: none;
	background: #c7daec;
	color:#69c;
 }
#nav a.bullet {
	background:#69c url(bullet.gif) no-repeat right;
 }
#nav a.bullet:hover {
	background: #c7daec url(bullet-over.gif) no-repeat right;
 }
#nav li ul {
	position: absolute;
	left: -1000em;
	width: 10em;
	margin: 0;
 }
#nav ul ul {
	margin: -2.1em 0 0 10.1em;
 }
#nav li:hover ul ul, #nav li.over ul ul {
	left: -1000em;
 }
#nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {
	left: auto;
}

JavaScript

O arquivo JavaScript é responsável pela ação.

É neste documento que vamos verificar os links e os subitens da lista e vamos fazer com que ele se encarregue em abrir os subitens.

<script type="text/javascript">

var dropdown_intervalId;
var dropdown_ulId = (!dropdown_ulId) ? 'nav' : dropdown_ulId;
var dropdown_delay = (!dropdown_delay) ? 0 : dropdown_delay;

function dropdown_init()
{
 try
 {
  var as = document.getElementById(dropdown_ulId).getElementsByTagName('a');

  for (var a = 0; a < as.length; a++)
  {
   as[a].onfocus = function() { dropdown_expand(this) }
   as[a].onmouseover = function() { dropdown_expand(this) }
   as[a].onblur = function() { dropdown_colapse(dropdown_delay) }
   as[a].onmouseout = function() { dropdown_colapse(dropdown_delay) }
  }

  dropdown_colapse(0);

 } catch(e){}

}

function dropdown_expand(caller)
{
 try
 {
  clearInterval(dropdown_intervalId);

  var uls = caller.parentNode.parentNode.getElementsByTagName('ul');

  for (var ul = 0; ul < uls.length; ul++)
   uls[ul].style.left = "-1000em";

  caller.parentNode.getElementsByTagName('ul')[0].style.left = "auto";

 } catch(e){}

}

function dropdown_colapse(milliseconds)
{
 try
 {
  clearInterval(dropdown_intervalId);

  dropdown_intervalId = setInterval(function()
  {
   var uls = document.getElementById(dropdown_ulId).getElementsByTagName('ul');

   for (var ul = 0; ul < uls.length; ul++)
    uls[ul].style.left = "-1000em";

   clearInterval(dropdown_intervalId);

  }, milliseconds, null);

 } catch(e){}

}

window.onload = dropdown_init;
</script>

Esse menu foi tema de debate na lista Acesso Digital, e esse post foi baseado na resposta do Gil Porta membro da lista, e o menu foi desenvolvido por Alexandre Junqueira.

A melhoria progressiva é uma estratégia de web design que enfatiza a acessibilidade, a marcação semântica e estilo externo e tecnologias de script.

Ela usa tecnologias da web em camadas que permite a todos o acesso a conteúdos e funcionalidades básicas de uma página web usando qualquer navegador ou ligação à Internet, fornecendo também aqueles com software de navegação mais largura de banda ou mais avançado de uma versão melhorada da página.

A estratégia é uma tentativa de subverter a estratégia de web design tradicional conhecida como degradação graciosa, onde designers iriam criar páginas Web para os navegadores mais recentes que também funcionam bem em versões antigas do navegador.

Degradação graciosa deveria permitir que a página de degradar ou manter-se apresentável, mesmo que certas tecnologias assumida pelo projeto não estava presente, sem ser brusco para o usuário do software, como mais velhos.

Na prática, a degradação graciosa foi suplantada por uma atitude que o usuário final deve apenas atualizar. Esta atitude é devido a limitações de tempo e orçamento, o acesso limitado a testes de software e browsers alternativos, bem como a crença generalizada de que os navegadores são gratuitos.

No Progressive Enhancement (PE), a estratégia é deliberadamente invertida: um documento de marcação de base é criada, voltada para o menor denominador comum de funcionalidades de software de navegação e, em seguida, o designer adiciona funcionalidades ou melhorias para a apresentação e comportamento da página, utilizando tecnologias modernas, como Cascading Style Sheets ou JavaScript (ou outras tecnologias avançadas, como Flash ou Java applets ou SVG, etc ) Todas essas melhorias são ligados externamente, de modo a evitar forçar navegadores de menor capacidade para comer dados que eles não entendem e não pode lidar com, ou que teria pântano sua ligação à Internet.

A abordagem do PE é derivada da experiência precoce Pulido (C 1993-4) com SGML, antes de trabalhar com HTML ou qualquer linguagem de apresentação na Web, bem como das experiências mais trabalhar com CSS para resolver bugs do navegador.

Nesses contextos cedo SGML, marcação semântica foi de fundamental importância, visto que a apresentação foi quase sempre considerada separadamente em vez de ser incorporado na marcação própria. Este conceito pode ser referido nos meios de marcação como a regra da separação de apresentação e conteúdo, a separação entre conteúdo e estilo, ou de separação da semântica e da apresentação.

À medida que a Web evoluiu em meados dos anos noventa, mas antes da CSS foi introduzida e amplamente apoiada, esta regra básica do SGML foi repetidamente violada por extensores HTML.

Profissionais como Eric Costello, Owen Briggs, Dave Shea, entre outros, mostraram como usar o CSS para fins de layout.

Libertando os designers a usar tecnologias poderosas como o CSS para gerir todas as tarefas de apresentação, JavaScript para melhorar comportamento e XHTML para estrutura.

Você já pensou nisso?
Este termo se refere a tornar as coisas mais acessíveis, dar acesso de algo para alguém, isso vai desde criar uma calçada com rampa para cadeirantes a construir web sites para usuários invisuais.
web sites para cegos? realmente pode parecer loucura mas o caso é que esse publico existe e é muito bem vindo, e são pessoas que passam muito tempo navegando na web, e na maior parte do tempo fazendo compras on-line, mas muita gente não sabe que isso é possível ou simplesmente ignora.

Navegação com leitores de browser é uma realidade e já faz um bom tempo, existem no mercado vários tipos de leitores de tela, como o audio browser, que é o que eu uso, apesar de eu não ser invisual, utilizo este software para testar as aplicações web que eu desenvolvo, é absurdo o que nos vemos na web, grandes e serias empresas tem o seu web site com o acesso prejudicado, muitas vezes ate inviabilizado para este publico, a realidade é bem feia ainda, mas o processo de conscientização e conhecimento nos padrões web estão melhorando o quadro nacional.

Pense nisso e desenvolva projetos inclusivos!