Votre avis sur l'accessibilité du site

Invité · 20/08/2018, 18h25

OK.

décommente le <aside>,
et ajoute les codes CSS et JS pour <ul class="fontsize-ajuster ajustFontSize">. (on verra plus tard si on les laisse là)

Cette colonne à gauche sera utile.

Et, UN A UN :

ajoute le contenu du <header> (un include ?)
ajoute le contenu du <nav> (un include ?) (menu principal
ajoute le contenu du <footer> (un include ?)

Vérifie à chaque fois que la structure HTML reste bonne.

**laurentSc** · 20/08/2018, 19h11

Très rapide à faire vu que le css et le js existent déjà. J'ai rajouté 2 articles et le problème reste

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="fr">
<head>
<title>squelette</title>
<link href="../css/style-jreaux62.css" rel="stylesheet"/>
<link href="../css/style-malvoyant.css" rel="stylesheet"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/malvoyant.js"></script>
 
<meta charset="UTF-8"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
  <header class="fontsize-ajuster ajustFontSize">header</header>
  <nav class="fontsize-ajuster ajustFontSize">navigation principale</nav>
 
  <main>
<aside>
<ul class="fontsize-ajuster ajustFontSize">
  <li class="fontsize-decrease">a- <span>Diminuer la taille des caractères</span></li>
  <li class="fontsize-reset">0 <span>Rétablir la taille des caractères</span></li>
  <li class="fontsize-increase">A+ <span>Augmenter la taille des caractères</span></li>
</ul>
</aside>
 
 
    <section class="fontsize-ajuster ajustFontSize">
      <div class="mainTitle">Titre de la page</div>
      <article>article 1</article>
      <article>article 2</article>
      <article>article 3</article>
      <article>article 4</article>
      <article>article 5</article>
      <article>article 6</article>
      <article>article 7</article>
      <article>article 8</article>
    </section>
 
  </main>
 
<footer >
footer<?php //include("../footer.php"); ?>
</footer>
 
</body>
</html>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

aucun changement si ce n'est que j'ai rajouté style-malvoyant.css (ton code)

http://vercorshandisport.org/html5te.../squelette.php

J'ai pas rajouté le contenu de header, nav et footer vu que le problème et encore là...

Invité · 20/08/2018, 19h58

Quel "problème" ??
(et sur quel navigateur ?)

OK, vu...

Il faut supprimer cette ligne :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

   height: 100vh; /* toute la hauteur du viewport */

J'ai mis à jour mon script : https://codepen.io/jreaux62/pen/POGdjj

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
* { box-sizing: border-box; /* pour maîtriser width et flex-basis */ }
 
/* Layout avec FLEXBOX */
html, body { padding:0; margin:0; width:100%; 
  min-height: 100vh; /* toute la hauteur du viewport */
  display: -webkit-flex;
  display: flex; /* crée un contexte flex pour ses enfants */
  -webkit-flex-direction: column;
  flex-direction: column;/* affichage vertical */
}
body { 
  -webkit-flex:1; flex:1; 
  align-items:stretch;
  max-width:1400px; /* on limite la largeur maxi */
  margin:0 auto; /* centrage */
}
body > main {
  -webkit-flex:1; flex:1;
}
/* ------------------------ */
/* MOBILE FIRST */
/* main : aside + section */
main {
  display: -webkit-flex;
  display: flex; /* crée un contexte flex pour ses enfants */
  -webkit-flex-direction: column;
  flex-direction: column; /* affichage vertical */
}
/* SPECIAL PHONE */
@media (max-width: 768px) {
  main > aside {
    order: 2; /* aside s'affiche APRES section */
  }
}
/* ------------------------ */
/* DESKTOP */
@media (min-width: 769px) {
  /* main : aside + section */
  main {
    display: -webkit-flex;
    display: flex; /* crée un contexte flex pour ses enfants */
    -webkit-flex-direction: row;
    flex-direction: row; /* affichage horizontal */
  }
  main > aside { width:10em; min-width:240px; }
  main > section { flex: 1; /* occupe la largeur restante */ }
}
/* ------------------------ */
/* déco */
body > header,
body > nav,
body > main > section,
body > main > aside,
body > main > section > article,
body > footer {
  margin: 0.2em 0.4em;
  padding: 1em;
  border-radius: 6px;
}
body > header { background: #feb; }
body > nav { background: #ccf; }
body > main > section { background: #eee; }
body > main > aside { background: #ccc; }
body > main > section > article { background: #dd8; }
body > footer { background: #feb; }
 
 
/* ------------------------ */
main > section .mainTitle { font-size:1.4em; text-align:center; padding:10px; }

**laurentSc** · 20/08/2018, 20h55

Le "problème" est décrit au post #18 et se voit IE (pas sur FF)(la correction ne change rien et d'ailleurs, ça se voyait pas sur FF même sans la correction). Mais comme il y a beaucoup d'utilisateurs de IE, je voudrais le faire marcher avec ce navigateur.

Invité · 20/08/2018, 21h43

Je fait une maquette de mon coté : https://codepen.io/jreaux62/pen/YOzQjV

**laurentSc** · 20/08/2018, 22h07

Merci pour cet essai...mais pareil (sous IE)

http://vercorshandisport.org/html5te...squelette.php#

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="fr">
<head>
<title>squelette</title>
<link href="../css/style-jreaux62.css" rel="stylesheet"/>
<link href="../css/style-malvoyant.css" rel="stylesheet"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/malvoyant.js"></script>
 
<meta charset="UTF-8"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
  <header class="ajustFontSize">
    <img src="http://vercorshandisport.org/html5test/bandeau4.JPG" alt="">
    <h1>Vercors HandiSport</h1>
  </header>
 
  <nav class="ajustFontSize">
    <ul class="menu">
 
      <li><a href="../accueil/accueil.php">Accueil</a></li>
 
      <li><a href="#">Photos</a></li>
      <li><a href="#">Vidéos</a></li>
 
      <li><a href="#">Le club</a></li>
      <li><a href="../adh/esp_adh.php">espace adhérent</a></li>
 
    </ul>
  </nav>
 
  <main>
    <aside>
 
      <ul class="fontsize-ajuster">
        <li class="fontsize-decrease">a- <span>Diminuer la taille des caractères</span></li>
        <li class="fontsize-reset">0 <span>Rétablir la taille des caractères</span></li>
        <li class="fontsize-increase">A+ <span>Augmenter la taille des caractères</span></li>
      </ul>
 
    </aside>
 
    <section class="ajustFontSize">
      <div class="mainTitle">Titre de la page</div>
      <article>article 1</article>
      <article>article 2</article>
      <article>article 3</article>
      <article>article 4</article>
      <article>article 5</article>
      <article>article 6</article>
      <article>article 7</article>
      <article>article 8</article>
    </section>
 
  </main>
 
  <footer>
    footer</footer>
 
</html>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
* { box-sizing: border-box; /* pour maîtriser width et flex-basis */ }
 
/* Layout avec FLEXBOX */
html, body { padding:0; margin:0; width:100%; 
  min-height: 100vh; /* toute la hauteur du viewport */
  display: -webkit-flex;
  display: flex; /* crée un contexte flex pour ses enfants */
  -webkit-flex-direction: column;
  flex-direction: column;/* affichage vertical */
 
  font-size:100%;
  font-family:Arial,sans-serif;
 
}
body { 
  -webkit-flex:1; flex:1; 
  align-items:stretch;
  max-width:1400px; /* on limite la largeur maxi */
  margin:0 auto; /* centrage */
}
body > main {
  -webkit-flex:1; flex:1;
}
/* ------------------------ */
/* MOBILE FIRST */
/* main : aside + section */
main {
  display: -webkit-flex;
  display: flex; /* crée un contexte flex pour ses enfants */
  -webkit-flex-direction: column;
  flex-direction: column; /* affichage vertical */
}
/* SPECIAL PHONE */
@media (max-width: 768px) {
  main > aside {
    order: 2; /* aside s'affiche APRES section */
  }
}
/* ------------------------ */
/* DESKTOP */
@media (min-width: 769px) {
  /* main : aside + section */
  main {
    display: -webkit-flex;
    display: flex; /* crée un contexte flex pour ses enfants */
    -webkit-flex-direction: row;
    flex-direction: row; /* affichage horizontal */
  }
  main > aside { width:10em; min-width:240px; }
  main > section { flex: 1; /* occupe la largeur restante */ }
}
/* ------------------------ */
/* déco */
body > header,
body > nav,
body > main > section,
body > main > aside,
body > main > section > article,
body > footer {
  margin: 0.2em 0.4em;
  padding: 1em;
  border-radius: 6px;
}
body > nav { padding:0.4em 0; }
body > main > section { background: #eee; }
body > main > aside { background: #ccc; }
body > main > section > article { background: #dd8; }
body > footer { background: #feb; }
 
 
/* ------------------------ */
main > section .mainTitle { font-size:1.4em; text-align:center; padding:10px; }
 
/* ------------------------ */
/* VHS */
 
/* ------------------------ */
/* header */
body > header { position:relative; padding:0; background:#0070bb; /* bleu */ }
body > header > img { display:block; margin:0 auto; }
body > header > h1 { position:absolute; width:100%; top:20px; font-size:240%;
  margin:0.2em; text-align:center; color:#fff; text-shadow:2px 2px 2px #666;
}
 
 
/* ------------------------ */
/* MENU PRINCIPAL (1 SEUL NIVEAU) */
.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
background:rgb(30,107,194);
  border: 1px solid #48B;
  line-height:2em;
  height:3em;
  font-size:0.8em;
  text-align:center;
  z-index : 9999;
  position : relative;
}
/* Barre de menu principale */
.menu li {
  display:inline-block;
  position:relative;
  list-style: none;
  text-align:center;
}
.menu li a {
  display:block;
  padding:0.5em 1em;
  font-weight:bold;
  text-decoration:none;
  color:#FFF;
}
.menu li:hover > a {
  background:#4D90FE;
  color:#FFF;
}
 
/* ------------------------ */
/* AJUSTER FONT-SIZE */
.fontsize-ajuster, .fontsize-ajuster li {
  padding:0; margin:0; list-style:none;
  text-align:center;
}
.fontsize-ajuster li { 
  position:relative;
  display:inline-block;
  cursor:pointer;
 
  width:32px;
  padding:5px 0;
  text-align:center;
  border:1px solid #ccc;
  border-radius:50px;
  background:#fff;
}
.fontsize-ajuster li span { 
  position:absolute;
  display:inline-block;
 
  left:-9999px; /* accessibilitÃ© (on dÃ©place hors page) */
  z-index:9;
 
  border:1px solid #ccc;
  background:#fff;
  padding:5px;
  border-radius:5px;
  text-align:left;
}
.fontsize-ajuster li:hover span { 
  top:40px; /* dessous */
  left:0;
}
 
/* ------------------------ */