Haga que sea más obvio decir qué elemento está enfocado cuando se navega por los elementos

3

En Firefox, hay un borde punteado alrededor de un elemento cuando tiene el foco. Encuentro esto imposible de ver a veces. ¿Qué configuración de Firefox, si es que hay alguna, podemos usar para que el enfoque sea más obvio?

Tenga en cuenta que quiero hacer esto a través de una configuración de Firefox NO editando el CSS de un sitio web.

Por ejemplo, en el Superusuario, cuando los botones de Preguntas, Etiquetas, Usuarios, Insignias o Sin respuesta están enfocados, el borde punteado es completamente invisible. ¿Cómo puedo hacer que el borde, digamos, traiga rosa o rojo y 5px de ancho?

Actualmente, el enlace de Preguntas está enfocado. No hay manera de decir que está enfocado desde la combinación de colores del sitio web.

Would you believe that the Questions link is in focus.

Preferiría que se vea así cuando esté enfocado, cambiando la configuración de Firefox.

enter image description here

firefox accessibility Shaun Luttin
fuente
2
¿Está utilizando complementos especiales que se metan con el CSS o similar? porque el elemento "enfocado" ya está en un tono azul más claro para SU - Ver también la imagen en la respuesta de Oliver.
user2813274
@ usuario2813274 No. Estoy usando Firefox fuera de la caja sin ningún complemento especial.
Shaun Luttin
@ usuario2813274: Probablemente sea porque "Preguntas" es la página actual / activa en la captura de pantalla.
unor

Respuestas:

3

Puedes definir tus propios estilos predeterminados añadiéndolos a & lt; Directorio de perfiles de Firefox & gt; \ chrome \ usercontent.css . Cualquier cambio que realice entrará en vigencia la próxima vez que inicie el perfil (por lo tanto, si lo está utilizando en el momento de editar ese archivo, deberá reiniciarlo).

Añadiendo lo siguiente a mi perfil usercontent.css : 

:focus {
  outline: #FF5500 dashed 2px;
}

Me sale lo siguiente:

enter image description here

Algunas notas:

  • usercontent.css solo define los estilos predeterminados que se utilizan cuando no se definen estilos en conflicto en la página web. Por lo tanto, esto funciona en casos donde el contorno del enfoque está oculto por razones incidentales (como el uso de imágenes de botones, como en esta página), pero no funciona si el autor del sitio web ha definido deliberadamente un estilo CSS que deshabilita el esquema de enfoque, ya sea para un elemento determinado o para toda la página web. En general, se considera una mala práctica deshabilitar el esquema de enfoque sin definir un medio alternativo para distinguir el elemento enfocado, pero desafortunadamente es muy común.

  • Si no ves un cromo subdirectorio en el directorio del perfil y / o no ve un usercontent.css archivo dentro de ese subdirectorio, simplemente crearlos.

  • Puede encontrar el directorio de perfil ingresando about:support en la barra de direcciones (o seleccionando Información para solucionar problemas desde el Ayuda menú), luego haciendo clic en el Mostrar carpeta botón en el Fundamentos de la aplicación sección.

Adi Inbar
fuente
1
¿No es posible sobreescribir los estilos de autor en usercontent.css? Por ejemplo, con !important?
unor
1

Usted podría usar Elegante para establecer un estilo de enfoque diferente. Algo como esto: 

:focus {
    outline: 3px solid red;
}

El resultado se vería así:

enter image description here

Der Hochstapler
fuente
Hmmm, revisé el enlace, y la revisión más reciente se titula "¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ y está lleno de advertencias frenéticas sobre cómo arruinó el navegador de esta persona y luego no pudo deshacerse de él ... aunque la mayoría de las críticas son positivas. No lo he probado yo mismo. ¿Se personaliza solo por sitio o puede aplicar los estilos predeterminados universalmente? (En cualquier caso, agregué una respuesta que explica cómo hacerlo sin el uso de un complemento).
Adi Inbar