Skip to content
Snippets Groups Projects
Commit 4a93bacf authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

changed semantic tags for acessibility

parent 841b8203
No related branches found
No related tags found
No related merge requests found
Pipeline #379288 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
static/javascript.js
+ 4
− 0
View file @ 4a93bacf
function contrastFunction() {
document.body.classList.toggle("contrast-mode");
}
\ No newline at end of file
static/style.css
+ 4
− 0
View file @ 4a93bacf
......@@ -5,6 +5,10 @@ body {
background-color: white;
color: var(--offblack);
}
.contrast-mode {
background-color: white !important;
color: black !important;
}
.col{
object-fit: contain;
}
......
wiki/menu.html
+ 2
− 1
View file @ 4a93bacf
......@@ -5,7 +5,8 @@
<a class="navbar-brand" href="#">
Bielefeld CeBiTec
</a>
<!--- contrast mode -->
<button onclick="contrastFunction()">contrast mode</button>
<!---- SMALL SCREEN MENU ICON ---->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
......
wiki/pages/example.html
+ 33
− 29
View file @ 4a93bacf
......@@ -8,11 +8,11 @@
{% block sidebar %}
<!-- Start Sidebar-Block -->
<div class="sidebar">
<div onclick="goTo(document.getElementById('one'))"><span id="subtitle1">Untertitel Eins</span></div>
<div onclick="goTo(document.getElementById('two'))"><span id="subtitle2">Untertitel Zwei</span></div>
<div onclick="goTo(document.getElementById('three'))"><span id="subtitle3">Untertitel Drei</span></div>
</div>
<nav class="sidebar">
<li onclick="goTo(document.getElementById('one'))"><span id="subtitle1">Untertitel Eins</span></li>
<li onclick="goTo(document.getElementById('two'))"><span id="subtitle2">Untertitel Zwei</span></li>
<li onclick="goTo(document.getElementById('three'))"><span id="subtitle3">Untertitel Drei</span></li>
</nav>
<!--End Sidebar Block -->
{% endblock %}
......@@ -28,7 +28,7 @@
<!-- End Heading 1 (svg format!) -->
<div class="col">
<!-- Start portion under Heading 2 -->
<div id="one"> <!-- the is is important to link it to the sidebar! -->
<section id="one"> <!-- the is is important to link it to the sidebar! -->
<h2>Untertitel Eins</h2>
<!-- <hr> is a Seperator -->
<hr>
......@@ -38,9 +38,10 @@
<div class="videoblock">
<div class="row align-items-center">
<div class="col">
<div class="col" style="padding: 0%; margin: 0%;">
<video class="col" style="padding: 0%; margin: 0%;">
<img class="fit" src="https://static.igem.wiki/teams/5247/placeholders/videoplaceholder.jpeg">
</div>
<source src="movie.mp4" type="video/mp4">
</video>
<div class="col">
<div class="video-desc">
Description
......@@ -51,32 +52,35 @@
<div class="col" style="vertical-align: middle;">
<img class="round-img-vert" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
</div>
<div class="col">
<figure class="col">
<img class="round-img-vert" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
</div>
<figcaption>XY</figcaption>
</figure>
</div>
<div class="col">
<div class="col" style="padding: 0%; margin: 0%;">
<video class="col" style="padding: 0%; margin: 0%;">
<img class="fit" src="https://static.igem.wiki/teams/5247/placeholders/videoplaceholder.jpeg">
</div>
<source src="movie.mp4" type="video/mp4">
</video>
<div class="video-desc">
Description
</div>
</div>
<button type="button" class="collapsible">More</button>
<div class="content">
<details class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</details>
</div>
</div>
</section>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class="videoblock">
<div class="row align-items-center">
<div class="col-7">
<video class="col-7">
<img class="fit" src="https://static.igem.wiki/teams/5247/placeholders/videoplaceholder.jpeg">
</div>
<source src="movie.mp4" type="video/mp4">
</video>
<div class="col-5">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
......@@ -94,63 +98,63 @@
<!-- End portion under Heading 2 -->
</div>
<div class="h">
<div id="two">
<section id="two">
<h2>Untertitel Zwei</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="hint-container tip">
<aside class="hint-container tip">
<p class="hint-container-title">
Infobox Typ 1
</p>
<div class="v-card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</aside>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="hint-container info">
<aside class="hint-container info">
<p class="hint-container-title">
Infobox Typ 2
</p>
<div class="v-card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</aside>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class="row align-items-center">
<div class="col">
<div class="hint-container warning">
<aside class="hint-container warning">
<p class="hint-container-title">
Infobox Typ 3
</p>
<div class="v-card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</aside>
</div>
<div class="col">
<div class="hint-container tip">
<aside class="hint-container tip">
<p class="hint-container-title">
Halbe Größe Box
</p>
<div class="v-card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>
</div>
<div class="h">
<div id="three"> <h2>Untertitel Drei</h2>
<section id="three"> <h2>Untertitel Drei</h2>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</section>
</div>
<div class="col">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment