language Platzhalter in js prepend verwenden

[phonon112358]

Das Problem ist, dass eine zuweisung über content im css nicht barrierefrei ist... aus demselben Grund habe ich auch die Hintergrund Bilder ausgeblendet. Mein Ziel ist ein möglichst barrierefreies Forum zu erstellen - phpBB3 ist eigentlich schon wirklich gut, was dies angeht (Listen statt Tabellen, meistens label attribute usw. - ein großes Lob an die Entwickler!)

Allerdings wundert es mich, dass es anscheinend nicht möglich ist, in javascript (bzw. speziell bei prepend) Platzhalter einzufügen, die dann richtig interpretiert werden... deshalb das ganze Thema!!!

Inzwischen habe ich zwar für die Postbuttons eine andere Idee (und werde diese natürlich posten, wenn ich sie umgesetzt haben werde), aber die fehlende Funktionalität überrascht mich - besonders, da ich ansonsten phpBB3 äußerst flexibel finde!

Ich würde mich freuen, benachrichtigt zu werden, wenn diese Funktionalität zur Verfügung steht, da ich sie auch an anderen Stellen in meinem style gerne verwenden würde...!

@Talk19zehn:

die Rechte würde ich unbedingt anpassen.

Ja - habe sie nur geändert gehabt, um meine Frage hier etwas zu verdeutlichen...
Vielen Dank nochmals für die Ideen!

[Talk19zehn]

Hi, was meinst du tatsächlich anhand (d)einer persönlichen Definition "barrierefrei"? Klar über die Farbe "Gelb" (Hover (Standard Prosilver)) kann man eine Barriere feststellen. Schriftgrößen, Stile etc. lassen sich doch im Browser bspw. ebenso konfigurieren. Die Entwickler sind aus meiner Sicht in der Hinsicht recht flexibel, das stimmt (so auch in "mobiler Ansicht und Funktion"). Uuuups: Technologien ändern sich heute eher in Schallgeschwindigkeit ....

Momentan kann ich auf deiner verlinkten Seite keinerlei Vorteil erkennen. Errungenschaften mobiler Ansichten und/oder Funktionen, wie der Sprung zum letzten Beitrag uvm. wurden z.Z. entfernt. Wer dort surft oder gar mobil unterwegs ist, hat mMn nun eher Sorgen. Ich erkenne keinen Vorteil.
Warum 50em?

BTW:
Änderungen im CSS füge ich additional hinzu.
Multi Lingual ist m.W. momentan nicht ohne (erheblichen) Mehraufwand änderbar, aber nicht im Standard verfügbar.

--- ??? ---> Alternativ: viewtopic.php?p=1345556#p1345556

Grüße

[phonon112358]

Danke für die Kritik!!
In prosilver sind allerdings beispielsweise alle Buttons als Hintergrundgrafiken eingebunden, was überhaupt nicht barrierefrei (egal nach welcher Definition) ist... sie werden weder im Kontrastmodus angezeigt noch von screenreadern vorgelesen und es ist auch nicht möglich, etwas wie einen Alternativtext dafür einzufügen (vgl. http://www.barrierefreies-webdesign.de/ ... modus.html - die in prosilver verwendeten title attribute für die entsprechenden Links sind zwar besser als gar nichts aber vgl. http://www.barrierefreies-webdesign.de/ ... efrei.html). Auch die in prosilver verwendeten Tabellen (zum Beispiel im ucp und mcp) sind nicht barrierefrei gestaltet und solche "Kleinigkeiten" gibt es noch ein paar...

Natürlich ist die mobile Ansicht für Barrierefreiheit besonders wichtig - aber hier verstehe ich deine Kritik noch nicht ganz: Mein style ist genauso responsiv und für mobile Geräte optimiert wie prosilver (er basiert ja darauf...). Die von dir angesprochenen Funktionen habe ich bewusst deaktiviert, da sie mMn sehr aufwendig sind, barrierefrei zu gestalten - ich habe mich mit ihnen aber noch nicht weiter befasst. mein style ist ja längst nicht fertig!!

Vielen Dank für den Link zur extension für die Übersetzung - diese sieht wirklich viel besser und einfacher aus... ich werde sie nachher einbauen...

Solltest du einen bereits existierenden style kennen, der noch barriereärmer als prosilver ist, wäre ich dir natürlich für einen Tipp dankbar...!

[Lehrling]

Schau mal hier rein: http://www.artodia.com/phpbb-31-styles/

[Talk19zehn]

Hi, also in 3.0 war der Screenreader m.W. gar kein all zu großes Problem. Okay in Sachen Semantik ....
Es gab auch Diskussionen, die ein Nichtsehender hier führte (Respekt!!) Das ist ewig her (phpBB 3.09 ff ?).
In 3.1 geht´s (teilweise) nicht? Das erschüttert mich jetzt doch. Es wird in jenen Fällen mit Tastenkombinationen gearbeitet. Hast du sie beibehalten, fehlen sie gar gänzlich im Ursprung?

In meinen Tests ist deine Seite nicht grundsätzlich "mobil geeignet" (momentaner Zugriff). --> Keine Kritik!
Responsive / adaptive ... , ja okay - stimmt ...
Randbemerkung:
http://www.ongray-design.de/forum/viewt ... t=adaptive

Es gab in 3.0 nur einen Style, der sich bspw. auch für Nichtsehende, Sehbehinderte, auch semantisch eignete. Der Autor, das Design ist leider unauffindbar. Ich denke, wenn das Interesse so groß ist, solltest du Kontakte zu den phpBB- Entwicklern knüpfen. Bedarf ist aus meiner Sicht nach deinen Schilderungen sodann alle Male gegeben.

LG


=======
P.S.:
Es dürfte ja nicht so schwer sein, Entwickler vom Bedarf zu überzeugen und letztlich eine Lücke zu schließen. Ich denke phpBB hat jene Chance, die nicht im Standard versäumt werden sollte.

Style Semantik --> u.a. für Blinde / Sehbehinderte ...
Das war die Diskussion: viewtopic.php?f=89&t=223418&hilit=Perlchamp
Möchte nur anfügen, dass es das Design im Ansatz mal gab. Mehr kann ich nicht dazu sagen.

[phonon112358]

vielen vielen Dank für die ganzen Links und Tipps!!! habe vorhin gerade dem ersteller des angesprochenen threads eine pn geschrieben - mal sehen ob er antwortet...
habe auch versucht bei area51 zu registrieren - aber dann kam jedes Mal ein php Fehler, der angeblich schon behoben ist (http://area51.phpbb.com/phpBB/viewtopic ... 66#p287066) - habe natürlich schon cache geleert usw.

könnte jemand hier mir einen Kontakt zu einem Entwickler vermitteln???

das mit den Tastaturkürzeln ist auch nicht optimal für Barrierefreiheit: http://www.barrierefreies-webdesign.de/ ... sskey.html
und in prosilver sind auch noch tabindex attribute drin (z. B. für login usw.), welche anscheinend die Bedienung über die Tastatur erleichtern sollen - aber genau das Gegenteil tun: sie verwirren den Benutzer mehr als das sie etwas bringen!!!

BTW: Ich bin selbst behindert, kann zwar sehen, bediene den Computer aber über eine Augensteuerung, wodurch ich zwar nicht ganz dieselben Anforderungen wie Blinde habe, diese aber wahrscheinlich etwas besser nachvollziehen kann...

[Talk19zehn]

Moin, moin, - mir fiel gerade noch ein, dass jenes Forum mal vorgestellt wurde: Schau mal
Maulwurfzone - Forum für Blinde und Sehbehinderte: viewtopic.php?f=67&t=233280

Evtl. ist auch das eine Möglichkeit, die du mit dem Autor power87 gemeinsam umsetzen kannst, um ein Design für phpBB-3.1.x zu erarbeiten. Ist nur so eine Idee.

Evtl. ist´s möglich einen der Entwickler, wie naderman oder nickvergessen über das Kontakformular anzuschreiben und deine Vorschläge, Ideen vorzutragen. Ob das in der Form erwünscht ist, entzieht sich meiner Information.
Siehe auch -> Mitglieder phpBB.com: https://www.phpbb.de/phpbbde/team.php#group111564

Vielleicht klappt es ja in den nächsten Tagen mit der Registrierung auf der AREA51.

LG

[phonon112358]

Danke für den Link zum maulwurfforum!! habe power87 eine pn geschrieben - mal sehen...!
Hier übrigens noch meine Alternativlösung für das ursprüngliche Problem mit den post-buttons: (Auszug aus viewtopic.php)

Code: Alles auswählen

		<!-- DEFINE $SHOW_POST_BUTTONS = (postrow.U_EDIT or postrow.U_DELETE or postrow.U_REPORT or postrow.U_INFO or postrow.U_QUOTE) -->
		        <!-- EVENT viewtopic_body_post_buttons_list_before -->
		<!-- IF not S_IS_BOT -->
			<!-- IF $SHOW_POST_BUTTONS -->
				<ul class="post-buttons">
					<!-- EVENT viewtopic_body_post_buttons_before -->
					<!-- IF postrow.U_EDIT -->
						<li>
							<a href="{postrow.U_EDIT}" title="{L_EDIT_POST}" class="button icon-button"><i class="fa fa-pencil-square-o"></i>
							<span class="responsive-hide2">{L_BUTTON_EDIT}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_DELETE -->
						<li>
							<a href="{postrow.U_DELETE}" title="{L_DELETE_POST}" class="button icon-button"><i class="fa fa-trash-o"></i>
							<span class="responsive-hide2">{L_DELETE_POST}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_REPORT -->
						<li>
							<a href="{postrow.U_REPORT}" title="{L_REPORT_POST}" class="button icon-button"><i class="fa fa-exclamation-triangle"></i><span class="responsive-hide2">{L_REPORT_POST}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_INFO -->
						<li>
							<a href="{postrow.U_INFO}" title="{L_INFORMATION}" class="button icon-button"><i class="fa fa-info"></i>
							<span class="responsive-hide2">{L_INFORMATION}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_QUOTE -->
						<li>
							<a href="{postrow.U_QUOTE}" title="{L_REPLY_WITH_QUOTE}" class="button icon-button"><i class="fa fa-quote-left"></i>
							<span class="responsive-hide2">{L_QUOTE}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- EVENT viewtopic_body_post_buttons_after -->
				</ul>
			<!-- ENDIF -->
		<!-- ENDIF -->
		<!-- EVENT viewtopic_body_post_buttons_list_after -->

im css:

Code: Alles auswählen

.responsive-hide2 {
	font-size: 0px;
}


@media all and (min-width: 2000px), all and (min-device-width: 2000px) {
.responsive-hide2 {
	font-size: inherit;
}
}

und natürlich muss man dann noch in der forum_fn.js die beiden if abfragen mit post-buttons so ändern dass sie nicht mehr wirken... (zum Beispiel, in dem man sie löscht). so wird in screenreadern immer die Beschreibung der Buttons vorgelesen - angezeigt wird sie aber nur auf großen Bildschirmen, dort passen die Buttons dann trotzdem noch gut in eine Zeile...!

[Talk19zehn]

Prima phonon112358, ich wünsche dir im Entwicklungsprozess viel Glück. Dein Mut, dein Interesse spricht für sich selbst. Wenn es Fortschritte gibt, freut mich das sehr!!!

Vielleicht hast du ja Glück mit der einen oder anderen Kontaktaufnahme. Es wäre aus meiner persönlichen Sicht durchaus erfreulich, wenn Betroffene gleichgesinnt agieren und die Entwickler der Software die Augen nicht verschließen, einen Konsens finden, den es mMn nicht zu vernachlässigen gilt.

Grüße

[phonon112358]

bin jetzt zufällig auf folgenden post gestoßen, der meine ursprünglich Frage doch noch positiv beantwortet: https://www.phpbb.com/community/viewtop ... &t=2293166
Ich habe es nun folgendermaßen geändert:
in der overall_header.html (bevor die ganzen css und javascript Dateien geladen werden):

Code: Alles auswählen

<script>
var options = '{LA_OPTIONS}';
</script>

ergänzt.
in der forum_fn.js die beiden Stellen mit post-buttons folgendermaßen abgeändert (Zeilen 480 ff. und 578 ff.):

Code: Alles auswählen

var selector = '.linklist:not(.navlinks, [data-skip-responsive]),' +
		'.postbody .post-buttons:not([data-skip-responsive])';
	$container.find(selector).each(function() {
		var $this = $(this),
			filterSkip = '.breadcrumbs, [data-skip-responsive]',
			filterLast = '.edit-icon, .quote-icon, [data-last-responsive]',
			$linksAll = $this.children(),
			$linksNotSkip = $linksAll.not(filterSkip), // All items that can potentially be hidden
			$linksFirst = $linksNotSkip.not(filterLast), // The items that will be hidden first
			$linksLast = $linksNotSkip.filter(filterLast), // The items that will be hidden last
			persistent = $this.attr('id') === 'nav-main', // Does this list already have a menu (such as quick-links)?
			html = '<li class="responsive-menu hidden"><a href="javascript:void(0);" class="responsive-menu-link"><span class="screenreader">'+options+'</a><div class="dropdown hidden"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>',
			slack = 3; // Vertical slack space (in pixels). Determines how sensitive the script is in determining whether a line-break has occured.

		// Add a hidden drop-down menu to each links list (except those that already have one)
		if (!persistent) {
			if ($linksNotSkip.is('.rightside')) {
				$linksNotSkip.filter('.rightside:first').before(html);
				$this.children('.responsive-menu').addClass('rightside');
			} else {
				$this.append(html);
			}
		}

Code: Alles auswählen

				if ($this.hasClass('post-buttons')) {
					$('.button', $menuContents).removeClass('button icon-button');
				$('.responsive-menu-link', $menu).addClass('button icon-button').prepend('<span><i class="fa fa-bars" title="'+options+'"></i></span>');
				}

Außerdem in der css Datei die oben beschriebene media query gelöscht und die Klasse screenreader folgendermaßen definiert (wobei ich im Gegensatz zu vorher nicht font-size: 0px gesetzt habe, das dies nicht in allen screenreadern vorgelesen werden würde - vgl. http://terrillthompson.com/tests/hiddencontent.html):

Code: Alles auswählen

.screenreader {    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

Natürlich habe ich dann auch noch ein paar weitere Änderungen in der css Datei und der viewtopic.html Datei gemacht, damit es optisch besser aussieht... aber mit diesen will ich euch nicht zumüllen

Zusammenfassung: Damit man phpBB Platzhalter in js Dateien verwenden kann, ist es notwendig, sie vor dem laden der jeweiligen js Datei als js Variablen bereits in der html/php Datei zu definieren!!!

@Talk19zehn: Vielen Dank nochmals für die vielen Ratschläge und natürlich für die Zukunftswünsche!