-
Notifications
You must be signed in to change notification settings - Fork 0
/
PageAccessible.htm
133 lines (106 loc) · 5.55 KB
/
PageAccessible.htm
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
<!DOCTYPE html>
<html class="gr__a11y_forge_orange-labs_fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Page d'exemple accessible - Demo accessibilité</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="content/boosted.css">
<link href="content/styles.css" rel="stylesheet">
</head>
<body data-gr-c-s-loaded="true" cz-shortcut-listen="true">
<header role="banner">
<nav id="mainNav" class="navbar navbar-dark">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">
<a class="navbar-brand" href="#">
<img alt="Retour accueil" id="orange_logo" src="content/ORANGE_LOGO_rgb.jpg">
</a>
<div class="navbar-brand">
<h1>Démo accessibilité</h1>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header>
<main id="content" class="container">
<div>
<h2>Pourquoi l'accessibilité numérique ?</h2>
<div class="row">
<div class="col-xs-12">
<ul>
<li>Parce qu’elle bénéficie à <strong>80 millions</strong> de personnes handicapées ou séniors en Europe.</li>
<li>Parce que nous passons en moyenne <strong>8 ans</strong> de notre vie en situation de handicap.</li>
<li>Mais aussi et surtout parce qu’un produit accessible est plus <strong>facile à utiliser</strong> et que cela bénéficie à tous !</li>
</ul>
</div>
</div><!-- .row -->
<h2>L’accessibilité est au cœur d’Orange</h2>
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="thumbnail blue">
<h3>Essentiels 2020</h3>
<img alt="" class="img-thumbnail" src="content/ESSENTIELS2020.jpg">
<p><q>Pour être positive, la révolution digitale doit être partagée par tous et adaptée à chacun</q></p>
<a class="btn btn-default" href="#">en savoir +</a>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="thumbnail black">
<h3>RSE</h3>
<img alt="" class="img-thumbnail" src="content/rse.png">
<p>Notre engagement responsable Faire du numérique un accélérateur de progrès pour tous</p>
<a class="btn btn-default" href="#">en savoir +</a>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="thumbnail yellow">
<h3>nos valeurs</h3>
<img alt="" class="img-thumbnail" src="content/12345.png">
<p>proximité : nos réponses sont adaptées aux besoins de chacun.</p>
<a class="btn btn-default" href="#">en savoir +</a>
</div>
</div>
</div><!-- .row -->
<h2>Bon plan du moment</h2>
<div class="row">
<div class="col-md-8">
<a href="#">
<img alt="Promo nouveau Sony Xperia Z5 79€90 au lieu de 279€90 - Offre valable du 8/10 au 18/11/2015 inclus pour toute souscription d'un forfait Origami Jet 12 Go avec engagement de 24 mois" src="content/756x243-756x243sonyxperiaz5-36352.png" class="img-thumbnail">
</a>
</div>
<div class="col-md-4">
<p><b>Connectez-vous à votre espace afin de bénéficier de nos meilleures offres.</b></p>
<form novalidate="novalidate" id="formulaire">
<div class="form-group">
<label for="credential">Adresse mail ou numéro de mobile </label>
<input name="credential" class="form-control" id="credential" type="text">
</div>
<div class="form-group">
<label for="password">mot de passe </label>
<input name="password" class="form-control" id="password" type="text">
</div>
<div class="form-group">
<div>
<input name="memorize-login" id="id-memorize-login" checked="checked" type="checkbox">
<label for="id-memorize-login">mémoriser l’adresse mail ou le nº de mobile </label>
</div>
<div>
<input name="memorize-password" id="id-memorize-password" checked="checked" type="checkbox">
<label for="id-memorize-password">rester connecter</label>
</div>
</div>
<button id="envoyer" type="submit" class="btn btn-default">Envoyer</button>
</form>
</div>
</div><!-- .row -->
</div>
</main><!--/.container-->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="content/jquery.js"></script>
<!-- Include all compiled plugins bootstrap, bootstrap accessibility plugin and boosted specific components (below), or include individual files as needed -->
<script src="content/boosted.js"></script>
</body></html>