WORDPRESS. Plugin Evaluierungen und Anpassungen Auszug

Transkript

1 WORDPRESS Plugin Evaluierungen und Anpassungen Auszug Jänner 2014

2 Inhalt 1. "2-Click-Socialmedia-Buttons" Allgemeines Accessibility getätigte Schritte Contact Form Allgemeines Accessibility WP Polls Allgemeines Accessibility Optimierungsmöglichkeiten My Calendar Allgemeines Accessibility bbpress Allgemeines Accessibility Adaption der bbpress Themefiles NextGEN Gallery Allgemeines Accessibility NextGEN Gallery Voting Allgemeines Accessibility All-in-One Event Calendar Allgemeines Accessibility ALO EasyMail Newsletter Allgemeines Accessibility Mag. Wolfram Huber Seite 2

3 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: Requires: 3.4 or higher Compatible up to: 3.8-alpha Last Updated: Downloads: 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 Mag. Wolfram Huber Seite 3

4 Fork: Version ( wurde mittels Fork modifiziert: Geänderte Files im Plugin: socialshareprivacy-min.css socialshareprivacy.css social_bookmarks-min.js social_bookmarks.js Mag. Wolfram Huber Seite 4

5 2. Contact Form 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: Requires: 3.6 or higher Compatible up to: 3.8 Last Updated: Downloads: 14,589, 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- "> <span class="required">*</span></label> [ * your- id:your- ] </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 Seite 5

6 </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 Seite 6

7 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: Requires: 2.8 or higher Compatible up to: Last Updated: Downloads: 1,387, 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 Seite 7

8 (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 Seite 8

9 <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 Seite 9

10 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: Requires: or higher Compatible up to: Last Updated: Downloads: 327, 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 Seite 10

11 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 Seite 11

12 5. bbpress 5.1 Allgemeines Plugin Description: bbpress is forum software, made the WordPress way Plugin Url: Requires: 3.6 or higher Compatible up to: 3.8 Last Updated: Accessibility 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. oder - Das Problem für bbpress ist bekannt und wird wahrscheinlich in einer der kommenden bbpress Versionen gelöst siehe 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 Seite 12

13 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 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: Requires: or higher (Version ) Compatible up to: Last Updated: Downloads: 9,120, Accessibility Mit ngg ist es möglich eigene Templates für die Ausgabe einer Gallery zu gestalten (siehe auch: 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 Seite 13

14 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 Seite 14

15 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: Requires: or higher Compatible up to: 3.8 Last Updated: 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 Seite 15

16 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: Requires: 3.2 or higher Compatible up to: Last Updated: Downloads: 517, Accessibility Getestet wurde die Integration der Pluginversion "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 Seite 16

17 HTML Code nicht valide ca. 10 Fehler Screenreader Kurzcheck Jaws 15: keine weiteren auffallenden Punkte Mag. Wolfram Huber Seite 17

18 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: Requires: 3.6 or higher Compatible up to: 3.8 Last Updated: Downloads: 246, 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 Seite 18