imagens no lugar de links
Bianca Marotta
Ramon Victor
Acredito que nesse caso o atributo "title" na tag <a> ajudaria no
caso da imagem de bg não carregar.
Essa é a solução que uso, não sei se teria outra mais adequada.
Abs,
--
Grupo "Acesso Digital" em Grupos do Google.
Para postar neste grupo, envie um e-mail para acesso...@googlegroups.com
Para cancelar a sua inscrição neste grupo, envie um e-mail para acessodigita...@googlegroups.com
Para ver mais opções, visite este grupo em http://groups.google.com/group/acessodigital?hl=pt-BR
Acesso Digital - http://acessodigital.net
--
Att,
Ramon Victor,
Interaction Designer
Blog | Twitter | LinkedIn
Fabio Gameleira
--
Grupo "Acesso Digital" em Grupos do Google.
Para postar neste grupo, envie um e-mail para acesso...@googlegroups.com
Para cancelar a sua inscrição neste grupo, envie um e-mail para acessodigita...@googlegroups.com
Para ver mais opções, visite este grupo em http://groups.google.com/group/acessodigital?hl=pt-BR
Acesso Digital - http://acessodigital.net
Site pessoal: http://www.igoia.info
Cartilha de Acessibilidade: http://www.lupadigital.info
Minhas Poesias: http://igoia.blogspot.com/
Skype: goiagameleira
Bianca Marotta
Fabio Gameleira
Bianca Marotta
Ramon Victor
Dependendo do ponto de vista, a escolha por esconder o texto e mostrar um background
pode ser considerada uma prática errada. Porém, se partirmos para um outra perspectiva, podemos questionar, por exemplo, se faz sentido semanticamente usar tag de imagem para representar um item de menu. Acredito que não,
mas alguns julgam que sim.
Tentar encontrar o equilíbrio entre acessibilidade x semântica x interface final, acho que seja o objetivo ideal.
O resultado pode tendenciar mais pra um do que pra outro em alguns casos, mas na minha concepção
não há certo nem errado.
Bianca Marotta
Fabio Gameleira
Bianca Marotta
Matheus de Oliveira
Mas há uma solução bem simples, apesar de eu achar que parece meio
gambiarra.
Basta colocar algum elemento sobre o link (extamente em cima) e
colocar a imagem nele, assim se a imagem não carregar ou enquanto ela
carrega aparecerá o texto. Isso pode ser feito facilmente via CSS, e,
além de um outro elemento você pode usar o :after ou :before
(preferível).
Att.,
Matheus de Oliveira
On 8 fev, 17:22, Bianca Marotta <bimaro...@gmail.com> wrote:
> Essa era mesmo a minha dúvida. Acho que vou continuar usando essa técninca,
> então.
>
> Obrigada mais uma vez :)
>
> Bianca Marotta
> .........................
>
> 2012/2/8 Fabio Gameleira <fabiogamele...@gmail.com>
>
>
>
>
>
>
> > Bianca,
>
> > Para quem acessa utilizando um programa leitor de telas sua técnica não
> > fará muita diferença pois o link será lido pelo programa leitor de telas,
> > já que o hiperlink receberá o foco com a navegação via teclado, pelo menos
> > via tecla TAB.
>
> > Sua técnica tornará o objeto (link) inacessível para quem enxerga, caso a
> > imagem não seja carregada. Não haverá nada no lugar, concorda?
>
> > Mas, refletindo, é uma suposta inacessibilidade para quem enxerga, mas que
> > só ocorrerá se por algum motivo a exibição das imagens estiver desabilitada
> > no navegador ou a conexão for extremamente lenta, a ponto de prejudicar a
> > carga de imagens até mesmo muito pequenas.
>
> > Fabio Gameleira
>
>
> > Entendi... Então essa é uma prática errada que é super difundida...
>
> >> Bianca Marotta
> >> .........................
> >>www.biancamarotta.com.br
>
> >> 2012/2/8 Fabio Gameleira <fabiogamele...@gmail.com>
> >>> Oi Bianca,
>
> >>> Não, não acho que o title resolva, pois na ausência da imagem o texto
> >>> não aparecerá explicitamente na tela como acontece com o alt.
>
> >>> Fabio Gameleira
>
>
> >>> Obrigada pelas respostas.
>
> >>>> Sobre usar imagens como links, me refiro àqueles casos em que o
> >>>> designer escolheu uma fonte que não é de sistema e precisamos criar imagens
> >>>> para os textos. É nessas horas que eu uso a imagem como bg da tag <a>. Vc
> >>>> acha que usar o title resolve, como o Ramon sugeriu, resolve, Fabio?
>
> >>>> beijos,
>
> >>>> Bianca Marotta
> >>>> .........................
> >>>>www.biancamarotta.com.br
>
> >>>> 2012/2/8 Fabio Gameleira <fabiogamele...@gmail.com>
> >>>>> Bem, entendo que imagem de fundo é para propósito de design e não para
> >>>>> declarar uma ação.
>
> >>>>> Porque não utilizar o tag href envolvendo o tag img e colocar o
> >>>>> atributo alt, conforme abaixo?
>
> >>>>> <a href="...." ><img src="..." alt="texto correspondente a ação da
> >>>>> imagem ou do hiperlink" /></a>
>
> >>>>> Abraços,
>
> >>>>> Fabio Gameleira
>
>
> >>>>>> Olá a todos,
>
> >>>>>> Ontem um amigo meu veio me perguntar como eu faria o html e css de um
> >>>>>> link que deve ser trocado por uma imagem. Eu respondi, que normalmente, uso
> >>>>>> a tag <a href=""> normalmente, com o texto do link por escrito e que
> >>>>>> através do css, transformo o <a> em block, escondo o texto e jogo a imagem
> >>>>>> como background. Assim, qq leitor de telas lê o link, mas visualmente temos
> >>>>>> a imagem.
>
> >>>>>> Mas logo em seguida, me bateu uma dúvida: e se a imagem não carregar?
> >>>>>> Como essa imagem é um bg, ela não possui alt e como o texto está escondido,
> >>>>>> o link vai ficar vazio. É isso mesmo? Alguém por aqui faz diferente?
>
> >>>>>> Abs,
>
> >>>>>> Bianca Marotta
> >>>>>> .........................
>
> >>>>>> --
> >>>>>> Grupo "Acesso Digital" em Grupos do Google.
> >>>>>> Para postar neste grupo, envie um e-mail para
> >>>>>> acesso...@googlegroups.com
> >>>>>> Para cancelar a sua inscrição neste grupo, envie um e-mail para
> >>>>>> acessodigita...@googlegroups.com
> >>>>>> Para ver mais opções, visite este grupo em
> >>>>>>http://groups.google.com/group/acessodigital?hl=pt-BR
> >>>>>> Acesso Digital -http://acessodigital.net
>
> >>>>> --
> >>>>> *Site pessoal*:http://www.igoia.info
> >>>>> *Cartilha de Acessibilidade:*http://www.lupadigital.info
> >>>>> *Minhas Poesias:*http://igoia.blogspot.com/
> >>>>> *Skype*: goiagameleira
> >>>>> *MSN: *fabiogamelei...@hotmail.com
> >>>>> *Twitter*: @fabiogameleira <http://twitter.com/#!/fabiogameleira>
> >>>>> *Facebook:* fabiogameleira (Goia)<https://www.facebook.com/fabiogameleira>
> >>>>> --
> >>>>> Grupo "Acesso Digital" em Grupos do Google.
> >>>>> Para postar neste grupo, envie um e-mail para
> >>>>> acesso...@googlegroups.com
> >>>>> Para cancelar a sua inscrição neste grupo, envie um e-mail para
> >>>>> acessodigita...@googlegroups.com
> >>>>> Para ver mais opções, visite este grupo em
> >>>>>http://groups.google.com/group/acessodigital?hl=pt-BR
> >>>> --
> >>>> Grupo "Acesso Digital" em Grupos do Google.
> >>>> Para postar neste grupo, envie um e-mail para
> >>>> acesso...@googlegroups.com
> >>>> Para cancelar a sua inscrição neste grupo, envie um e-mail para
> >>>> acessodigita...@googlegroups.com
> >>>> Para ver mais opções, visite este grupo em
> >>>>http://groups.google.com/group/acessodigital?hl=pt-BR
> >>>> Acesso Digital -http://acessodigital.net
>
> >>> --
> >>> *Site pessoal*:http://www.igoia.info
> >>> *Cartilha de Acessibilidade:*http://www.lupadigital.info
> >>> *Minhas Poesias:*http://igoia.blogspot.com/
> >>> *Skype*: goiagameleira
> >>> *MSN: *fabiogamelei...@hotmail.com
> >>> *Twitter*: @fabiogameleira <http://twitter.com/#!/fabiogameleira>
> >>> *Facebook:* fabiogameleira (Goia)<https://www.facebook.com/fabiogameleira>
> >>> --
> >>> Grupo "Acesso Digital" em Grupos do Google.
> >>> Para postar neste grupo, envie um e-mail para
> >>> acesso...@googlegroups.com
> >>> Para cancelar a sua inscrição neste grupo, envie um e-mail para
> >>> acessodigita...@googlegroups.com
> >>> Para ver mais opções, visite este grupo em
> >>>http://groups.google.com/group/acessodigital?hl=pt-BR
> >> --
> >> Grupo "Acesso Digital" em Grupos do Google.
> >> Para postar neste grupo, envie um e-mail para
> >> acesso...@googlegroups.com
> >> Para cancelar a sua inscrição neste grupo, envie um e-mail para
> >> acessodigita...@googlegroups.com
> >> Para ver mais opções, visite este grupo em
> >>http://groups.google.com/group/acessodigital?hl=pt-BR
> >> Acesso Digital -http://acessodigital.net
>
> > --
> > *Site pessoal*:http://www.igoia.info
> > *Cartilha de Acessibilidade:*http://www.lupadigital.info
> > *Minhas Poesias:*http://igoia.blogspot.com/
> > *Skype*: goiagameleira
> > *MSN: *fabiogamelei...@hotmail.com
> > *Twitter*: @fabiogameleira <http://twitter.com/#!/fabiogameleira>
> > *Facebook:* fabiogameleira (Goia)<https://www.facebook.com/fabiogameleira>
Bruno Pulis
Bruno Pulis - (31) 9833-8924
Norberto Sousa
Adaptar o código abaixo para mostrar o Link apenas quando tiver foco
do teclado ou do rato não serve?
- Conteúdo visível apenas com foco
O código para conteúdo que só se pretende que fique visível quando
envolvido pelo foco do teclado ou do rato é o seguinte:
- Colocar no CSS
a#skip {
background: none repeat scroll 0 0 transparent;
display: block;
font-weight: bold;
left: 0;
padding: 0 0 1em;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
- Colocar no HTML
<a id="skip" href="#content" title="Skip to content">Skip to content</a>
Beijinhos e abraços,
NSousa
>>>>>>> *Fabio Gameleira*
>>>>>>> *Site pessoal*: http://www.igoia.info
>>>>>>> *Cartilha de Acessibilidade:* http://www.lupadigital.info
>>>>>>> *Minhas Poesias:* http://igoia.blogspot.com/
>>>>>>> *Skype*: goiagameleira
>>>>>>> *MSN: *fabioga...@hotmail.com
>>>>>>> *Twitter*: @fabiogameleira <http://twitter.com/#%21/fabiogameleira>
>>>>>>> *Facebook:* fabiogameleira
>>>>>>> (Goia)<https://www.facebook.com/fabiogameleira>
>>>>>>>
>>>>>>>
>>>>>>> --
>>>>>>> Grupo "Acesso Digital" em Grupos do Google.
>>>>>>> Para postar neste grupo, envie um e-mail para
>>>>>>> acesso...@googlegroups.com
>>>>>>> Para cancelar a sua inscrição neste grupo, envie um e-mail para
>>>>>>> acessodigita...@googlegroups.com
>>>>>>> Para ver mais opções, visite este grupo em
>>>>>>> http://groups.google.com/group/acessodigital?hl=pt-BR
>>>>>>> Acesso Digital - http://acessodigital.net
>>>>>>>
>>>>>>
>>>>>> --
>>>>>> Grupo "Acesso Digital" em Grupos do Google.
>>>>>> Para postar neste grupo, envie um e-mail para
>>>>>> acesso...@googlegroups.com
>>>>>> Para cancelar a sua inscrição neste grupo, envie um e-mail para
>>>>>> acessodigita...@googlegroups.com
>>>>>> Para ver mais opções, visite este grupo em
>>>>>> http://groups.google.com/group/acessodigital?hl=pt-BR
>>>>>> Acesso Digital - http://acessodigital.net
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> *Fabio Gameleira*
>>>>> *Site pessoal*: http://www.igoia.info
>>>>> *Cartilha de Acessibilidade:* http://www.lupadigital.info
>>>>> *Minhas Poesias:* http://igoia.blogspot.com/
>>>>> *Skype*: goiagameleira
>>>>> *MSN: *fabioga...@hotmail.com
>>>>> *Twitter*: @fabiogameleira <http://twitter.com/#%21/fabiogameleira>
>>>>> *Facebook:* fabiogameleira
>>>>> (Goia)<https://www.facebook.com/fabiogameleira>
>>>>>
>>>>>
>>>>> --
>>>>> Grupo "Acesso Digital" em Grupos do Google.
>>>>> Para postar neste grupo, envie um e-mail para
>>>>> acesso...@googlegroups.com
>>>>> Para cancelar a sua inscrição neste grupo, envie um e-mail para
>>>>> acessodigita...@googlegroups.com
>>>>> Para ver mais opções, visite este grupo em
>>>>> http://groups.google.com/group/acessodigital?hl=pt-BR
>>>>> Acesso Digital - http://acessodigital.net
>>>>>
>>>>
>>>> --
>>>> Grupo "Acesso Digital" em Grupos do Google.
>>>> Para postar neste grupo, envie um e-mail para
>>>> acesso...@googlegroups.com
>>>> Para cancelar a sua inscrição neste grupo, envie um e-mail para
>>>> acessodigita...@googlegroups.com
>>>> Para ver mais opções, visite este grupo em
>>>> http://groups.google.com/group/acessodigital?hl=pt-BR
>>>> Acesso Digital - http://acessodigital.net
>>>>
>>>
>>>
>>>
>>> --
>>> Att,
>>>
>>> Ramon Victor,
>>> Interaction Designer
>>> Blog <http://ramonvictor.com> |
>>> Twitter<http://twitter.com/#%21/ramonvictor>|
>>> LinkedIn <http://www.linkedin.com/in/ramonvictor>