Niquelao » acc_calendar: Calendário acessível em JavaScript (desnecessário mas útil)

Calendário acessível em javascript (desnecessário mas útil) Atualizado a 1 de junho de 2008 , por Rumoroso Nos campos de formulário em que se tem de introduzir uma data, com o objetivo de melhorar a experiência do utilizador e, ao mesmo tempo, aumentar o controlo no formato dos dados, pode incluir-se um calendário através de javascript. Eu sei, palavra maldita , mas se for feito com cuidado e controlo, não tem de ter implicações negativas em termos de padrões e acessibilidade.

Objetivos Em princípio, estabeleci dois objetivos principais, que mais do que objetivos foram diretrizes de trabalho na altura de o construir: Que seja acessível e não obstrutivo. Evidentemente, na ausência de suporte para javascript não se oferece a opção de desdobrar o calendário, mas, se houver suporte… porque não fazer com que o conteúdo gerado seja acessível e utilizável? Que seja fácil de implementar e utilizar. Procurei uma forma de que os programadores que desejem implementá-lo nas suas páginas web não precisem de introduzir código adicional.

Tal como em CSS se utilizam diversos tipos de seletores (de elementos, id, classes,…) para associar estilos às diferentes partes dos nossos documentos, porque não utilizar o mesmo para associar comportamentos? Além disso, como objetivos secundários estão: otimizar, generalizar, internacionalizar,… (sendo realista, tive de eliminar os objetivos de engatar e de ganhar dinheiro.) Incluí-lo nos nossos documentos Antes de mais, indicar que o script se pode obter diretamente descarregando o exemplo completo .

A inclusão do calendário no nosso documento é tão simples como incluir o elemento script correspondente no head : O calendário carregar-se-á para qualquer campo de texto que leve incluída a classe ” data ” (se o idioma do documento for o espanhol). O formato da data introduz-se na primeira linha do script. Assim, se por exemplo se desejar que a data siga a ordem dia/mês/ano, não incluindo um 0 à frente do dia quando for formada por um dígito, e incluindo-o no mês quando for necessário, e que o formato para o ano sejam 4 dígitos: var formato = ‘d/mm/yyyy’; Como já se mencionou, para conseguir mostrar o calendário junto a um campo de texto, este deverá levar a classe “data” se o idioma declarado para o documento for o espanhol (“date” se for o inglês, etc).

Estes nomes de classe podem modificar-se, adicionar novos para outros idiomas, etc., diretamente no script. Além disso, todos os possíveis parâmetros se introduzem como classes.

A lista completa é a seguinte: Carregar calendário (requerido): data Datas anteriores a hoje: prev Datas posteriores a hoje: post Intervalo de anos: rangX (sendo X o número de anos) Não se inclui o dia atual: todnact Aplicar filtro para datas disponíveis: disp E se carregar dinamicamente os input com AJAX? O script tem a propriedade de que se em qualquer momento se introduzirem novos campos de texto de forma assíncrona com AJAX, bastará com que após essa carga se chame a função cargaLinks() para que aos inputs se lhes associem as ligações para a abertura do calendário Primeiro exemplo Data futura, em formato d/mm/yyyy , deste ano ( class=“fecha post” ) Data futura, em formato d/mm/yyyy, deste ano sem incluir hoje ( class=“fecha post todnact” ) Data de nascimento, em formato d/mm/yyyy, até 100 anos ( class=“fecha prev rang100” ) data dos próximos 20 anos, em formato d/mm/yyyy, sem incluir hoje ( class=“fecha post rang20 todnact” ) Data dos últimos 15 anos, em formato d/mm/yyyy ( class=“fecha prev rang15” ) Data 10 anos para trás e para a frente, em formato d/mm/yyyy ( class=“fecha rang10” ) Nova Melhoria (abril 2007) Em ocasiões poderíamos desejar que a data se introduza em três campos de texto, um para cada dado que a compõe.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Adicionou-se a possibilidade de o fazer. Para isso continuaremos a controlá-lo tudo mediante o uso de classes atribuídas aos input . Para que constituam um grupo, os três campos de texto deverão adicionar um código que os identifique como tal.

Isto, que parece algo estranho, não o é tanto. Na realidade, o que há que fazer é adicionar à palavra fecha que empregamos como classe nos três, uma letra ou um número. Assim, por exemplo, poderíamos aplicar-lhes aos três a classe “fechaA” e imediatamente, além de se associar a ligação para a abertura do calendário, passar-se-iam a comportar como um grupo. Mais adiante incluem-se dois exemplos que o mostram claramente.

Cada um dos campos deverá levar uma classe em função do dado que se lhe associe: Para o campo dia a classe ” day ” Para o campo mês a classe ” month ” Para o campo ano a classe ” year ” Existe total liberdade para a ordem em que se ponham, colocando as classes para a configuração do calendário (número de anos, prévios, posteriores, etc.) no primeiro dos campos que se utilize. No exemplo seguinte poder-se-á apreciar a forma de o fazer: Segundo exemplo Data dos próximos 10 anos em formato dia, mês, ano: Dia / Mês / Ano Consideração importante é informar sempre o utilizador de qual é o campo para cada coisa.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

No exemplo informa-se no texto prévio e além disso, as etiquetas dos input incluem-no. Data dos últimos 15 anos em formato ano, mês, dia: Ano / Mês / Dia Consideração importante é informar sempre o utilizador de qual é o campo para cada coisa.

No exemplo informa-se no texto prévio e além disso, as etiquetas dos input incluem-no. Atualização (abril de 2007) Retocou-se o script para reduzir os estilos que se aplicam a partir deste.

Agora, a ligação gerada tem a imagem por conteúdo (antes esta carregava-se da folha de estilos). A ligação gera-se imediatamente depois do input (fora do label se estiver incluído nele) e possui a seguinte marcação: No caso de ser a ligação para a carga da data em três campos de texto, a classe da ligação passa a ser ” enl_cal_group , e este situa-se antes do primeiro deles. Atualização (7 de julho de 2007) De

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.