Visualisieren und Debuggen der Website mit Tota11y

Assistive Technologien sind die neue Norm für Webdesign. Nachdem Responsive Design erst einmal etabliert war, wurde den Designern schnell klar, dass die Unterstützung von mehr Benutzern eine Notwendigkeit ist.

Aber da ist eine Menge Arbeit für die Barrierefreiheit im Web. Dies ist ein riesiges Thema und nicht etwas, das Sie ohne praktische Hilfsmittel aufgreifen können.

Tota11y ist ein Kostenloses Toolkit zur Visualisierung der Barrierefreiheit Ihrer Website. Dies funktioniert direkt im Browser, sodass Sie das Toolkit einfach laden und auf Ihre Website (oder eine beliebige Site!) Klicken können, um Empfehlungen für die Barrierefreiheit zu erhalten.

Dies funktioniert als JavaScript-Bibliothek, die in jede Seite eingefügt werden kann. Du könntest auch Führen Sie es manuell auf Live-Sites aus über Chrome DevTools. Dies ist jedoch nicht immer nützlich, wenn Sie nicht auf einer anderen Website arbeiten.

Tota11y fügt Ihrer Seite eine kleine Symbolleiste hinzu und wird im gesamten DOM dynamisch ausgeführt. Wann immer du Klicken Sie auf ein Element, um eine kleine Erweiterungsbox zu erhalten mit Details zu Problemen mit der Zugänglichkeit.

Eine Sache, die ich an Tota11y wirklich mag, ist die klare sprache Wird mit jeder Callout-Box verwendet. Die meisten WAI-ARIA-Dokumentationen fühlen sich an, als würden sie Steuercodes lesen. Toll zum Einschlafen, nicht so gut zum Debuggen einer Website.

Mit dieser Bibliothek finden Sie Probleme und Lösungen in reinem Englisch. So viel einfacher zu konsumieren und die Lösungen sind schnell.

Wenn Sie die Hauptseite besuchen, finden Sie auf der Website eine Demo von Tota11y. Es ist die kleine schwarze Registerkarte in der linken unteren Ecke des Bildschirms. Klicken Sie einfach darauf, um eine erweiterte Ansicht zu erhalten, die alle Elemente der Hauptseite umfasst.

Das Ganze ist unter der MIT-Lizenz geöffnet, so dass es sehr einfach ist, damit zu arbeiten.

Sie können eine Kopie auf GitHub packen und für so ziemlich alles verwenden. Tota11y enthält auch eine Reihe von Plugins, die Sie auf das Hauptskript erweitern können. Diese Fügen Sie Funktionen hinzu, um detailliertere Fragen zur Barrierefreiheit zu prüfen.

Wenn Sie sich mit Eingabehilfetests auskennen, möchten Sie unbedingt eine Kopie dieses Skripts in Ihrer Toolbox.