[Ovillo] punteado de un link
Buenos dias todos, Mi pregunta es la siguiente: - Tengo un link que es una imagen, le he puesto el border:0 para que no salga el recuadro alrededor de la imagen. Pero lo que no se como evitar es que al hacer clic sobre la imagen si que aparezca un pequeño recuadro punteado al rededor de la imagen, por cuestiones de diseño queda bastate feo y me gustaria si alguien conoce el metodo para eliminar dicho punteado. - Muchísimas gracias a todos Tonimb ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] punteado de un link
en css - a img {outline: 0;}
http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines
Jorge González Sánchez | http://yparamuestraunboton.com
El día 3 de junio de 2009 9:22, toni martinez ton...@comin.cat escribió:
Buenos dias todos,
Mi pregunta es la siguiente:
- Tengo un link que es una imagen, le he puesto el border:0 para
que no salga el recuadro alrededor de la imagen. Pero lo que no se como
evitar es que al hacer clic sobre la imagen si que aparezca un pequeño
recuadro punteado al rededor de la imagen, por cuestiones de diseño queda
bastate feo y me gustaria si alguien conoce el metodo para eliminar dicho
punteado.
-
Muchísimas gracias a todos
Tonimb
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] punteado de un link
Si quieres que esa página cumpla con las pautas de accesibilidad WCAG 2.0 [1], no lo evites. La manera de evitarlo es engañar al navegador eliminando el foco del elemento mediante JavaScript, pero esa práctica está definiida como un incumplimiento [2] del criterio de éxito 2.4.7 [3] de las WCAG 2.0. Lo mismo pasa si utilizas estilos para eliminar el outline [4]. Aunque personalmente opino que si usas la segunda técnica (y funciona, lo cual no tengo muy claro), y al mismo tiempo indicas el foco de otro modo (invirtiendo los colores en un botón, por ejemplo), sí se estaría cumpliendo, ya que lo que pretende este criterio es que haya una indicación clara de por dónde anda el usuario al tabular. Saludos, Ramón. [1] http://www.w3.org/TR/WCAG20/ [2] http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F55 [3] http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html [4] http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F78 toni martinez escribió: Tengo un link que es una imagen, le he puesto el border:0 para que no salga el recuadro alrededor de la imagen. Pero lo que no se como evitar es que al hacer clic sobre la imagen si que aparezca un pequeño recuadro punteado al rededor de la imagen, por cuestiones de diseño queda bastate feo y me gustaria si alguien conoce el metodo para eliminar dicho punteado. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] punteado de un link
perdón me corrijo, seria a.clase {outline: 0} (el outline se aplica al a no
al img) aunque Ramón lo dude funciona perfectamente.
En cuanto a la accesibilidad Ramón tiene razón, pero sin embargo puedes
maquear el focus a tu antojo, para que el usuario siempre sepa donde esta el
foco pero no tienes por que dejar el dotted ese guarro que te ponen la
mayoría de los navegadores.
Por ejemplo: :focus {outline: 1px solid #034894} o añadirle un cambio de
color de fondo, de echo en la pagina del w3c si te fijas tienen el :focus es
igual que el :hover para igualar la navegación con teclado a la navegación
con ratón.
Parte del css del w3c (
http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/slicenav.css):
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
background:#EE none repeat scroll 0 0;
border-color:#77;
color:#00;
float:left;
}
Jorge González Sánchez | http://yparamuestraunboton.com
El día 3 de junio de 2009 9:31, Ramón Corominas lis...@ramoncorominas.com
escribió:
Si quieres que esa página cumpla con las pautas de accesibilidad WCAG
2.0 [1], no lo evites. La manera de evitarlo es engañar al navegador
eliminando el foco del elemento mediante JavaScript, pero esa práctica
está definiida como un incumplimiento [2] del criterio de éxito 2.4.7
[3] de las WCAG 2.0. Lo mismo pasa si utilizas estilos para eliminar el
outline [4].
Aunque personalmente opino que si usas la segunda técnica (y funciona,
lo cual no tengo muy claro), y al mismo tiempo indicas el foco de otro
modo (invirtiendo los colores en un botón, por ejemplo), sí se estaría
cumpliendo, ya que lo que pretende este criterio es que haya una
indicación clara de por dónde anda el usuario al tabular.
Saludos,
Ramón.
[1] http://www.w3.org/TR/WCAG20/
[2] http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F55
[3]
http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html
[4] http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F78
toni martinez escribió:
Tengo un link que es una imagen, le he puesto el border:0 para
que no salga el recuadro alrededor de la imagen. Pero lo que no se como
evitar es que al hacer clic sobre la imagen si que aparezca un pequeño
recuadro punteado al rededor de la imagen, por cuestiones de diseño queda
bastate feo y me gustaria si alguien conoce el metodo para eliminar dicho
punteado.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] punteado de un link
Muchas gracias por vuestra velocidad de respuesta jejejeje
Ya solucione el problema vulnerando un poco la accesibilidad con el
outline:0 en el focus.
De todos modos seguiré estudiando el tema pera respetar al máximo la
accesibilidad. Miraré de hacerlo con la opción de invertir los colores.
Un cordial saludo a todos y a todas
tonimb
http://www.comin.cat
--
Message: 2
Date: Wed, 3 Jun 2009 09:30:25 +0200
From: Jorge Gónzalez - yparamuestaunboton.com del...@gmail.com
Subject: Re: [Ovillo] punteado de un link
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Message-ID:
230909710906030030p550ff4b2p41d0a3326e250...@mail.gmail.com
Content-Type: text/plain; charset=ISO-8859-1
en css - a img {outline: 0;}
http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines
Jorge González Sánchez | http://yparamuestraunboton.com
--
Message: 3
Date: Wed, 03 Jun 2009 09:31:54 +0200
From: Ramón Corominas lis...@ramoncorominas.com
Subject: Re: [Ovillo] punteado de un link
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Message-ID: 4a2626ea.7060...@ramoncorominas.com
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Si quieres que esa página cumpla con las pautas de accesibilidad WCAG
2.0 [1], no lo evites. La manera de evitarlo es engañar al navegador
eliminando el foco del elemento mediante JavaScript, pero esa práctica
está definiida como un incumplimiento [2] del criterio de éxito 2.4.7
[3] de las WCAG 2.0. Lo mismo pasa si utilizas estilos para eliminar el
outline [4].
Aunque personalmente opino que si usas la segunda técnica (y funciona,
lo cual no tengo muy claro), y al mismo tiempo indicas el foco de otro
modo (invirtiendo los colores en un botón, por ejemplo), sí se estaría
cumpliendo, ya que lo que pretende este criterio es que haya una
indicación clara de por dónde anda el usuario al tabular.
Saludos,
Ramón.
[1] http://www.w3.org/TR/WCAG20/
[2] http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F55
[3]
http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visibl
e.html
[4] http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/F78
--
Message: 5
Date: Wed, 3 Jun 2009 10:29:18 +0200
From: Jorge Gónzalez - yparamuestaunboton.com del...@gmail.com
Subject: Re: [Ovillo] punteado de un link
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Message-ID:
230909710906030129p14efedbeja624082497a4d...@mail.gmail.com
Content-Type: text/plain; charset=ISO-8859-1
perdón me corrijo, seria a.clase {outline: 0} (el outline se aplica al a no
al img) aunque Ramón lo dude funciona perfectamente.
En cuanto a la accesibilidad Ramón tiene razón, pero sin embargo puedes
maquear el focus a tu antojo, para que el usuario siempre sepa donde esta el
foco pero no tienes por que dejar el dotted ese guarro que te ponen la
mayoría de los navegadores.
Por ejemplo: :focus {outline: 1px solid #034894} o añadirle un cambio de
color de fondo, de echo en la pagina del w3c si te fijas tienen el :focus es
igual que el :hover para igualar la navegación con teclado a la navegación
con ratón.
Parte del css del w3c (
http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/slicenav.css):
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
background:#EE none repeat scroll 0 0;
border-color:#77;
color:#00;
float:left;
}
Jorge González Sánchez | http://yparamuestraunboton.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
