Hallo,
unser Projekt soll Barrierefrei werden. Alle Entscheidungen wie wir was wo geändert haben, führen wir hier in einem Thema zusammen.
Wenn du bei der Umsetzung helfen möchtest, haben wir in unserem Blog eine Anleitung zur Mitarbeit veröffentlicht.
Wie funktioniert eine menschenzentrierte Arbeitskultur bei einem Open-Source-Projekt?
https://blog.myoos.de/wie-funktioniert- ... e-projekt/
Zitat:
Wie kann ich mich an dem MyOOS beteiligen?
Es gibt verschiedene Möglichkeiten, wie du dich an unserem Open-Source-Projekt beteiligen kannst, je nach deinem Interesse, deinem Können und deiner Verfügbarkeit. Hier sind einige Schritte, die du befolgen kannst, um einen Beitrag zu leisten:
Wähle eine Aufgabe aus, an der du arbeiten möchtest. Du kannst z.B. einen Fehler melden oder beheben, eine Funktion vorschlagen oder implementieren, die Dokumentation verbessern oder übersetzen, Tests schreiben oder durchführen oder Feedback geben. Versuche, eine Aufgabe zu wählen, die deinem Können und deiner Zeit entspricht und die einen Mehrwert für das Projekt hat.
Erstelle einen Fork des Projekts und arbeite an deiner Aufgabe in einer eigenen Branch. Folge dabei den Anweisungen und Standards des Projekts für das Schreiben und Testen von Code oder anderen Inhalten. Halte deinen Fork auf dem neuesten Stand mit dem Originalprojekt und vermeide Konflikte mit anderen Änderungen.
Erstelle einen Pull Request für deine Aufgabe und warte auf Feedback oder Review von den Projekt-Maintainern oder anderen Mitwirkenden. Sei offen für Kritik und Vorschläge zur Verbesserung deines Beitrags und reagiere höflich und konstruktiv auf Kommentare oder Fragen. Sei geduldig und verständnisvoll, wenn dein Pull Request nicht sofort akzeptiert wird oder weitere Änderungen erforderlich sind.
Feiere deinen Beitrag und bedanke dich bei denen, die dir geholfen haben. Wenn dein Pull Request akzeptiert wird, kannst du stolz auf deine Arbeit sein und dich der Liste der Mitwirkenden des Projekts anschließen. Vergiss nicht, dich bei denjenigen zu bedanken, die dir Feedback oder Unterstützung gegeben haben oder die dein Interesse an dem Projekt geweckt haben.
https://blog.myoos.de/wie-funktioniert- ... beteiligen
Viele Grüße
Ralf
Barrierefreiheit beim MyOOS Projekt
Re: Barrierefreiheit beim MyOOS Projekt
Hallo,
Fehler:
Um die Zoomfunktion für unsere Nutzerinnen und Nutzer zu ermöglichen, sollten wir folgende Schritte beachten:
- Verwende im <meta name="viewport">-Element nicht das Attribut user-scalable="no". Dieses Attribut verhindert, dass die Nutzerinnen und Nutzer die Seite vergrößern oder verkleinern können.
- Verwende im <meta name="viewport">-Element ein maximum-scale-Attribut, das mindestens 5 ist. Dieses Attribut legt fest, wie viel die Nutzerinnen und Nutzer die Seite maximal vergrößern können. Ein Wert von 5 bedeutet, dass die Seite bis zu fünfmal so groß wie die ursprüngliche Größe dargestellt werden kann.
- Verwende im <meta name="viewport">-Element ein minimum-scale-Attribut, das mindestens 0.1 ist. Dieses Attribut legt fest, wie viel die Nutzerinnen und Nutzer die Seite minimal verkleinern können. Ein Wert von 0.1 bedeutet, dass die Seite bis zu zehnmal so klein wie die ursprüngliche Größe dargestellt werden kann.
Ein Beispiel für ein barrierefreies <meta name="viewport">-Element wäre:
Dieses Element passt die Seitenbreite an die Gerätebreite an, setzt die Anfangsskalierung auf 1.0 und erlaubt den Nutzerinnen und Nutzern, die Seite zwischen 0.1 und 5.0 zu skalieren.
Viele Grüße
Ralf
Fehler:
Code: Alles auswählen
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">
- Verwende im <meta name="viewport">-Element nicht das Attribut user-scalable="no". Dieses Attribut verhindert, dass die Nutzerinnen und Nutzer die Seite vergrößern oder verkleinern können.
- Verwende im <meta name="viewport">-Element ein maximum-scale-Attribut, das mindestens 5 ist. Dieses Attribut legt fest, wie viel die Nutzerinnen und Nutzer die Seite maximal vergrößern können. Ein Wert von 5 bedeutet, dass die Seite bis zu fünfmal so groß wie die ursprüngliche Größe dargestellt werden kann.
- Verwende im <meta name="viewport">-Element ein minimum-scale-Attribut, das mindestens 0.1 ist. Dieses Attribut legt fest, wie viel die Nutzerinnen und Nutzer die Seite minimal verkleinern können. Ein Wert von 0.1 bedeutet, dass die Seite bis zu zehnmal so klein wie die ursprüngliche Größe dargestellt werden kann.
Ein Beispiel für ein barrierefreies <meta name="viewport">-Element wäre:
Code: Alles auswählen
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.1, maximum-scale=5.0, user-scalable=yes" />Viele Grüße
Ralf
Re: Barrierefreiheit beim MyOOS Projekt
Hallo,
Fehler:
Um eine Schaltfläche barrierefrei zu gestalten, müssen wir ihr einen aussagekräftigen Namen geben, der den Zweck oder die Funktion der Schaltfläche beschreibt. Dies können wir mit dem `aria-label` Attribut tun, das einen Text für Screenreader bereitstellt. Zum Beispiel:
Dieser Code erzeugt eine Schaltfläche, die von Screenreadern als „Navigation öffnen oder schließen“ angesagt wird. Damit wissen die Nutzer, was die Schaltfläche bewirkt, wenn sie sie aktivieren.
Wir können auch das `aria-expanded` Attribut verwenden, um den Status der Schaltfläche anzugeben, ob das zugehörige Menü geöffnet oder geschlossen ist. Zum Beispiel:
Dieser Code erzeugt eine Schaltfläche, die von Screenreadern als „Navigation öffnen oder schließen, nicht erweitert“ angesagt wird. Wenn die Nutzer die Schaltfläche aktivieren und das Menü öffnen, müssen wir den Wert des `aria-expanded` Attributs auf `true` ändern, damit die Screenreader den neuen Status ansagen können.
Viele Grüße
Ralf
Fehler:
Code: Alles auswählen
<button class="nav-toggle"></button> Code: Alles auswählen
<button class="nav-toggle" aria-label="Navigation öffnen oder schließen"></button>Wir können auch das `aria-expanded` Attribut verwenden, um den Status der Schaltfläche anzugeben, ob das zugehörige Menü geöffnet oder geschlossen ist. Zum Beispiel:
Code: Alles auswählen
<button class="nav-toggle" aria-label="Navigation öffnen oder schließen" aria-expanded="false"></button>Viele Grüße
Ralf
Re: Barrierefreiheit beim MyOOS Projekt
Wir erhalten den Hinweis: Links haben keinen leicht erkennbaren Namen, weil unsere Links kein Text- oder aria-label-Attribut haben, das den Inhalt des Links beschreibt. Dies kann die Zugänglichkeit unserer Webseite beeinträchtigen, insbesondere für Benutzer von Screenreadern oder anderen Hilfsmitteln.
Um dieses Problem zu beheben, können wir eine der folgenden Optionen verwenden:
- Füge ein Textelement innerhalb des a-Tags hinzu, das den Link beschreibt, z.B. <a href="{$smarty.const.FACEBOOK_URL}" target="_blank" rel="noopener" class="m-color-white-opacity-0_5 m-color-white--hover">Facebook<i class="fa fa-facebook" aria-hidden="true"></i></a>. Wir können den Text mit CSS ausblenden oder verkleinern, wenn wir ihn nicht anzeigen möchten.
- Füge ein aria-label-Attribut zum a-Tag hinzu, das den Link beschreibt, z.B. <a href="{$smarty.const.FACEBOOK_URL}" target="_blank" rel="noopener" class="m-color-white-opacity-0_5 m-color-white--hover" aria-label="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>. Dies wird den Screenreadern den Link-Namen mitteilen, ohne ihn sichtbar zu machen.
- Füge ein title-Attribut zum a-Tag hinzu, das den Link beschreibt, z.B. <a href="{$smarty.const.FACEBOOK_URL}" target="_blank" rel="noopener" class="m-color-white-opacity-0_5 m-color-white--hover" title="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>. Dies wird einen Tooltip anzeigen, wenn der Benutzer mit der Maus über den Link fährt.
Das MyOOS Projekt verwendet aria-label-Attribut
Um dieses Problem zu beheben, können wir eine der folgenden Optionen verwenden:
- Füge ein Textelement innerhalb des a-Tags hinzu, das den Link beschreibt, z.B. <a href="{$smarty.const.FACEBOOK_URL}" target="_blank" rel="noopener" class="m-color-white-opacity-0_5 m-color-white--hover">Facebook<i class="fa fa-facebook" aria-hidden="true"></i></a>. Wir können den Text mit CSS ausblenden oder verkleinern, wenn wir ihn nicht anzeigen möchten.
- Füge ein aria-label-Attribut zum a-Tag hinzu, das den Link beschreibt, z.B. <a href="{$smarty.const.FACEBOOK_URL}" target="_blank" rel="noopener" class="m-color-white-opacity-0_5 m-color-white--hover" aria-label="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>. Dies wird den Screenreadern den Link-Namen mitteilen, ohne ihn sichtbar zu machen.
- Füge ein title-Attribut zum a-Tag hinzu, das den Link beschreibt, z.B. <a href="{$smarty.const.FACEBOOK_URL}" target="_blank" rel="noopener" class="m-color-white-opacity-0_5 m-color-white--hover" title="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>. Dies wird einen Tooltip anzeigen, wenn der Benutzer mit der Maus über den Link fährt.
Das MyOOS Projekt verwendet aria-label-Attribut
Re: Barrierefreiheit beim MyOOS Projekt
Wie kann ich meine Webseite barrierefrei gestalten?
Eine barrierefreie Webseite ist eine Webseite, die für alle Menschen zugänglich und nutzbar ist, unabhängig von ihren körperlichen oder geistigen Einschränkungen. Eine barrierefreie Webseite ermöglicht es auch Suchmaschinen, die Inhalte besser zu erfassen und zu indexieren. Um eine Webseite barrierefrei zu gestalten, gibt es einige Richtlinien und Tipps, die wir befolgen können. Hier sind einige davon:
- Textalternativen bereitstellen: Für jedes nicht-textuelle Element auf unserer Webseite, wie Bilder, Grafiken, Videos, Audiodateien, Formulare oder Buttons, sollten wir eine Textalternative anbieten, die den Inhalt oder die Funktion des Elements beschreibt. Dies hilft Menschen mit Seh- oder Hörbehinderung, die sich die Webseite vorlesen lassen oder Untertitel nutzen. Dies hilft auch Suchmaschinen, die Elemente zu verstehen und zu kategoriWirren. Wir können Textalternativen mit dem alt-Attribut für Bilder und Grafiken, dem title-Attribut für Links und Formularfelder, dem aria-label-Attribut für Buttons oder anderen interaktiven Elementen oder mit Untertiteln und Audiodeskriptionen für Videos und Audiodateien bereitstellen.
- Struktur einhalten: unsere Webseite sollte eine klare und logische Struktur haben, die es den Nutzern erleichtert, sich zu orientieren und die Informationen zu finden, die wir suchen. Wir sollten Überschriften mit h1, h2, h3 usw. kennzeichnen, um die Hierarchie der Inhalte anzuzeigen. Wir sollten Listen mit ul oder ol erstellen, um mehrere Punkte oder Optionen aufzulisten. Wir sollten Tabellen mit th und td verwenden, um Daten oder Informationen in einer strukturierten Weise darzustellen. Wir sollten auch einen sinnvollen Seitentitel und eine aussagekräftige URL für jede Seite verwenden.
- Kontrast und Farbe beachten: unsere Webseite sollte einen ausreichenden Kontrast zwischen dem Text und dem Hintergrund haben, damit Menschen mit Sehschwäche oder Farbenblindheit den Text leicht lesen können. Wir sollten auch nicht nur Farbe als Mittel zur Übermittlung von Informationen verwenden, sondern auch andere visuelle Hinweise wie Symbole, Formen oder Text hinzufügen. Wir sollten auch vermeiden, blinkende oder animierte Elemente zu verwenden, die Menschen mit Epilepsie oder anderen Empfindlichkeiten stören könnten.
- Navigation erleichtern: unsere Webseite sollte eine einfache und konsistente Navigation haben, die es den Nutzern ermöglicht, schnell zwischen den Seiten zu wechseln oder zu bestimmten Abschnitten zu springen. Wir sollten eine Brotkrumennavigation verwenden, um den Pfad der Nutzer auf unserer Webseite anzuzeigen. Wir sollten eine Suchfunktion anbieten, um den Nutzern zu helfen, das zu finden, was sie suchen. Wir sollten auch eine Skip-to-Content-Funktion bereitstellen, die es den Nutzern ermöglicht, direkt zum Hauptinhalt der Seite zu gelangen, ohne durch unwichtige Elemente wie Menüs oder Werbung navigieren zu müssen.
- Interaktion ermöglichen: unsere Webseite sollte eine reibungslose und fehlerfreie Interaktion mit den Nutzern ermöglichen, indem wir klare Anweisungen, Feedback und Hilfe anbietet. Wir sollten sicherstellen, dass alle interaktiven Elemente wie Links, Buttons oder Formulare mit der Tastatur bedienbar sind. Wir sollten auch sicherstellen, dass unsere Webseite responsiv ist und sich an verschiedene Bildschirmgrößen und Geräte anpasst. Wir sollten auch Fehlermeldungen anzeigen und Korrekturvorschläge machen, wenn die Nutzer falsche Eingaben machen oder Probleme bei der Ausführung von Aktionen haben.
Dies sind nur einige der wichtigsten Aspekte einer barrierefreien Webseite.
Wir haben noch viel vor uns...
Eine barrierefreie Webseite ist eine Webseite, die für alle Menschen zugänglich und nutzbar ist, unabhängig von ihren körperlichen oder geistigen Einschränkungen. Eine barrierefreie Webseite ermöglicht es auch Suchmaschinen, die Inhalte besser zu erfassen und zu indexieren. Um eine Webseite barrierefrei zu gestalten, gibt es einige Richtlinien und Tipps, die wir befolgen können. Hier sind einige davon:
- Textalternativen bereitstellen: Für jedes nicht-textuelle Element auf unserer Webseite, wie Bilder, Grafiken, Videos, Audiodateien, Formulare oder Buttons, sollten wir eine Textalternative anbieten, die den Inhalt oder die Funktion des Elements beschreibt. Dies hilft Menschen mit Seh- oder Hörbehinderung, die sich die Webseite vorlesen lassen oder Untertitel nutzen. Dies hilft auch Suchmaschinen, die Elemente zu verstehen und zu kategoriWirren. Wir können Textalternativen mit dem alt-Attribut für Bilder und Grafiken, dem title-Attribut für Links und Formularfelder, dem aria-label-Attribut für Buttons oder anderen interaktiven Elementen oder mit Untertiteln und Audiodeskriptionen für Videos und Audiodateien bereitstellen.
- Struktur einhalten: unsere Webseite sollte eine klare und logische Struktur haben, die es den Nutzern erleichtert, sich zu orientieren und die Informationen zu finden, die wir suchen. Wir sollten Überschriften mit h1, h2, h3 usw. kennzeichnen, um die Hierarchie der Inhalte anzuzeigen. Wir sollten Listen mit ul oder ol erstellen, um mehrere Punkte oder Optionen aufzulisten. Wir sollten Tabellen mit th und td verwenden, um Daten oder Informationen in einer strukturierten Weise darzustellen. Wir sollten auch einen sinnvollen Seitentitel und eine aussagekräftige URL für jede Seite verwenden.
- Kontrast und Farbe beachten: unsere Webseite sollte einen ausreichenden Kontrast zwischen dem Text und dem Hintergrund haben, damit Menschen mit Sehschwäche oder Farbenblindheit den Text leicht lesen können. Wir sollten auch nicht nur Farbe als Mittel zur Übermittlung von Informationen verwenden, sondern auch andere visuelle Hinweise wie Symbole, Formen oder Text hinzufügen. Wir sollten auch vermeiden, blinkende oder animierte Elemente zu verwenden, die Menschen mit Epilepsie oder anderen Empfindlichkeiten stören könnten.
- Navigation erleichtern: unsere Webseite sollte eine einfache und konsistente Navigation haben, die es den Nutzern ermöglicht, schnell zwischen den Seiten zu wechseln oder zu bestimmten Abschnitten zu springen. Wir sollten eine Brotkrumennavigation verwenden, um den Pfad der Nutzer auf unserer Webseite anzuzeigen. Wir sollten eine Suchfunktion anbieten, um den Nutzern zu helfen, das zu finden, was sie suchen. Wir sollten auch eine Skip-to-Content-Funktion bereitstellen, die es den Nutzern ermöglicht, direkt zum Hauptinhalt der Seite zu gelangen, ohne durch unwichtige Elemente wie Menüs oder Werbung navigieren zu müssen.
- Interaktion ermöglichen: unsere Webseite sollte eine reibungslose und fehlerfreie Interaktion mit den Nutzern ermöglichen, indem wir klare Anweisungen, Feedback und Hilfe anbietet. Wir sollten sicherstellen, dass alle interaktiven Elemente wie Links, Buttons oder Formulare mit der Tastatur bedienbar sind. Wir sollten auch sicherstellen, dass unsere Webseite responsiv ist und sich an verschiedene Bildschirmgrößen und Geräte anpasst. Wir sollten auch Fehlermeldungen anzeigen und Korrekturvorschläge machen, wenn die Nutzer falsche Eingaben machen oder Probleme bei der Ausführung von Aktionen haben.
Dies sind nur einige der wichtigsten Aspekte einer barrierefreien Webseite.
Wir haben noch viel vor uns...
Re: Barrierefreiheit beim MyOOS Projekt
Barrierefrei ist auf alle Fälle sehr gut. 
Re: Barrierefreiheit beim MyOOS Projekt
Hallo Mk70,
Barrierefreiheit sollte eigentlich eine Selbstverständlichkeit sein. ABER es sind leider oft nur Kleinigkeiten und man benötigt etwas Fachwissen. Zumindest richtige Werkzeuge zum Prüfen.
Golem schreibt in einem Artikel dazu
Nur die wenigsten Webshops sind schon barrierefrei
In zwei Jahren müssen Onlineshops und elektronische Geräte die Anforderungen zur Barrierefreiheit erfüllen. Bis dahin gibt es noch viel zu tun.
https://www.golem.de/news/untersuchung- ... 75379.html
Viele Grüße
Ralf
Barrierefreiheit sollte eigentlich eine Selbstverständlichkeit sein. ABER es sind leider oft nur Kleinigkeiten und man benötigt etwas Fachwissen. Zumindest richtige Werkzeuge zum Prüfen.
Golem schreibt in einem Artikel dazu
Nur die wenigsten Webshops sind schon barrierefrei
In zwei Jahren müssen Onlineshops und elektronische Geräte die Anforderungen zur Barrierefreiheit erfüllen. Bis dahin gibt es noch viel zu tun.
https://www.golem.de/news/untersuchung- ... 75379.html
Viele Grüße
Ralf
Re: Barrierefreiheit beim MyOOS Projekt
Hallo Ralf,
ich bin 2018 das erste Mal so richtig damit in Berührung gekommen, da ich für eine Theatergruppe eine Behindertenorganisation etwas machen sollte. Daraufhin habe ich mich mal eingelesen. Wie Du schon sagst, es sind oft nur Kleinigkeiten, die man selbst einbringen kann. Der Rest muss vom genutzten System kommen.
Ich habe irgendwo noch ´ne ganze Lnksammlung dazu. Und Optimierer nach Bau einer Website werden eh genutzt
ich bin 2018 das erste Mal so richtig damit in Berührung gekommen, da ich für eine Theatergruppe eine Behindertenorganisation etwas machen sollte. Daraufhin habe ich mich mal eingelesen. Wie Du schon sagst, es sind oft nur Kleinigkeiten, die man selbst einbringen kann. Der Rest muss vom genutzten System kommen.
Ich habe irgendwo noch ´ne ganze Lnksammlung dazu. Und Optimierer nach Bau einer Website werden eh genutzt
