Plugin Evaluierung PDF - A-Tag
Transcription
Plugin Evaluierung PDF - A-Tag
WORDPRESS Plugin Evaluierungen und Anpassungen Auszug Jänner 2014 Inhalt 1. "2-Click-Socialmedia-Buttons" ............................................................................................................................ 3 1.1 Allgemeines .................................................................................................................................................. 3 1.2 Accessibility................................................................................................................................................... 3 1.3 getätigte Schritte .......................................................................................................................................... 3 2. Contact Form 7 .................................................................................................................................................... 5 2.1 Allgemeines .................................................................................................................................................. 5 2.2 Accessibility................................................................................................................................................... 5 3. WP Polls............................................................................................................................................................... 7 3.1 Allgemeines .................................................................................................................................................. 7 3.2 Accessibility................................................................................................................................................... 7 3.3 Optimierungsmöglichkeiten ......................................................................................................................... 7 4. My Calendar ...................................................................................................................................................... 10 4.1 Allgemeines ................................................................................................................................................ 10 4.2 Accessibility................................................................................................................................................. 10 5. bbPress .............................................................................................................................................................. 12 5.1 Allgemeines ................................................................................................................................................ 12 5.2Accessibility ................................................................................................................................................. 12 5.3 Adaption der bbPress Themefiles .............................................................................................................. 13 6. NextGEN Gallery ................................................................................................................................................ 13 6.1 Allgemeines ................................................................................................................................................ 13 6.2 Accessibility................................................................................................................................................. 13 7. NextGEN Gallery Voting .................................................................................................................................... 15 7.1 Allgemeines ................................................................................................................................................ 15 7.2 Accessibility................................................................................................................................................. 15 8. All-in-One Event Calendar ................................................................................................................................. 16 8.1 Allgemeines ................................................................................................................................................ 16 8.2 Accessibility................................................................................................................................................. 16 9. ALO EasyMail Newsletter .................................................................................................................................. 18 9.1 Allgemeines ................................................................................................................................................ 18 9.2 Accessibility................................................................................................................................................. 18 Mag. Wolfram Huber www.web-tech.at Seite 2 Mittwoch, 07. Mai 2014 Plugin Anpassungen und Evaluierungen 1. "2-Click-Socialmedia-Buttons" 1.1 Allgemeines Plugin Description: Fügt die Buttons für Facebook-Like (Empfehlen), Twitter, Flattr, Xing, Pinterest, t3n, LinkedIn und Googleplus dem deutschen Datenschutz entsprechend in euer WordPress ein. Dies wird leider durch immer verwirrendere Datenschutzbestimmungen notwendig. Das Plugin ist eine WordPress-Adaption der Lösung von heise.de wie in ihrem Artikel 2 Klicks für mehr Datenschutz beschrieben. Plugin Url: http://wordpress.org/extend/plugins/2-click-socialmedia-buttons/ Requires: 3.4 or higher Compatible up to: 3.8-alpha Last Updated: 2013-11-2 Downloads: 96.800 1.2 Accessibility Wahrnehmbarkeit • Bilder: OK • Layout: OK • Kontrast: Größtenteils OK Die Kontraste nach liken etc. sind nicht optimal -> facebook Problem • Skalierung: die Buttons sind Hintergrundbilder welche bei Textgrößenänderungen nicht "mitskalieren" Bedienbarkeit • Tastaturbedienbarkeit nicht gegeben • Tabfocus nicht gegeben Verständlichkeit • Keine nichteinstellbaren Texte aufgefallen • Browserkonsistenz gegeben (gängige Browser) Robustheit • HTML Code valide Screenreader • Kurzcheck Jaws 11: keine auffallenden Punkte 1.3 getätigte Schritte Entwickler Feedback: Entwickler wurde auf das Problem hingewiesen http://wordpress.org/support/topic/accessibility-issue Mag. Wolfram Huber www.web-tech.at Seite 3 Mittwoch, 07. Mai 2014 Fork: Version 1.6.2 (http://wordpress.org/plugins/2-click-socialmedia-buttons/) wurde mittels Fork modifiziert: https://github.com/wozo/wordpress-plugins/tree/master/2-click-socialmedia-buttons Geänderte Files im Plugin: • socialshareprivacy-min.css • socialshareprivacy.css • social_bookmarks-min.js • social_bookmarks.js Mag. Wolfram Huber www.web-tech.at Seite 4 Mittwoch, 07. Mai 2014 2. Contact Form 7 2.1 Allgemeines Plugin Description: Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on. Plugin Url: http://wordpress.org/extend/plugins/contact-form-7/ Requires: 3.6 or higher Compatible up to: 3.8 Last Updated: 2013-12-12 Downloads: 14,589,875 2.2 Accessibility Default liefert das Plugin keinen optimalen Formular Code Es fehlen Fieldset, Legend und Labels. Bei einer Verwendung eines angepassten Templates Codes (Einstellbar im Backend in der Formularverwaltung) können fehlende Komponenten hinzugefügt werden: Beispielcode: <div class="vie-formblk"> <fieldset><legend>Anfrage</legend> <div class="vie-formblk-content"> <p><label for="your-name">Ihr Name <span class="required">*</span></label> [text* your-name id:your-name] </p> <p><label for="organisation">Organistation <span class="required">*</span></label> [text* Organisation id:organisation]</p> <p><label for="your-email">E-Mail<span class="required">*</span></label> [email* your-email id:your-email] </p> <p><label for="your-subject">Betreff</label> [text your-subject id:your-subject] </p> <p><label for="your-message">Ihre Nachricht</label> [textarea your-message id:your-message] </p> Mag. Wolfram Huber www.web-tech.at Seite 5 Mittwoch, 07. Mai 2014 </div> </fieldset> </div> <p class="form-submit">[submit "Abschicken"]</p> Der Accessibility Check geht von der Verwendung der vorgeschlagenen Template Anpassungen aus (siehe Beispielcode) Wahrnehmbarkeit • Bilder: OK • Layout: OK • Überschriftenverwendung: OK • Labels: OK • Kontrast: OK • Skalierung: OK Bedienbarkeit • Tastaturbedienbarkeit: gegeben • Tabfocus bei Button gegeben Verständlichkeit • Keine nicht einstellbaren Texte aufgefallen • Browserkonsistenz gegeben (gängige Browser) Robustheit • HTML Code valide Fehlermeldungen • in der aktuellen CF7 Version nun deutlich verbessert (im vgl zur älteren Version) alte Position neue Position Es stehen nun auch WAI ARIA Attribute zur Verfügung (z.b. aria-invalid, aria-required) Screenreader • Kurzcheck Jaws 15: ARIA Attribute sorgen nun für eine deutliche Optimierung, keine weitern auffallenden Punkte, Mag. Wolfram Huber www.web-tech.at Seite 6 Mittwoch, 07. Mai 2014 3. WP Polls 3.1 Allgemeines Plugin Description: WP-Polls is extremely customizable via templates and css styles and there are tons of options for you to choose to ensure that WP-Polls runs the way you wanted. It now supports multiple selection of answers. Plugin Url: http://wordpress.org/plugins/wp-polls/ Requires: 2.8 or higher Compatible up to: 3.7.1 Last Updated: 2013-11-29 Downloads: 1,387,262 3.2 Accessibility Wahrnehmbarkeit • Bilder: OK (nicht in Verwendung) • Layout: OK (CSS) • Überschriftenverwendung: optimierbar - Pollheadline keine Legend oder Überschrift Ist aber leicht über Templates änderbar (siehe WP Polls Todos) • Labels: OK • Kontrast: OK (auch in Settings bedingt einstellbar) • Skalierung: OK (CSS) Bedienbarkeit • Tastaturbedienbarkeit: prinzipiell gegeben • Tabfocus bei „Vote“ Button optimierbar Verständlichkeit • Englische Inhalte müssen übersetzt werden siehe Punkt Todos • Browserkonsistenz gegeben (gängige Browser) Robustheit • Generell ist der generierte HTML Code valide Zwar aufgefallen aber nicht problematisch: - Duplicate ids bei Spezialfall „poll widget“ auf „poll page“ Screenreader • Kurzcheck Jaws 11: - Durch die „ajax“ Funktion bei „Vote Abgeben“ bleibt der Focus zwar im Bereich der Poll aber am Ende, dadurch ist nicht gleich klar, dass User sich hier das Ergebnis anschauen können - Ansonsten keine auffallenden Punkte 3.3 Optimierungsmöglichkeiten Poll Templates Poll Templates anpassen: wp-admin/admin.php?page=wp-polls/polls-templates.php Mag. Wolfram Huber www.web-tech.at Seite 7 Mittwoch, 07. Mai 2014 (inline Styles und Wording) Beispiel: Templates für das Umfrageformular Header des Umfrageformulars: <h2>%POLL_QUESTION%</h2><div id="polls-%POLL_ID%-ans" class="wp-polls-ans"><ul class="wppolls-ul" style="margin: 10px 0 15px 0px;"> Body des Umfrageformulars: <li><input type="%POLL_CHECKBOX_RADIO%" id="poll-answer-%POLL_ANSWER_ID%" name="poll_%POLL_ID%" value="%POLL_ANSWER_ID%" /> <label for="poll-answer%POLL_ANSWER_ID%">%POLL_ANSWER%</label></li> Footer des Umfrageformulars: </ul><p><input type="button" name="vote" value="Abstimmen" class="Buttons" onclick="poll_vote(%POLL_ID%);" /></p><p ><a href="#ViewPollResults" onclick="poll_result(%POLL_ID%); return false;">Ergebnisse ansehen</a></p></div> Template des Umfrageergebnisses Header des Umfrageergebnisses: <h2>%POLL_QUESTION%</h2><div id="polls-%POLL_ID%-ans" class="wp-polls-ans"><ul class="wppolls-ul" style="margin: 10px 0 15px 0px;"> Body des Umfrageergebnisses: <li>%POLL_ANSWER% <small>(%POLL_ANSWER_PERCENTAGE%%, %POLL_ANSWER_VOTES% Stimmen)</small><div class="pollbar" style="width: %POLL_ANSWER_IMAGEWIDTH%%;" title="%POLL_ANSWER_TEXT% (%POLL_ANSWER_PERCENTAGE%% | %POLL_ANSWER_VOTES% Stimmen)"></div></li> Body des Umfrageergebnisses: <li><strong><i>%POLL_ANSWER% <small>(%POLL_ANSWER_PERCENTAGE%%, %POLL_ANSWER_VOTES% Stimmen)</small></i></strong><div class="pollbar" style="width: %POLL_ANSWER_IMAGEWIDTH%%;" title="Sie haben für diese Antwort votiert %POLL_ANSWER_TEXT% (%POLL_ANSWER_PERCENTAGE%% | %POLL_ANSWER_VOTES% Stimmen)"></div></li> Footer des Umfrageergebnisses: </ul><p>Gesamtstimmen: <strong>%POLL_TOTALVOTERS%</p></div> Footer des Umfrageergebnisses: Wird angezeigt, wenn der Benutzer NICHT abgestimmt hat </ul><p>Gesamtstimmen: <strong>%POLL_TOTALVOTERS%</strong></p><p><a href="#VotePoll" onclick="poll_booth(%POLL_ID%); return false;" title="Bei dieser Umfrage abstimmen">Vote</a></p></div> Template des Umfragearchivs Link zum Umfragearchiv Mag. Wolfram Huber www.web-tech.at Seite 8 Mittwoch, 07. Mai 2014 <ul><li><a href="%POLL_ARCHIVE_URL%">Umfragen Archiv</a></li></ul> Individueller Umfrage-Header Individueller Umfrage-Footer <p>Start Datum: %POLL_START_DATE%<br />Ende Datum: %POLL_END_DATE%</p> Header der Seitennummerierung Footer der Seitennummerierung Verschiedene Umfrage-Templates Umfrage deaktiviert Derzeit sind keine Umfragen aktiv. Umfragefehler Ein Fehler ist aufgetreten. Mag. Wolfram Huber www.web-tech.at Seite 9 Mittwoch, 07. Mai 2014 4. My Calendar 4.1 Allgemeines Plugin Description: My Calendar provides event management with richly customizable ways to display events. The plug-in can support individual event calendars within WordPress Multisite, multiple calendars displayed by categories, locations or author, or simple lists of upcoming events. Easy to use for anybody, My Calendar provides enormous potential for developers needing a custom calendar interface. Plugin Url: http://wordpress.org/plugins/my-calendar/ Requires: 3.3.0 or higher Compatible up to: 3.7.0 Last Updated: 2013-10-29 Downloads: 327,072 4.2 Accessibility Die komplexe Kalenderdarstellung in Form einer Tabelle ist für Screenreaderuser nicht ganz optimal. Diese Art der Darstellung ist aber für Web Kalender „state of the art“. Im Backend des Kalender Plugins kann aber eine zusätzliche alternative Listendarstellung eingestellt werden. Dies ist stark anzuraten. Wahrnehmbarkeit • Bilder: Teilweise OK Kategoriebilder haben Alt Eventbilder haben keinen Alttext • Layout: OK (Listenansicht zusätzlich notwendig) • Überschriftenverwendung: OK (nach leichter Anpassung in Template) • Kontrast: OK • Skalierung: OK Bedienbarkeit • Tastaturbedienbarkeit: gegeben • Tabfocus gegeben Verständlichkeit • Keine nichteinstellbaren Texte aufgefallen Ausgenommen: Event Details: Map to, Visit website • Browserkonsistenz gegeben (gängige Browser) Robustheit • HTML Code valide Screenreader • Kurzcheck Jaws 11: keine auffallenden Punkte Der Entwickler wurde informiert und hat relativ schnell darauf reagiert: Mag. Wolfram Huber www.web-tech.at Seite 10 Mittwoch, 07. Mai 2014 http://wordpress.org/support/topic/accessibility-alt-attribut-event-detail-empty?replies=2#post5087228 ... and is going to be fixed in the next release of My Calendar, which is in progress... Eine Alternative Listendarstellung sollte bei allen Projekten im Sinne einer zusätzlichen alternativen Inhaltsdarstellung aktiviert werden. Mag. Wolfram Huber www.web-tech.at Seite 11 Mittwoch, 07. Mai 2014 5. bbPress 5.1 Allgemeines Plugin Description: bbPress is forum software, made the WordPress way Plugin Url: http://wordpress.org/plugins/bbpress/ Requires: 3.6 or higher Compatible up to: 3.8 Last Updated: 2014-1-11 5.2Accessibility Wahrnehmbarkeit • Bilder größtenteils OK: manche Bilder haben leere Alt Text (Benutzerbilder), durch eine relative Nähe im Code zum Usernamen ist das aber an dieser Stelle nicht weiter dramatisch • Layout: unpassendes Listenlayout größtenteils nun durch Tabellenlayout ersetzt • Überschriftenverwendung: Forentitel, Topictitel sind nun Überschriften Kontrast: OK • Skalierung nun besser: o CSS Überschreibungen im Haupttheme (Version 2.1) • Menühighlighting und Breadcrumb: etwas problematisch - Der Menüpunkt Blog wird gleichzeitig mit dem Menüpunkt Foren gehighlighted. Blog bleibt dann fälschlicherweise auch bei tieferen bbPress Strukturen (Topics etc.) statt Foren bestehen generell gibt es ein Problem mit der Verwendung von Custom Post Types ein Highlighting Problem siehe z.b. http://wordpress.org/support/topic/blog-tab-gets-highlighted-in-navmenu-for-custom-post-types oder http://wordpress.org/support/topic/plugin-bbpresswrong-breadcrumbs - Das Problem für bbPress ist bekannt und wird wahrscheinlich in einer der kommenden bbPress Versionen gelöst siehe https://bbpress.trac.wordpress.org/ticket/2204 Bedienbarkeit • Tastaturbedienbarkeit generell gegeben • Tabindex Problem lt. erster Evaluierung nun etwas entschärft allerdings nicht komplett (siehe 6.3.2). Ein Workaround über Javascript in Childthemes ist denkbar. • Tabfocus ok Verständlichkeit • Keine nichteinstellbaren Texte aufgefallen • Browserkonsistenz gegeben (gängige Browser) Robustheit • HTML Code weitgehend valide Mag. Wolfram Huber www.web-tech.at Seite 12 Mittwoch, 07. Mai 2014 Screenreader • Kurzcheck Jaws 15: generell sind Foren für nicht visuelle ungeübte Nutzer etwas schwer zu bedienen ansonsten keine weiteren auffallenden Punkte 5.3 Adaption der bbPress Themefiles Eine Adaption des default bbPress Themes wurde durchgeführt und auf github bereitgestellt. Integration im Themes Folder möglich. https://github.com/wozo/bbpress-Templates-wien 6. NextGEN Gallery 6.1 Allgemeines Plugin Description: The most popular WordPress gallery plugin and one of the most popular plugins of all time with over 7.5 million downloads. Plugin Url: http://wordpress.org/plugins/nextgen-gallery/ Requires: 3.6.1 or higher (Version 2.0.40) Compatible up to: 3.7.1 Last Updated: 2013-11-26 Downloads: 9,120,843 6.2 Accessibility Mit ngg ist es möglich eigene Templates für die Ausgabe einer Gallery zu gestalten (siehe auch: http://www.nextgen-gallery.com/templates/) bzw. gib es eine Reihe von Plugins welche Templates für ngg anbieten (z.b. JJ NextGen JQuery Carousel, JJ NextGen JQuery Cycle, JJ NextGen JQuery Slider, NextGEN-Galleryview etc.). Anmerkung: • Getestet wurden die "Default" Ausgaben (Albumliste, Galleryliste, Detail) • Die Default Slideshow der ngg ist derzeit aus Accessibility Gründen unbrauchbar und wurde nicht weiter getestet Wahrnehmbarkeit • Bilder: OK • Layout: optimierbar Die Bilder oder Albenauflistungen werden mittels <DIV> layoutiert. Eine gestaltete Liste <UL> wäre günstiger. • Überschriftenverwendung: Grundsätzlich wird eine Gallery mittels Shortcode in ein Inhaltselement eingefügt. Einleitende Überschriften können also über die WP RTE gesetzt werden. In der Albumübersicht sind die Überschriften der Gallery Titels nur optisch formatiert (fontsize). Hier würde sich eine Überschrift <h2>, <h3> besser eignen • Kontrast: OK Mag. Wolfram Huber www.web-tech.at Seite 13 Mittwoch, 07. Mai 2014 • Skalierung: OK Bedienbarkeit • Tastaturbedienbarkeit: gegeben (Pfeiltasten / ESC in der • Tabfocus: optimierbar (nur default Outline bei Weiterblättern, Bilder vergrößern mittels Tab Focus) Verständlichkeit • Keine nichteinstellbaren Texte aufgefallen • Browserkonsistenz gegeben (gängige Browser) Robustheit • HTML Code valide Screenreader • Kurzcheck Jaws 15: keine auffallenden Punkte Mag. Wolfram Huber www.web-tech.at Seite 14 Mittwoch, 07. Mai 2014 7. NextGEN Gallery Voting 7.1 Allgemeines Plugin Description: Adds the ability for users to vote and rate your NextGEN Images. Simple options give you the ability to limit who can vote on what. Plugin Url: http://wordpress.org/plugins/nextgen-gallery-voting/ Requires: 2.9.1 or higher Compatible up to: 3.8 Last Updated: 2013-12-23 Downloads: 83,705 Die Darstellung des Votings orientiert sich stark an der Darstellung der Gallerys da das NGG Plugin als Grundlage für das Voting Plugin verwendet wird.. Alle Punkte welche für die Gallery gelten sind auch hier zu Berücksichtigen 7.2 Accessibility Anmerkung: • Getestet wurden die drei Votingarten (Bilder Voting) Wahrnehmbarkeit • Bilder: OK Ausgenommen "Loading Image" hier ist kein Alt Text vorhanden • Layout: OK • Kontrast: OK • Skalierung: OK Bedienbarkeit • Tastaturbedienbarkeit: grundsätzlich gegeben • Tabfocus: leicht optimierbar (nur default Outline bei like/dislike) Verständlichkeit • Sprachauszeichnung etwas problematisch da das Plugin nicht per default translateable ist z.b. "3 Stars out of 5" • Browserkonsistenz gegeben (gängige Browser) Robustheit • HTML Code nicht valide & statt & Fehler -> zwar nicht dramatisch aber vorhanden Screenreader • Kurzcheck Jaws 15: eine Kurzeinleitung vor dem jeweiligen Voting wie bei der " Drop Down Voting" Variante ala "rate this image" wäre auch bei den anderen Voting Varianten vorteilhaft (event. visuell verborgen) Mag. Wolfram Huber www.web-tech.at Seite 15 Mittwoch, 07. Mai 2014 8. All-in-One Event Calendar 8.1 Allgemeines Plugin Description: A calendar system with month, week, day, agenda views; upcoming events widget, color-coded categories, recurrence, and import/export of .ics feeds. Plugin Url: http://wordpress.org/plugins/all-in-one-event-calendar/ Requires: 3.2 or higher Compatible up to: 3.7.1 Last Updated: 2013-11-1 Downloads: 517,471 8.2 Accessibility Getestet wurde die Integration der Pluginversion 1.10.5 "Lite" Die komplexe Kalenderdarstellung in Form einer Tabelle ist für Screenreaderuser nicht ganz optimal. Diese Art der Darstellung ist aber für Web Kalender „state of the art“. Im Backend des Kalender Plugins kann aber eine zusätzliche alternative Listendarstellung "Agenda" eingestellt werden. Dies ist stark anzuraten. Wahrnehmbarkeit • Bilder: größtenteils OK das "in Google Kalender abonnieren" Icon hat keinen ALT Text • Layout: OK übliches Tablelayout bei Monatsübersicht, Listen bei Agenda • Kontrast: teilweise Problematisch Wochentage haben ein Kontrastverhältnis von 2,46:1 (soll 4,5:1) Wochennummern haben ein Kontrastverhältnis von 2,18:1 (soll 4,5:1) • Skalierung: Problematisch absolute px Werte im Calendar Bereich • Menühighlighting und Breadcrumb: etwas problematisch Bedienbarkeit • Tastaturbedienbarkeit: nur teilweise OK - der Kategorie Filter bei der Monatsübersicht lässt sich nicht mit Maus bedienen - die Events in der Agenda Ansicht lassen sich nur mit Maus aufklappen • Tabfocus: optimierbar (häufig nur default Outline) Verständlichkeit • Sprachauszeichnung etwas problematisch da nicht alle Begriffe in Deutsch übersetzt sind z.b. "Back to Calendar", "View Full-size Map" etc. • Browserkonsistenz gegeben (gängige Browser) Robustheit Mag. Wolfram Huber www.web-tech.at Seite 16 Mittwoch, 07. Mai 2014 • HTML Code nicht valide ca. 10 Fehler Screenreader • Kurzcheck Jaws 15: keine weiteren auffallenden Punkte Mag. Wolfram Huber www.web-tech.at Seite 17 Mittwoch, 07. Mai 2014 9. ALO EasyMail Newsletter 9.1 Allgemeines Plugin Description: To send newsletters. Features: collect subscribers on registration or with an ajax widget, mailing lists, cron batch sending, multilanguage. Plugin Url: http://wordpress.org/plugins/alo-easymail/ Requires: 3.6 or higher Compatible up to: 3.8 Last Updated: 2014-1-22 Downloads: 246,632 9.2 Accessibility Default bestehen die Newsletter Frontend Templates aus Standard Wordpress Seiten. Ein Custom Post Type "newsletter" wird verwendet Das Anmelde Widget wurde im Zuge dieser Evaluierung etwas genauer betrachtet Wahrnehmbarkeit • Layout: größtenteils OK Tablle im NL Widget nicht unbedingt notwendig aber auch nicht sehr störend • Kontrast: OK • Skalierung: OK Bedienbarkeit • Tastaturbedienbarkeit: OK • Tabfocus: OK Verständlichkeit • Sprachauszeichnung keine nichteinstellbaren Texte gefunden • Browserkonsistenz gegeben (gängige Browser) Robustheit • HTML Code valide Screenreader • Kurzcheck Jaws 15: keine weiteren auffallenden Punkte Mag. Wolfram Huber www.web-tech.at Seite 18 Mittwoch, 07. Mai 2014