// Accessibilité. 2, quelques solutions_____

à jour le
16 mars 2007

Eric Pichon  

 

suite...voir lien en bas de page

Soignez les éléments les plus "sensibles" de vos pages

Pour en savoir plus : Plongez dans l'accessibilité !
(30 jours pour rendre un site web plus accessible) voir le site

Prévoyez des pages alternatives

Des scripts peuvent orienter vers une page différente en fonction du navigateur, de la langue utilisée, de la résolution de l'écran, ...
(cf www.editeurjavascript.com, rubrique navigation)

ou en utilisant des balises propres à un seul éditeur
(cf "Tricks with Comments that Only Work in Microsoft Internet Explorer" sur about.com)

Utilisez plusieurs feuilles de style

Il suffit placer dans l'en-tête (entre <head> et </head>) un lien vers plusieurs feuilles de style, qui seront utilisées alternativement selon le "contexte".

Bien sûr, vous aurez au préalable créé chacun des fichiers CSS avec les styles appropriés : cela sera d'autant plus performant si vous avez parfaitement séparé le fond (l'information donnée par la page web) de sa mise en forme (la présentation déterminée par l'une ou l'autre des feuilles de style), notamment en préférant les calques aux tableaux de mise en page.

Feuilles de style différentes selon le navigateur

<!--[if IE]> <link rel="stylesheet" type="text/css" href="styleIE.css" /> <![endif]-->

<!--[if IE]> et <![endif]--> ne sont reconnues que par Internet explorer ; les autres navigateurs interprèteront tout ce qui se trouve entre <!-- et --> comme un commentaire et le "sauteront"

(source et autres "trucs" : "Hiding Your Cascading Style Sheets" / about.com )

Feuille de style différentes selon l'usage (écran, impression, vocal, braille).

L'attribut "media" précise à quelle "sortie" s'applique la feuille de style :

Tout media :

<link rel="stylesheet" type="text/css" media="all" href="/style.css" />

Ecran :

<link rel="stylesheet" type="text/css" media="screen" href="/ecran.css" />

Impression :

<link rel="stylesheet" type="text/css" media="print" href="/imprime.css" />

Navigateur vocal :

<link rel="stylesheet" type="text/css" media="aural" href="/vocal.css" />

Navigateur braille :

<link rel="stylesheet" type="text/css" media="braille" href="/braille.css" />

retour en haut de la page


Creative Commons.. BY:NC:SA: -Paternité : ce site peut être reproduit et distribué à condition que l'auteur initial, eric pichon, soit cité.- Non commercial : aucune adaptation, reproduction ou utilisation de ce site ne peut être faite à des fins commerciales, sans accord de l'offrant ('licensor') - Partage à l'identique : des adaptations de ce site ne peuvent être diffusées que sous une autorisation identique. A chaque réutilisation ou distribution, vous devez faire apparaître clairement aux autres les conditions contractuelles de mise à disposition de cette création.

retour en haut de la page - une autre page >