Add accessibility features: high contrast, blue filter, grayscale, image toggle, and cursor size adjustments

- Implemented high contrast mode toggle with state persistence.
- Added blue filter toggle with visual effect and state persistence.
- Introduced grayscale mode toggle with state persistence.
- Included option to hide/show images with state persistence.
- Added functionality to increase/decrease cursor size with visual feedback.
- Enhanced font size controls with increment, decrement, and reset options.
- Updated accessibility panel UI and button labels for clarity.
- Ensured all new features are accessible and maintain user preferences across sessions.
This commit is contained in:
2025-09-03 22:27:22 +02:00
parent 9f3f53ce2d
commit 602e6a92fe
8 changed files with 319 additions and 30 deletions

View File

@@ -59,8 +59,78 @@
gap: 10px;
}
#toggle-contrast {
#toggle-contrast,
#toggle-blue-filter,
#toggle-grayscale,
#toggle-images,
#toggle-cursor {
padding: 10px;
font-size: 16px;
cursor: pointer;
}
/* Ukrywanie obrazów */
body.hide-images {
img,
picture,
svg,
video {
display: none !important;
}
}
/* Szarość */
html.grayscale {
filter: grayscale(100%);
}
/* Duży kursor chowamy natywny kursor dopiero po pierwszym ruchu */
body.big-cursor-active {
&,
* {
cursor: none !important;
}
}
/* Overlay kursora */
#a11y-cursor {
will-change: transform;
}
/* Kontrolki rozmiaru czcionki */
.font-size-controls {
display: grid;
grid-auto-flow: column;
gap: 8px;
align-items: center;
margin-top: 10px;
button {
padding: 6px 10px;
border-radius: 8px;
border: 1px solid #dcdcdc;
background: #f7f7f7;
cursor: pointer;
font-weight: 600;
&:hover {
background: #efefef;
}
&:disabled {
opacity: .55;
cursor: not-allowed;
}
}
}
/* Drobne różnice optyczne dla przycisków A / A+ */
#font-inc {
font-size: 1.05em;
}
#font-dec {
font-size: 0.95em;
}