AccessHub
eric redegeld
3 months ago
Hope its done right here
please test it, dutch and English
user
demouser
DemoUser
for access
want the component?
https://ko-fi.com/s/94436bc764
And send me mail with your paypal/email handler to [email protected]
working:
AccessHub is a comprehensive, enterprise-grade accessibility component for OSSN that combines keyboard shortcuts, voice navigation, and screen reader support into a single, unified solution.
test it on shared and premium OSSN
✅ Compliance Standards
- WCAG 2.1 Level AA - Web Content Accessibility Guidelines
- EAA Ready - European Accessibility Act compliant
- Section 508 - US Federal accessibility standards
- ADA Compliant - Americans with Disabilities Act
🌟 Features
⌨️ Keyboard Shortcuts
Complete keyboard navigation without mouse:
-
Alt + 1- Home/Newsfeed -
Alt + 2- Your Profile -
Alt + 3- Notifications -
Alt + 4- Messages -
Alt + N- Create New Post -
Alt + S- Submit Form -
Alt + /- Search -
Alt + L- Logout -
Alt + ↑/↓- Navigate Posts -
Alt + Enter- Read Post Aloud
🎤 Voice Control
Speak natural language commands:
- "Startpagina" / "Home" - Go to home
- "Profiel" / "Profile" - Your profile
- "Berichten" / "Messages" - Open messages
- "Vrienden" / "Friends" - Friends list
- "Notificaties" - Notifications
- "Sneltoetsen" / "Shortcuts" - Open help
- "Lees voor" - Toggle read aloud
- "Uitloggen" / "Logout" - Log out
- Plus: Dictation into any text field!
🔊 Read Aloud
- Toggle on/off with button
- Hover over text to hear it spoken
- Select posts and read them with Alt+Enter
- Automatic language detection (NL/EN)
📢 Feedback System
- Audio: Spoken confirmations
- Visual: On-screen notifications
- Both: Fully customizable
other languages follows
Arsalan Shah
Replied 3 months ago
Also the icons and text appears broken
Michael Zülsdorff
Replied 3 months ago
Well, it happens on entering the browser window
because 'document' is in fact the first target being hovered with the mouse
(testing here on Linux desktop + chrome)
Eric redegeld
Replied 3 months ago
thank you!!
i did not get this
screenshot helps me also
now inspired by the hashtag component 90% Alt-text done also
Michael Zülsdorff
Replied 3 months ago
5 ***** stars, Eric!
still getting a lot of "Uncaught TypeError: e.target.closest is not a function"
in case the target refers to 'document'
Not quite sure if this is the correct way to sort these kind of events out, but it looks like
if(e.target.activeElement)
return;
const target = e.target.closest(speakableSelector);
does the trick