function a11y_controls_shortcode() {
// Generate unique ID to prevent conflicts
$unique_id = uniqid('a11y_');
ob_start();
?>
<div id="<?php echo esc_attr($unique_id); ?>" class="a11y-controls-container">
<div class="a11y-controls">
<button type="button" class="a11y-btn a11y-font-inc" aria-label="Increase Font Size">A+</button>
<button type="button" class="a11y-btn a11y-font-dec" aria-label="Decrease Font Size">A-</button>
<button type="button" class="a11y-btn a11y-reset" aria-label="Reset Font Size">Reset</button>
<button type="button" class="a11y-btn a11y-toggle-links" aria-pressed="false">Links markieren</button>
<button type="button" class="hidden a11y-btn a11y-high-contrast" aria-pressed="false">High Contrast</button>
<button type="button" class="hidden a11y-btn a11y-grayscale" aria-pressed="false">Grayscale</button>
<button type="button" class="a11y-btn a11y-large-cursor" aria-pressed="false">Großer Cursor</button>
</div>
</div>
<style>
.a11y-controls {
display: flex;
gap: 10px;
/*padding: 15px;
background: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
flex-wrap: wrap;
align-items: center;*/
}
.a11y-btn {
/* padding: 8px 12px; */
height: 34px;
cursor: pointer;
border: 1px solid #ccc;
background: #fff;
font-size: 16px;
border-radius: 5px;
transition: all 0.2s;
padding: 7px 16px;
font-size: 14px;
}
.a11y-btn:hover {
background: #eee;
}
.a11y-btn[aria-pressed="true"] {
background: #ffeb3b;
color: #000;
border-color: #fdd835;
}
/* High contrast mode for links */
body.a11y-links-highlighted a {
background-color: #ffeb3b !important;
color: #000 !important;
border: 2px solid #000 !important;
/*text-decoration: underline !important;
padding: 0 2px;*/
}
/* High Contrast Mode */
body.a11y-high-contrast {
background-color: #000 !important;
color: #fff !important;
}
body.a11y-high-contrast * {
background-color: #000 !important;
color: #fff !important;
border-color: #fff !important;
}
body.a11y-high-contrast a {
color: #ffeb3b !important;
text-decoration: underline !important;
}
body.a11y-high-contrast button {
background-color: #000 !important;
color: #ffeb3b !important;
border: 2px solid #ffeb3b !important;
}
body.a11y-high-contrast .a11y-btn[aria-pressed="true"] {
background-color: #ffeb3b !important;
color: #000 !important;
}
/* Grayscale Mode */
body.a11y-grayscale {
filter: grayscale(100%) !important;
}
/* Fix menu button and logo highlighting */
body.a11y-links-highlighted .main-navigation-ul>.menu-item.menu-button>a>.link-inner,
body.a11y-links-highlighted .main-navigation .menu-button>a>.link-inner {
background-color: transparent !important;
color: #000;
font-weight: 700;
text-transform: uppercase;
}
body.a11y-links-highlighted a#site-logo-link {
display: block;
padding: 5px;
}
/* Large Cursor Mode */
body.a11y-large-cursor,
body.a11y-large-cursor * {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='%23000000' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3C/svg%3E") 10 10, auto !important;
}
/* Large Hand Cursor for Links/Buttons
body.a11y-large-cursor a,
body.a11y-large-cursor button,
body.a11y-large-cursor [role="button"],
body.a11y-large-cursor input[type="submit"],
body.a11y-large-cursor input[type="button"],
body.a11y-large-cursor .a11y-btn {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='%23000000' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") 12 12, pointer !important;
}
*/
</style>
<script>
(function () {
document.addEventListener('DOMContentLoaded', function () {
var container = document.getElementById('<?php echo esc_js($unique_id); ?>');
if (!container) return;
var btnInc = container.querySelector('.a11y-font-inc');
var btnDec = container.querySelector('.a11y-font-dec');
var btnReset = container.querySelector('.a11y-reset');
var btnLinks = container.querySelector('.a11y-toggle-links');
var btnContrast = container.querySelector('.a11y-high-contrast');
var btnGrayscale = container.querySelector('.a11y-grayscale');
var btnCursor = container.querySelector('.a11y-large-cursor');
var root = document.body;
var defaultFontSize = 100; // Percentage
var currentFontSize = parseFloat(localStorage.getItem('a11y_font_size')) || defaultFontSize;
var state = {
links: localStorage.getItem('a11y_links_highlighted') === 'true',
contrast: localStorage.getItem('a11y_high_contrast') === 'true',
grayscale: localStorage.getItem('a11y_grayscale') === 'true',
cursor: localStorage.getItem('a11y_large_cursor') === 'true'
};
// Apply saved states
updateFontSize(currentFontSize);
if (state.links) toggleState('links', btnLinks, 'a11y-links-highlighted', true);
if (state.contrast) toggleState('contrast', btnContrast, 'a11y-high-contrast', true);
if (state.grayscale) toggleState('grayscale', btnGrayscale, 'a11y-grayscale', true);
if (state.cursor) toggleState('cursor', btnCursor, 'a11y-large-cursor', true);
// Accessibility Functions
function updateFontSize(size) {
if (size < 70) size = 70; // Min limit
if (size > 200) size = 200; // Max limit
root.style.fontSize = size + '%';
localStorage.setItem('a11y_font_size', size);
currentFontSize = size;
}
function toggleState(key, btn, className, skipSave) {
if (!skipSave) state[key] = !state[key];
if (state[key]) {
document.body.classList.add(className);
btn.setAttribute('aria-pressed', 'true');
} else {
document.body.classList.remove(className);
btn.setAttribute('aria-pressed', 'false');
}
if (!skipSave) {
var storageKey = 'a11y_' + key;
if (key === 'links') storageKey = 'a11y_links_highlighted';
if (key === 'contrast') storageKey = 'a11y_high_contrast';
if (key === 'cursor') storageKey = 'a11y_large_cursor';
localStorage.setItem(storageKey, state[key]);
}
}
btnInc.addEventListener('click', function () { updateFontSize(currentFontSize + 10); });
btnDec.addEventListener('click', function () { updateFontSize(currentFontSize - 10); });
btnReset.addEventListener('click', function () { updateFontSize(defaultFontSize); });
btnLinks.addEventListener('click', function () { toggleState('links', this, 'a11y-links-highlighted'); });
btnContrast.addEventListener('click', function () { toggleState('contrast', this, 'a11y-high-contrast'); });
btnGrayscale.addEventListener('click', function () { toggleState('grayscale', this, 'a11y-grayscale'); });
btnCursor.addEventListener('click', function () { toggleState('cursor', this, 'a11y-large-cursor'); });
});
})();
</script>
<?php
return ob_get_clean();
}
add_shortcode('accessibility_controls', 'a11y_controls_shortcode');
