NOUVELLES DE PLATEFORME: Utilisation: Focus-Visible

Il y a beaucoup d'accessibilité dans les nouvelles de cette semaine, à partir des nuances de l'utilisation: les espaces réservés à la mise au point et à l'entrée, aux polices de caractères accessibles et à un bug de safari avec: affichage: contenu. De plus, un extrait pour un composant Web à nu qui prend en charge l'encapsulation de style.

Peut-être le bon moment pour commencer à utiliser: Focus-visible

Le CSS: Focus-visible pseudo-classe remplace: Focus comme la nouvelle façon de créer des indicateurs de mise au point personnalisés pour les utilisateurs de clavier. Chrome est récemment passé de: Focus to: focus-visible dans la feuille de style de l'agent utilisateur et, à la suite de ce changement, l'anneau de mise au point par défaut n'est plus affiché lorsque l'utilisateur clique ou exploite un bouton.

Lorsque vous passez de: Focus to: focus-visible, considérez la compatibilité vers l'arrière. Vos indicateurs de mise au point du clavier doivent être clairement visibles dans tous les navigateurs, pas seulement ceux qui soutiennent: la mise au point-visible. Si vous ne stylisez que: les navigateurs de mise au point et non soutenus afficheront l'anneau de mise au point par défaut qui, selon votre conception, «peut ne pas être suffisamment clair ou visible du tout».

 bouton {
  Contexte: blanc;
}

Bouton: Focus-visible {
  Aperçu: aucun;
  Contexte: # FFDD00; /* or */
}

Une bonne façon de commencer à utiliser: Focus-visible aujourd'hui est de définir les styles de mise au point dans une règle de mise au point, puis d'annuler immédiatement ces mêmes styles dans une règle de focus: focus: non (: focus-visible). Ce n'est certes pas le modèle le plus élégant et le plus intuitif, mais cela fonctionne bien dans tous les navigateurs:

• Les navigateurs qui ne soutiennent pas : Focus-visible utilisent les styles de mise au point définis dans la règle: Focus et ignorent complètement la règle de deuxième style (parce que: Focus-visible leur est inconnu).
• Dans les navigateurs qui soutiennent : Focus-visible, la règle de deuxième style revient les styles de mise au point définis dans la règle: Focus si: l'état de mise au point-visible n'est pas également actif. En d'autres termes, les styles de mise au point définis dans la règle: Focus ne sont en vigueur que lorsque: la mise au point-visible est également active.

 Bouton: Focus {
  Aperçu: aucun;
  Contexte: # FFDD00; /* or */
}

bouton: focus: pas (: focus-visible) {
  Contexte: blanc; / * Undo Gold * /
}

La BBC a créé une police de caractères plus accessible

La BBC a créé sa propre police personnalisée appelée Reith (nommée d'après le fondateur de la BBC, Sir John Reith). Leur objectif était de créer une police qui prend en charge plusieurs langues et est plus facile à lire, en particulier sur les petits appareils. La police a été testée avec des groupes d'utilisateurs mixtes (dyslexie et déficience visuelle) et sur différentes tailles d'écran.

Nous [la BBC] utilisons Helvetica ou Arial. Nous avions également Gill Sans comme police d'entreprise. Ces polices ont été conçues il y a cent ans pour la page imprimée [et] ne fonctionnent pas bien sur les écrans numériques modernes d'aujourd'hui.

Remarque: Si vous souhaitez inspecter Reith Sans et Reith Serif dans Wakamai Fondue, vous pouvez rapidement accéder aux URL des fichiers WOFF2 dans la section «All Fonts on Page» du volet Fonts dans l'inspecteur DOM de Firefox sur le site Web de la BBC.

Affichage: le contenu n'est toujours pas accessible dans Safari

L'affichage CSS: La valeur du contenu est prise en charge dans les navigateurs depuis 2018. Un élément par cette valeur «ne génère aucune boîte» et est effectivement remplacé par ses enfants. Ceci est particulièrement utile dans les dispositions de flexion et de grille, où la valeur du contenu peut être utilisée pour «promouvoir» des éléments plus profondément imbriqués aux éléments flexibles / grille tout en conservant une structure de document sémantique.

Malheureusement, cette fonctionnalité expédiée à l'origine avec un bogue d'implémentation qui a supprimé l'élément de l'arborescence d'accessibilité du navigateur. Par exemple, l'application de l'affichage: le contenu à un élément

a entraîné que cet élément n'était plus mentionné par les lecteurs d'écran. Depuis lors, ce bug a été corrigé dans Firefox et Chrome (dans la dernière version).

Dans Chrome et Firefox, le lecteur d'écran informe l'utilisateur que le «principal, navigation» contient une «liste, 2 éléments». Dans Safari, la dernière partie est manquante car les éléments

et
• ne sont pas présents dans l'arbre d'accessibilité. Jusqu'à ce qu'Apple corrige ce bogue dans Safari, soyez prudent lorsque vous utilisez la valeur du contenu sur les éléments sémantiques et testez dans les lecteurs d'écran pour confirmer que vos pages sont également accessibles dans Safari.

  Définir l'opacité lors de la remplacement de la couleur du texte d'espace réservé

  Les experts de l'accessibilité recommandent d'éviter les espaces réservés si possible car ils peuvent être confus pour le texte pré-peuplé et disparaître lorsque l'utilisateur commence à entrer dans une valeur. Cependant, de nombreux sites Web (y compris Wikipedia et Gov.uk) utilisent des espaces réservés dans des formulaires Web simples qui ne contiennent qu'un seul champ de saisie, comme un champ de recherche.

  Les espaces réservés peuvent être stylisés via le pseudo-élémentation largement pris en charge :: Placeholder. Si votre conception appelle une couleur personnalisée pour le texte d'espace réservé, assurez-vous de spécifier à la fois la couleur et l'opacité. Ce dernier est nécessaire pour Firefox, qui s'applique à l'opacité: 0,54 à :: Planholder par défaut. Si vous ne remplacez pas cette valeur, votre texte d'espace réservé peut avoir un contraste insuffisant dans Firefox.

   .Search-field :: placeholder {
    Couleur: # 727272;
    Opacité: 1; / * nécessaire pour Firefox * /
  }

  Decarative Shadow Dom pourrait aider à populariser l'encapsulation du style

  L'une des caractéristiques clés de Shadow Dom est l'encapsulation de style, dans laquelle les règles de style de la page externe ne correspondent pas aux éléments à l'intérieur de l'arborescence de l'ombre, et vice versa. Afin d'utiliser cette fonctionnalité, vous devez attacher une arborescence Shadow Dom à un élément (généralement un élément personnalisé, comme ) et copier le modèle de l'élément (généralement à partir d'un élément dans le DOM) à l'ombre nouvellement créée de l'élément.

  Ces étapes ne peuvent être effectuées qu'en JavaScript. Si vous êtes uniquement intéressé par l'encapsulation de style et que vous n'avez pas besoin de fonctionnalité dynamique pour votre élément, voici la quantité minimale de JavaScript requise pour créer un élément personnalisé avec un Dom Shadow:

   CustomElements.define (
    "My-Element",
    La classe étend htmlelement {
      constructeur () {
        super();
  
        // trouver <mpelate> dans le dom
        LET Template = Document.getElementById ("My-Template");
  
        // Faire une copie du contenu du modèle…
        Selt Content = template.content.clonenode (true);
  
        //… et l'injecter dans l'ombre de <my-element>
        this.attacheshadow ({mode: "ouvrir"}). APPENDCHILD (contenu);
      }
    }
  ));</my-element></mpelate>

  Pour un exemple d'encapsulation de style, voir l'élément de Miriam Suzanne sur Codepen. Les styles de portée sont situés dans l'élément du volet HTML. Remarquez comment ce code CSS peut utiliser des sélecteurs simples, tels que l'article, qui ne correspondent qu'à des éléments dans le domaine Shadow de .

  JavaScript pourrait bientôt ne plus être tenu de créer ce type d'encapsulation de style dans les navigateurs modernes. Plus tôt cette semaine, Chrome est devenu le premier navigateur à expédier la proposition déclarative de Shadow Dom de Google. S'il devient une norme, cette fonctionnalité permettra également d'utiliser Shadow Dom en combinaison avec le rendu côté serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!