Accueil - HTML Tout afficher

Quel est le but de l'attribut "role" en HTML ?

Wakonda - HTML Posté le 28 mai 2024

L'attribut "role" en HTML est utilisé pour améliorer l'accessibilité des pages web en fournissant des informations supplémentaires aux technologies d'assistance, comme les lecteurs d'écran. Il permet de spécifier le type de contenu ou la fonction d'un élément HTML, ce qui aide les utilisateurs ayant des besoins spécifiques à mieux comprendre et naviguer sur une page web.

Principales Fonctions de l'Attribut "Role"

  1. Définir des Rôles Spécifiques pour les Éléments : L'attribut "role" permet d'attribuer un rôle spécifique à un élément HTML, clarifiant ainsi son but ou son comportement dans l'interface utilisateur. Par exemple, <div role="button"> indique aux technologies d'assistance que cet élément div fonctionne comme un bouton, même s'il n'utilise pas l'élément <button> standard.

  2. Améliorer l'Accessibilité : En fournissant des informations explicites sur le rôle des éléments, les utilisateurs qui se fient aux technologies d'assistance peuvent mieux comprendre la structure et la fonction de la page. Cela permet une navigation plus intuitive et une interaction plus efficace avec le contenu web.

  3. Faciliter la Navigation par Clavier : Certains rôles, comme button, link, ou menu, aident les utilisateurs qui naviguent au clavier en définissant des comportements interactifs attendus. Cela améliore l'expérience utilisateur pour ceux qui ne peuvent pas utiliser une souris.

  4. Supporter les Standards d'Accessibilité ARIA : L'attribut "role" est une partie intégrante des spécifications ARIA (Accessible Rich Internet Applications), un ensemble de standards qui visent à rendre les applications web plus accessibles. En utilisant des rôles ARIA, les développeurs peuvent rendre des applications dynamiques et interactives plus compréhensibles pour les technologies d'assistance.

Lire ...

Changer la couleur de l'espace réservé (placeholder)

Wakonda - CSS, HTML Posté le 28 mai 2024

Pour changer la couleur de l'espace réservé (placeholder) d'un champ de saisie HTML avec CSS, vous pouvez utiliser les pseudo-classes ::placeholder. Voici comment vous pouvez le faire :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Changer la couleur du placeholder</title>
    <style>
        input::placeholder {
            color: red; /* Changez cette valeur pour la couleur souhaitée */
            opacity: 1; /* Assurez-vous que l'opacité est définie à 1 pour que la couleur soit pleinement visible */
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Entrez votre texte ici">
</body>
</html>

Explications :

  1. input::placeholder: Cette pseudo-classe cible le texte du placeholder à l'intérieur des éléments input.
  2. color: red;: Cette propriété CSS définit la couleur du texte du placeholder. Vous pouvez remplacer "red" par n'importe quelle couleur désirée (comme #ff0000 pour du rouge ou rgb(255,0,0)).
  3. opacity: 1;: Par défaut, certains navigateurs appliquent une opacité réduite aux placeholders. Cette ligne s'assure que la couleur du placeholder est pleinement visible.

Vous pouvez également appliquer des styles similaires aux placeholders dans les textarea ou d'autres types de champs en utilisant les mêmes sélecteurs.

Compatibilité des navigateurs

Les navigateurs récents supportent ::placeholder, mais pour une compatibilité plus large avec les anciennes versions de certains navigateurs, vous pouvez ajouter les préfixes spécifiques :

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: red;
    opacity: 1;
}

input:-moz-placeholder { /* Mozilla Firefox 18- */
    color: red;
    opacity: 1;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red;
    opacity: 1;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
    opacity: 1;
}

input::placeholder { /* Standard syntaxe */
    color: red;
    opacity: 1;
}

En utilisant ces sélecteurs, vous vous assurez que le style du placeholder sera appliqué correctement à travers différents navigateurs et versions.

Lire ...

Retour à la ligne dans une tooltip HTML

Wakonda - HTML Posté le 26 octobre 2019

Pour faire un retour à la ligne dans une tooltip HTML, il suffit d'insérer le caractère "&#13", entre les mots.

Exemple :

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

 

Lire ...

iframe - Ouvrir une page dans la fenêtre parent

Wakonda - HTML, JavaScript Posté le 4 septembre 2018

A l'intérieur d'une iframe, si l'on utilise la fonction Javascript suivante :

window.location='https://fr.wikipedia.org/';

La nouvelle page s'affichera à l'intérieur de la balise "iframe". Si l'on souhaite que cette page s'affiche complètement dans le navigateur, il suffira d'utiliser la fonction suivante :

parent.location='https://fr.wikipedia.org/';

 

Lire ...

HTML – Différence entre un objet node et un objet element

Wakonda - HTML Posté le 12 décembre 2017

Voici une petite explication pour mieux comprendre les objets "node", "element" en HTML.

Un node est le nom générique de tout type d'objet présent dans le DOM. Un node peut être l'un des éléments DOM intégrés tels que document ou document.body, ou il peut s'agir d'une balise HTML spécifiée dans le code, telle que <input> ou <p>.

Un Element est un type spécifique de node. De plus, il existe de nombreux autres types de node.

Le DOM se compose d'une hiérarchie de node où chaque nœud peut avoir un parent, une liste de nœuds enfants et une instruction nextSibling et previousSibling. Cette structure forme une hiérarchie arborescente. Le nœud de document aurait sa liste de nœuds enfants (le nœud principal et le nœud du corps).

Ainsi la HTMLElement hérite de Element. De là, émane l'ensemble des éléments HTML que nous connaissons tous (comme HTMLInputElement pour la balise input, par exemple).

Pour plus d'informations

Lire ...

Font Awesome avec les lettres de l'alphabet

Wakonda - CSS, HTML Posté le 12 février 2017

Font Awesome est un fantastique outil utilisé par plusieurs centaines de milliers de sites Internet à travers le monde. Il fournit une multitude d'icônes facilement personnalisables et adaptables à n'importe quelles applications. Seulement, cette librairie a un manquement : comment peut-on faire des icônes avec des lettres de l'alphabet ? Heureusement, il existe une technique simple pour parvenir à cet objectif.

HTML :

<span class="fa fa-a"></span><br/>
<span class="fa fa-b"></span><br/>
<span class="fa fa-downcase-a"></span><br/>

CSS :

body {
    font-size: 14px;
}

.fa-a:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'A';
}

.fa-downcase-a:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'a';
}

.fa-b:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'B';
}

 

Lire ...

PHP - Supprimer les commentaires HTML

Wakonda - HTML, PHP Posté le 18 janvier 2017

Voici une petite expression régulière qui vous permettra de supprimer les commentaires HTML :

/<!--(.*)-->/Uis

Exemple d'utilisation :

$html = "<p>Hello World!</p><!-- début d'un div--><div>Justin II (latin : Flavius Iustinus Iunior Augustus, grec : Φλάβιος Ἰουστίνος ὁ νεότερος) règne sur l’Empire byzantin du 15 novembre 565 à sa mort le 5 octobre 578 ; il est le neveu et successeur de Justinien Ier.</div><!-- find du div -->";
        
$html = preg_replace('/<!--(.*)-->/Uis', '', $html);

echo "<p>Hello World!</p><div>Justin II (latin : Flavius Iustinus Iunior Augustus, grec : Φλάβιος Ἰουστίνος ὁ νεότερος) règne sur l’Empire byzantin du 15 novembre 565 à sa mort le 5 octobre 578 ; il est le neveu et successeur de Justinien Ier.</div>";

 

Lire ...

PHP - Supprimer des balises HTML

Wakonda - HTML, PHP Posté le 17 janvier 2017

Voici une fonction simple afin de supprimer des balises HTML en PHP :

function removeTag($html, $tag) {
    return preg_replace('#</?'.$tag.'[^>]*>#is', '', $html);
}

Exemple d'utilisation :

$html = "<p><span class='bold'>Texte en gras</span></p>";

echo removeTag($html, $tag);
// Affichera '<p>Texte en gras</p>'

 

Lire ...

L’attribut « autocomplete » (HTML5)

Wakonda - HTML Posté le 1 janvier 2016

L’attribut « autocomplete » s’applique à la fois à des balises « input » et « form ». Il permet d’éviter que le navigateur de l’utilisateur ne pré remplisse des champs qu’il a lui-même sauvegarder (exemple des noms d’utilisateur et autres mots de passe enregistrés).

Lorsque « autocomplete » est à « on » alors le navigateur complète la valeur du champ basé sur ce que l’utilisateur a précédemment renseigné.

Exemple :

<form action="demo_form.asp" method="get" autocomplete="on">
  First name: <input type="text" name="fname" />
  <br />
  E-mail: <input type="email" name="email" />
  <br />
  <input type="submit" />
</form>

 

Lire ...

Empêcher le redimensionnement d’un « textarea »

Wakonda - CSS, HTML Posté le 25 juillet 2015

Par défaut, en HTML, l'élément Textarea peut être rédimensionné à l'infini. Heureusement, en CSS, il est possible d'empêcher cela de la manière suivante :

<textarea class="no-resize" ></textarea>

CSS :

.no-resize { resize: none; }

Permettre uniquement le redimensionnement horizontal :

.horizontal {
    resize: horizontal;
}

Permettre uniquement le redimensionnement vertical :

.vertical {
    resize: vertical;
}

 

Lire ...

Soumettre un formulaire et ouvrir le résultat dans un nouvel onglet

Wakonda - HTML, PHP Posté le 1 juin 2015

En HTML, tout le monde connaît sait comment ouvrir un lien dans un nouvel onglet après avoir cliqué dessus. Mais, savez-vous qu'il est possible de faire exactement la même avec un formulaire ?

Prenons le formulaire suivante :

<form action="go.php" method="post" target="_blank">
        <input name="test" value="" type="text" />
        <input value="Envoyer" type="submit" />
</form>

A l'intérieur de la balise, nous avons rajouté l'attribut "target" dont nous avons fixé la valeur à "_blank". En cliquant sur le bouton "Envoyer", un nouvel onglet va ouvrir la page "go.php" à partir de laquelle nous pourrons récupérer les données postées :

echo $_POST['test'];

 

Lire ...

PHP : Remplacer les images d'un code HTML en base 64

Wakonda - HTML, PHP Posté le 1 juin 2015

Le code qui suit parse du code HTML passé en paramètre et remplace l'URL de l'attribut "src" par son équivalent en Base 64.

$dom = new DomDocument();

$dom->loadHTMLFile("test.html");

$images = $dom->getElementsByTagName("img");

foreach($images as $image)
{
        $src = $image->getAttribute("src");
        $img64 = base64_encode(file_get_contents($src));
        $infos = pathinfo($src);
        $image->setAttribute('src', 'data:image/'.$infos['extension'].';base64,'.$img64);
}

$dom->removeChild($dom->doctype);
$dom->replaceChild($dom->firstChild->firstChild->firstChild, $dom->firstChild);

echo $dom->saveHTML();

 

Lire ...

Rechercher

Tags

Articles récents

Publicité

Suivez-nous

Aidez-nous !

Aidez-nous !
Loading…
Loading the web debug toolbar…
Attempt #