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 é necessário introduzir uma data, com o objetivo de melhorar a experiência do utilizador e, ao mesmo tempo, aumentar o controlo sobre o 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 abrir o calendário, mas, se houver suporte… ¿por que 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, ¿por que 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 pode ser obtido 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 será carregado para qualquer campo de texto que inclua a classe “ fecha “ (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 antes do dia quando este for composto 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á foi mencionado, para conseguir mostrar o calendário junto a um campo de texto, este deverá ter a classe “fecha” se o idioma declarado para o documento for o espanhol (“date” se for o inglês, etc).

Estes nomes de classe podem ser modificados, adicionados novos para outros idiomas, etc., diretamente no script. Além disso, todos os possíveis parâmetros são introduzidos como classes.

A lista completa é a seguinte: Carregar calendário (obrigatório): fecha 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á que, após esse carregamento, 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) Por vezes poderíamos desejar que a data fosse introduzida 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.

Foi adicionada a possibilidade de o fazer. Para isso, continuaremos a controlar tudo através do 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 é assim tanto. Na realidade, o que há a fazer é adicionar à palavra fecha que utilizamos 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, passariam a comportar-se como um grupo. Mais adiante incluem-se dois exemplos que o mostram claramente.

Cada um dos campos deverá ter 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 na ordem em que se colocam, colocando as classes para a configuração do calendário (número de anos, anteriores, 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) O script foi retocado para reduzir os estilos que se aplicam a partir deste.

Agora, a ligação gerada tem a imagem por conteúdo (antes esta era carregada a partir da folha de estilos). A ligação é gerada imediatamente após o input (fora do label se estiver incluído nele) e possui a seguinte marcação: No caso de ser a ligação para o carregamento da data em três campos de texto, a classe da ligação passa a ser “ enl_cal_group , e este situa-se antes

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.