Apprendre à développer un site accessible en XHTML et CSS

Extrait du cours développer un site accessible en XHTML et CSS

……
Les balises déclassées
A la place de :

• <applet> utiliser <object>
• <basefont> utiliser les CSS (police de base)
• <center> utiliser les CSS ({text-align:center})
• <dir> utiliser <ul>
• <font> utiliser les CSS (font-style, font-weight)
• <isindex> utiliser <input>
• <menu> utiliser <ul>
• <s> utiliser <del> (deleted text)
• <strike> utiliser <del>
• <u> utiliser les CSS ({text-decoration:underline;})
• <xmp> utiliser <pre>

Les attributs déclassés

• Align (associé à table, img, iframe, object …)
• Alink (associé à body – couleur des liens sélectionnés)
• Background (associé à body)
• Bgcolor (associé à table)
• Color (associé avec font ou basefont)
• Height (associé à TD, TH)
• Hspace (espace à droite et à gauche d’une image, d’un objet)
• Link (associé à body)
• Size (associé à font et basefont)
• Text (associé à body – pour définir la couleur du texte)
• Type (associé avec OL LI UL)
• Vlink (associé avec body – couleur des liens visités)
• Vspace (espace au dessus ou en dessous d’une image, d’un objet)

Quelques classes CSS de substitution
Au lieu de <center> utiliser une classe .centrage{text-align:center;}
Au lieu de <i> utiliser une classe .italique{font-style:italic;}
Au lieu de <b> utiliser une classe .grassage{font-weight:bold;}
Au lieu de <u> utiliser une classe .souligne{text-decoration:underline;}
Pour le détail des standards CSS, voir le site : http://www.w3.org/Style/CSS/
Mise en page : types d’éléments
Eléments de type bloc :

• Peuvent contenir un ou plusieurs éléments bloc ou « inline » sauf les éléments <p> et éléments <h1>, <h2> qui ne peuvent contenir que des éléments « inline » …
• Les blocs ont des dimensions : hauteur, largeur, profondeur et possèdent des marges internes (padding) et externes (margin) par défaut non nulles sauf pour <div>
• Possibilité de les positionner en les sortant du flux du document

Exemples : <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>,
<li>, <dt>, <dd>, <table>, <blockquote>, <pre>,         <form>, …
Eléments de type « inline » :

Le contenu des éléments « inline » est affiché au fil du texte

1. Eléments remplacés -> acceptent des attributs de dimension : <img>, <input>, <textarea>, <select>, <object>
2. Autres éléments -> sans dimension :<span>, <a>, <strong>, <em>

….

Sommaire:  Développer un site accessible en XHTML et CSS

Introduction
Avantages des standards et d’une sémantique sur le web
XHTML 1.0 – rappels de la syntaxe générale
Feuilles de style et accessibilité
Techniques XHTML pour l’accessibilité
Outils et environnements de développement

…….

Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)
Apprendre à développer un site accessible en XHTML et CSS (1,75 MO) (Cours PPT)