From 4a93bacf079560fb6162726f927137fbcb7d9fa5 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Mon, 17 Jun 2024 18:02:33 +0200
Subject: [PATCH] changed semantic tags for acessibility
---
static/javascript.js | 4 +++
static/style.css | 4 +++
wiki/menu.html | 3 +-
wiki/pages/example.html | 62 ++++++++++++++++++++++-------------------
4 files changed, 43 insertions(+), 30 deletions(-)
diff --git a/static/javascript.js b/static/javascript.js
index e69de29b..3e85029e 100644
--- a/static/javascript.js
+++ b/static/javascript.js
@@ -0,0 +1,4 @@
+function contrastFunction() {
+ document.body.classList.toggle("contrast-mode");
+
+ }
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index f919497a..51a7bb28 100644
--- a/static/style.css
+++ b/static/style.css
@@ -5,6 +5,10 @@ body {
background-color: white;
color: var(--offblack);
}
+.contrast-mode {
+ background-color: white !important;
+ color: black !important;
+}
.col{
object-fit: contain;
}
diff --git a/wiki/menu.html b/wiki/menu.html
index ee7024f2..41636d30 100644
--- a/wiki/menu.html
+++ b/wiki/menu.html
@@ -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>
diff --git a/wiki/pages/example.html b/wiki/pages/example.html
index 5fa627bd..bc7e2d01 100644
--- a/wiki/pages/example.html
+++ b/wiki/pages/example.html
@@ -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">
--
GitLab