Acessibilidade



Acessibilidade na Web


   Acessibilidade na web, é uma adaptação para que pessoas portadoras de necessidades especiais sejam capaz de usar a web, é uma web projetada para que essas pessoas possam perceber, entender, navegar e interagir na web, criando e contribuindo com conteúdos para web. A acessibilidade na web visa completar todo tipo de necessidade especial, incluindo as visuais, auditivas, físicas, de fala, cognitivas e neurológicas.




 Imagens Acessíveis

   As Informações de uma página acessível é apresentada em texto, quando se usa mídias como imagens e sons, deve se usar uma descrição textual, ou seja a descrição deve ser equivalente, isto é transmitir as mesmas informações que os elementos disponibilizam. No HTML,  na tag , incluir o atributo "alt" com brve descrição da imagem e no title o título da página.

exemplo:

descrição da imagem 


 Formulários Acessíveis

   Temos alguns elementos que garantem a acessibilidade dos formulários, como, label, fieldset, legend e optgroup.

Exemplo:


ed="  "" tabindex="5">

 



 Acessibilidade e a utilização de fontes

   Fontes são elementos que fazem grande diferença no site, devemos sempre usar contraste que favoreçam a leitura do usuário, o ideal é que se opte por fontes que tenham reconhecimento nos principais sistemas.


Temos algumas fontes que reúnem consenso entre os diversos sistemas no mercado: Arial, Book antiqua, Comic Sans Ms, Georgia, Courier new, Tahoma, Times New Roman, Trebuchet, Verdana.
   É recomendado que evite utilizar diferentes tipos de fontes no mesmo site, pois cria uma sensação de desconexão e tira a uniformidade e estrutura do site, outro ponto simples de implementar que faz grande diferença é o tamanho da fonte. É essencial que se tenha opção de aumentar ou diminuir as fontes.



 Acessibilidade e a utilização de cores

   A cores são mais um elemento simples mais que da um grande impacto no site em relação a sua aparência. Temos que ter cuidado ao escolher as fontes de um site, pois pode por exemplo prejudicar na compreensão de usuários daltônicos, principalmente se as cores forem uma parte essencial do site.

Taquigrafia CSS


Taquigrafia CSS
   O uso da  taquigrafia no CSS é uma forma de reduzir seu CSS tornando ele mais limpo com poucas linhas facilitando sua manutenção, o que acaba melhorando o carregamento da página.

Técnicas abreviadas para fundo
   Quando se usa um comando qualquer no CSS, em vez de criar varias linhas de códigos você pode reduzi-lo a uma linha só como no exemplo:

background-color: #FFF;
background-image: url(foto.png);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Você pode reduzi-lo a uma unica linha como a seguir:

background: #FFF  url(foto.png)  no-repeat  center  fixed;

Técnicas abreviadas para propriedades de fronteira

   A dois jeito de uso de taquigrafia em bordas, colocando tudo numa linha, ou quando se tem topo,direita,baixo e esquerda, você usa a técnica do relógio, escrevendo sempre na mesma ordem e valores, como nos exemplos:

border-width: 12px;
border-style: none;
border-color: #F0F;

Na mesma linha:
border: 12px  none  #F0F;

border-top-width:12px;
border-right-width:10px;
border-bottom-width:5px;
border-left-width:8px;

No relógio:
border-width: 12px  10px  5px  8px;

Técnicas abreviadas para cor

   Quando se especifica valores de cor hexadecimais, pode ser usado atalhos, mais apenas se ambos os valores hexadecimais forem os mesmo para cada canal de cor, por exemplo:

#FFF; seria equivalente a #FFFFFF;  
                     ou
#F0F; seria equivalente a #FF00FF;

Técnicas abreviadas para fonte

   Usando a taquigrafia em font, você pode especificar tamanho, peso, estilo, família  e altura usando uma unica linha, porem é obrigatório definir tamanho e família e seguir uma ordem de declaração, começa com style, variant e weight em qualquer ordem, obrigatoriamente coloca-se o font-size, o line-height é opcional, font-family no final é obrigatório, como veremos no exemplo:

font-weight: ligther;
font-style: normal;
font-variant: small-caps;
font-size: 11px;
line-height: 120px;
font-family: Georgia, "Times New Roman", serif;

font: ligther  normal  small-caps 11px/120px  Georgia, "Times New Roman", serif;

Técnicas abreviadas para margem

   Usando a taquigrafia em margem usa-se a técnica do relógio, exemplo:

margin-top: 9px;
margin-right: 6px;
margin-bottom: 0;
margin-left: 4px;

margin: 9px  6px 0  4px;

Técnicas abreviadas para padding

   Usando a taquigrafia em padding tambem se usa a técnica do relogio, exemplo:

padding-bottom: 10px;
padding-top: 11px;
padding-left: 3px;
padding-right: 4px;

padding: 10px  11px  3px  4px;