AccessHub
eric redegeld
11 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 11 months ago
Also the icons and text appears broken
Michael Zülsdorff
Replied 11 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 11 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 11 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