Accessibility und Usability: unaufdringliche Javascript

Zulassen, dass Benutzer mit einem Web-Seite in den letzten Jahren zu interagieren hat einen signifikanten Anstieg in der Verwendung von Client-seitiges Scripting produziert: Javascript-Code kann in Echtzeit reagieren und zu manipulieren eine Vielzahl von Informationen. Das Web2.0 ist der ultimative Ausdruck dieser Fähigkeit zur Interaktion, in dem der Endbenutzer - die benutzerfreundliche beteiligt sich aktiv an der Konstruktion und zu "Evolution des Web site, mit dieser zu interagieren und sich selbst helfen. Dass die "Navigator" wird definitiv nicht passive sieht - ist als User-Generated Content (User Generated Content UGC oder) bezeichnet!

Um diese Interaktion zu erreichen, so dass der Endverbraucher seinen Beitrag hinzuzufügen, entwickelten wir eine Reihe von Techniken, die das Aussehen und das Verhalten von Webseiten (statisch so weit verändert haben, aber jetzt ähnlich wie die traditionellen Anwendungen Desktop) in den letzten Jahren. Ändern Sie den Inhalt einer Seite, Versenden von Dateien, so dass ihre Stimme, um ein Video oder ein Dokument, Register oder ihre persönlichen Daten ändern, sind nur einige der reichsten Operationen in vielen Dienstleistungen (2,0 beta) auf dem Web

Die wachsende Nachfrage nach Werkzeugen Client ( Prototype , Dojo Toolkit , jQuery , ASP.NET Ajax , ...) und Server (Ruby on Rails, PHP-Bibliotheken, JSP und ASP, ...) für den Bau von Web 2.0, hat zur Entstehung vieler geführt Entwicklungs-Tools, Bibliotheken oder einfach Philosophien der neuen Entwicklung auf dem Web;

Diese Techniken und diese Tools in fast allen möglichen Kombinationen, durch seinen modularen Charakter und die Fähigkeit, bestimmte Aufgaben zu lösen, mal benutzt worden. Einige haben daher Lösungen vollständig in Adobe Flash, die Hybrid-Lösungen verwendet (Flash + Javascript), die von Bibliotheken wie generische Prototype , die spezifischen Rahmen erreicht hat. Die meisten dieser Tools ist auch Open Source (kostenlos oder nicht) und dies ist sicherlich auch eine große Verbreitung in kürzester Zeit beigetragen.

Der Preis wurde bezahlt, aber diese neue Interaktion zu erhalten, muss ein Nettoverlust von Barrierefreiheit (und oft Usability) der Web Paradoxerweise wurde, hat die erhöhte Funktionalität der Interaktion der Anzahl der Benutzer beschränkt, die aus verschiedenen Gründen, kann nicht auf diese neuen Technologien! Es war daher un'incremento die digitale Kluft , die oft allein aufgrund einiger Entwicklungsmethoden Missbrauch oder einfach nicht unter Berücksichtigung von einigen das Endziel.

Bei der Entwicklung einer Website, oder einfach nur eine Web-Seite, nicht zu vergessen die "Endverbraucher, die unsere Website mit Geräten (Browser oder User-Agent) mit Ausnahme derjenigen, die wir erwarten können, zu besuchen, aber vor allem mit Funktionen und andere Einstellungen als die, die wir für selbstverständlich (Bildschirmauflösung, Anzahl der Farben genommen haben, Sie müssen Javascript deaktiviert, keine Applets oder ActiveX-Plugins, etc ...). Daraus folgt, dass neben einer einfachen Verträglichkeit (funktional und optisch) zwischen den verschiedenen Browsern muss die Aufmerksamkeit auf die Eigenschaften haben sie bezahlen. Das Argument, natürlich, ist komplex und artikuliert.

Es ist richtig, einen Benutzer zu zwingen müssen JavaScript verfügbar und aktiviert ist, um unsere Website zu navigieren?

Ich denke, es gibt zwei mögliche Antworten auf diese Frage kann der erste sein, nein, nicht richtig, vor allem wenn das, was Sie erreichen wollen können in einer Weise, um den Zugriff ist ein grundlegender Zugang entwickelt hat, ist strukturiert werden. Allerdings, und dies ist die zweite Antwort, natürlich gibt es auch Grenzfälle, wo die Anforderung eine besondere Technologie ist unabhängig von der Fähigkeit - und Bereitschaft - Analyst Programmierer!

Auch - kontroverses Thema - wer sind wir (Entwickler) zu entscheiden, wer sein und erfordern, was?

Wenn das Projekt wollen wir wissen, ist, dass sie von jedem User-Agent verwendet werden kann, mit entsprechenden Vorsichtsmaßnahmen, die Entwicklungszeit und die wachsende Komplexität des Codes (HTML, JavaScript Scripting und Server) erhöht. Es ist eine Produktion Entscheidung, Mitarbeiter beginnen, die Regeln zu diktieren. Allerdings ist die Kompatibilität nicht in Betrieb, die geplant von Anfang an, kann man in der Tat die Frage zu einem späteren Zeitpunkt, wenn Sie unsere Website (oder unsere) ist bereits online sein muss setzen.

Normalerweise benutzen wir zwei Techniken, Ansätze oder zwei, um eine wirklich zugängliche Web zu erstellen:

  • Graceful Degradation
  • Progressive Enhancement

Graceful Degradation

Diese Technik, die auch in verschiedenen Bereichen von Web-Design verwendet, übernimmt von Beginn an auf die Schaffung eines äußerst anspruchsvollen Website zu konzentrieren, mit Hilfe von Techniken und Technologien, die alle ohne sich Gedanken über Kompatibilitätsprobleme und Barrierefreiheit. Usability ist aber - natürlich - die erste Zutat per Definition. Der zweite Schritt besteht darin, Funktionen hinzuzufügen, um allen Browsern und Benutzer, die Unterstützung - in der Tat - am Rande.

Es wird dann mithilfe von Tabellen zu unserem Layout-Format, ohne leidige die Verwendung von CSS und float, so dass das Layout der Seite auch auf älteren Browsern zu respektieren. Javascript scheint, wo Sie das Tag verwenden NOSCRIPT um eine zugängliche Alternative bieten. Verwenden Sie den Tag ALT</codee <code inline="true">TITLE wo reichsten, etc. ...

Graceful Degradation, hat jedoch Grenzen. Nicht ernst zu nehmen Berücksichtigung der verschiedenen Arten von User-Agents (oder Benutzer) von Anfang an, kann schlecht (manchmal hässlich) Konsequenzen im Gefolge haben. Nicht immer, in der Tat, können Sie diese artefizi und Werkzeuge können eine echte Alternative Inhalte an unterschiedliche Benutzer bereitzustellen. Die Erfahrung des Analytikers Web-Entwickler / Designer, in diesem Fall spielt eine wichtige Rolle. Doch eine Website im Laufe der Zeit weiterentwickelt, verbessert es, weitere Eigenschaften, die nicht auf andere Weise lösbar können, wenn nicht zwingen, den Einsatz einer bestimmten Technologie: ein Video ansehen (Flash, QuickTime, etc.) ist schwierig - wenn nicht unmöglich - in Standard-HTML zu erreichen!

Progressive Enhancement

Dieser Ansatz ist wahrscheinlich das, was personalmentre bevorzugen. Es ist das genaue Gegenteil von graceful degradation. Für diejenigen, die die Verwendung von Stylesheets zu genießen, ist eine Technik bereits bekannt: Es geht von der grundlegenden Struktur, eine einfache Markup, und fügen Sie alle erweiterten Funktionen. Als Teil des Layouts und CSS, ist der Ansatz für die "Bild Austausch oder Ersatz durch ein Style-Sheet mit einer Text-Datei (dann gibt es auch Techniken, die Flash-oder sogar Ajax nutzen) verwendet.

Von besonderem Interesse in dieser Art von Ansatz ist die Verbreitung von sogenannten Dezente JavaScript: JavaScript ist das nicht aufdringlich. Diese Technik kann die Funktionalität einer Website durch Ausnutzung der Fähigkeiten von JavaScript DOM-Manipulation zu verbessern. Durch das Einfügen es richtig JavaScript-Skripte auf der Seite, die Sie tun können, um transparent zu machen, um den Browser, die JavaScript nicht unterstützen (oder deaktiviert haben JavaScript), aber für andere zu arbeiten.

Die Eigenschaften eines Dezente JavaScript sind:

  • Verbessern oder bearbeiten - NICHT implementiert - Features gefunden
  • Transparent im Fall von User-Agents, die JavaScript nicht unterstützen oder zu deaktivieren

Punkt 1 ist von wesentlicher Bedeutung für die Zugänglichkeit, in der gleichen Weise wie die "in CSS Image Replacement eingesetzt. Ein Beispiel ist Schnappen , was die Sichtbarkeit eines Links verbessert. Schnappen ist ein klassisches Beispiel für Dezente JavaScript: JavaScript ist deaktiviert, wenn der Link noch vorhanden ist und funktioniert, aber wenn JavaScript aktiviert ist Vorschaufunktion hinzugefügt wird. Auch wenn Sie keinen Zugriff auf beliebige JavaScript-Meldung angezeigt wird: Abschnitt 2 - non-intrusive.

Ein weiteres Beispiel für Dezente JavaScript ist gut gemacht Lightbox JS , die die Diashow von Bildern verbessert. Ausgehend von einer Reihe von Links (<A> Tags) mit dem Attribut rel richtig festlegen können Bilder in einem wirklich eingängigen verbunden!

Diese Technik ist vielseitig einsetzbar und ermöglicht eine echte Progressive Enhancement Ansatz - und ohne Übertreibung ein wahres web2.0 Ansatz.

In diesem Szenario wird die Benutzung der Bibliothek Prototype bietet einfachen Zugriff auf das HTML-DOM erlauben zu überschreiben und neue Funktionen hinzuzufügen, um die Elemente einer Seite, so dass sie vielseitiger.

Beide Techniken erlauben daher die Erstellung von Websites am Ende wirklich zugänglich. Auf der anderen Seite erfordern besondere Aufmerksamkeit und zusätzliche Arbeit, die letztlich für die durch die größere Anzahl der Besucher bezahlt! Ich persönlich nahm die Technik des Progressive Enhancement, für eine rein subjektive und Gewohnheit. Wählen Sie zwischen den beiden Techniken können indifferent Erfahrung, zusammen mit der Art des Projekts müssen Sie entwickeln, sicherlich eine wichtige Rolle spielt.

Als ein Beispiel sagt mehr als tausend Worte, schlage ich vor, dass vor mosrtare einige einfache Code Auszüge wirklich erleuchtet.

4 Kommentare zu "Accessibility und Usability: unaufdringliche Javascript"

  1. 6. April 2007 Accessibility und Usability ": K4 [U]:: :

    [...] Accessibility und Usability: unaufdringliche Javascript ... [...]

  2. 9. Dezember 2007 upnews.it :

    undolog | Blog Archive | Accessibility und Usability: unaufdringliche Javascript ...

    Zulassen, dass Benutzer mit einem Web-Seite in den letzten Jahren zu interagieren hat einen signifikanten Anstieg in der Verwendung von Client-seitiges Scripting produziert: Javascript-Code kann in Echtzeit reagieren und zu manipulieren eine Vielzahl von Informationen. Die Web2.0 ...

  3. 23. Juni 2008 Text Replacement Techniken für HTML / CSS | Undolog.com :

    [...] Web-Seite ist auf den Betrieb mit Stylesheets zu ersetzen (siehe Progressive Enhancement in Accessibility und Usability: unaufdringlich JavaScript). Diese Technik ermöglicht es Ihnen, Inhalte leichter zugänglich, unabhängig von Ort zu machen [...]

  4. 9. Oktober 2008 Progressive Enhancement: die User Experience für moderne Browser zu verbessern - Francis Gaven Web Design Portfolio :

    [...] Accessibility und Usability: unaufdringliche Javascript. Ausgezeichnete Artikel, undolog.com reden unaufdringliche Javascript richtet sich sowohl an Problemen mit einem Überblick über [...]

Hinterlasse einen Kommentar

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE:
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL