Acessibilidade e Usabilidade: Javascript discretos

Permitindo aos usuários interagir com uma página da Web nos últimos anos tem produzido um aumento significativo no uso de client-side scripting: código Javascript pode responder em tempo real e manipular uma variedade de informações. A Web 2.0 é a expressão máxima dessa capacidade de interação, no qual o usuário final - o usuário participa ativamente na construção e para "a evolução do site, interagindo com ele e ajudar a nós mesmos. É conhecido como User-Generated Content (UGC ou - conteúdo gerado pelo usuário), que vê o "navegador" definitivamente não passiva!

Para atingir essa interação, permitindo assim que o usuário final para acrescentar a sua contribuição, nós desenvolvemos uma série de técnicas que mudaram a aparência eo comportamento de páginas Web (estático até agora, mas agora semelhante à de aplicações tradicionais área de trabalho) nos últimos anos. Alterar o conteúdo de uma página, enviar arquivos, dando seu voto a um vídeo ou um documento, registrar ou alterar seus dados pessoais, são apenas alguns dos mais ricos operações em muitos serviços (2.0 beta) na Web

A crescente demanda por ferramentas de cliente ( Prototype , Dojo Toolkit , jQuery , ASP.NET Ajax , ...) e Server (Ruby on Rails, bibliotecas PHP, JSP e ASP, ...) para a construção de Web 2.0, tem levado ao surgimento de muitos ferramentas de desenvolvimento, bibliotecas ou apenas filosofias de um novo desenvolvimento na Web;

Estas técnicas e essas ferramentas têm sido usadas em quase todas as combinações possíveis, graças à sua natureza modular ea capacidade para resolver algumas tarefas específicas, às vezes. Alguns optaram, portanto, soluções inteiramente em Adobe Flash, que usaram soluções híbridas (Flash + Javascript), que, a partir de bibliotecas como genéricos Prototype , atingiu o seu quadro específico. A maioria destas ferramentas também é open source (livre ou não) e isso com certeza contribuiu para uma enorme propagação em nenhum momento.

O preço foi pago, no entanto, para obter essa nova interação, tem sido uma perda líquida de acessibilidade (e muitas vezes usabilidade) da Web Paradoxalmente, a maior funcionalidade de interação restringiu o número de usuários que, por várias razões, não podem aceder a estas novas tecnologias! Houve, portanto, un'incremento a exclusão digital , muitas vezes apenas devido ao abuso de algumas técnicas de desenvolvimento ou, simplesmente, não tendo em conta algumas das meta final.

Ao desenvolver um site, ou simplesmente uma página web, não se esqueça que o usuário final ", que pode visitar o nosso site com dispositivos (browser ou agente de usuário) que não as que esperamos, mas, acima de tudo, com características e outras definições do que aqueles que temos um dado adquirido (resolução de tela, número de cores, você precisa ter o JavaScript desabilitado, não applets ou plugins ActiveX, etc ...). Segue-se que, além de compatibilidade simples (funcional e visual) entre os diferentes navegadores devem prestar atenção às características que eles têm. O argumento, claro, é complexo e articulado.

É direito de forçar um usuário a ter o JavaScript habilitado para disponível e navegar no nosso site?

Acho que há duas respostas possíveis a esta pergunta, a primeira pode ser não, não é certo, especialmente se o que você quer conseguir pode ser estruturado de tal forma a permitir o acesso é um acesso básico é evoluído. No entanto, e esta é a segunda resposta, é claro que existem casos limítrofes em que a exigência de uma determinada tecnologia é independente da capacidade - e vontade - analista programador!

Também - questão polêmica - quem somos nós (desenvolvedores) para decidir quem deve ser e exigir o quê?

Se o projeto que queremos entender é que eles podem ser usados ​​por qualquer agente do usuário, com as devidas precauções, o tempo de desenvolvimento ea crescente complexidade do código (HTML, JavaScript e Scripting Server) aumenta. É uma decisão de produção, pessoal, começar a ditar as regras. No entanto, a compatibilidade não é colocado em operação que deve ser planejado desde o início, você pode de fato resolver o problema em um momento posterior, quando o nosso site (ou o nosso) já está online.

Normalmente usamos duas técnicas, abordagens ou dois, para construir uma Web verdadeiramente acessível:

  • Degradação graciosa
  • Melhoramento progressivo

Degradação graciosa

Esta técnica, também utilizada em diferentes áreas de web design, assume desde o início para se concentrar na criação de um site extremamente sofisticadas, utilizando técnicas e tecnologias, tudo isso sem se preocupar com problemas de compatibilidade e acessibilidade. Usabilidade, no entanto, é - naturalmente - o primeiro ingrediente, por definição. O segundo passo é adicionar funcionalidades para suportar todos os navegadores e os usuários que são - de fato - no limite.

Ela irá então usar tabelas para formatar o nosso layout, sem usar o exasperante de CSS e flutuar, de modo a respeitar o layout do site, mesmo em navegadores mais antigos. Javascript aparece onde você vai usar a tag NOSCRIPT para fornecer uma alternativa acessível. Use a tag ALT</codee <code inline="true">TITLE mais ricos, onde, etc ...

Degradação graciosa, entretanto, tem limitações. Não leve seriamente em conta os vários tipos de agentes do usuário (ou usuários) desde o início, pode ter mau (por vezes feio) conseqüências no rescaldo. Nem sempre, na verdade, você pode adicionar esses artefizi e ferramentas pode fornecer uma alternativa real de conteúdo para diferentes usuários. A experiência do analista desenvolvedor web / designer, neste caso, desempenha um papel fundamental. No entanto, um site evolui com o tempo, melhora, acrescenta recursos que não podem ser resolvidas de outras formas, se não forçando o uso de uma tecnologia especial: assistir a um vídeo (Flash, QuickTime, etc) é difícil - se não impossível - para alcançar no padrão HTML!

Melhoramento progressivo

Esta abordagem é provavelmente o que personalmentre preferir. É o exato oposto de degradação graciosa. Para aqueles que apreciam o uso de folhas de estilo é uma técnica já conhecida: ela começa a partir da estrutura básica, a marcação simples, e como você adicionar todos os recursos avançados. Como parte do layout e CSS, é a abordagem utilizada para a substituição de imagem ', ou substituição por uma folha de estilo com um arquivo de texto (então também existem técnicas que exploram o Flash ou até mesmo Ajax).

De particular interesse neste tipo de abordagem, é a disseminação dos chamados JavaScript Discreto: JavaScript que não é intrusiva. Esta técnica pode melhorar a funcionalidade de um site Web, explorando as capacidades de manipulação JavaScript DOM. Inserindo-lo corretamente scripts JavaScript na página que você pode fazer para torná-los transparentes para os navegadores que não suportam JavaScript (ou ter desabilitado JavaScript), mas trabalhar para os outros.

As características de um JavaScript Discreto são:

  • Melhorar ou editar - NÃO implementa - recursos encontrados
  • Transparente no caso de agentes de usuário que não suportam JavaScript ou desativar

Ponto 1 é essencial para a acessibilidade, da mesma forma como o 'usado em substituição CSS imagem. Um exemplo é o encaixe , o que melhora a visibilidade de um link. snap é um exemplo clássico de JavaScript Discreto: JavaScript está desativado se o link ainda está presente e funcionando, mas se o JavaScript está habilitado a funcionalidade de visualização é adicionada. Além disso, se você não pode acessar qualquer mensagem JavaScript é exibida: Seção 2 - não intrusiva.

Outro exemplo de JavaScript Discreto é bem feito Lightbox JS , que melhora a apresentação de slides de imagens. A partir de uma série de links (Tags <A>) com o atributo rel está ajustado corretamente pode exibir imagens vinculadas em um realmente cativante!

Esta técnica é extremamente versátil e permite uma abordagem Enhancement verdadeiro Progressive - e, sem exagero, uma abordagem web2.0 verdade.

Neste cenário, o uso da biblioteca Prototype fornece fácil acesso ao DOM HTML que permite substituir e adicionar recursos aos elementos de uma página, tornando-os mais versáteis.

Ambas as técnicas, portanto, permitir a criação de sites no final realmente acessíveis. Por outro lado, requerem atenção especial e trabalho adicional que é em última análise, pagos pela maior quantidade de visitantes! Eu, pessoalmente, adotou a técnica de fortalecimento progressivo, para um hábito puramente subjetiva e. Escolher entre as duas técnicas podem ser indiferentes a experiência, juntamente com o tipo de projeto que você deve desenvolver, certamente desempenha um papel importante.

Como um exemplo vale mais que mil palavras, proponho que antes mosrtare alguns trechos de código simples realmente iluminado.

4 comentários para "Acessibilidade e Usabilidade: Javascript discreto"

  1. 06 de abril de 2007 Acessibilidade e Usabilidade ":: K4 [U]:: :

    Acessibilidade e Usabilidade [...]: Javascript discretos ... [...]

  2. 9 de dezembro de 2007 upnews.it :

    undolog | Blog Archive | Acessibilidade e Usabilidade: Javascript discretos ...

    Permitindo aos usuários interagir com uma página da Web nos últimos anos tem produzido um aumento significativo no uso de client-side scripting: código Javascript pode responder em tempo real e manipular uma variedade de informações. A Web2.0 ...

  3. 23 junho de 2008 Técnicas de texto de substituição para HTML / CSS | Undolog.com :

    [...] Página da Web é substituir a operação com folhas de estilo (veja Progressive Enhancement em Acessibilidade e Usabilidade: unobtrusive JavaScript). Esta técnica permite que você faça site de conteúdo mais acessível, independentemente de [...]

  4. 09 de outubro de 2008 Enhancement Progressive: para melhorar a experiência do usuário para navegadores modernos - Francis Gaven Portfolio Web Design :

    Acessibilidade e Usabilidade [...]: Javascript discreto. Excelente artigo que undolog.com falando sobre javascript discreto endereços ambas as questões com uma visão geral de [...]

Deixe um comentário

XHTML PERMIT TAG: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> CÓDIGO DE INSERÇÃO:
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL 


Parar SOPA