chriz/Dialyse-Webseite
1
0 Fork 0
forked from itchy/Dialyse-Webseite
Code Pull Requests Actions Activity

Accessibility fixes.

Browse Source
This commit is contained in:
chriz committed 2026-10-20 11:11:04 +02:00
1 parent 02c92db1e5
commit 014422e0b6
12 files changed
+262 -176
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

view/frontend.php
+40 -38
View File
@@ -42,32 +42,33 @@ $currentAction = isset($action) ? $action : 'main';
</head>
<body>
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
<div id="outer-container">
<!-- Top Info Bar -->
<div class="top-bar">
<div class="container top-bar-inner">
<div class="top-bar-left">
<a href="https://www.google.com/maps/place/Dialysezentrum+Berlin-Mahlsdorf/@52.5078291,13.6092903,17z/data=!3m1!4b1!4m6!3m5!1s0x47a84991f9c57f7f:0xad4486f559442067!8m2!3d52.5078291!4d13.6092903!16s%2Fg%2F1tdqghgn" target="_blank" rel="noopener noreferrer" class="top-bar-item top-bar-addr-main" title="Zentrumsdialyse Berlin-Mahlsdorf in Google Maps öffnen">
<svg class="top-bar-icon" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
<a href="https://www.google.com/maps/place/Dialysezentrum+Berlin-Mahlsdorf/@52.5078291,13.6092903,17z/data=!3m1!4b1!4m6!3m5!1s0x47a84991f9c57f7f:0xad4486f559442067!8m2!3d52.5078291!4d13.6092903!16s%2Fg%2F1tdqghgn" target="_blank" rel="noopener noreferrer" class="top-bar-item top-bar-addr-main" title="Zentrumsdialyse Berlin-Mahlsdorf in Google Maps öffnen" aria-label="Zentrumsdialyse: Thorner Str. 1, 12623 Berlin (in Google Maps öffnen)">
<svg class="top-bar-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
<span>Thorner Str. 1, 12623 Berlin</span>
</a>
<a href="https://www.google.com/maps/place/Dialysezentrum+Berlin-Mahlsdorf+LC/@52.5428128,13.5716785,17z/data=!3m1!4b1!4m6!3m5!1s0x47a84991f9d5111b:0xda0b4785760166c5!8m2!3d52.5428128!4d13.5716785!16s%2Fg%2F1ts_5mmj" target="_blank" rel="noopener noreferrer" class="top-bar-item top-bar-addr-satellite" title="Satellitendialyse Marzahn in Google Maps öffnen">
<svg class="top-bar-icon" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
<a href="https://www.google.com/maps/place/Dialysezentrum+Berlin-Mahlsdorf+LC/@52.5428128,13.5716785,17z/data=!3m1!4b1!4m6!3m5!1s0x47a84991f9d5111b:0xda0b4785760166c5!8m2!3d52.5428128!4d13.5716785!16s%2Fg%2F1ts_5mmj" target="_blank" rel="noopener noreferrer" class="top-bar-item top-bar-addr-satellite" title="Satellitendialyse Marzahn in Google Maps öffnen" aria-label="Satellitendialyse: Blumberger Damm 130, 12685 Berlin (in Google Maps öffnen)">
<svg class="top-bar-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
<span>Satellit: Blumberger Damm 130, 12685 Berlin</span>
</a>
</div>
<div class="top-bar-right">
<a href="tel:0305662484" title="Telefon Dialyse">
<svg class="top-bar-icon" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
<svg class="top-bar-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
Dialyse: 030 / 566 24 84
</a>
<a href="tel:0305662539" title="Telefon Ambulanz">
<svg class="top-bar-icon" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
<svg class="top-bar-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
Ambulanz: 030 / 566 25 39
</a>
<a href="javascript:void(0);" class="mail-obf" data-usr="kontakt" data-dom="dialyse-berlin" data-tld="net" title="E-Mail schreiben" style="font-weight: 600;">
<svg class="top-bar-icon" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
<svg class="top-bar-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
<span class="mail-val c-rev">net.nilreb-esylaid&#64;tkatnok</span>
</a>
</div>
@@ -84,18 +85,18 @@ $currentAction = isset($action) ? $action : 'main';
</a>
<!-- Navigation Menu -->
<nav id="siteNav">
<nav id="siteNav" aria-label="Hauptnavigation">
<?php include('view/navigation.php'); ?>
</nav>
<!-- Actions & Mobile Toggle -->
<div class="header-actions">
<a href="/kontakt.html" class="header-cta-btn">
<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
<span>Kontakt / Termin</span>
</a>
<button class="nav-toggle" id="navToggle" aria-label="Menü öffnen" aria-expanded="false">
<svg viewBox="0 0 24 24" id="toggleIcon"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
<button class="nav-toggle" id="navToggle" aria-label="Menü öffnen" aria-expanded="false" aria-controls="navMenu">
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" id="toggleIcon"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
</button>
</div>
</div>
@@ -103,14 +104,14 @@ $currentAction = isset($action) ? $action : 'main';
<!-- Holiday / Announcement Dialog (if configured) -->
<?php if(Helper::isHoliday($config) && $session->get('dialog') != 'dismissed'): ?>
<div id="holiday-wrapper" class="holiday-notice-banner">
<div id="holiday-wrapper" class="holiday-notice-banner" role="region" aria-label="Aktueller Praxishinweis">
<div class="container holiday-notice-inner">
<div class="holiday-notice-content">
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
<div><?=Helper::parseHolidays($config)?></div>
</div>
<button type="button" class="holiday-dismiss-btn" data-dismiss="dialog">
<span>&#x2715; Schließen</span>
<span aria-hidden="true">&#x2715;</span> <span>Schließen</span>
</button>
</div>
</div>
@@ -118,11 +119,11 @@ $currentAction = isset($action) ? $action : 'main';
<!-- Hero / Motto Banner on Homepage -->
<?php if($currentAction === 'main'): ?>
<section class="hero-banner">
<section class="hero-banner" aria-label="Willkommensbereich">
<div class="container">
<div class="hero-content">
<div class="hero-badge">
<span>&#x2714;</span> &bdquo;Die individuelle Dialyse im grünen Gürtel von Berlin&ldquo;
<span aria-hidden="true">&#x2714;</span> &bdquo;Die individuelle Dialyse im grünen Gürtel von Berlin&ldquo;
</div>
<h1 class="hero-title">Dialysezentrum Berlin-Mahlsdorf</h1>
<div class="hero-subtitle">
@@ -138,8 +139,8 @@ $currentAction = isset($action) ? $action : 'main';
</div>
</div>
</div>
<div class="hero-wave">
<svg viewBox="0 0 1000 100" preserveAspectRatio="none">
<div class="hero-wave" aria-hidden="true">
<svg aria-hidden="true" focusable="false" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path class="shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7 c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V100H0V30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4 c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
</svg>
</div>
@@ -148,17 +149,17 @@ $currentAction = isset($action) ? $action : 'main';
<div class="page-banner">
<div class="container page-banner-inner">
<div>
<div class="breadcrumb">
<a href="/">Startseite</a> &rsaquo;
<span><?=htmlspecialchars(explode('|', $pageTitle)[0])?></span>
</div>
<nav class="breadcrumb" aria-label="Brotkrumennavigation">
<a href="/">Startseite</a> <span aria-hidden="true">&rsaquo;</span>
<span aria-current="page"><?=htmlspecialchars(trim(explode('|', $pageTitle)[0]))?></span>
</nav>
</div>
</div>
</div>
<?php endif; ?>
<!-- Main Content Area -->
<main class="site-main">
<main id="main-content" class="site-main" tabindex="-1">
<div class="container">
<div class="content-card">
<?=$content?>
@@ -178,11 +179,11 @@ $currentAction = isset($action) ? $action : 'main';
Individuelle nephrologische Betreuung und ganzjährige Feriendialysen mit moderner Medizintechnik.
</p>
<div class="footer-contact-item">
<svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
<span><strong>Zentrumsdialyse:</strong> Thorner Straße 1, 12623 Berlin</span>
</div>
<div class="footer-contact-item">
<svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
<span><strong>Satellitendialyse:</strong> Blumberger Damm 130, 12685 Berlin</span>
</div>
</div>
@@ -191,12 +192,12 @@ $currentAction = isset($action) ? $action : 'main';
<div>
<div class="footer-col-title">Navigation</div>
<ul class="footer-links">
<li><a href="/">&rsaquo; Startseite</a></li>
<li><a href="/leistungen.html">&rsaquo; Leistungen</a></li>
<li><a href="/praxis.html">&rsaquo; Praxisausstattung</a></li>
<li><a href="/team.html">&rsaquo; Unser Team</a></li>
<li><a href="/kontakt.html">&rsaquo; Kontakt &amp; Anfahrt</a></li>
<li><a href="/kontakt-formular.html">&rsaquo; Kontaktformular</a></li>
<li><a href="/"><span aria-hidden="true">&rsaquo;</span> Startseite</a></li>
<li><a href="/leistungen.html"><span aria-hidden="true">&rsaquo;</span> Leistungen</a></li>
<li><a href="/praxis.html"><span aria-hidden="true">&rsaquo;</span> Praxisausstattung</a></li>
<li><a href="/team.html"><span aria-hidden="true">&rsaquo;</span> Unser Team</a></li>
<li><a href="/kontakt.html"><span aria-hidden="true">&rsaquo;</span> Kontakt &amp; Anfahrt</a></li>
<li><a href="/kontakt-formular.html"><span aria-hidden="true">&rsaquo;</span> Kontaktformular</a></li>
</ul>
</div>
@@ -204,20 +205,20 @@ $currentAction = isset($action) ? $action : 'main';
<div>
<div class="footer-col-title">Kontakt &amp; Erreichbarkeit</div>
<div class="footer-contact-item">
<svg viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
<span>Dialyse: <strong>030 / 566 24 84</strong></span>
</div>
<div class="footer-contact-item">
<svg viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
<span>Ambulanz: <strong>030 / 566 25 39</strong></span>
</div>
<div class="footer-contact-item">
<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
<span>E-Mail: <a href="javascript:void(0);" class="mail-obf" data-usr="kontakt" data-dom="dialyse-berlin" data-tld="net" style="color: #cbd5e1; font-weight:600;"><span class="mail-val c-rev">net.nilreb-esylaid&#64;tkatnok</span></a></span>
</div>
<div class="footer-contact-item">
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
<span><a href="/files/dialyse_flyer.pdf" target="_blank" style="color: #38bdf8; font-weight:600;">&raquo; Praxis-Flyer herunterladen (PDF)</a></span>
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
<span><a href="/files/dialyse_flyer.pdf" target="_blank" rel="noopener" style="color: #38bdf8; font-weight:600;"><span aria-hidden="true">&raquo;</span> Praxis-Flyer herunterladen (PDF)</a></span>
</div>
</div>
</div>
@@ -281,6 +282,7 @@ $currentAction = isset($action) ? $action : 'main';
var isOpen = $navMenu.hasClass('is-open');
$navMenu.toggleClass('is-open');
$navToggle.attr('aria-expanded', !isOpen);
$navToggle.attr('aria-label', !isOpen ? 'Menü schließen' : 'Menü öffnen');
// Toggle hamburger icon to X
if(!isOpen) {
@@ -295,7 +297,7 @@ $currentAction = isset($action) ? $action : 'main';
if (!$(e.target).closest('#siteNav, #navToggle').length) {
if ($navMenu.hasClass('is-open')) {
$navMenu.removeClass('is-open');
$navToggle.attr('aria-expanded', 'false');
$navToggle.attr('aria-expanded', 'false').attr('aria-label', 'Menü öffnen');
$('#toggleIcon').html('<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>');
}
}
@@ -305,7 +307,7 @@ $currentAction = isset($action) ? $action : 'main';
$(document).on('keydown', function(e) {
if (e.key === 'Escape' && $navMenu.hasClass('is-open')) {
$navMenu.removeClass('is-open');
$navToggle.attr('aria-expanded', 'false');
$navToggle.attr('aria-expanded', 'false').attr('aria-label', 'Menü öffnen').trigger('focus');
$('#toggleIcon').html('<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>');
}
});