├── docs
├── 03-inhalte
│ ├── Browse.plb
│ ├── headingsmap.jpg
│ ├── headingsmap.png
│ ├── links-einfuegen.jpg
│ ├── listen-tinymce.jpg
│ ├── tables-tinymce.jpg
│ ├── embedding-youtube.jpg
│ ├── embedding-slideshare.jpg
│ ├── embedding-ueber-url1.jpg
│ ├── embedding-ueber-url2.jpg
│ ├── seitensprache-aendern.png
│ └── ueberschriften-tinymce.jpg
├── 07-tests
│ ├── wcag-em-tool.png
│ └── wcag-em-process.png
├── 04-entwicklung
│ ├── strukturierte-daten-schema-w3c.png
│ ├── strukturierte-daten-lmu-infopanel.png
│ ├── strukturierte-daten-fau-oeffnungszeiten.png
│ └── 04-browser-add-ons-htmltable.md
├── 01-vorwort.md
├── 01-toc.md
├── 09-impressum.md
├── 03-inhalte-spickzettel.md
├── 06-satzungen.md
├── 04-browser-add-ons.md
├── 08-referenzen.md
├── 07-tests.md
├── 04-entwicklung.md
├── 02-einfuehrung.md
├── 05-recht.md
└── 03-inhalte.md
├── export
├── 03-inhalte
│ ├── Browse.plb
│ ├── headingsmap.jpg
│ ├── headingsmap.png
│ ├── links-einfuegen.jpg
│ ├── listen-tinymce.jpg
│ ├── tables-tinymce.jpg
│ ├── embedding-youtube.jpg
│ ├── embedding-slideshare.jpg
│ ├── embedding-ueber-url1.jpg
│ ├── embedding-ueber-url2.jpg
│ ├── seitensprache-aendern.png
│ └── ueberschriften-tinymce.jpg
├── 07-tests
│ ├── wcag-em-tool.png
│ └── wcag-em-process.png
├── leitfaden-barrierefreiheit.pdf
├── leitfaden-barrierefreiheit.zip
├── leitfaden-barrierefreiheit.docx
├── leitfaden-barrierefreiheit.epub
└── 04-entwicklung
│ ├── strukturierte-daten-schema-w3c.png
│ ├── strukturierte-daten-lmu-infopanel.png
│ ├── strukturierte-daten-fau-oeffnungszeiten.png
│ └── 04-browser-add-ons-htmltable.md
├── templates
├── custom-reference.docx
└── pandoc.css
├── scripts
├── leitfaden-barrierefreiheit.zip
├── create-full.bat
└── create-full.sh
├── nbproject
├── project.properties
└── project.xml
├── .gitignore
├── metadata
├── title.md
└── metadata.yaml
├── README.md
└── LICENSE
/docs/03-inhalte/Browse.plb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/Browse.plb
--------------------------------------------------------------------------------
/docs/07-tests/wcag-em-tool.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/07-tests/wcag-em-tool.png
--------------------------------------------------------------------------------
/export/03-inhalte/Browse.plb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/Browse.plb
--------------------------------------------------------------------------------
/docs/03-inhalte/headingsmap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/headingsmap.jpg
--------------------------------------------------------------------------------
/docs/03-inhalte/headingsmap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/headingsmap.png
--------------------------------------------------------------------------------
/export/07-tests/wcag-em-tool.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/07-tests/wcag-em-tool.png
--------------------------------------------------------------------------------
/templates/custom-reference.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/templates/custom-reference.docx
--------------------------------------------------------------------------------
/docs/03-inhalte/links-einfuegen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/links-einfuegen.jpg
--------------------------------------------------------------------------------
/docs/03-inhalte/listen-tinymce.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/listen-tinymce.jpg
--------------------------------------------------------------------------------
/docs/03-inhalte/tables-tinymce.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/tables-tinymce.jpg
--------------------------------------------------------------------------------
/docs/07-tests/wcag-em-process.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/07-tests/wcag-em-process.png
--------------------------------------------------------------------------------
/export/03-inhalte/headingsmap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/headingsmap.jpg
--------------------------------------------------------------------------------
/export/03-inhalte/headingsmap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/headingsmap.png
--------------------------------------------------------------------------------
/export/07-tests/wcag-em-process.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/07-tests/wcag-em-process.png
--------------------------------------------------------------------------------
/docs/03-inhalte/embedding-youtube.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/embedding-youtube.jpg
--------------------------------------------------------------------------------
/export/03-inhalte/links-einfuegen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/links-einfuegen.jpg
--------------------------------------------------------------------------------
/export/03-inhalte/listen-tinymce.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/listen-tinymce.jpg
--------------------------------------------------------------------------------
/export/03-inhalte/tables-tinymce.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/tables-tinymce.jpg
--------------------------------------------------------------------------------
/export/leitfaden-barrierefreiheit.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/leitfaden-barrierefreiheit.pdf
--------------------------------------------------------------------------------
/export/leitfaden-barrierefreiheit.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/leitfaden-barrierefreiheit.zip
--------------------------------------------------------------------------------
/docs/03-inhalte/embedding-slideshare.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/embedding-slideshare.jpg
--------------------------------------------------------------------------------
/docs/03-inhalte/embedding-ueber-url1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/embedding-ueber-url1.jpg
--------------------------------------------------------------------------------
/docs/03-inhalte/embedding-ueber-url2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/embedding-ueber-url2.jpg
--------------------------------------------------------------------------------
/export/03-inhalte/embedding-youtube.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/embedding-youtube.jpg
--------------------------------------------------------------------------------
/export/leitfaden-barrierefreiheit.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/leitfaden-barrierefreiheit.docx
--------------------------------------------------------------------------------
/export/leitfaden-barrierefreiheit.epub:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/leitfaden-barrierefreiheit.epub
--------------------------------------------------------------------------------
/scripts/leitfaden-barrierefreiheit.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/scripts/leitfaden-barrierefreiheit.zip
--------------------------------------------------------------------------------
/docs/03-inhalte/seitensprache-aendern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/seitensprache-aendern.png
--------------------------------------------------------------------------------
/docs/03-inhalte/ueberschriften-tinymce.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/03-inhalte/ueberschriften-tinymce.jpg
--------------------------------------------------------------------------------
/export/03-inhalte/embedding-slideshare.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/embedding-slideshare.jpg
--------------------------------------------------------------------------------
/export/03-inhalte/embedding-ueber-url1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/embedding-ueber-url1.jpg
--------------------------------------------------------------------------------
/export/03-inhalte/embedding-ueber-url2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/embedding-ueber-url2.jpg
--------------------------------------------------------------------------------
/export/03-inhalte/seitensprache-aendern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/seitensprache-aendern.png
--------------------------------------------------------------------------------
/export/03-inhalte/ueberschriften-tinymce.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/03-inhalte/ueberschriften-tinymce.jpg
--------------------------------------------------------------------------------
/docs/04-entwicklung/strukturierte-daten-schema-w3c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/04-entwicklung/strukturierte-daten-schema-w3c.png
--------------------------------------------------------------------------------
/docs/04-entwicklung/strukturierte-daten-lmu-infopanel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/04-entwicklung/strukturierte-daten-lmu-infopanel.png
--------------------------------------------------------------------------------
/export/04-entwicklung/strukturierte-daten-schema-w3c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/04-entwicklung/strukturierte-daten-schema-w3c.png
--------------------------------------------------------------------------------
/export/04-entwicklung/strukturierte-daten-lmu-infopanel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/04-entwicklung/strukturierte-daten-lmu-infopanel.png
--------------------------------------------------------------------------------
/nbproject/project.properties:
--------------------------------------------------------------------------------
1 | include.path=${php.global.include.path}
2 | php.version=PHP_74
3 | source.encoding=UTF-8
4 | src.dir=.
5 | tags.asp=false
6 | tags.short=false
7 | web.root=.
8 |
--------------------------------------------------------------------------------
/docs/04-entwicklung/strukturierte-daten-fau-oeffnungszeiten.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/docs/04-entwicklung/strukturierte-daten-fau-oeffnungszeiten.png
--------------------------------------------------------------------------------
/export/04-entwicklung/strukturierte-daten-fau-oeffnungszeiten.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RZ-BY/Leitfaden-Barrierefreiheit/HEAD/export/04-entwicklung/strukturierte-daten-fau-oeffnungszeiten.png
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | import/01-vorwort.docx
3 | import/02-toc.docx
4 | import/03-inhalte.docx
5 | import/04-entwicklung.docx
6 | import/05-recht.docx
7 | import/06-satzungen.docx
8 | import/07-referenzen.docx
9 | /nbproject/private/
10 |
--------------------------------------------------------------------------------
/nbproject/project.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | org.netbeans.modules.php.project
4 |
5 |
6 | Leitfaden-Barrierefreiheit
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/metadata/title.md:
--------------------------------------------------------------------------------
1 | # Leitfaden digitale Barrierefreiheit
2 | *Bessere Benutzerfreundlichkeit, Suchmaschinenoptimierung und Inklusion: Einfach für alle!*
3 |
4 | Leitfaden für Hochschulen zur Umsetzung der digitalen Barrierefreiheit auf Webauftritten, Dokumenten, Satzungen und Apps.
5 |
6 |
7 | - Johannes Nehlsen, [Stabsstelle IT-Recht](https://www.rz.uni-wuerzburg.de/dienste/it-recht/)
8 | - Wolfgang Wiese, i[Regionales Rechenzentrum Erlangen (RRZE)](https://www.rrze.fau.de)
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/metadata/metadata.yaml:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Leitfaden digitale Barrierefreiheit'
3 | author:
4 | - Johannes Nehlsen, Stabsstelle IT-Recht
5 | - Wolfgang Wiese, Regionales Rechenzentrum Erlangen (RRZE)
6 | institute:
7 | - Stabsstelle IT-Recht für die bayerischen staatlichen Hochschulen und Universitäten
8 | - Regionales Rechenzentrum Erlangen
9 | date: 26. Januar 2021
10 | subtitle: 'Bessere Benutzerfreundlichkeit, Suchmaschinenoptimierung und Inklusion: Einfach für alle!'
11 | lang: de-DE
12 | pdfa: true
13 | rights: CC BY-NC-SA
14 | abstract: 'Leitfaden für Hochschulen zur Umsetzung der digitalen Barrierefreiheit auf Webauftritten, Dokumenten, Satzungen und Apps. '
15 | ---
16 |
--------------------------------------------------------------------------------
/scripts/create-full.bat:
--------------------------------------------------------------------------------
1 | @echo off
2 | cd ../docs/
3 | pandoc -o ../export/leitfaden-barrierefreiheit.docx ../metadata/metadata.yaml 01-vorwort.md 01-toc.md 02-einfuehrung.md 03-inhalte.md 03-inhalte-spickzettel.md 04-entwicklung.md 04-browser-add-ons.md 05-recht.md 06-satzungen.md 07-tests.md 08-referenzen.md 09-impressum.md --reference-doc=../templates/custom-reference.docx
4 |
5 | pandoc --pdf-engine=xelatex -o ../export/leitfaden-barrierefreiheit.epub ../metadata/metadata.yaml 01-vorwort.md 01-toc.md 02-einfuehrung.md 03-inhalte.md 03-inhalte-spickzettel.md 04-entwicklung.md 04-browser-add-ons.md 05-recht.md 06-satzungen.md 07-tests.md 08-referenzen.md 09-impressum.md
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/docs/01-vorwort.md:
--------------------------------------------------------------------------------
1 |
2 | Vorwort
3 | =======
4 |
5 | Dieser Leitfaden soll Einrichtungen und Angehörigen der Hochschulen für Angewandte Wissenschaft in Bayern eine "Erste Hilfe" bei der Umsetzung der Barrierefreiheit in der IT (Webangebote und Dokumente) geben und wurde auch für die bayerischen staatlichen Universitäten mitgeschrieben. Er ergänzt und vertieft den Handlungsleitfaden für IT-Verantwortliche "Barrierefreie Software V1.0" des Bayerischen Staatsministeriums für Finanzen, für Landesentwicklung und Heimat.
6 | Aus rechtlicher Sicht leitet sich der Begriff der Barrierefreiheit aus dem Gleichheitsgrundsatz des Art. 3 GG ab. Dieser garantiert Chancengleichheit und den Ausgleich bestehender Nachteile. Damit soll die Teilnahme aller am öffentlichen Leben umgesetzt werden.
7 |
8 |
9 |
--------------------------------------------------------------------------------
/docs/01-toc.md:
--------------------------------------------------------------------------------
1 | Version 3.3 vom 26. Januar 2021
2 |
3 |
4 | # Inhaltsüberblick
5 |
6 |
7 | Der Leitfaden liefert einen Rahmen zur Einführung in das Thema der digitalen Barrierefreiheit und eine allgemeine Handreichung. Eine detaillierte und stets aktualisierte Dokumentation hinsichtlich der technischen, organisatorischen und inhaltlichen Umsetzung kann nicht gegeben werden. Stattdessen werden die jeweiligen Bereiche nach Zielgruppen und Aufgabengebiete aufgegliedert und in diesen die jeweils wichtigsten Handlungsempfehlungen aufgeführt.
8 |
9 |
10 | 1. Bereitstellung und Pflege von Inhalten
11 | - für: *Redakteure und Autoren von Webinhalten*
12 | 2. Entwicklung und Design
13 | - für: *Webentwickler und Webdesigner*
14 | 3. Organisatorische und rechtliche Anforderungen
15 | - für: *Verantwortliche Betreiber von Webauftritten, Auftraggeber, Entscheider*
16 | 4. Satzungen, Prüfungsordnungen, Dienstanweisungen
17 | - für: *Bearbeiter aus Prüfungsämtern und Rechtsabteilungen, Verwaltungsmitarbeiter*
18 |
19 | Die einzelnen Kapitel orientieren sich im Aufbau nach den Anforderungen und Tätigkeiten der jeweiligen Zielgruppen. Dabei wird auch von der Reihenfolge abgewichen, die sich durch die WCAG (Sortierung gemäß den Richtlinien „Wahrnehmbar", „Bedienbar", „Verständlich", „Robust") ergibt.
20 |
21 | Für Details der Umsetzung sowie der Hintergründe, die der Vertiefung dienen, werden Links zu relevanten Webseiten und Dokumentationen angegeben.
22 | Zur Umsetzung können die jeweiligen Kapitel auch getrennt voneinander weitergegeben werden.
23 |
24 |
--------------------------------------------------------------------------------
/scripts/create-full.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | cd ../docs/
3 | echo "Word..."
4 | pandoc -o ../export/leitfaden-barrierefreiheit.docx ../metadata/metadata.yaml 01-vorwort.md 01-toc.md 02-einfuehrung.md 03-inhalte.md 03-inhalte-spickzettel.md 04-entwicklung.md 04-browser-add-ons.md 05-recht.md 06-satzungen.md 07-tests.md 08-referenzen.md 09-impressum.md --reference-doc=../templates/custom-reference.docx
5 |
6 | echo "PDF..."
7 | pandoc --pdf-engine=xelatex -o ../export/leitfaden-barrierefreiheit.pdf ../metadata/metadata.yaml 01-vorwort.md 01-toc.md 02-einfuehrung.md 03-inhalte.md 03-inhalte-spickzettel.md 04-entwicklung.md 04-browser-add-ons.md 05-recht.md 06-satzungen.md 07-tests.md 08-referenzen.md 09-impressum.md
8 |
9 | echo "EPUB..."
10 | pandoc --pdf-engine=xelatex -o ../export/leitfaden-barrierefreiheit.epub ../metadata/metadata.yaml 01-vorwort.md 01-toc.md 02-einfuehrung.md 03-inhalte.md 03-inhalte-spickzettel.md 04-entwicklung.md 04-browser-add-ons.md 05-recht.md 06-satzungen.md 07-tests.md 08-referenzen.md 09-impressum.md
11 |
12 | echo "Markdown..."
13 | pandoc -s -o ../export/leitfaden-barrierefreiheit.md ../metadata/title.md 01-vorwort.md 01-toc.md 02-einfuehrung.md 03-inhalte.md 03-inhalte-spickzettel.md 04-entwicklung.md 04-browser-add-ons.md 05-recht.md 06-satzungen.md 07-tests.md 08-referenzen.md 09-impressum.md
14 |
15 | echo "HTML"
16 | cp -R 03-inhalte ../export/
17 | cp -R 04-entwicklung ../export/
18 | cp -R 07-tests ../export/
19 | pandoc -s -o ../export/leitfaden-barrierefreiheit.html ../metadata/metadata.yaml 01-vorwort.md 01-toc.md 02-einfuehrung.md 03-inhalte.md 03-inhalte-spickzettel.md 04-entwicklung.md 04-browser-add-ons.md 05-recht.md 06-satzungen.md 07-tests.md 08-referenzen.md 09-impressum.md --css=../templates/pandoc.css
20 | cd ../export/
21 | tar -zcvf leitfaden-barrierefreiheit.zip leitfaden-barrierefreiheit.html 07-tests/ 04-entwicklung/ 03-inhalte/
22 |
23 |
--------------------------------------------------------------------------------
/docs/09-impressum.md:
--------------------------------------------------------------------------------
1 |
2 | # Hinweise zum Dokument
3 |
4 | Dieser Leitfaden wurde im Auftrag der bayerischen Hochschulen für Angewandte Wissenschaft (HAW) erstellt.
5 |
6 |
7 | ## Autoren
8 |
9 | - Johannes Nehlsen, [Stabsstelle IT-Recht für die bayerischen staatlichen Hochschulen und Universitäten](https://www.rz.uni-wuerzburg.de/dienste/it-recht/)
10 | - Wolfgang Wiese, [Regionales Rechenzentrum Erlangen (RRZE)](https://www.rrze.fau.de)
11 |
12 |
13 | ## Lizenz
14 |
15 | Der Leitfaden wird unter einer [Creativ Commons Lizenz](https://creativecommons.org/licenses/?lang=de) bereitgestellt:
16 |
17 | **Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen** ([CC BY-NC-SA](https://creativecommons.org/licenses/by-nc/4.0/))
18 |
19 | Diese Lizenz erlaubt es anderen, das Dokument zu verbreiten, zu remixen, zu verbessern und darauf aufzubauen, allerdings nur nicht-kommerziell und solange die Urheber des Originals genannt werden und die auf diesem Dokument basierenden neuen Werke unter denselben Bedingungen veröffentlicht werden.
20 |
21 | ## Credits und Dank
22 |
23 | Die Autoren danken den folgenden Personen, die bei der Erstellung des Leitfadens durch wichtige Hinweise und Korrekturen sowie im Lektorat geholfen haben:
24 |
25 | - Katja Augustin, [Regionales Rechenzentrum Erlangen (RRZE)](https://www.rrze.fau.de)
26 | - Barbara Bothe, [Regionales Rechenzentrum Erlangen (RRZE)](https://www.rrze.fau.de)
27 | - Kerstin Probiesch, [Barrierefreie Informationskultur](http://www.barrierefreie-informationskultur.de/)
28 | - Astrid Semm, [Regionales Rechenzentrum Erlangen (RRZE)](https://www.rrze.fau.de)
29 |
30 |
31 | ## Verwaltung und Bearbeitung des Leitfadens
32 |
33 | Der Leitfaden wird in Teilen über die Plattform GitHub bereitgestellt um es weiteren Projektteilnehmern und Interessierten zu ermöglichen, sich mit eigenen Beiträgen zu beteiligen ohne dabei auf eine definiertes Cloudsystem oder ein Office-Produkt eingeschränkt zu sein.
34 |
35 | GitHub-URL:
36 |
37 | Das GitHub-Projekt ist dabei öffentlich und frei kopierbar. Die freie Lizenz erlaubt die nicht kommerzielle Weiternutzung und Weiterentwicklung durch Dritte.
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/docs/03-inhalte-spickzettel.md:
--------------------------------------------------------------------------------
1 | ## Spickzettel
2 |
3 | ### Überschriften
4 | * Überschriften **immer** als solche formatieren.
5 | * **Hierarchie** der Überschriften streng einhalten (Überschrift 1 > 2 > 3 etc.).
6 | * Was inhaltlich keine Überschrift ist, wird auch nicht als solche formatiert, nur um ein bestimmtes Aussehen zu erreichen.
7 |
8 | ### Text
9 | * Schreiben Sie verständlich und frei von Rechtschreibfehlern.
10 | * Schreiben Sie Abkürzungen, die nicht Teil der Alltagssprache sind, beim ersten Vorkommen im Text aus oder verwenden Sie den abbr-Tag:
11 | `z.B. `
12 | * Markieren Sie Textpassagen, in denen die Sprache wechselt:
13 | `
This is an english paragraph.
`
14 |
15 |
16 | ### Bilder und Grafiken
17 | * Alle Bilder, die Inhalt vermitteln, müssen im `alt`-Attribut eine **Text-Alternative** bereitstellen:
18 | ` `.
19 | Zusätzlich kann der Titel oder Name des Bildes im Titel-Text angegeben werden:
20 | ` `
21 | * Bei **rein dekorativen Bilder**, die keinen inhaltlichen Mehrwert bieten, wird der Alt-Text eingefügt, aber leer gelassen, und dadurch z.B. für Screenreader etc. unsichtbar gemacht:
22 | ` `
23 |
24 | ### Links
25 | * Das Linkziel muss im Link stehen:
26 | * Bei Text direkt: `Prüfungsordnung `
27 | * Bei Bildlinks im alt-Tag des Bildes:
28 | ` `
29 | * Weitere Attribute sind nicht notwendig.
30 | * Vermeiden Sie das Öffnen im neuen Tab/Fenster.
31 |
32 | ### Tabellen
33 | * Tabellen dürfen nur für tabellarische Daten genutzt werden, nicht als Layout-Ersatz!
34 | * Normale Zellinhalte stehen im Element ``.
35 | * Spalten- oder Zeilenüberschriften bekommen das Element ` `.
36 |
37 | ### Zitate
38 | * Zitate werden mithilfe des Elements `` gekennzeichnet.
39 | * Der Urheber steht im `` im ``-Element:
40 | ```html
41 |
42 |
43 | Zitat
44 |
45 |
48 |
49 | ```
50 |
51 | ### Embeddings
52 | * Ob der eingebettete Inhalt barrierefrei ist, hängt von dessen Anbieter ab.
53 | * Kennzeichnen Sie das Embedding als Inhalt aus einer Drittquelle.
54 | * Beachten Sie beim Einbinden den Datenschutz, insbesondere Zweiklick- oder Proxylösungen.
55 | * Sofern das Embedding zwingend notwendige Informationen enthält, sollten diese **Informationen zusätzlich in Textform** bereitgestellt werden.
56 |
57 |
--------------------------------------------------------------------------------
/docs/06-satzungen.md:
--------------------------------------------------------------------------------
1 |
2 | # Satzungen
3 |
4 | ## Aufgabenbereich und Zielgruppe
5 |
6 |
7 | Dieser Anwendungsbereich betrifft die Erstellung und Pflege von Satzungen, Prüfungsordnungen, Ordnungen und anderen Dokumenten mit regularischen oder dienstrechtlichen Anweisungen.
8 |
9 | Diese Art von Dokumenten bedürfen gesonderten Hinweisen und müssen besonderen Ansprüchen genügen. Daher wird diesem Aufgabenbereich ein eigenes Kapitel gewidmet.
10 |
11 | Dieses Kapitel wendet sich an folgende Personenkreise:
12 |
13 | - Prüfungsämter
14 | - Weisungsbefugte Einrichtungen und Abteilungen auf Leitungsebene, die
15 | Dokumente für den Geschäftsverkehr erstellen
16 |
17 |
18 | ## Grundlagen
19 |
20 | Hochschulen gestalten viele ihrer eigenen und staatlichen Aufgaben durch Satzungen oder auch Ordnungen. Anders als der Gesetzgeber, der nur durch Menschenrechte, das Grundgesetz und höherrangiges Recht betrachtet, muss bei Satzungen auch das einfache Recht beachtet werden. Form und Inhalt der Satzungen dürfen daher Menschen mit Behinderung nicht beeinträchtigen.
21 | Zudem sind Satzungen durch ihre Bekanntmachung eine allgemein zugängliche Quellen zur Information und müssen daher ungehindert jeder Person zugänglich sein. Aus diesen Grundsätzen folgt, dass die veröffentlichten Dateiformate der Satzungen barrierefrei gestaltet sein müssen.
22 |
23 |
24 | ## Umsetzung
25 |
26 | ### Allgemeines zu Satzungen und Prüfungsordnungen
27 |
28 | Zu prüfen wäre, ob eine grundsätzliche Barrierefreiheit schon durch den Einsatz der [elektronischen Arbeitshilfen "eNorm"](https://www.enorm.bund.de/eNorm/) aus dem Projekt des Bundesministerium der Justiz und für Verbraucherschutz "Elektronische Arbeitshilfen und Verkündung" bei Satzungen genutzt werden kann.
29 |
30 | ### Neue Satzungen und Prüfungsordnungen
31 |
32 | Soweit neue Satzungen erstellt werden, kann durch die Nutzung von Formatvorlagen und der Gliederungsmöglichkeiten der zum Verfassen genutzten Büroanwendungen bei Artbezeichnungen, Zählbezeichnungen, Überschriften, Absätzen und deren Untergliederung die Barrierefreiheit umgesetzt werden.
33 |
34 | ### Änderungssatzungen und Änderungen in Prüfungsordnungen
35 |
36 | Nur bei umfassender Neugestaltung kann statt einer Änderungssatzung eine vollständige Neubekanntmachunng erfolgen. Zur Barrierefreiheit der veröffentlichten Änderungssatzung gilt das gleiche wie für neue Satzungen.
37 |
38 | ### Ordnungen und sonstige Rechtsdokumente
39 |
40 | Für Ordnungen und sonstige Rechtsdokumente gilt anders als für Satzungen keine Einschränkung dahingehend, dass bei kleineren Änderungen keine Neuveröffentlichung zulässig ist. Daher bietet es sich an, diese stets im Ganzen neu zu verfassen oder das Vorgängerdokument unmittelbar zu bearbeiten.
41 |
42 | ### Empfehlung
43 |
44 | Da die Veröffentlichung anders als die Bekanntmachung für Satzungen nicht konstitutiv ist, kann neben dem Einstellen des neuen oder geänderten Rechtstextes eine redaktionelle Lesefassung angeboten werden. Für diese bietet es sich an, auf eine native Webseite mit Exportmöglichkeiten zu setzen, da über Webanwendungen leichter eine Zugänglichkeit umsetzbar ist.
45 |
46 | Soweit für Dokumente oder dateibasierte Formulare keine alternative barrierefreie Webanwendung zu Verfügung steht, sind Dokumente und Formulare barrierefrei zu gestalten gemäß Kapitel 10 der Norm EN 301 549 V1.1.2 (2015-04). In diesem Leitfaden ist jedoch derzeit kein Kapitel für barrierefreie Dateiformate von Büroanwendungen vorgesehen.
47 |
48 | ## Rechtsquellen
49 |
50 | ### Grundgesetz
51 | - Art. 3 Abs. 3 S. 2,
52 | - Art. 5 Abs. 1 S. 1,
53 |
54 | ### Völkerrechtliche Vereinbarungen und Verträge
55 | - Art. 21 Buchstabe a Übereinkommen der Vereinten Nationen über die Rechte von Menschen mit Behinderungen,
56 |
57 | ### Bundesgesetze
58 | Gemeinsame Geschäftsordnung der Bundesministerien,
59 |
60 | - § 42 Abs. 6 für barrierefreie Gesetzesentwürfe
61 | - § 62 Abs. 2 für barrierefreie Verordnungsentwürfe
62 |
63 | ### Bayerische Verfassung
64 | - Art. 118a S. 1
65 |
66 | ### Bayerisches Hochschulgesetz
67 | - Art. 2 Abs. 3 S. 3 und 4,
68 | - Art. 13 Abs. 3 S. 2,
69 | - Verordnung über die Bekanntmachung von Hochschulsatzungen,
70 |
71 |
72 |
73 | ## Vertiefung
74 |
75 | - Handbuch der Rechtsförmigkeit,
76 | - BeckOK HochschulR Bayern/Leiher BayHSchG Art. 13,
77 |
78 |
--------------------------------------------------------------------------------
/docs/04-browser-add-ons.md:
--------------------------------------------------------------------------------
1 |
2 | ### Browser-Add-ons
3 |
4 | Beim Entwickeln und Testen von Websites können verschiedene Add-ons eine Hilfe sein.
5 |
6 | Der Chrome-Browser von Google hat sich in den letzten Jahren zum meistgenutzten Browser weltweit entwickelt.
7 | Auf dem Gebiet der Webentwicklung lag dies unter anderem an der im Vergleich zu Firefox besseren Unterstützung mit Hilfe von nativen Entwickler-Tools, aber auch an der besseren Unterstützung von Webstandards. (Siehe hierzu u.a. die Plattform [CanIuse.com](https://caniuse.com)). Mit dem neuen Firefox Quantum kann sich diese Situation wieder ändern, aber aktuell ist bei Webentwicklern der Chrome-Browser nach wie vor der am häufigsten verwendete Browser.
8 | Unabhängig davon muss jeder Entwickler dennoch weitere Browser auf seinen Arbeitsplatzgeräten oder virtuellen Umgebungen haben. Neue Webauftritte sollten im Idealfall stets mit mindestens drei verschiedenen Browsern auf mindestens zwei verschiedenen Betriebssystemen getestet werden.
9 |
10 | Die folgende Liste der Add-ons basiert auf dem aktuellen Chrome-Browser. Ähnliche oder auch dieselben Add-ons gibt es jedoch auch für die anderen Browser.
11 |
12 |
13 |
14 |
15 | | Name | Beschreibung | Link |
16 | | ----- | ------------- |:----: |
17 | | CertViewer | Anzeige von Informationen zum SSL-Zertifikat einer Website. | [Download](https://chrome.google.com/webstore/detail/certviewer/dcfpfgpnkmklbdnicbooifodgdekdgie) |
18 | | ColorA11y | Dieses Add-on prüft, ob bei einer Website die verwendeten Farben für Texte und Hintergründe den WCAG 2.0 Anforderungen Genüge tun. | [Download](https://chrome.google.com/webstore/detail/colora11y/icfneoldcbdmgaiocnnobpbbjncdfbfb) |
19 | | ColorZilla | Dieses Add-on erlaubt das "Entnehmen" von Farbwerten aus einer aktuellen Website ("Color Picker") und bietet andere hilfreiche Informationen zur Farbauswahl an. | [Download](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp) |
20 | | Full Page Screenshot | Für Protokoll- und Testzwecke oder die Diskussion von Bestandteilen einer Website ist ein Screencapture-Werkzeug unumgänglich. Dieses Add-on erlaubt sowohl das Erstellen von Screenshots einer ganzen Seite als auch das gezielte Selektieren von Ausschnitten. Die jeweiligen Bilder können als Datei gespeichert werden. | [Download](https://chrome.google.com/webstore/detail/full-page-screenshot/glgomjpomoahpeekneidkinhcfjnnhmb) |
21 | | headingsMap | Anzeige der Überschriftenhierarchie einer Webseite. Diese Anzeige ist besonders wichtig, um zu erkennen, ob die Navigation innerhalb einer Seite plausibel und logisch strukturiert ist. Auch dies wird zur Einhaltung der WCAG-Bedingungen gefordert. | [Download](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi) |
22 | | IP-Domain-Markierungsfahne | Dieses einfache Plugin ermittelt auf Basis bekannter IP-Adressebereiche die für die aktuell aufgerufene Domain jeweils wahrscheinlich passende Länderfahne. | [Download](https://dnslytics.com/) |
23 | | Semantic Inspector | Moderne Websites geben über die HTML-Semantik hinaus mit Hilfe von strukturierten Elementen (vgl. auch [schema.org](http://schema.org/)) Aussagen darüber, aus welcher Art von Inhalten eine Seite und deren Bestandteile besteht. Insbesondere Suchmaschinen und UserAgents nutzen diese Formate, um Informationen aus Webseiten auszulesen und entsprechend weiterzuverabeiten. Der Semantic Inspector macht diese Inhalte sichtbar und bietet damit gleichzeitig ein Testtool an, ob die selbst eingestellten strukturierten Elemente korrekt waren. | [Download](https://chrome.google.com/webstore/detail/semantic-inspector/jobakbebljifplmcapcooffdbdmfdbjh) |
24 | | WAVE Evaluation Tool | Dieses Tool ermöglicht einen automatisierten WCAG-Test der gerade besuchten Website. Die Ergebnisse sind hinreichend nutzbar für Tests und Entwicklung. Zu beachten ist jedoch, dass dieses Testtool, wie auch andere WCAG-Testtools auch viele "False Positives" meldet - also Dinge als Fehler markiert, die sich bei einer genaueren Prüfung als korrekt erweisen. | [Download](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh) |
25 | | Web Developer | Dieses Add-on ergänzt die Toolbar um einen Button mit hilfreichen Informationen zur Website. So beispielsweise die semantische und topographische Gestaltung der Webseite. Auch werden weitere Links angeboten, mit denen man die W3C-Validation oder andere Werkzeuge bequem aufrufen kann. | [Download](http://chrispederick.com/work/web-developer/) |
26 |
27 |
28 |
29 | Üblicherweise sind weitere Add-ons vorhanden, wie beispielsweise das uBlock Origin Add-on, welches effektiv Werbung unsichtbar macht bzw. das Laden dieser unterdrückt oder uMatrix oder NoScript, die (in Kombination mit uBlock Origin) ebenfalls gute und datenschutzoriente Add-ons zur digitalen Selbstverteidigung gegen Tracking und durch Werbung eingeschleuste Schadsoftware ist.
30 |
31 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Leitfaden zur digitalen Barrierefreiheit
2 |
3 | Dieser Leitfaden soll Einrichtungen und Angehörigen der Hochschulen für Angewandte Wissenschaft in Bayern eine Handreichung bei der Umsetzung der Barrierefreiheit in der IT (Webangebote und Dokumente) geben.
4 |
5 | Er besteht aus mehreren Teilen, die je nach Personenkreis getrennt voneinander weitergegeben werden können:
6 |
7 | 1. Vorwort und Überblick
8 | 2. Einführung und Hintergründe
9 | 3. Bereitstellung und Pflege von Inhalten
10 | 4. Entwicklung und Design
11 | 5. Organisatorische und rechtliche Anforderungen
12 | 6. Satzungen
13 | 7. Tests
14 | 8. Weitere Leitfäden und relevante Informationsangebote
15 |
16 |
17 | ## Autoren
18 |
19 | - Johannes Nehlsen, [Stabsstelle IT-Recht für die bayerischen staatlichen Hochschulen und Universitäten](https://www.rz.uni-wuerzburg.de/dienste/it-recht/)
20 | - Wolfgang Wiese, [Regionales Rechenzentrum Erlangen (RRZE)](https://www.rrze.fau.de)
21 |
22 |
23 | ## Downloads
24 |
25 | Der Leitfaden wird im [GitHub-Projekt Leitfaden-Barrierefreiheit](https://github.com/RZ-BY/Leitfaden-Barrierefreiheit/) gepflegt. Hier können die Quelldateien und Exportversionen für verschiedene Dateiformate geladen werden:
26 |
27 | - Original Markdown-Dateien: [Verzeichnis /docs](https://github.com/RZ-BY/Leitfaden-Barrierefreiheit/tree/master/docs)
28 | - Exportformate:
29 | - [Word (docx, 1,6 MB)](https://github.com/RZ-BY/Leitfaden-Barrierefreiheit/raw/master/export/leitfaden-barrierefreiheit.docx)
30 | - [PDF (1,7 MB)](https://github.com/RZ-BY/Leitfaden-Barrierefreiheit/raw/master/export/leitfaden-barrierefreiheit.pdf)
31 | - [EPub (1,6 MB)](https://github.com/RZ-BY/Leitfaden-Barrierefreiheit/raw/master/export/leitfaden-barrierefreiheit.epub)
32 | - [HTML (ZIP-komprimiert mit Bildern, 1,8 MB)](https://github.com/RZ-BY/Leitfaden-Barrierefreiheit/raw/master/export/leitfaden-barrierefreiheit.zip)
33 |
34 |
35 | ## Lizenz
36 |
37 | Der Leitfaden wird unter einer [Creativ Commons Lizenz](https://creativecommons.org/licenses/?lang=de) bereitgestellt:
38 |
39 | Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen
40 | [CC BY-NC-SA](https://creativecommons.org/licenses/by-nc/4.0/)
41 |
42 | Diese Lizenz erlaubt es anderen, Ihr Werk zu verbreiten, zu remixen, zu verbessern und darauf aufzubauen, allerdings nur nicht-kommerziell und solange Sie als Urheber des Originals genannt werden und die auf Ihrem Werk basierenden neuen Werke unter denselben Bedingungen veröffentlicht werden.
43 |
44 |
45 |
46 | ## Verwaltung und Bearbeitung des Leitfadens
47 |
48 | ### GitHub
49 |
50 | Der Leitfaden wird in Teilen via GitHub bereitgestellt um es weiteren Projektteilnehmern zu ermöglichen, sich mit eigenen Beiträgen zu beteiligen ohne dabei auf eine definiertes Cloudsystem oder ein Office-Produkt eingeschränkt zu sein.
51 |
52 | GitHub-URL:
53 |
54 | Das GitHub-Projekt ist dabei öffentlich und frei kopierbar. Die freie Lizenz erlaubt die nicht kommerzielle Weiternutzung und Weiterentwicklung durch Dritte.
55 |
56 |
57 | ### Dokumenten- und Verzeichnisstruktur
58 |
59 | Für die Verwaltung und die Erstellung des Leitfadens wurden die zugehörigen Dateien in der folgenden Struktur abgelegt:
60 |
61 | * Die einzelne Dokumente im Original werden im Ordner /docs/ abgelegt.
62 | * Die einzelnen Textdateien werden mit [Markdown](https://guides.github.com/features/mastering-markdown/) formatiert.
63 | * Die Kapitel werden jeweils in nummerierten Unterverzeichnissen abgelegt.
64 | * Generierte Ausgabeformate aus den Markdown-Dokumenten werden im Ordner /export/ verfügbar gemacht.
65 | * Im Verzeichnis /scripts/ befinden sich Skripte zur Generierung von Dokumenten der Formate PDF, Word DOCX, EPub und Markdown aus den einzelnen Markdown-Dateien:
66 | * Die Datei create-full.sh für MacOS und Linux-Systeme.
67 | * Die Datei create-full.bat für Windows.
68 | * Im Verzeichnis /metadata/ befindet sich eine Metadata im YAML Format, die verwendet wird um bei der Generierung von PDF oder WORD-Dateien die jeweiligen Dokumenteneigenschaften vorzugeben.
69 | * Im Verzeichnis /exports/ befinden sich erstellte Ausgabedokumente.
70 |
71 | #### Erstellung der Einzeldokumente
72 |
73 | Zum Zusammenstellen des Gesamtdokumentes wird das Werkzeug [Pandoc](https://pandoc.org/) verwendet. Mit Hilfe von Pandoc können Dateien verschiedener Textformate miteinander verknüpft und wiederum in andere Textformate gewandelt werden. So beispielsweise von Markdown in Word oder PDF, aber auch umgekehrt von Word in Markdown und von dort in PDF.
74 |
75 | Für die Erstellung der PDF Dokumente ist unter Umständen zusätzliche die Installation von pdflatex oder [MiKTeX](https://miktex.org/) notwendig.
76 |
77 | Bei der Struktur der Markdown-Dateien in /docs/ wurde darauf geachtet, daß auch Tools wie beispielsweise [DAUX.IO](https://dauxio.github.io/) angewendet werden können. Diese Werkzeuge ermöglichen es, aus den einzelnen Dateien eine Webseite zu erstellen.
78 |
79 |
80 | ##### Export-Templates
81 |
82 | Bei Nutzung von Pandoc ist die jeweilige Ausgabe der Dateien sehr rudimentär. WORD- und PDF-Dateien enthalten keine besonderen Einstellungen zur Corporate Design.
83 | Sind optisch ansprechendere Exports erwünscht oder solche, die für den Inhalt als Tutorial angepasst sind, findet man im Git-Projekt [User contributed templates](https://github.com/jgm/pandoc/wiki/User-contributed-templates) einige hilfreiche Beispiele und Links.
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/docs/04-entwicklung/04-browser-add-ons-htmltable.md:
--------------------------------------------------------------------------------
1 | ### Browser-Add-ons
2 |
3 | Beim Entwickeln und Testen von Websites können verschiedene Add-ons eine Hilfe sein.
4 |
5 | Der Chrome-Browser von Google hat sich in den letzten Jahren zum meistgenutzten Browser weltweit entwickelt.
6 | Auf dem Gebiet der Webentwicklung lag dies unter anderem an der im Vergleich zu Firefox besseren Unterstützung mit Hilfe von nativen Entwickler-Tools, aber auch an der besseren Unterstützung von Webstandards. (Siehe hierzu u.a. die Plattform [CanIuse.com](https://caniuse.com)). Mit dem neuen Firefox Quantum kann sich diese Situation wieder ändern, aber aktuell ist bei Webentwicklern der Chrome-Browser nach wie vor der am häufigsten verwendete Browser.
7 | Unabhängig davon muss jeder Entwickler dennoch weitere Browser auf seinen Arbeitsplatzgeräten oder virtuellen Umgebungen haben. Neue Webauftritte sollten im Idealfall stets mit mindestens drei verschiedenen Browsern auf mindestens zwei verschiedenen Betriebssystemen getestet werden.
8 |
9 | Die folgende Liste der Add-ons basiert auf dem aktuellen Chrome-Browser. Ähnliche oder auch dieselben Add-ons gibt es jedoch auch für die anderen Browser.
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Name
18 | Beschreibung
19 | Link
20 |
21 |
22 | CertViewer
23 | Anzeige von Informationen zum SSL-Zertifikat einer Website.
24 | Download
25 |
26 |
27 | ColorA11y
28 | Dieses Add-on prüft, ob bei einer Website die verwendeten Farben für Texte und Hintergründe den WCAG 2.0 Anforderungen Genüge tun.
29 | Download
30 |
31 |
32 | ColorZilla
33 | Dieses Add-on erlaubt das "Entnehmen" von Farbwerten aus einer aktuellen Website ("Color Picker") und bietet andere hilfreiche Informationen zur Farbauswahl an.
34 | Download
35 |
36 |
37 | Full Page Screenshot
38 | Für Protokoll- und Testzwecke oder die Diskussion von Bestandteilen einer Website ist ein Screencapture-Werkzeug unumgänglich.
39 | Dieses Add-on erlaubt sowohl das Erstellen von Screenshots einer ganzen Seite als auch das gezielte Selektieren von Ausschnitten. Die jeweiligen Bilder können als Datei gespeichert werden.
40 | Download
41 |
42 |
43 | headingsMap
44 | Anzeige der Überschriftenhierarchie einer Webseite. Diese Anzeige ist besonders wichtig, um zu erkennen, ob die Navigation innerhalb einer Seite plausibel und logisch strukturiert ist. Auch dies wird zur Einhaltung der WCAG-Bedingungen gefordert.
45 | Download
46 |
47 |
48 | IP-Domain-Markierungsfahne
49 | Dieses einfache Plugin ermittelt auf Basis bekannter IP-Adressebereiche die für die aktuell aufgerufene Domain jeweils wahrscheinlich passende Länderfahne.
50 | Download
51 |
52 |
53 | Semantic Inspector
54 | Moderne Websites geben über die HTML-Semantik hinaus mit Hilfe von strukturierten Elementen (vgl. auch schema.org ) Aussagen darüber, aus welcher Art von Inhalten eine Seite und deren Bestandteile besteht. Insbesondere Suchmaschinen und UserAgents nutzen diese Formate, um Informationen aus Webseiten auszulesen und entsprechend weiterzuverabeiten. Der Semantic Inspector macht diese Inhalte sichtbar und bietet damit gleichzeitig ein Testtool an, ob die selbst eingestellten strukturierten Elemente korrekt waren.
55 | Download
56 |
57 |
58 | WAVE Evaluation Tool
59 | Dieses Tool ermöglicht einen automatisierten WCAG-Test der gerade besuchten Website. Die Ergebnisse sind hinreichend nutzbar für Tests und Entwicklung. Zu beachten ist jedoch, dass dieses Testtool, wie auch andere WCAG-Testtools auch viele "False Positives" meldet - also Dinge als Fehler markiert, die sich bei einer genaueren Prüfung als korrekt erweisen.
60 | Download
61 |
62 |
63 | Web Developer
64 | Dieses Add-on ergänzt die Toolbar um einen Button mit hilfreichen Informationen zur Website. So beispielsweise die semantische und topographische Gestaltung der Webseite. Auch werden weitere Links angeboten, mit denen man die W3C-Validation oder andere Werkzeuge bequem aufrufen kann.
65 | Download
66 |
67 |
68 |
69 |
70 | Üblicherweise sind weitere Add-ons vorhanden, wie beispielsweise das uBlock Origin Add-on, welches effektiv Werbung unsichtbar macht bzw. das Laden dieser unterdrückt oder Ghostery, der (in Kombination mit uBlock Origin) ebenfalls ein gutes und datenschutzorientes Add-on zur digitalen Selbstverteidigung gegen Tracking und durch Werbung eingeschleuste Schadsoftware ist.
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/export/04-entwicklung/04-browser-add-ons-htmltable.md:
--------------------------------------------------------------------------------
1 | ### Browser-Add-ons
2 |
3 | Beim Entwickeln und Testen von Websites können verschiedene Add-ons eine Hilfe sein.
4 |
5 | Der Chrome-Browser von Google hat sich in den letzten Jahren zum meistgenutzten Browser weltweit entwickelt.
6 | Auf dem Gebiet der Webentwicklung lag dies unter anderem an der im Vergleich zu Firefox besseren Unterstützung mit Hilfe von nativen Entwickler-Tools, aber auch an der besseren Unterstützung von Webstandards. (Siehe hierzu u.a. die Plattform [CanIuse.com](https://caniuse.com)). Mit dem neuen Firefox Quantum kann sich diese Situation wieder ändern, aber aktuell ist bei Webentwicklern der Chrome-Browser nach wie vor der am häufigsten verwendete Browser.
7 | Unabhängig davon muss jeder Entwickler dennoch weitere Browser auf seinen Arbeitsplatzgeräten oder virtuellen Umgebungen haben. Neue Webauftritte sollten im Idealfall stets mit mindestens drei verschiedenen Browsern auf mindestens zwei verschiedenen Betriebssystemen getestet werden.
8 |
9 | Die folgende Liste der Add-ons basiert auf dem aktuellen Chrome-Browser. Ähnliche oder auch dieselben Add-ons gibt es jedoch auch für die anderen Browser.
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Name
18 | Beschreibung
19 | Link
20 |
21 |
22 | CertViewer
23 | Anzeige von Informationen zum SSL-Zertifikat einer Website.
24 | Download
25 |
26 |
27 | ColorA11y
28 | Dieses Add-on prüft, ob bei einer Website die verwendeten Farben für Texte und Hintergründe den WCAG 2.0 Anforderungen Genüge tun.
29 | Download
30 |
31 |
32 | ColorZilla
33 | Dieses Add-on erlaubt das "Entnehmen" von Farbwerten aus einer aktuellen Website ("Color Picker") und bietet andere hilfreiche Informationen zur Farbauswahl an.
34 | Download
35 |
36 |
37 | Full Page Screenshot
38 | Für Protokoll- und Testzwecke oder die Diskussion von Bestandteilen einer Website ist ein Screencapture-Werkzeug unumgänglich.
39 | Dieses Add-on erlaubt sowohl das Erstellen von Screenshots einer ganzen Seite als auch das gezielte Selektieren von Ausschnitten. Die jeweiligen Bilder können als Datei gespeichert werden.
40 | Download
41 |
42 |
43 | headingsMap
44 | Anzeige der Überschriftenhierarchie einer Webseite. Diese Anzeige ist besonders wichtig, um zu erkennen, ob die Navigation innerhalb einer Seite plausibel und logisch strukturiert ist. Auch dies wird zur Einhaltung der WCAG-Bedingungen gefordert.
45 | Download
46 |
47 |
48 | IP-Domain-Markierungsfahne
49 | Dieses einfache Plugin ermittelt auf Basis bekannter IP-Adressebereiche die für die aktuell aufgerufene Domain jeweils wahrscheinlich passende Länderfahne.
50 | Download
51 |
52 |
53 | Semantic Inspector
54 | Moderne Websites geben über die HTML-Semantik hinaus mit Hilfe von strukturierten Elementen (vgl. auch schema.org ) Aussagen darüber, aus welcher Art von Inhalten eine Seite und deren Bestandteile besteht. Insbesondere Suchmaschinen und UserAgents nutzen diese Formate, um Informationen aus Webseiten auszulesen und entsprechend weiterzuverabeiten. Der Semantic Inspector macht diese Inhalte sichtbar und bietet damit gleichzeitig ein Testtool an, ob die selbst eingestellten strukturierten Elemente korrekt waren.
55 | Download
56 |
57 |
58 | WAVE Evaluation Tool
59 | Dieses Tool ermöglicht einen automatisierten WCAG-Test der gerade besuchten Website. Die Ergebnisse sind hinreichend nutzbar für Tests und Entwicklung. Zu beachten ist jedoch, dass dieses Testtool, wie auch andere WCAG-Testtools auch viele "False Positives" meldet - also Dinge als Fehler markiert, die sich bei einer genaueren Prüfung als korrekt erweisen.
60 | Download
61 |
62 |
63 | Web Developer
64 | Dieses Add-on ergänzt die Toolbar um einen Button mit hilfreichen Informationen zur Website. So beispielsweise die semantische und topographische Gestaltung der Webseite. Auch werden weitere Links angeboten, mit denen man die W3C-Validation oder andere Werkzeuge bequem aufrufen kann.
65 | Download
66 |
67 |
68 |
69 |
70 | Üblicherweise sind weitere Add-ons vorhanden, wie beispielsweise das uBlock Origin Add-on, welches effektiv Werbung unsichtbar macht bzw. das Laden dieser unterdrückt oder Ghostery, der (in Kombination mit uBlock Origin) ebenfalls ein gutes und datenschutzorientes Add-on zur digitalen Selbstverteidigung gegen Tracking und durch Werbung eingeschleuste Schadsoftware ist.
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/templates/pandoc.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Source: https://gist.github.com/killercup/5917178
3 | */
4 |
5 | html {
6 | font-size: 100%;
7 | overflow-y: scroll;
8 | -webkit-text-size-adjust: 100%;
9 | -ms-text-size-adjust: 100%;
10 | }
11 |
12 | body {
13 | color: #444;
14 | font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
15 | font-size: 16px;
16 | line-height: 1.8;
17 | padding: 1em;
18 | margin: auto;
19 | max-width: 56em;
20 | background: #fefefe;
21 | }
22 |
23 | a {
24 | color: #0645ad;
25 | text-decoration: none;
26 | }
27 |
28 | a:visited {
29 | color: #0b0080;
30 | }
31 |
32 | a:hover {
33 | color: #06e;
34 | }
35 |
36 | a:active {
37 | color: #faa700;
38 | }
39 |
40 | a:focus {
41 | outline: thin dotted;
42 | }
43 |
44 | *::-moz-selection {
45 | background: rgba(255, 255, 0, 0.3);
46 | color: #000;
47 | }
48 |
49 | *::selection {
50 | background: rgba(255, 255, 0, 0.3);
51 | color: #000;
52 | }
53 |
54 | a::-moz-selection {
55 | background: rgba(255, 255, 0, 0.3);
56 | color: #0645ad;
57 | }
58 |
59 | a::selection {
60 | background: rgba(255, 255, 0, 0.3);
61 | color: #0645ad;
62 | }
63 |
64 | p {
65 | margin: 1em 0;
66 | }
67 |
68 | img {
69 | max-width: 100%;
70 | }
71 |
72 | h1, h2, h3, h4, h5, h6 {
73 | color: #111;
74 | line-height: 125%;
75 | margin-top: 2em;
76 | font-weight: normal;
77 | }
78 |
79 | h4, h5, h6 {
80 | font-weight: bold;
81 | }
82 |
83 | h1 {
84 | font-size: 2.5em;
85 |
86 | }
87 | .subtitle {
88 | font-size: 1.8em;
89 | text-align: center;
90 | }
91 | h1.title {
92 | text-align: center;
93 | }
94 | h2 {
95 | font-size: 2em;
96 | }
97 |
98 | h3 {
99 | font-size: 1.5em;
100 | }
101 |
102 | h4 {
103 | font-size: 1.2em;
104 | }
105 |
106 | h5 {
107 | font-size: 1em;
108 | }
109 |
110 | h6 {
111 | font-size: 0.9em;
112 | }
113 |
114 | blockquote {
115 | color: #666666;
116 | margin: 0;
117 | padding-left: 3em;
118 | border-left: 0.5em #EEE solid;
119 | }
120 |
121 | hr {
122 | display: block;
123 | height: 2px;
124 | border: 0;
125 | border-top: 1px solid #aaa;
126 | border-bottom: 1px solid #eee;
127 | margin: 1em 0;
128 | padding: 0;
129 | }
130 |
131 | pre, code, kbd, samp {
132 | color: #000;
133 | font-family: monospace, monospace;
134 | _font-family: 'courier new', monospace;
135 | font-size: 0.98em;
136 | }
137 | p code {
138 | background-color: #eee;
139 | padding: 0.1em;
140 | }
141 | pre {
142 | white-space: pre;
143 | white-space: pre-wrap;
144 | word-wrap: break-word;
145 | }
146 |
147 | b, strong {
148 | font-weight: bold;
149 | }
150 |
151 | dfn {
152 | font-style: italic;
153 | }
154 |
155 | ins {
156 | background: #ff9;
157 | color: #000;
158 | text-decoration: none;
159 | }
160 |
161 | mark {
162 | background: #ff0;
163 | color: #000;
164 | font-style: italic;
165 | font-weight: bold;
166 | }
167 |
168 | sub, sup {
169 | font-size: 75%;
170 | line-height: 0;
171 | position: relative;
172 | vertical-align: baseline;
173 | }
174 |
175 | sup {
176 | top: -0.5em;
177 | }
178 |
179 | sub {
180 | bottom: -0.25em;
181 | }
182 |
183 | ul, ol {
184 | margin: 1em 0;
185 | padding: 0 0 0 2em;
186 | }
187 |
188 | li p:last-child {
189 | margin-bottom: 0;
190 | }
191 |
192 | ul ul, ol ol {
193 | margin: .3em 0;
194 | }
195 |
196 | dl {
197 | margin-bottom: 1em;
198 | }
199 |
200 | dt {
201 | font-weight: bold;
202 | margin-bottom: .8em;
203 | }
204 |
205 | dd {
206 | margin: 0 0 .8em 2em;
207 | }
208 |
209 | dd:last-child {
210 | margin-bottom: 0;
211 | }
212 |
213 | img {
214 | border: 0;
215 | -ms-interpolation-mode: bicubic;
216 | vertical-align: middle;
217 | }
218 |
219 | figure {
220 | display: block;
221 | text-align: center;
222 | margin: 1em 0;
223 | }
224 |
225 | figure img {
226 | border: none;
227 | margin: 0 auto;
228 | }
229 |
230 | figcaption {
231 | font-size: 0.8em;
232 | font-style: italic;
233 | margin: 0 0 .8em;
234 | }
235 |
236 | table {
237 | margin-bottom: 2em;
238 | border-bottom: 1px solid #ddd;
239 | border-right: 1px solid #ddd;
240 | border-spacing: 0;
241 | border-collapse: collapse;
242 | }
243 |
244 | table th {
245 | padding: .2em 1em;
246 | background-color: #eee;
247 | border-top: 1px solid #ddd;
248 | border-left: 1px solid #ddd;
249 | }
250 |
251 | table td {
252 | padding: .2em 1em;
253 | border-top: 1px solid #ddd;
254 | border-left: 1px solid #ddd;
255 | vertical-align: top;
256 | }
257 |
258 | .author {
259 | font-size: 1em;
260 | text-align: center;
261 | }
262 | .date {
263 | text-align: center;
264 | }
265 |
266 | @media print {
267 | * {
268 | background: transparent !important;
269 | color: black !important;
270 | filter: none !important;
271 | -ms-filter: none !important;
272 | }
273 |
274 | body {
275 | font-size: 12pt;
276 | max-width: 100%;
277 | }
278 |
279 | a, a:visited {
280 | text-decoration: underline;
281 | }
282 |
283 | hr {
284 | height: 1px;
285 | border: 0;
286 | border-bottom: 1px solid black;
287 | }
288 |
289 | a[href]:after {
290 | content: " (" attr(href) ")";
291 | }
292 |
293 | abbr[title]:after {
294 | content: " (" attr(title) ")";
295 | }
296 |
297 | .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
298 | content: "";
299 | }
300 |
301 | pre, blockquote {
302 | border: 1px solid #999;
303 | padding-right: 1em;
304 | page-break-inside: avoid;
305 | }
306 |
307 | tr, img {
308 | page-break-inside: avoid;
309 | }
310 |
311 | img {
312 | max-width: 100% !important;
313 | }
314 |
315 | @page :left {
316 | margin: 15mm 20mm 15mm 10mm;
317 | }
318 |
319 | @page :right {
320 | margin: 15mm 10mm 15mm 20mm;
321 | }
322 |
323 | p, h2, h3 {
324 | orphans: 3;
325 | widows: 3;
326 | }
327 |
328 | h2, h3 {
329 | page-break-after: avoid;
330 | }
331 | }
332 |
--------------------------------------------------------------------------------
/docs/08-referenzen.md:
--------------------------------------------------------------------------------
1 | Weitere Leitfäden und relevante Informationsangebote
2 | ====================================================
3 |
4 |
5 | Für Webseiten
6 | -------------
7 |
8 | - The A11Y Project,
9 | - Inklusion im World Wide Web -- Eine Hilfestellung zur barrierefreien Gestaltung von Internetseiten, Bay. Staatsministerium für Bildung und Kultus, Wissenschaft und Kunst,
10 |
11 | - Webinhalte barrierefrei pflegen -- ein Leitfaden für Online-Redakteure, BIK,
12 |
13 | - Accessibility Cheatsheet von bitsofcode,,
14 | - Accessibility Cheatsheet von Moritz Giessmann,
15 |
16 | Social-Media-Kanäle
17 | -------------------
18 |
19 | - Facebook: Anbieterinformationen mit Umsetzungsempfehlungen,
20 | - Google+: Anbieterinformationen,
21 | - Instagram: Offizelle Informationen nicht bekannt.
22 | - LinkedIn: Anbieter hat guten Ruf hinsichtlich der Barrierefreiheit seines Angebotes, Informationen sind in der Hilfe verstreut.
23 | - Pinterest: Anbieterinformationen mit Umsetzungsempfehlungen,
24 | - Twitter: Anbieterinformationen
25 | - Xing: Derzeit keine Anbieterinformationen verfügbar; vereinzelt Erfahrungsberichte unter
26 | - YouTube: Anbieterinformationen und Entwicklerinformationen
27 |
28 |
29 | Erstellung von Dokumenten aus Büroanwendungen (PDF, Office, u.a.)
30 | -----------------------------------------------------------------
31 |
32 | - "PDF- und Word Dokumente barrierefrei umsetzen", FernUniversität in Hagen,
33 | - "Die Erstellung barrierefreier PDF-Dokumente in Microsoft Office Word und Adobe Reader X Pro", Universität Duesburg Essen,
34 | - "Leitfaden zur Erstellung barrierearmer Dokumente", Universität Kassel,
35 | - "Kurzanleitung zur Erstellung barrierefreier Word-Dateien", Universität Kassel,
36 | - "Barrierefreies Publishing -- PDF barrierefrei aus InDesign", Vortragsfolien von Markus Erle,
37 |
38 | Erstellung von Vorlesungs- und Lehrmaterialien
39 | ----------------------------------------------
40 |
41 | - "Handreichung zur Erstellung und Umsetzung barrierefreier Dokumente in der Lehre", Uni Marburg,
42 | - "Zeitschriftenreihe: Diversität konkret", Universität Essen,
43 | - "Barrierefreie Hochschullehre -- Leitfaden für Lehrende", TU Dresden,
44 | - "Barrierefreie Lehre -- Leitfaden für Lehrende", Europa Universität Viadrina,
45 |
46 | - "Barrierefreies Studium -- Leitfaden für Lehrende der Goethe-Universität", Goethe-Universität Frankfurt am Main,
47 |
48 | Erstellung von multimedialen Produktionen (Videoaufzeichnungen, Podcasts, u.a.)
49 | -------------------------------------------------------------------------------
50 |
51 | - "Barrierefreie Gestaltung eines Online-Videos", DI-JI,
52 | - "Leitfaden für den Einsatz von Gebärdensprach-Filmen", DI-JI,
53 | - "Leitfaden barrierefreie Online-Videos", BIK,
54 |
55 | Weitere Leitfäden und Informationen zur Barrierefreiheit
56 | --------------------------------------------------------
57 |
58 | - "Ein Leitfaden zur barrierefreien Kommunikation im kulturellen Bereich", Landesverband der Gehörlosen Baden-Württemberg e.V.,
59 | - "Barrierefreie Kommunikation bei Veranstaltungen" , Prof. Dr. Gottfried Zimmermann, Stuttgart Media University,
60 | - Planung von barrierefreien Veranstaltungen, Bundesfachstelle Barrierefreiheit,
61 | - Fernstudium ohne Barrieren, FernUniversität in Hagen,
62 | - Bayern Barrierefrei -- Informationsportal des Freistaats Bayern,
63 |
64 | Rechtliche Anforderungen
65 | ------------------------
66 |
67 | - EU
68 | - EU Richtlinie zur Barrierefreiheit,
69 | - Mustererklärung zur Barrierefreiheit gemäß der Richtlinie (EU) 2016/2102
70 | - Überwachungsmethodik
71 | - Europäische Sozialcharta,
72 |
73 | - (Laufende) EU-Anhörung zu Entwürfen der Mustererklärung Barrierefreiheit und von Testverfahren,
74 | - Übereinkommen der Vereinten Nationen über die Rechte von Menschen mit Behinderung,
75 |
76 | - Bund
77 | - Schiedsstelle BGG,
78 | - Dokumentation zum "Gesetz zur Verlängerung befristeter Regelungen im Arbeitsförderungsrecht und zur Umsetzung der Richtlinie (EU) 2016/2102 über den barrierefreien Zugang zu den Websites und mobilen Anwendungen öffentlicher Stellen":
79 | - Bericht und Stellungsnahmen:
80 | - Bundesfachstelle Barrierefreiheit, https://www.bundesfachstelle-barrierefreiheit.de
81 | - Bayern:
82 | - BayBGG,
83 | - BayBITV,
84 |
--------------------------------------------------------------------------------
/docs/07-tests.md:
--------------------------------------------------------------------------------
1 |
2 | # Test zur Barrierefreiheit
3 |
4 |
5 | Dieses Kapitel soll eine schnelle Hilfe und Übersicht zur Prüfung der Barrierefreiheit geben.
6 |
7 |
8 | ## Schnelle "Jedermann"-Sichtprüfung
9 |
10 | **Hinweis: Die in diesem Kapitel aufgeführten Methoden ersetzen keinesfalls einen durch Experten durchgeführten WCAG-Test. Die Methoden sollen nur eine Möglichkeit aufzeigen, damit auch technisch und sachlich nicht vertraute Menschen zu einer schnellen Grundsatzaussage kommen.**
11 |
12 |
13 | Folgende Methoden und Test sind bei dem Besuch einer Seite durchzuführen:
14 |
15 |
16 | 1. **Maus weg!**
17 |
18 | Erreiche ich jede Seite? Jede Ebene der Navigation? Sehe ich das aktive Element deutlich und genauso wie wenn ich mit der Maus drüber fahre?
19 |
20 | 2. **Seite mit dem Handy aufrufen!**
21 |
22 | Jeder Inhalt und jede Aktion muss auch mit dem Handy ausführbar sein. Dabei muss die Webseite nicht die selbe Optik haben wie eine Bildschirmseite auf einem großen Monitor. Eine Seite sollte auf einem Smartphone auch bzgl. Reihenfolge und Anordnung von Seitenelementen auf die kleine Auflösung optimiert sein. Zudem lässt sich feststellen, ob sämtliche Elemente auch durch Touch-Bedienung erreichbar sind.
23 |
24 | 3. **Die Schrift auf 200% vergrößern!**
25 |
26 | Ist noch alles nutzbar und erkennbar? Kommt es zur Überlagerung von Inhalten, so dass diese nicht mehr erreicht oder gelesen werden können?
27 |
28 | 4. **Enthaltene Bilder prüfen.**
29 |
30 | Enthält eine Seite Bilder? Sind diese Bilder informativ und sind die Inhalte auch im Text vorhanden? Wird auf das Bild im Text Bezug genommen?
31 |
32 | 5. **Seite auf einem Drucker im Schwarz-Weiß-Modus ausdrucken.**
33 |
34 | Gibt es Inhalte, die nicht les- oder erkennbar sind?
35 | Und: Sieht die Seite gedruckt genauso aus, wie auf dem Bildschirm? Ist nach dem Ausdruck noch immer ein Menü vorhanden?
36 |
37 | 6. **Bewegung, Töne, Videos checken!**
38 |
39 | Bewegt sich etwas? Gibt es ein "Carousel", also einen Bereich in dem Artikel und Bilder von selbst eingeblendet werden. Enthält die Seite sich bewegenden oder wechselnden Content? Wird beim Aufruf der Seite ein Video unaufgefordert abgespielt? Kann ich das Video stoppen - auch ohne Maus?
40 |
41 | 7. **Tabellen prüfen.**
42 |
43 | Zur Prüfung einer vorhandenen Tabelle ist das Browserfenster zu verkleinern oder die Seite mit einem Handy aufzurufen. Lassen sich die Inhalte der Tabelle noch lesen, ohne einen Scrollbalken nach rechts bedienen zu müssen?
44 |
45 |
46 | Sollte eine oder mehrere der obigen Situationen Probleme aufzeigen, ist die Zugänglichkeit der Seite nicht vollständig gegeben. Es ist in diesem Fall davon auszugehen, dass keine Konformität zur WCAG vorliegt.
47 |
48 | Das W3C selbst bietet ebenfalls einen Schnelltest an: [Easy Checks - A First Review of Web Accessibility](https://www.w3.org/WAI/test-evaluate/preliminary/). Dieser ist etwas aufwendiger als oben aufgeführte Punkte und ebenfalls noch keine vollständige Prüfung.
49 |
50 | Ein weiterer Schnelltest beschreibt Kerstin Probiesch in ihrem Artikel [Schnelltest zur Barrierefreiheit](http://webkrauts.de/artikel/2011/schnelltest-zur-barrierefreiheit) auf Webkrauts.de.
51 |
52 | Ebenfalls hilfreich für eine schnelle Überprüfung und zur Vermeidung technischer Fehler ist die Anwendung [Accessibility Insights](https://accessibilityinsights.io/). Diese ermöglicht neben der Prüfung von Webseteiten auch die Überprüfung von Software.
53 |
54 |
55 | ## Prüfung zur Konformität zur WCAG
56 |
57 | Das W3C hat eine eigene Seite zur Evaluierung der Barrierefreiheit eingerichtet: Unter [Test & Evaluate](https://www.w3.org/WAI/test-evaluate/) erhält man einen Überblick über verschiedene Testmethoden, Werkzeugen und weiterführende Informationen.
58 | Hierzu gehört auch eine umfangreiche Sammlung an Werkzeugen, die auf der Seite [Web Accessibility Evaluation Tool List](https://www.w3.org/WAI/ER/tools/) angeboten wird. Die Sammlung ist entsprechend der Anforderungen und des zu testenden Angebots sortier- und filterbar.
59 |
60 | Eine vollständige Prüfung über die Einhaltung der WCAG kann mit Hilfe der [Accessibility Conformance Evaluation Methodology (WCAG-EM)](https://www.w3.org/TR/WCAG-EM/) erfolgen.
61 | Die WCAG selbst definiert bereits durch die Erfolgskriterien und die Konformitätsbedingungen, wie man einzelne Seiten auf Barrierefreiheit prüft. Was jedoch durch die WCAG nicht geleistet wird, ist eine Wertung der Ergebnisse. So lässt sich ein Webauftritt anhand von einzelnen Punkten aus der WCAG nicht pauschal einordnen.
62 | Dies wird durch die Methode geleistet, die durch die WCAG-EM vorgegeben wird. Die WCAG-EM beschreibt das Best-Practice-Vorgehen zur Prüfung von Webangeboten, zur Definition des Testumgangs, der Auswahl von Stichproben und zur Berichterstattung.
63 |
64 | Die WCAG-EM besteht aus 5 Teilen:
65 |
66 | 
67 |
68 | 1. Festlegung des Bewertungsumfangs
69 | 2. Sichtung der zu bewertenden Webauftritts
70 | 3. Festlegung eines repräsentativen Seitenauswahl
71 | 4. Prüfung der Seitenauswahl
72 | 5. Erstellung des Gutachtens
73 |
74 | Die WCAG-EM bietet Hilfestellung und Empfehlungen zu jedem der genannten Schritte.
75 | Eine Zusammenfassung findet sich auch in der Dokumentation von Jan Hellbusch auf der Seite [Konformität nach den Web Content Accessibility Guidelines 2.0](https://www.barrierefreies-webdesign.de/wcag2/konformitaet/konformitaetsbewertung.html).
76 |
77 | Ein sehr nützliches Hilfsmittel bietet das [WCAG-EM Report Tool](https://www.w3.org/WAI/eval/report-tool/).
78 |
79 | 
80 |
81 | Hierbei handelt es sich um ein Online-Tool in dem alle 5 Schritte abgebildet werden können. Interaktive Eingabefelder und Auswahllisten unterstützen den Prüfer in diesem Werkzeug bei der Evaluation und erlauben es am Ende des Prozesses eine Vorlage für ein Gutachten zu erstellen. Die Vorlage kann in den Formaten HTML oder JSON exportiert, aber auch für die spätere Weiterbearbeitung gespeichert werden.
82 |
83 | ## Nachweis gemäß der Europäischen Norm EN 301 549 V2.1.2
84 |
85 | Für Webanwendungen wird Konformität mit den Barrierefreiheitsanforderungen vermutet, sofern und soweit nach Annex C der [Europäischen Norm EN 301 549 V2.1.2](https://www.etsi.org/deliver/etsi_en/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf) die Testkriterien erfüllt sind. Über die WCAG 2.1 mit Level AA hinaus, sind dafür auch allgemeine Kriterien zu erfüllen. Durch die große Schnittmenge werden Tests nach der WCAG-EM die Prüfung nach der EU Norm gut vorbereiten.
86 |
87 | ## Zertifikate
88 |
89 | Es gibt Anbieter, welche Zertifikate über eine Prüfung der Barrierefreiheit anbieten. Hierzu muss jedoch bemerkt werden, dass eine Prüfung in allen Fällen nur eine Momentaufnahme sein kann. Ein Prüfergebnis, welches die Konformität einer Webseite gemäß der WCAG 2.1 in der Konformitätsstufe AA belegt, gilt für den Zeitpunkt des Tests. Da größere Webauftritte steten Änderungen und Aktualisierungen unterliegen, ist die Gültigkeit einer Prüfung ebenfalls zeitlich begrenzt. Dieser Einschränkung unterliegt auch ein Prüfergebnis gemäß Annex C der europäischen Norm.
90 |
91 | Im Falle einer Barriere, die beim Besuch eines Betroffenen auftritt und dann tatsächlich vorhanden ist, ist ein vorheriges positives Prüfungsergebnis oder ein Zertifikat ohne Bedeutung: Die EU-Richtlinie erfordert in allen Fällen die Behebung der Barriere und das Anbieten eines geeigneten Feedback-Mechanismus.
92 |
93 | Die EU-Richtlinie verpflichtet nicht zu einer Zertifizierung. Stattdessen fordert sie allein die Konformität der Webanwendungen gemäß der Europäischen Norm EN 301 549 V2.1.2 auf Basis der WCAG. Da die WCAG mit der WCAG-EM eigene Testverfahren enthalten, sind auch diese zu verwenden.
94 | Eigene Prüfverfahren und Zertifikate von einzelnen Anbietern oder von staatlichen Einrichtungen geförderten Projekten werden von der EU-Richtlinie und der WCAG nicht erfasst und sind daher nicht relevant.
95 | Die Autoren des Leitfadens empfehlen daher auf den Kauf von Zertifikaten zu verzichten.
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/docs/04-entwicklung.md:
--------------------------------------------------------------------------------
1 |
2 | Entwicklung und Design
3 | =======================
4 |
5 | ## Aufgabenbereich und Zielgruppe
6 |
7 | Dieser Anwendungsbereich betrifft die Entwicklung und das Webdesign von Webangeboten, Webauftritten und Apps. Teil der Entwicklung ist auch die Umsetzung und Bereitstellung von Templates und Musterseiten, die von Autoren verwendet werden. Auch automatisch erstellte Ausgaben werden durch diese Zielgruppe definiert.
8 |
9 | Dieses Kapitel wendet sich an folgende Personenkreise:
10 |
11 | - Webdesigner
12 | - Webentwickler
13 |
14 | ## Grundlagen
15 |
16 | Die Entwicklung von Webangeboten, Webauftritten und Apps ist abhängig von der jeweiligen Arbeitsweise der Beteiligten, von definierten Workflows und Prozessen und von vorgegebenen Frameworks.
17 | Der Leitfaden kann keine Empfehlungen zur Arbeitsorganisation und zum idealen Ablauf eines Webprojektes geben. Dies würde den Rahmen des Leitfadens deutlich sprengen. Daher werden hier nur die wichtigsten Problemfelder bei der Entwicklung und Bereitstellung von Webangeboten, Webauftritten und Apps angesprochen und für eine tiefergehende Beschäftigung auf relevante Webseiten verwiesen.
18 |
19 | Ein umfangreiches Tutorial für die Entwicklung und Gestaltung von Webangeboten und Webauftritten bietet das [Web Accessibility Tutorial des W3C](https://www.w3.org/WAI/tutorials/). Dieses sollte sowohl bei Neuentwicklungen als auch bei der Korrektur vorhandener Webangebote als Grundlage und Nachschlagewerk genommen werden. Das Tutorial erläutert, wie Teile von Webangeboten erstellt werden können, um sowohl die Konformität zu den WCAG sicherzustellen, als auch die Benutzererfahrung für alle Nutzer einer Seite zu erhöhen.
20 | Es gliedert sich in folgende Teile:
21 |
22 | * [Strukturierung und Layout](https://www.w3.org/WAI/tutorials/page-structure/)
23 | * [Menüs und Navigationskonzepte](https://www.w3.org/WAI/tutorials/menus/)
24 | * [Bilder](https://www.w3.org/WAI/tutorials/images/)
25 | * [Tabellen](https://www.w3.org/WAI/tutorials/tables/)
26 | * [Formulare](https://www.w3.org/WAI/tutorials/forms/)
27 | * [Carousels](https://www.w3.org/WAI/tutorials/carousels/)
28 |
29 | Weiterhin wurden für Designer und Entwickler die folgenden Empfehlungen und Hinweise zusammengefasst:
30 |
31 | * [Tipps und Hinweise zum barrierefreien Webdesign](https://www.w3.org/WAI/tips/designing/)
32 | * [Tipps und Hinweise zur Entwicklung von barrierefreien Markup](https://www.w3.org/WAI/design-develop/)
33 |
34 |
35 | Eine weitere hilfreiche Quelle ist die [Standards-Seite des W3C](https://www.w3.org/standards/): Die Plattform enthält ein umfangreiches Nachschlagewerk zur Entwicklung von Webangeboten, Webauftritten, Apps, aber auch von Schnittstellen, strukturierten Daten und Kommunikationsprotokollen.
36 |
37 |
38 | ## Umsetzung
39 |
40 | Die wesentlichen Grundlagen und Beispiele zur Umsetzung werden in den oben genannten Tutorials behandelt. Hier folgen daher lediglich Umsetzungshilfen, die obige Tutorials ergänzen oder Sonderfälle betreffen.
41 |
42 |
43 | ### Strukturierte Daten
44 |
45 |
46 | **Hinweis: Die Umsetzung von strukturierten Daten ist derzeit für die Umsetzung der Barrierefreiheit nicht erforderlich.**
47 | Gleichwohl kommt es zu positiven Auswirkungen in der Form, dass die Webseite durch Software besser analysiert werden kann. Dies führt unter anderem zu einer besseren Auffindbarkeit mit Hilfe von Suchmaschinen und somit wiederum dazu, dass Menschen die Inhalte besser finden, bevor sie die Seite überhaupt besuchen.
48 |
49 | Strukturierte Daten erlauben es, die Semantik von HTML mit Hilfe standardisierter Anweisungen zu erweitern. HTML erlaubt zwar die Auszeichnung von Überschriften, Absätzen und Bildern, definiert jedoch keine Aussagen über den Inhalt.
50 | Menschen können anhand von Kontext und Inhalt erkennen, worum es geht. Diese Möglichkeit hat Software (abseits von Machine Learning) jedoch nicht.
51 | Die in der [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria/) durch die W3C definierte Spezifikation kann dieses Problem auch nicht lösen. Die ARIA erlaubt zwar die Auszeichnung von Strukturen, Bedienelementen und Inhaltstypen einer Webseite, sie macht aber keine Aussagen zur inhaltlichen Bedeutung.
52 |
53 | 
54 |
55 | Das Schema aus der Beschreibung des W3C zur [Spezifikation RDFa 1.1](https://www.w3.org/TR/rdfa-primer/) beschreibt das Problem: Auf der linken Seite ist das zu sehen, was die Browsersoftware sieht: Zwei Überschriften, einen mit `` markierten Text und darunter ein Absatz. Gefolgt von eine Linkliste.
56 |
57 | Ein Mensch hingegen interpretiert es als einen Artikel mit einer Hauptüberschrift, einer kleineren Überschrift zur Angabe des Autors, einer Datumsangabe und darauf folgend den eigentlichen Artikel, gefolgt von einer Tagclound und einem Link zu Copyright-Informationen.
58 |
59 | Suchmaschinen und spezialisierte Softwareprodukte werten strukturierte Daten auf Webseiten aus und liefern diese dann in geeigneter Weise an Menschen aus.
60 |
61 | So zum Beispiel:
62 |
63 | - durch die Anreicherung der Ergebnisliste einer Suche mit Öffnungszeiten, Terminen, lokaler Suche, hervorgehobenen Links;
64 | - durch Auslesen von aktuellen Terminen aus Webseiten und Weiterverwendung dieser in anderen Anwendungen;
65 | - durch die automatische Erkennung von Telefonnummern auf Webseiten und Verknüpfung dieser mit der Anruffunktion auf mobilen Devices.
66 |
67 | Bei der Suche in Google wird beispielsweise bei der Suche nach der Universität Erlangen unterhalb eines Treffers auch eine Auswahlliste an Öffnungszeiten gezeigt.
68 |
69 | 
70 |
71 | Und bei der Suche nach der LMU wird für diese im Infopanel eine Liste der kommenden Veranstaltungen angeboten.
72 |
73 | 
74 |
75 | Der Nebeneffekt dieser Anzeigen ist, dass der Benutzer der Suchmaschine ohne Umweg über die Startseite der jeweilige Webseite gleich zu dem jeweiligen Angebot springen kann.
76 |
77 | In HTML geschieht die Auszeichnung dieser Inhalte durch die Attribute `itemscope` und `itemprop`.
78 |
79 | ##### Beispiel Termin mit strukturierten Daten
80 |
81 | Ohne strukturierte Daten würde eine Terminangabe in HTML so aussehen:
82 |
83 | ```html
84 |
85 |
Webkongress Erlangen
86 |
12. September 2018, 9:00 Uhr
87 | Department Mathematik
88 |
89 | Cauerstraße 11
90 | 91058 Erlangen
91 |
92 |
93 | ```
94 |
95 | Mit Anwendung der [Schema.org-Beschreibung zu Terminen](https://schema.org/Event) wird hieraus folgendes:
96 |
97 |
98 | ```html
99 |
100 |
Webkongress Erlangen
101 |
102 | 12. September 2018, 9:00 Uhr
103 |
104 |
106 |
Department Mathematik
107 |
109 | Cauerstraße 11
110 | 91058
111 | Erlangen
112 |
113 |
114 |
115 | ```
116 |
117 | Dieser HTML-Code kann von einer Software ausgelesen und interpretiert werden. Dabei spielt dann auch die individuelle Schreibweise bei der Datumsangabe keine Rolle mehr, da die standardisierte Form im Attribut `content="2018-09-12T09:00"` angegeben wurde.
118 |
119 | Auf der Seite [schema.org](https://schema.org/) findet sich eine Übersicht der gebräuchlichsten Inhaltstypen mit Beispielen für deren Anwendung. Um zu prüfen, ob die Angaben korrekt waren, kann das [Testtool von Google](https://search.google.com/structured-data/testing-tool?hl=de) aber auch die Browsererweiterung [Semantic Inspector](https://chrome.google.com/webstore/detail/semantic-inspector/jobakbebljifplmcapcooffdbdmfdbjh) (siehe unten) verwendet werde.
120 |
121 |
122 | #### Vertiefung
123 | - Schema.org: [Übersicht über die Typen strukturierter Daten](https://schema.org/docs/schemas.html)
124 | - Google: [Tutorial zu strukturierten Daten](https://developers.google.com/search/docs/guides/)
125 | - lunapark: [Strukturierte Daten: Mehr Aufmerksamkeit in den SERPs](https://www.luna-park.de/blog/29207-strukturierte-daten/)
126 | - t3n: [Rich Snippets](https://t3n.de/news/rich-snippets-anleitung-534054/)
127 |
128 |
--------------------------------------------------------------------------------
/docs/02-einfuehrung.md:
--------------------------------------------------------------------------------
1 | # Einführung und Hintergründe
2 |
3 | Aus rechtlicher Sicht leitet sich der Begriff der Barrierefreiheit aus dem Gleichheitsgrundsatz des Art. 3 GG ab. Dieser garantiert Chancengleichheit und den Ausgleich bestehender Nachteile. Damit soll die Teilnahme aller am öffentlichen Leben umgesetzt werden.
4 |
5 | > Barrierefreies Webdesign zielt darauf ab, Inhalte und Interaktionen im Netz für (möglichst) alle Nutzergruppen und Endgeräte zugänglich zu machen.
6 | >
7 | > - Charlier / Radtke, "Barrierefreies Webdesign" .
8 |
9 |
10 |
11 | Anders ausgedrückt:
12 |
13 | Jedem werden,
14 |
15 | - unabhängig von der jeweiligen Auffassungsgabe
16 | - unabhängig von der jeweiligen Methodik
17 | - unabhängig vom Gerät
18 | - unabhängig vom Betriebssystem
19 | - unabhängig von der Software
20 |
21 | **beim Zugriff auf dieselbe Seite dieselben Inhalte angezeigt**.
22 |
23 | Die Umsetzung dieses Prinzips nutzen nicht allein Menschen mit Behinderungen. Auch neue Medien, neue Geräte und Inhaltsaggregatoren (u.a. von Suchmaschinen), profitieren davon.
24 |
25 | Besonders deutlich wird dies bei der stark gestiegenen Nutzung von Smartphones und Tablet-Rechnern: Wurden noch vor zehn Jahren Webauftritte nur über Desktop-Rechner abgerufen, ist es heute längst üblich geworden, auch mit Smartphones Informationen abzurufen. Diese zeigen moderne Webseiten zwar nicht im selben optischen Design wie auf einem großen Monitor, sie zeigen aber dennoch dieselben Inhalte.
26 |
27 | Moderne Webentwicklung und modernes Webdesign erreichen, dass Webseiten unabhängig vom Gerät, dessen Betriebssystem oder der Software abrufbar sind.
28 |
29 | Die WCAG: Richtlinien für barrierefreie Inhalte
30 | ----------------------------------------------
31 |
32 | Barrierefreiheit adressiert ein weites Feld an Behinderungen, einschließlich visueller, auditiver, motorischer, sprachlicher, kognitiver, Sprach-, Lern- und neurologischer Behinderungen.
33 |
34 | Die Richtlinien für barrierefreie Webinhalte (WCAG: "Web Content Accessibility Guildelines", in [autorisierter deutscher Übersetzung der Version 2.0](https://www.w3.org/Translations/WCAG20-de/) ) definieren, wie sich Inhalte für Menschen mit Behinderungen barrierefreier gestalten lassen. Gleichwohl können die Richtlinien kein Garant für eine hunderprozentige Barrierefreiheit sein: Obwohl die WCAG viele Aspekte der Barrierefreiheit abdecken, haben sie nicht auf alle Arten, Ausprägungen und Kombinationen von Einschränkungen eine Antwort.
35 | Die Einhaltung der Richtlinien sorgt jedoch für einen möglichst breiten Zugang für alle Menschen, unabhängig von ihrer individuellen Lebenssituation. Zudem wird so auch eine deutlich verbesserte Benutzerfreundlichkeit geschaffen und es kommt zu einer signifikant besseren Auffindbarkeit von Webseiten und deren Inhalten über gängige Suchmaschinen.
36 |
37 | Die Richtlinien wurden so konzipiert, dass sie sich weitgehend auf verschiedene Webtechnologien der Gegenwart und Zukunft anwenden lassen. Die WCAG sind öffentlich zugänglich und werden ergänzt durch:
38 |
39 | - ausführliche Erläuterungen mit Anwendungsbeispielen,
40 | - Tutorien und Schulungsmaterialien,
41 | - die Bereitstellung von Testverfahren (u.a. die WCAG-EM),
42 | - die Auflistung von geeigneten Werkzeugen und Verfahren.
43 |
44 | Die WCAG sind eine Empfehlung des W3C und wurden in der Web Content Accessibility Guidelines Working Group (früher abgekürzt "WCAG-WG", heute "ACWG") erarbeitet.
45 | Die WCAG wurden – wie beim W3C üblich – gemäß dem [W3C-Verfahren](https://www.w3.org/WAI/standards-guidelines/w3c-process/) entwickelt und über mehrere öffentliche Kommentierungsphasen international abgestimmt. Die letzte Version der WCAG – die [WCAG 2.1](https://www.w3.org/TR/WCAG21/) wurde am 5. Juni 2018 als Richtlinie veröffentlicht.
46 |
47 | Das Ziel des W3C ist es, mit den WCAG einen gemeinsamen, international abgestimmten Standard für die Barrierefreiheit von Webinhalten zur Verfügung zu stellen, der die Bedürfnisse von Einzelpersonen, Unternehmen und Organisationen auf internationaler Ebene erfüllt.
48 | Hier zeigt sich auch der Vorteil gegenüber kommerziell getriebenen Empfehlungen und Zertifikaten einzelner Anbieter oder nationalen Insellösungen wie der BITV, die sich zwar an den WCAG in der Version 2.0 orientiert, sie jedoch durch eigene Auslegungen und Einschränkungen abschwächen oder auch andere Prioritäten setzen.
49 |
50 | Die EU-Richtlinie 2016/2102 fordert für das Angebot von Webseiten, einschließlich von Dateiformaten aus Büroanwendungen (u.a. PDF-Dokumenten) und mobiler Anwendungen, die Einhaltung der [Europäischen Norm EN 301 549](https://www.etsi.org/deliver/etsi_en/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf) (In der Version 2.1.2 aus dem August 2018). Die Europäische Norm bezieht sich bei der konkreten Beschreibung der Umsetzung auf die WCAG 2.1 in der Konformitätsstufe AA.
51 | Daher sollte zukünftig nur noch die Konformität zu den WCAG als Maßstab für die Umsetzung und Prüfung von Inhalten, Webangeboten und Dokumenten verwendet werden.
52 |
53 | Auf den WCAG abgeleitete oder interpretierte Formen und Testverfahren (z.B. der "BITVTest") sollten nicht mehr verwendet werden.
54 |
55 |
56 | ### Aufbau und Inhalt der WCAG
57 |
58 | Die WCAG basieren auf vier grundlegenden Prinzipien, denen mehrere Richtlinien zugeordnet sind. Zur Erfüllung dieser Richtlinien wurden 76 testbare Erfolgskriterien definiert, mit denen geprüft werden kann, ob die Richtlinien eingehalten werden.
59 |
60 | Aufgrund der vorhandenen ausführlichen und guten Literatur, wird hier darauf verzichtet, weitere Ausführungen zu ergänzen. Wird in den folgenden Kapiteln auf einzelne Erfolgskriterien Bezug genommen wird, sind diese gesondert gekennzeichnet.
61 |
62 | Detailreiche Erläuterungen zum Aufbau der WCAG, deren Prinzipien, Kriterien, Konformitätsbedingungen sowie der weiteren Bestandteile, können über folgende Seiten und Artikel gelesen werden:
63 |
64 | - W3C:
65 | - WCAG 2.1 (W3C Recommendation vom 5. Juni 2018),
66 | - Web Accessibility Initiative, WAI,
67 | - Aktion Mensch: WCAG 2.0 im Überblick,
68 | - Jan Hellbusch: Richtlinien: WCAG 2.0,
69 |
70 |
71 | Gesetze, Verordnungen und Richtlinien
72 | -------------------------------------
73 |
74 | Die Barrierefreiheit von Webangeboten für Einrichtungen des öffentlichen Dienstes ist seit der Verabschiedung des Bayerischen Gesetzes zur Gleichstellung, Integration und Teilhabe von Menschen mit Behinderung
75 | (BayBGG, ) im Jahr 2003 verbindlich geregelt. Die dazugehörige Verordnung BayBITV () vom 24. Oktober 2006 regelt hierbei verbindlich die Art der Umsetzung und Fristen und Empfehlungen.
76 | Für bayerische staatliche Hochschulen sind die Fristen in der BayBITV nur Empfehlungen; dies gilt auch für die BITV 2.0. Die vermeintliche Großzügigkeit der Verordnung hinsichtlich der Art der Umsetzung ändert jedoch nichts an der gesetzlichen Pflicht zur Barrierefreieit, die seit Jahren besteht und bis heute bei vielen Webangeboten nicht erfüllt ist.
77 |
78 | Die entsprechenden Fristen zur Umsetzung der Barrierefreiheit von Internet-Angeboten nach dem bisherigen BayBGG sind seit 2010 abgelaufen. Gleichwohl wurden diese gesetzlichen Vorgaben bis heute bei vielen Webangeboten nicht oder nicht ausreichend erfüllt.
79 | Das Problem der mangelnden Umsetzung und der Wunsch nach Harmonisierung der Gesetzgebung auf EU-Ebene führte zum Erlass der Richtlinie 2016/2102. Aus diesem Grund wurde eine Richtlinie entworfen, die sich dieses Problems annahm:
80 | Am 18.7.2016 wurde auf EU-Ministerratsebene die "Web-Accessibility-Richtlinie" angenommen, die nach der darauf folgenden Annahme von Rat und Parlament am 20. Tag nach ihrer Veröffentlichung im Amtsblatt der EU (ABl. L 327, 2. Dezember 2016) - am 22. Dezember 2016 - in Kraft trat.
81 |
82 | Mit der Richtlinie soll eine Angleichung der Rechts- und Verwaltungsvorschriften der Mitgliedstaaten zum barrierefreien Zugang zu Webseiten öffentlicher Stellen erfolgen. Sie soll dabei unterstützen, die nationalen Verpflichtungen hinsichtlich eines barrierefreien Webzugangs zu erfüllen und das Bekenntnis der Mitgliedstaaten zum Übereinkommen der Vereinten Nationen über die Rechte von Menschen mit Behinderungen in Bezug auf die Websites öffentlicher Stellen zu bekräftigen. Gegenstand der vorgeschlagenen Richtlinie sind sowohl Webseiten, als auch Dokumente und Apps öffentlicher Stellen, da sie Informationen und Dienste bereitstellen, die für Bürgerinnen und Bürger von grundlegender Bedeutung sind.
83 |
84 | In technischer Hinsicht gilt als Richtschnur die Erfüllung des Konformitätsstufe AA der [Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines - WCAG 2.1)](https://www.w3.org/TR/WCAG21/).
85 |
86 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Creative Commons Attribution-NonCommercial 4.0 International Public License
2 |
3 | By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
4 |
5 | Section 1 – Definitions.
6 |
7 | Adapted Material means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image.
8 | Adapter's License means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License.
9 | Copyright and Similar Rights means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
10 | Effective Technological Measures means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements.
11 | Exceptions and Limitations means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
12 | Licensed Material means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
13 | Licensed Rights means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
14 | Licensor means the individual(s) or entity(ies) granting rights under this Public License.
15 | NonCommercial means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange.
16 | Share means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them.
17 | Sui Generis Database Rights means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
18 | You means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning.
19 |
20 |
21 | Section 2 – Scope.
22 |
23 | License grant.
24 | Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to:
25 | reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and
26 | produce, reproduce, and Share Adapted Material for NonCommercial purposes only.
27 | Exceptions and Limitations. For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions.
28 | Term. The term of this Public License is specified in Section 6(a).
29 | Media and formats; technical modifications allowed. The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material.
30 | Downstream recipients.
31 | Offer from the Licensor – Licensed Material. Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License.
32 | No downstream restrictions. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
33 | No endorsement. Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i).
34 | Other rights.
35 |
36 | Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise.
37 | Patent and trademark rights are not licensed under this Public License.
38 | To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes.
39 |
40 |
41 | Section 3 – License Conditions.
42 |
43 | Your exercise of the Licensed Rights is expressly made subject to the following conditions.
44 |
45 | Attribution.
46 |
47 | If You Share the Licensed Material (including in modified form), You must:
48 |
49 | retain the following if it is supplied by the Licensor with the Licensed Material:
50 | identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
51 | a copyright notice;
52 | a notice that refers to this Public License;
53 | a notice that refers to the disclaimer of warranties;
54 | a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
55 | indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
56 | indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License.
57 | You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information.
58 | If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable.
59 | If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of the Adapted Material from complying with this Public License.
60 |
61 |
62 | Section 4 – Sui Generis Database Rights.
63 |
64 | Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
65 |
66 | for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only;
67 | if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and
68 | You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database.
69 | For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights.
70 |
71 |
72 | Section 5 – Disclaimer of Warranties and Limitation of Liability.
73 |
74 | Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.
75 | To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.
76 | The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
77 |
78 |
79 | Section 6 – Term and Termination.
80 |
81 | This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically.
82 | Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:
83 |
84 | automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or
85 | upon express reinstatement by the Licensor.
86 | For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License.
87 | For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License.
88 | Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
89 |
90 |
91 | Section 7 – Other Terms and Conditions.
92 |
93 | The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed.
94 | Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License.
95 |
96 | Section 8 – Interpretation.
97 |
98 | For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License.
99 | To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions.
100 | No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor.
101 | Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority.
102 |
103 |
104 |
--------------------------------------------------------------------------------
/docs/05-recht.md:
--------------------------------------------------------------------------------
1 | # Organisatorische und rechtliche Anforderungen
2 |
3 |
4 | ## Aufgabenbereich und Zielgruppe
5 |
6 | Dieser Anwendungsbereich betrifft die rechtlichen und regularischen
7 | Aspekte bei dem Betrieb eines Webangebotes.
8 |
9 | Dieses Kapitel wendet sich an folgende Personenkreise:
10 |
11 | - CIOs
12 | - Rechenzentren und Provider
13 | - Verantwortliche von Webauftritten
14 | - Verantwortliche Auftragsgeber
15 |
16 | Er dient als Ergänzung und Vertiefung des Handlungsleitfadens für IT-Verantwortliche "Barrierefreie Software V1.0".
17 |
18 | ## Grundlagen
19 |
20 | Barrierefreiheit ist kein neues Thema. Da die Exekutive durch das Onlinezugangsgesetz und E-Goverment-Gesetze verpflichtet ist, ihre Leistungen und Informationen auch digital anzubeiten, gewinnt die Barrierefreiheit stark an Bedeutung.
21 | Verfassungsrechtlich gut begründbar ist es, einen Leistungsanspruch auf Zugänglichkeit von Informationen für benachteiligte Personen anzunehmen (Vgl. Sachs/Bethge GG Art. 5 Rn. 62-63, beck-online zu Art. 5 Abs. 1 2. Halbsatz GG i.V.m. Art. 3 Abs. 1 GG).
22 | Die verfassungrechtliche Grenze dieser Leistung ergibt sich nur aus den verfügbaren Mitteln der handelnden Behörde.
23 |
24 | ### Richtlinie 2016/2016/EU über den barrierefreien Zugang zu den Websites und mobilen Anwendungen öffentlicher Stellen
25 |
26 | Mit der Richtlinie 2016/2102/EU der Europäischen Union vom 26. Oktober 2016 über den barrierefreien Zugang zu den Websites und mobilen Anwendungen öffentlicher Stellen ist zunächst die [europäischen Norm EN 301 549 V1.1.2](https://www.etsi.org/deliver/etsi_en/301500_301599/301549/01.01.02_60/en_301549v010102p.pdf) verbindlich geworden; sie wurde im August 2018 durch die [EN 301 549 V2.1.2](https://www.etsi.org/deliver/etsi_en/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf) aktualisiert. Für den Bereich Web (Dokumente und Software) – enthält diese Norm alle Level A und Level AA - Erfolgskriterien der WCAG 2.1 als Mindestanforderung. Für Nicht-Webdokumente orientiert sich die Norm an den Richtlinien der WCAG2ICT Task Force.
27 |
28 | Vereinfacht kann gesagt werden, dass der Maßstab für Barrierefreiheit im Web die WCAG Standard in der seiner aktuellen Fassung ist. Aktuell liegen die WCAG in der Fassung 2.1 vor.
29 | Eine neue Fassung der WCAG 3.0 befindet sich derzeit im Abstimmungsprozess.
30 |
31 | ### Verordnung zur Schaffung barrierefreier Informationstechnik (BITV)
32 |
33 | Auf Bundesebene gilt die ["Barrierefreie-Informationstechnik-Verordnung" (BITV)](https://www.gesetze-im-internet.de/bitv_2_0/BJNR184300011.html). Diese schreibt vor, wie nach dem Behindertengleichstellungsgesetz (BGG) die Träger öffentlicher Gewalt, insbesondere die Bundesbehörden, Barrierefreiheit technisch umsetzen sollen. Viele Landesgesetze und Landesverordnungen verweisen zur Umsetzung der Landesgesetze auf die BITV.
34 |
35 | Die BITV wurde zum 21. Mai 2019 auf die Version 2.0 aktualisiert um sie entsprechend der EU Richtlinie auf die Europäische Norm anzupassen.
36 |
37 |
38 | ### Bayerisches Gesetz zur Gleichstellung, Integration und Teilhabe von Menschen mit Behinderung
39 |
40 | Die einfache gesetzliche Pflicht zur Barrierefreiheit von Webseiten und Programmen folgt in Bayern für staatliche Hochschulen aus Art. 13 BayBGG. Dieser wurde auch bereits an die Richlinie angepasst und umfasst nun explizit auch mobile Anwendungen. Die Details werden wie bisher in einer Verordnung geregelt. Jedoch waren Apps auch bereits zuvor vom BayBGG erfasst.
41 |
42 | ### Bayerische Barrierefreie Informationstechnik-Verordnung
43 |
44 | Die Bayerische Barrierefreie Informationstechnik-Verordnung (BayBITV) setzte in der Fassung von 2006 voraus, dass die Zugangspfade barrierefrei auszugestalten waren. Für bestehende (vor 31.12.2006) waren je nach Zielgruppe Übergangsfristen bis zum 31.12.2010 bzw. 31.12.2013 vorgesehen.
45 |
46 | Die Umsetzung gemäß § 2 BayBITV (2006) und § 1 Abs. 1 BayBITV (Stand bis zum 30. September 2018) gibt für Webangebote der staatlichen Hochschulen die Empfehlung, die Barrierefreiheit nach der BITV Anlage in der Stufe Priorität I umzusetzen. Für zentrale Navigations- und Einstiegsangebote ist die Empfehlung, diese gemäß der BITV Anlage in der Stufe Priorität II umzusetzen.
47 |
48 | Für den Anwendungsbereich der Richtlinie 2016/2102/EU sind die Empfehlungen der BITV hinfällig. Maßgeblicher Standard für Webanwendungen der Hochschulen ist nun die WCAG über die Europäischen Norm EN 301 549 V2.1.2. Festzustellen ist, dass Hochschulen, die sich bereits vorher an die WCAG orientierten, einen Vorsprung in der Umsetzung der Barrierefreiheit erlangten.
49 |
50 | Die Verordnung wurde mit Wirkung zum 1. Oktober 2018 an die Richtlinie 2016/2102/EU angepasst: Am 8. November 2016 wurde die **Bayerische Verordnung über die elektronische Verwaltung und die barrierefreie Informationstechnik (Bayerische E-Government-Verordnung – BayEGovV)** erlassen, welche die bisherige BayBITV ersetzt.
51 |
52 | Für die technischen Anforderungen wird trotz der europäischen Norm auf die Anlage 1 der Barrierefreie Informationstechnik-Verordnung verwiesen. Ob es weiter ein Nebeneinanderer des deutschen Standards und der europäischen Norm gegeben wird, bleibt abzuwarten. Gemäß fanden die neuen Pflichten aus der BayBTIV mit den Änderungen zum 1. Oktober 2018 gemäß § 5a BayBITV mit unterschiedlichen Fristen erst ab dem 1. Oktober 2019 Anwendung. Bis zu diesem Zeitpunkt bestand für die Hochschulen keine rechtliche Verpflichtung nach der BITV Anlage die Barrierefreiheit herzustellen.
53 | Im Hinblick auf die Überarbeitung der BITV sollte die Umsetzung an Hochschulen nach der Europäischen Norm EN 301 549 V2.1.2 erfolgen und dabei die WCAG 2.1 miteinbeziehen.
54 |
55 | ## Umsetzung
56 |
57 | Die Umsetzung erfordert zum einen die Beachtung formaler Aspekte (Barrierefreiheitserklärung, Feedback-Mechanismus und Umsetzungenfristen) zum anderen inhaltliche Aspekte (Barrierefreiheit der Inhalte durch technische und organisatorische Maßnahmen). Hinzu kommen die Besonderheiten aus der Umsetzung in Bayern. Ergänzend wird die Umsetzung durch Berichtspflichten an die EU-Kommission und leichtere Durchsetzungsmöglichkeiten für betroffene Menschen mit Behinderungen angetrieben.
58 |
59 | ### Barrierefreiheitserklärung gemäß der Richtlinie 2016/2102/EU
60 |
61 | Die Richtline führt eine Barrierefreiheitserklärung für Webseiten und mobile Anwendungen verpflichtend ein. Der Inhalt der Erklärung wird durch Art. 7 vorgegeben, dessen Inhalt die Kommission in einer Mustererklärung festlegt.
62 |
63 | Eine [Mustererklärung für die Erklärung zur Barrierefreiheit](https://ec.europa.eu/info/law/better-regulation/have-your-say/initiatives/1753-Commission-implementing-decision-on-establishing-a-model-accessibility-statement-under-the-WAD) wurde im Oktober 2018 durch die EU Kommission verabschiedet.
64 | Sie sieht demnach folgende Bestandteile vor:
65 |
66 | 1. Verpflichtende Angaben
67 |
68 | - Eine Konformitätserklärung; inwieweit ist die Website oder die mobile Anwendung vollständig, partiell oder nicht konform zur EN 301 549.
69 | - Eine Auflistung des nicht zugänglichen Inhaltes.
70 | - Eine Angabe über die Methodik der Prüfung.
71 | - Die Bereitstellung eines "Feedback Mechanismus". Hierbei soll dem Besucher des Webangebots eine Hilfestellung gegeben werden, wohin dieser sich wenden kann um nicht zugängliche Inhalte zu melden und zu erlangen.
72 | - Die Angabe der jeweils zuständigen Aufsichtsbehörde an der sich ein Bescher des Webangebots wenden kann, wen ihm keine Hilfe geboten werden konnte.
73 |
74 | 2. Optionale Angaben
75 |
76 | Unter den optionalen Angaben finden sich Informationen wie die einer generellen Stellungsnahme zur Einhaltung der Barrierefreiheit, dem Datum, Angaben zum letzten Update des Angebots, ein Link oder der Download des vollständigen Testberichts, sowie weitere Kontaktangaben und Hilfsangebote.
77 |
78 | Das Bayerische Staatsministerium für Digitales veröffentlichte für die Einrichtungend des Freistaats eine [Mustererklärung zur Barrierefreiheit](https://www.stmd.bayern.de/service/handlungsleitfaden-digitale-barrierefreiheit/mustererklaerung-zur-barrierefreiheit/).
79 |
80 | #### Bestandsaufnahme und innerorganistorische Gestaltung
81 |
82 | Um auch den Gestaltungsspielraum, den die Richtlinie 2016/2102/EU bietet auszuschöpfen, ist im ersten Schritt eine Bestandsaufanhme der wichtigsten Webseiten, Social-Media-Kanäle und Verwaltungsdokumente durchführen. Erste Schritte erhalten Sie im Kapitel "Test zur Barrierefreiheit". Optimal bieten Sie für die Mitglieder der Hochschule Veranstaltungen zum Thema Barrierefreiheit an, und setzen ein Germium zur Begleitung der Umsetzungsprojekte ein und verzahnen Barrirefreiheit in die Schulungsprogramme. Gerade für Webseiten wäre zu prüfen, ob eine höhere Konformität der Inhalte durch einen Freigabeprozess oder zentral organisierte Redaktion erreichbar ist.
83 |
84 | #### Feedback-Mechanismus
85 |
86 | Über die konkrete Umsetzung des Feedback-Verfahrens äußert sich die Richtlinie 2016/2102/EU kaum.
87 | Aus der Mustererklärung für die Erklärung zur Barrierefreiheit wird ersichtlich, dass es eine Meldemöglichkeit geben muss und eine verantwortliche Person zu benennen ist. Aus den Erwägungsgründen wird zudem ersichtlich, dass über den Feedback-Mechanismus nicht barrierefreie Informationen, Dienstleistungen oder Dokumente für Betroffene barrierefrei zugänglich gemacht werden sollen.
88 | Die Umsetzung in Bayern gemäß § 2 BayBITV verlangt keine Öffentlichkeit für die Beschwerden, ähnlich einer Kommentarfunktion oder einem Diskussionsforum. Eine einfache (barrierefreie) Kontaktmöglichkeit zur Mitteilung von Inhalten, die nicht barrierefrei sind, ist ausreichend.
89 |
90 | Die Beantwortung der Anfragen muss innerhalb von sechs Wochen gemäß § 3 Abs. 2 S. 1 BayBITV erfolgen. Bei einer nicht zufriedenstellenden Antwort können Betroffene ein Durchsetzungsverfahren beim Landesamt für Digitalisierung, Breitband und Vermessung einleiten.
91 |
92 |
93 | ### EU-Fristen
94 |
95 | Die Barrierefreiheit war bereits nach nationalem Recht umzusetzen. Werden jedoch die neuen Fristen aus der Richtlinie 2016/2102/EU nicht eingehalten, liegt neben der verletzten gesetzlichen Pflicht ein Verstoß gegen EU-Recht vor. Aus diesem Grund sind die neuen Fristen von besonderer Relevanz.
96 |
97 | - Alle neuen **Dateiformate (PDF u.a.)** aus Büroanwendungen mussten **ab dem 23.09.2018** barrierefrei sein.
98 | Ältere Dateien mussten bis dahin ebenfalls barrierefrei sein, wenn sie für aktive
99 | Verwaltungsverfahren benötigt werden. (z.B. Prüfungsordnungen!).
100 | Es wird jedoch gleiche Umsetzungszeitraum dem Medium (wie nachfolgend) entsprechend zugebilligt werden müssen.
101 |
102 | - **Webseiten**, die nach dem 23.09.2018 veröffentlicht wurden, mussten **bis zum 23.09.2019** auf
103 | Stufe AA konform zu WCAG 2.1 sein; ältere Webseiten erst zum 23.09.2020.
104 |
105 | - **"Intranets/Extranets"** mussten **bis zum 23.09.2019** barrierefrei sein.
106 | Ausnahmen gelten für Inhalte die vor dem 23. September 2019 erstellt wurden.
107 |
108 | - **Mobile Anwendungen** müssen **bis zum 23.06.2021** barrierefrei sein.
109 |
110 | ### Barriefreiheit und ihre Grenzen
111 |
112 | Der Handlungsleitfaden für IT-Verantwortliche "Barrierefreie Software V1.0" gibt den IT-Entscheidern auf den Seiten 9 und 10 umfassenden Empfehlungen, wann gemäß § 1 Abs. 1 BayBITV eine im Einzelfall durch die Einhaltung der Barrierefreiheitsanforderungen eine unverhältnismäßige Belastung besteht.
113 |
114 | #### Vertiefung der Ausnahmen
115 |
116 | Ergänzend zum Handlungsleitfaden für IT-Verantwortliche "Barrierefreie Software V1.0" können die nachfolgenden Passagen bei der Entscheidungsfindung unterstützen.
117 | So gewährend die Richtlinie 2016/2102/EU einige Ausnahmen bei bestimmten Arten oder bei bestimmten Alter von Inhalten:
118 |
119 | * Dateiformate von Büroanwendungen, die vor dem 23. September 2018 veröffentlicht wurden, soweit nur dokumentarisch (z.B. Folien zu früheren Veranstaltungen)
120 | * aufgezeichnete zeitbasierte Medien, die vor dem 23. September 2020 veröffentlicht wurden
121 | * live übertragene zeitbasierte Medien
122 | * Online-Karten und Kartendienste, sofern bei Karten für Navigationszwecke wesentliche Informationen in einer barrierefrei zugänglichen Weise digital bereitgestellt werden
123 | * Inhalte von Dritten, die von der betreffenden öffentlichen Stelle weder finanziert noch entwickelt werden, noch deren Kontrolle unterliegen
124 | * Reproduktionen von Stücken aus Kulturerbesammlungen, die nicht vollständig barrierefrei zugänglich gemacht werden können
125 | * Inhalte von Extranets und Intranets, die vor dem 23. September 2019 veröffentlicht wurden
126 |
127 | #### Rückausnahmen
128 | Die Richtlinie 2016/2012 EU hat einen kleineren Anwendungsbereich als das BayBGG. Während die Richtlinie 2016/2102/EU Webseiten und Apps regelt, umfasst das BayBGG Internet- und Intranetauftritte und Internetangebote sowie die von ihnen zur Verfügung gestellten grafischen Programmoberflächen. Soweit die EU-Richtline 2016/2012 aber keine Anwendung findet, wie es z.B. für Karten oder digitalisierte Kulturgüter der Fall ist, sind auch diese Ausnahmen barrierefrei anzubieten.
129 | Die Grenze bleibt das technisch Machbare.
130 |
131 | #### Verhältnismäßigkeitsausnahme
132 | Durch den größeren Anwendungsbereich kommt der Verhältnismäßigkeit der Umsetzung der Barrierefreiheit eine große Bedeutung zu.
133 | Gleichwohl zeigen die Erwägungsgründe der Richtlinie 2016/2012 EU, dass die Zeit von Ausreden vorbei ist.
134 | So sollen nicht barrierefreie Inhalte in allen Fällen so barrierearm wie möglich angeboten werden.
135 | Die Barrierefreiheit ist auch kein Grund veröffentlichungspflichtige Dokumente nicht zu veröffentlichen, da insoweit die Aufgabenerfüllung Vorrang vor der Barrierefreiheit genießt.
136 | Unmissverständlich werden jedoch **mangelnde Priorität, Zeit oder Kenntnis als Rechtfertigungsgründe abgelehnt**. Ebenso die Nichtentwicklung von Softwaresystemen zur barrierefreien Verwaltung von Inhalten auf Websites und in mobilen Anwendungen.
137 | Die Angebote sollen auch bestmöglichst zu assistiven Technologien kompatibel sein. Ebenso sollten Programmierschnittstellen angeboten werden.
138 |
139 | In der konkreten Ausgestaltung sieht der Bayerische Gesetzgeber eine schrittweise technische Umstellung der Angebote vor. Dies erspart jedoch nicht die Bestandsaufnahme für jedes Angebot (Webauftritte, Intranets und mobile Anwendungen) hinsichtlich der Barrierefreiheit.
140 |
141 | Art. 13 Abs. 1 S. 2 schränkt die Umsetzung auf die technischen, finanziellen, wirtschaftlichen und verwaltungsorganisatorischen Möglichkeiten des jeweiligen Trägers öffentlicher Gewalt ein. Hier können auch die Ausnahmen der Richtlinie 2016/2102/EU wieder hineingelesen werden, wie sie etwa für Karten oder digitalisierte Kulturgüter vorgesehen sind.
142 |
143 | Mit Blick auf Art. 5 der Richtlinie 2016/2012 EU wird dies noch etwas spezifischer ausgeführt. Insbesondere in Hinblick auf
144 |
145 | - Größe, Ressourcen und Art der betreffenden öffentlichen Stelle;
146 | - Die Umsetzungskosten im Vergleich zu den mit einer Umsetzung erzielbaren Vorteilen;
147 | - Nutzungshäufigkeit der Webseiten und mobilen Anwendungen durch Menschen mit Behinderungen.
148 |
149 | Ziel ist, dass durch die Umsetzung der Barrierefreiheit keine übermäßige organisatorische oder finanzielle Last entsteht.
150 | Da die Umsetzung von barrierefreiem Webdesign Vorteile mit sich bringt wie
151 |
152 | - responsives Design,
153 | - Nutzung der Angebote von jedem Endgerät
154 | - Optimierung der Inhalte für Suchmaschinen
155 |
156 | überwiegen die Investitionen die Kosten.
157 |
158 | ### Durchsetzungsmöglichkeiten für Betroffene
159 |
160 | Für Öffentliche Stellen unter Verantwortung des Bundes ist die [Bundesfachstelle Barrierefreiheit]( ) eingerichtet worden. Sie übernimmt die Aufgaben:
161 |
162 | * Zentralen Anlaufstelle für das Schlichtungsverfahren
163 | * Erstberatung
164 | * Aufnahme der Überwachungsfunktion (ab 2020)
165 | * Koordination der Meldungen der Bundesländer
166 | * Reporting an die EU Kommission
167 |
168 |
169 |
170 | ### Bayerische Besonderheiten
171 |
172 | #### Behandlung von Schlichtungsverfahren, Überwachungs- und Kontrollfunktion
173 |
174 | Für die Durchsetzung und Überwachung ist für Träger öffentlicher Gewalt in Bayern ist das Landesamt für Digitalisierung, Breitband und Vermessung gemäß § 3 BayBITV zuständig.
175 |
176 | Das Landesamt überwacht und kontrolliert die Umsetzung und wird Beschwerden von Nutzern nachgehen.
177 |
178 | - Es nimmt Beschwerden über Feedback-Mechanismus an und behandelt diese.
179 |
180 | - Es prüft die Webauftritte der Öffentlichen Stellen bzw. fordert hierzu Berichte ein.
181 |
182 | - Und meldet den Status für den Freistaat Bayern ab Juni 2021 an den Bund.
183 |
184 |
185 |
186 | #### Bayerische Fristen
187 |
188 | Da der einfachgesetzliche Auftrag in Bayern schon seit 2006 besteht, sind die Umsetzungfristen in Bayern angepasst.
189 |
190 | Aktuell gelten nach der im Oktober 2018 erneuerten BayBITV 2.0 folgende Fristen für Öffentliche Stellen:
191 |
192 | * Inhalte, die bis zum 30. September 2018 erstellt wurden: bis 30. September 2020
193 | * Alle danach erstellten Inhalte: bis 30. September 2019
194 | * Mobile Anwendungen: bis 1. Juli 2021
195 |
196 | Es handelt sich dabei um **Umsetzungsfristen**. Die alten Pflichten (BayBITV1.0) gelten bis zum Zeitpunkt der neuen Umsetzung fort - und waren bereits abgelaufen.
197 | Daher beginnt die Umsetzung jetzt und hätte schon beginnen müssen.
198 |
199 | Eine Frist zur Bereitstellung einer Barrierefreiheitserklärung wurde in der BayBITV nicht definiert. Daher gilt für diese die Frist der EU Richtlinie: ab dem 21. September 2019 müssen Webangebote der öffentlichen Stellen eine Barrierefreiheitserklärung aufweisen mit Angabe des Standes der Umsetzung der Barrierefreiheit, der Bereitstellung eines feedback-Mechanismus und der Verlinkung der aufsichtsführenden Stelle (das Landeamt für Digitalisierung).
200 |
201 | #### Entwicklung und Ablauf der Umsetzungsfristen in Bayern seit 2005
202 |
203 | |Träger| Erstellungsdatum des Webangebotes |BayBITV 1.0 (2006)|BayEGovV (2016) |
204 | | ------------- | ------------- | ------------- | ------------- |
205 | |Staatsverwaltung|31. Dezember 2005 oder älter|bis 31. Dezember 2013|bereits abgelaufen|
206 | |Staatsverwaltung|1. Januar 2006 oder danach|bis 31. Dezember 2012|bereits abgelaufen|
207 | |Staatsverwaltung|30. September 2018 oder älter|-|bereits abgelaufen (1. Oktober 2020)|
208 | |Staatsverwaltung|1. Oktober 2018 oder danach|-|bereits abgelaufen (1. Oktober 2019)|
209 | |Hochschulen|30. September 2018 oder älter|Keine Frist, aber Empfehlung|bereits abgelaufen (1. Oktober 2020)|
210 | |Hochschulen|1. Oktober 2018 oder danach|Keine Frist, aber Empfehlung|bereits abgelaufen (1. Oktober 2019)|
211 | |Seiten zur Teilhabe|egal|bis 31. Dezember 2010|bereits abgelaufen|
212 | |Apps|-|Wie Webseiten|ab 1. Juli 2021|
213 |
214 | Für Dateiformate aus Büroanwendungen sind die gleichen Fristen maßgeblich. Intranets/Extranets sind wie Webseiten zu behandeln.
215 |
216 | #### Deutsche Gebärdensprache und Leichte Sprache
217 |
218 | Für Neuveröffentlichung ab dem 1. Oktober 2018 sind nach Fristablauf (siehe zuvor) zusätzliche Inhalte gemäß Anlage 2 BITV 2.0 in Deutscher Gebärdensprache und in Leichter Sprache bereitzustellen.
219 | Dies umfasst
220 |
221 | - Informationen zum Inhalt
222 | - Navigationshinweise
223 | - Hinweise auf weitere Informationen, die in diesem Auftritt entweder in Deutscher Gebärdensprache oder in Leichter Sprache eingestellt sind.
224 |
225 | Es bietet sich an, den Auftritt neben Deutsch und Englisch die Sprachversion Deutscher Gebärdensprache und Leichte Sprache anzubieten. Eine Wirtschaftlichkeit Inhalte in dieser Form anzubieten ist abseits der zentrale Navigations- und Einstellungsangebote sehr genau zu prüfen.
226 |
227 | ## Vertragliche Anforderungen bei Auftragsarbeiten
228 |
229 | Werden Webseiten nicht hochschulintern, sondern extern entwickelt oder gestaltet, hat die Einrichtung, die einen solchen Auftrag vergibt, neben dem Haushaltsrecht sicherzustellen, dass in der Auftragsdefinition die Einhaltung der EU-Norm zur Barrierefreiheit verbindlich gefordert wird. Dies gilt nicht nur für Programmierarbeiten, sondern auch für gestalterische Leistungen.
230 |
231 | ### Die Schritte zum Auftrag (vereinfachte Darstellung)
232 |
233 | 1. Wirtschaftlichkeitsbetrachtung
234 | 2. Konformität zur Europäischen Norm EN 301 549 V2.1.2 - Der Handlungsleitfaden für IT-Verantwortliche "Barrierefreie Software V1.0" enthält auf Seite 16-18 wertvolle Empfehlungen zu Leistungsanforderung für die Beschaffung. Die [Stabsstelle IT-Recht](https://www.rz.uni-wuerzburg.de/dienste/it-recht/) bietet dafür gegen Ende 2018 einen Mustertragvertrag an.
235 | 3. Einhalten des Vergaberechts
236 | - a) Dokumentation der Entscheidung und des Verfahrens
237 | - b) Bis € 1000 (ohne Umsatzsteuer) ist eine Direktvergabe möglich
238 | - c) Bis € 50.000 (ohne Umsatzsteuer) ist bei entsprechender Begründung die Vergabe nach Einholung von drei Angeboten möglich. Ab € 25.000 (ohne Umsatzsteuer) ist eine elektronische Vergabe vorgesehen.
239 | - d) Bei größeren Aufträgen sollte stehts eine Abstimmung mit dem Einkauf erfolgen
240 |
241 | ### Die Schritte nach dem Auftrag
242 | 1. Prüfung des Werkes bei der Abnahme auf seine Barrierefreiheit, ggf. mit Hilfe Ihres Rechenzentrums
243 | 2. Vorbehalten der Abnahme bis zur erfolgreichen Barrierefreiheitsprüfung
244 | 3. Bei fehlender Barrierefreiheit: Setzen einer Frist von ca. zwei Wochen bis einem Monat zur Umsetzung der Barrierefreiheit
245 | 4. Erneute Prüfung auf Barrierefreiheit
246 | 5. Nach Fristablauf Durchsetzung Ihrer Rechte anstreben
247 |
248 | - a) Verlangen eines Vorschusses in Höhe der Kosten für die Herstellung der Barrierefreiheit
249 | - b) Alternativ den Vertrag auflösen oder teilweise die Vergütung zurückfordern
250 | - c) Geltendmachen von Schadensersatzansprüchen
251 |
252 | ## Weitere Pflichtangaben auf Webseiten
253 |
254 | Da die Webseite um eine Barrierefreiheitskonformitätserklärung zu erweitern ist, lohnt sich in dem Zuge auch einen prüfenden Blick auf Impressum und Datenschutzerklärung zu werfen.
255 |
256 | ### Impressum
257 |
258 | Häufige Fehler sind die fehlende Angabe der Rechtsform, fehlende gesetzliche Vertreter oder ein nicht aktualisierter Name der zuständigen Aufsichtsbehörde.
259 |
260 | Über ein [Webformular](https://www.rz.uni-wuerzburg.de/dienste/it-recht/generatoren-beta/) stellt die Stabsstelle IT-Recht der bayerischen staatlichen Universitäten und Hochschulen im Rahmen Ihrer Zuständigkeit einen Vorschlag für ein Impressum zur Verfügung.
261 |
262 | ### Datenschutzerklärung
263 |
264 | Gerade eigenständige Projektseiten oder Webseiten der Hochschulvereine haben ihr Impressum noch nicht aktualisiert. Häufig werden auch unbedacht nicht passende Textbausteine aus Musterdatenschutzerklärungen eingefügt.
265 |
266 | Die Musterdatenschutzerkärung der Stabsstelle IT-Recht der bayerischen staatlichen Universitäten und Hochschulen versucht diese Fehlerquellen zu minimieren und versucht in seinem Umfang die üblichen Anforderungen eines Hochschulinternetauftritts gerecht zu werden.
267 |
268 | ## Handlungsempfehlungen
269 |
270 | - Abhalten einer Auftaktveranstaltung zur Barrierefreiheit
271 | - Einsetzen eines Gremiums zur Umsetzung
272 | * Festlegen von Verantwortlichkeiten für die Umsetzung der Barrierefreiheit
273 | * Prüfung, ob eine Inhaltsfreigabe über eine zentrale Stelle koordiniert werden könnte
274 | * Auswahl der Webseiten, die gemäß Annex C der Europäischen Norm EN 301 549 V2.1.2 geprüft werden
275 | - Prüfung führender Systeme und aller neuen
276 | - Konformität zur Europäischen Norm EN 301 549 V2.1.2 in der Regel als verpflichtendes Kriterium für Beschaffungen festlegen
277 | - Beständige Information und Sensiblisierung für das Thema
278 | - Barrierefreiheitserklärung und Feedback-Mechanismus auf Webseite und in mobilen Anwendungen veröffentlichen
279 | - Etablieren von Schulungsangeboten
280 | - Regelmäßiger hochschulübergreifender fachlicher Austausch der Wissensträger
281 |
282 |
283 | Vertiefung
284 | ----------
285 |
286 | * Stabsstelle IT-Recht für die bayerischen staatlichen Hochschulen und Universitäten,
287 |
--------------------------------------------------------------------------------
/docs/03-inhalte.md:
--------------------------------------------------------------------------------
1 | Bereitstellung und Pflege von Inhalten
2 | ======================================
3 |
4 | Aufgabenbereich und Zielgruppe
5 | ------------------------------
6 |
7 | Dieser Anwendungsbereich betrifft die Erstellung und Pflege von Inhalten
8 | auf Webauftritten von Hochschulen, deren Einrichtungen, Lehrstühlen,
9 | Projekten und anderen Informationsseiten.
10 |
11 | Dieses Kapitel wendet sich an folgende Personenkreise:
12 |
13 | - Redakteure
14 | - Autoren
15 | - Fotoredakteure
16 | - sonstige Bearbeiter von Inhalten
17 |
18 | Es wird davon ausgegangen, dass Webangebote in diesen Bereichen über ein
19 | geeignetes Content-Management-System verwaltet werden, das über
20 | Eingabeverfahren mit Hilfe von einem WYSIWYG - oder zumindest Text-Editor
21 | verfügt, in dem einfache HTML-Anweisungen eingegeben werden können.
22 |
23 | **Abgrenzung: Die Programmierung von CMS oder die optische und
24 | technische Gestaltung der Ausgaben über HTML, CSS und JavaScript ist
25 | nicht Teil dieses Kapitels.**
26 |
27 |
28 | Grundlagen
29 | ----------
30 |
31 | Mit Inhalten sind all die Informationen gemeint, die vom Leser wahrgenommen werden müssen. Zur Darstellung und Strukturierung der Inhalte wird auf Webseiten die Strukturierungssprache HTML verwendet. Mit dieser kann die Bedeutung eindeutig definiert werden, wozu auch nur wenige, leicht zu merkendende Elemente notwendig sind: Nämlich die Elemente für Überschriften, Absätze, Bilder, Listenelemente, Zitate und Tabellen. In HTML nutzt man den Begriff der [Semantik](https://blog.kulturbanause.de/2008/01/html-elemente-und-semantik/).
32 |
33 | Wichtig hierbei ist die Semantik einzuhalten: Überschriften, die nicht mittels verfügbarer HTML-Elementen als solche gekennzeichnet sind, sind keine Überschriften. Der *klassische Fehler* vieler Autoren besteht oft darin, dass keine Überschriften gesetzt wurden, sondern eine Textzeile schlicht mit Fettdruck und einer größeren Schrift optisch hervorgehoben wurde. Semantisch sind solche Texte jedoch keine Überschriften und werden daher auch nicht als solche interpretiert: Screenreader können diese nicht von normalem Text unterscheiden und auch die Analyse von Suchmaschinen wird den Inhalt dieser Zeile nicht als hervorhebenswerte Überschrift einstufen.
34 | Der Fettdruck und die Schriftgröße werden lediglich als optische Darstellung interpretiert; eine *automatische Erkennung* einer Überschrift geschieht nicht. Diese Interpretation findet allein im Auge des Autors statt.
35 |
36 | Ein weiterer häufiger Fehler ist es, eine Semantik falsch zu verwenden mit dem Ziel eine optische Darstellung zu erlangen. So zum Beispiel verwenden einige Autoren gern Überschriften, um einen in ihren Augen wichtigen Text hervorzuheben. Ebenso häufig ist der Fehler, eine Überschrift einer bestimmten Ebene nur deswegen zu verwenden, weil sie dem Autor in der jeweiligen Größe besser gefällt als die Überschrift in ihrer korrekten Ebene. Oder es werden Tabellen verwendet, um eine rein optische Ausrichtung des Textes zu erlangen.
37 |
38 | Auf Webseiten, aber auch auf Flyern und anderen Print-Produkten, erfolgt häufig eine optische Verschönerung durch sogenannte *Schmuckgrafiken*. Mit diesem Verständnis kann man solche Grafiken von Schemagrafiken, Auswertungen oder anderen Grafiken unterscheiden: Schmuckgrafiken können jederzeit ausgetauscht oder weggelassen werden, während inhaltsvermittelnde Grafiken ein nicht wegzulassender Bestandteil der Seite sind.
39 |
40 | Wird eine optische Hervorhebung von Texten gewünscht ist, dürfen hierzu keine Strukturelemente, die für die inhaltliche Kennzeichnung vorgesehen sind, verwendet werden. Sollen ein Absatz oder einzelne Worte optisch
41 | hervorgehoben werden sollen, ist es Aufgabe des Webdesigns, eine entsprechende Funktionalität bereitzustellen. Viele Webdesigns enthalten bereits entsprechende Funktionalitäten für optionale Boxen, Spaltensatz,
42 | Hinweismarken oder Buttons. Sind eine entsprechende Dokumentation oder ein Styleguide vorhanden sein, sollten diese konsultiert werden.
43 |
44 | Umsetzung
45 | ---------
46 |
47 | ### Überschriften und Überschriftenhierachien
48 |
49 | Inhalte beginnen üblicherweise mit einer Überschrift, gefolgt von einem oder mehren Absätzen. Beim Schreiben von längeren Texten ist eine logische Überschriftenhierachie wichtig:
50 |
51 | Die erste Überschrift im Dokument ist eine Überschrift der Ebene 1. Ist der Text hierarchisch gegliedert, folgt ein Absatz mit einer Überschrift der Ebene 2. Besteht dieses Kapitel aus weiteren hierarchisch untergeordneten Kapitel folgen hier die Überschriften der Ebene 3 und so weiter.
52 |
53 | In HTML wird die Überschrift der ersten Ebene mit `` deklariert, die zweite Ebene mit ``, die dritte mit `` und so weiter bis zur sechsten Ebene. Hat ein CMS einen WYSIWYG-Editor wie den populären TinyMCE-Editor, werden die Überschriften als Absatzvorlagen angeboten. Diese werden nach der Eingabe in dem Editor in die entsprechende HTML-Variante gesetzt.
54 |
55 | 
57 |
58 | Bei einigen CMS und Redaktionssystemen wurde die Überschrift der ersten Ebene aus den Absatzvorlagen entfernt, wie es auch das obige Bild zeigt. Grund ist, dass viele Webseiten in der Ausgabe den Titel der Seite als erste Überschrift ausgeben.
59 |
60 | Überschriftenauszeichnungen sind nur in ihrer logischen Struktur zu nutzen und nicht als Hilfsmittel zur optischen Formatierung der Texte. Wie eine Überschrift einer beliebigen Ebene optisch auf einem Browser, in einem
61 | Office-Dokument oder einem Ausdruck aussieht, ist Sache des Corporate Designs oder der zugrundeliegenden Dokumentenvorlage. Wenn die optische Darstellung nicht passend erscheint, ist nicht die Überschriftenhierachie zu ändern, sondern das Corporate Design bzw. die Dokumentenvorlage. Als Redakteur oder Autor einer Webseite oder eines Dokumentes sollte man sich jedoch grundsätzlich nicht um die optische Gestaltung der Inhalte kümmern und daher auch nicht versuchen, diese zu beeinflussen. Entdeckt man Mängel in der vorgegebenen Vorlage, sollte man diese an die zuständigen Designer oder Entwickler melden; die Fehler können dann an zentraler Stelle behoben werden und die Fehlerbehebung wirkt sich positiv auch auf solche Stellen aus, die bisher unentdeckt blieben und nicht gemeldet wurden.
62 |
63 | Logische Überschriftenhierachien sind von hoher Bedeutung bei der barrierefreien Umsetzung von Webseiten und Dokumenten: Die Überschriften sind für Screenreader-Software ein unverzichtbares Mittel, um innerhalb der Seite zu navigieren. Die Software erkennt Überschriften anhand der korrekten HTML-Markierung und bietet dem
64 | (blinden) Leser der Seite die Möglichkeit an, von Kapitel zu Kapitel zu springen. Sind die Kapitel jedoch nicht mit Überschriften versehen, funktioniert dies nicht. Im Falle von Überschriften der falschen Hierachieebene wird diese hingegen einem anderen Kontext zugeordnet.
65 |
66 | Barrierefreie Webseiten setzen die Überschriftenhierachie nicht nur für den Inhaltsbereich um, sondern gliedern auch alle anderen Bestandteile der Webseite in einer passenden Hierachie. Mit einem Browser-Add-on, wie
67 | [HeadingsMap](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi),
68 | kann man sich die Überschriftenhierachie einer Webseite gesondert anzeigen lassen.
69 |
70 | 
71 |
72 | Neben Screenreadern nutzen auch Suchmaschinen Überschriften und deren logische Abfolge zur Einordnung von Inhalten. Wenn Sie also Wert darauf legen, dass eine Information besser gefunden wird, sollten Sie auf eine
73 | hierachische Gliederung des Inhalts achten.
74 |
75 | #### Verpflichtende Erfolgskriterien
76 |
77 | - [1.3.1 Info und Beziehungen](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships)
78 | (Stufe A)
79 | - [2.4.6 Überschriften und Labels](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels)
80 | (Stufe AA)
81 |
82 | #### Optionale Erfolgskriterien
83 |
84 | - [2.4.10 Abschnittsüberschriften](https://www.w3.org/WAI/WCAG21/quickref/#section-headings)
85 | (Stufe AAA)
86 |
87 | ### Absätze und andere Textbereiche
88 |
89 | Beim Schreiben von Text für Webseiten gelten generell dieselben Regeln wie auch bei jeder anderen Publikation oder wissenschaftlichen Arbeit: Der Text muss für die jeweilige Zielgruppe klar strukturiert werden, frei von Rechtsschreibfehlern und verständlich sein. Dabei sollte man jedoch nicht davon ausgehen, dass der Leser der Webseite denselben Kenntnisstand hat, wie der Autor. Abkürzungen, interne Begriffe und Codewörter, die im Umfeld des Autors oder in Projekten alltäglich verwendet werden, müssen für andere nicht bekannt sein. Zudem können dieselben Abkürzungen je nach Umfeld und Kontext auch verschiedene Bedeutungen haben. Bei einem längeren Text bietet es sich zudem an, im ersten Absatz eine kurze Zusammenfassung oder eine Einführung zu schreiben.
90 |
91 | Wenngleich Aspekte der Textverständlichkeit wie Abkürzungen, Lese-Niveau, Verzicht bzw. Erläutern ungewöhnlicher Wörter und Verwenden von Zwischenüberschriften von den WCAG erst auf Stufe AAA erfasst werden, fördert es stets sowohl die Barrierefreiheit als auch die Usability, wenn Redakteure diese Aspekte nicht aus den Augen verlieren.
92 |
93 | Jan Eric Hellbusch schreibt zur [Verständlichkeit](https://www.barrierefreies-webdesign.de/knowhow/verstaendliche-inhalte/):
94 |
95 |
96 | > Textverstehen ist ein aktiver Prozess und eine Interaktion zwischen Text und Leser. Texte sind für unterschiedliche Leser unterschiedlich leicht verstehbar. Dies hat sowohl mit den Interessen und dem Vorwissen des Lesers zu tun, als auch mit dessen individuellen Fähigkeiten.
97 | > Aufgrund der unterschiedlichen Voraussetzungen können Texte nicht für alle Leser gleichermaßen verständlich gemacht werden. Dennoch können Voraussetzungen geschaffen werden, die zur Textverständlichkeit beitragen und die Zugänglichkeit der Inhalte auf der Verständlichkeitsebene fördern. Hierzu zählen redaktionelle Aspekte wie die Verwendung geläufiger Begriffe oder kurzer Sätze und gestalterische Maßnahmen wie das Vermeiden von Blocksatz und die Berücksichtigung von relativen Schriftgrößen und höheren Zeilenabständen. Auch die Verwendung von Zwischenüberschriften gehört zu den Anforderungen der Verständlichkeit.
98 |
99 |
100 |
101 | #### Sprache
102 |
103 | Ein Text wird üblicherweise in nur einer Sprache geschrieben. Auch wenn die Sprache für einen *sehenden Leser* offensichtlich ist, muss die Sprache der Webseite im Quellcode der Seite angegeben sein.
104 | Dies gilt insbesondere dann, wenn Textteile auf einer Seite einer andere Sprache nutzen, als der Rest der Seite.
105 |
106 | Für die Definition der Sprache einer gesamten Seite ist bei modernen Webauftritten das jeweilige CMS zuständig. Je nach Einstellung des Webauftritts wird dabei vorgegeben, welches die Hauptsprache des
107 | Webauftritts und damit auch der Inhalte ist. Als Autor oder Redakteur kann man diese *globale* Einstellung normalerweise nicht ändern. Unter Umständen bieten manche CMS-Installationen jedoch die Option an, die Sprache
108 | einer einzelnen Inhaltseite gesondert anzugeben:
109 |
110 | 
111 |
112 | Auch wenn die Angabe der Sprache für einen *sehenden Leser* unnötig erscheint, ist sie dennoch von großer Bedeutung:
113 |
114 | - Screenreader lesen den Text vor. Damit der Text jedoch in der richtigen Sprache und in der korrekten Aussprache vorgelesen werden kann, muss die Screenreader-Software auch erkennen können, um welche Sprache es sich handelt. Eine automatische Erkennung ist zwar nicht unmöglich, sie ist jedoch nicht zuverlässig. Dies macht sich vor allem dann bemerkbar, wenn die Hauptsprache des Webauftritts ebenfalls angegeben wurde und sich von der Sprache des Textabschnitts unterscheidet.
115 | - Neben Menschen besuchen auch Suchmaschinen und Inhaltsaggregatoren die Webseiten. Auch diese versuchen den Inhalt zu interpretieren und verwenden zur Einordnung und Erkennung von Keywords und Synonymen die angegebene Sprache. Ist die Sprache nicht oder falsch angegeben, kann der Inhalt falsch zugeordnet werden, was in der Praxis bedeuten kann, dass die Seite in der Ergebnisliste einer Suchmaschine an einer schlechten Position aufgelistet wird.
116 |
117 | Gibt das CMS oder dessen Bearbeitungswerkzeuge keine Optionen vor, um die Sprache der Inhaltsbereiche anzugeben, ist diese mittels HTML zu setzen. Hierzu eignet sich das Attribut ```lang=""``` welches in dem HTML-Element angegeben wird, das den Text mit der Sprache umgibt.
118 | Handelt es sich nur um einen Absatz, kann man das ` ` Element nutzen, handelt es sich um ein längeres Zitat, verwendet man das `
` Element.
119 |
120 | Beispiel mit zwei Absätzen. Der erste gibt keine Sprachdefinition an.
121 | Der zweite Absatz setzt die Sprache auf Englisch:
122 |
123 | ```html
124 |
125 | Dies ist ein Absatz ohne Sprachdeklaration. Es wird die Sprache
126 | verwendet, die vom CMS bzw. dem Webseitentemplate im Kopfteil
127 | der Seite angegeben wurde.
128 |
129 |
130 | This is an english paragraph.
131 |
132 | ```
133 |
134 | Sollte sich der Textbereich über mehrere Kapitel und Absätze erstrecken, setzt man die Sprachdefinition nicht für jedem einzelnen Absatz neu, sondern verwendet das Element `` um alle darin liegenden Absätze zu deklarieren:
135 |
136 | ```html
137 |
Text in einer deutschsprachigen Seite mit englischen Absätzen
138 |
139 | Dies ist ein Absatz ohne Sprachdeklaration. Es wird die Sprache
140 | verwendet, die vom CMS bzw. dem Webseitentemplate im Kopfteil
141 | der Seite angegeben wurde.
142 |
143 |
144 |
Chapter One
145 |
146 | This is an english paragraph in chapter one.
147 |
148 |
149 |
Chapter Two
150 |
151 | This is the first paragraph in chapter two.
152 |
153 |
154 | This is the second paragraph in chapter two.
155 |
156 |
157 | ```
158 |
159 | #### Abkürzungen
160 |
161 | Für Abkürzungen sollte Folgendes beachtet werden:
162 |
163 | - Abkürzungen sollten beim ersten Auftreten im Text ausgeschrieben werden.
164 | Dies gilt besonders bei längeren Namen von Einrichtungen oder Titeln. Dabei wird zunächst der Name ausgeschrieben, gefolgt von der Abkürzung in runden Klammern.
165 | Beispiel: *Friedrich-Alexander-Universität Erlangen-Nürnberg (FAU)*.
166 | - Eine Ausnahme gibt es bei solchen Abkürzungen, die in der kurzen Form bereits Teil der Alltagssprache, in ihrer ausgeschriebenen Form hingegen weitgehend unbekannt sind. So zum Beispiel die Abkürzungen "DSL" oder "WLAN". Die ausgeschriebenen Formen dieser Abkürzungen ("*
Digital Subscriber Line *" und "*
Wireless Local Area Network *") sind oft nicht gängig, während die Bedeutung der kurzen Form für jeden Leser klar ist.
167 | - Sollte bei der Ausschreibung der Abkürzung ein Sprachwechsel erfolgen, muss diese über geeignete HTML-Anweisungen im Code deklariert werden. Hierzu eignet sich das Attribut `lang=""` .
168 |
169 | ##### Beispiele:
170 |
171 | Bei der Ausschreibung von *DSL* sähe der entsprechende HTML-Code daher so aus:
172 |
173 | ```html
174 |
Digital Subscriber Line
175 | ```
176 |
177 | Wird die Abkürzung nicht ausgeschrieben, wird das `
`-Element verwendet um sie als solche zu deklarieren:
178 |
179 | ```html
180 | z.B.
181 | ```
182 |
183 | Kommt es zudem zu einem Sprachwechsel, wird das Attribut `lang=""` ergänzt; Als Inhalt des Attributs wird der jeweilige [Code der Sprache](https://www.w3.org/International/questions/qa-html-language-declarations.de) der Abkürzung verwendet:
184 |
185 | ```html
186 | WWW
187 | ```
188 |
189 | #### Verpflichtende Erfolgskriterien
190 |
191 | - [3.1.1 Sprache der Seite](https://www.w3.org/WAI/WCAG21/quickref/#language-of-page)
192 | (Stufe A)
193 | - [3.1.2 Sprache von Teilen](https://www.w3.org/WAI/WCAG21/quickref/#language-of-parts)
194 | (Stufe AA)
195 |
196 | #### Optionale Erfolgskriterien
197 |
198 | - [3.1.3 Ungewöhnliche Wörter](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words) (Stufe AAA)
199 | - [3.1.4 Abkürzungen](https://www.w3.org/WAI/WCAG21/quickref/#abbreviations) (Stufe AAA)
200 | - [3.1.5 Leseniveau](https://www.w3.org/WAI/WCAG21/quickref/#reading-level) (Stufe AAA)
201 | - [3.1.6 Aussprache](https://www.w3.org/WAI/WCAG21/quickref/#pronunciation) (Stufe AAA)
202 |
203 | #### Vertiefung
204 |
205 | - Jan Eric Hellbusch: [Sprachangabe](https://www.barrierefreies-webdesign.de/knowhow/sprachangabe/)
206 | - Kerstin Probiesch: [PDF/UA-1 unter der Lupe – Teil 7: Auszeichnung von Hauptsprache und Sprachwechsel](http://pdf-barrierefreiheit.de/2018/01/15/pdfua-1-unter-der-lupe-teil-7-auszeichnung-von-hauptsprache-und-sprachwechsel/)
207 |
208 | ### Bilder und Schemagrafiken
209 |
210 | Mit Hilfe von Bildern und Schemagrafiken können viele Informationen an den Leser übermittelt werden: Inhaltliche Informationen und Daten, aber auch Stimmungen. Im letzteren Fall wird oft von sogenannten *Schmuckgrafiken* oder von *dekorativen Elementen* gesprochen: Die Bilder tragen keinen eigentlichen Inhalt, sondern dienen dazu, die Webseite für einen sehenden Leser oder für den Ausdruck optisch ansprechend zu gestalten.
211 | Würde man diese Bilder weglassen, würde der Leser keine Information vermissen.
212 |
213 | Dem gegenüber stehen Bilder und Schemagrafiken, die tatsächlich Informationen enthalten. Würde man diese Bilder ausblenden, würden wesentliche Informationen fehlen oder gar die gesamte Seite inhaltsleer sein.
214 |
215 | Für die Barrierefreiheit ist es wichtig, dass Bilder und Schemagrafiken entweder im Text erklärt werden, so dass man auch ohne diese auskommt, oder dass die Bilder über eine geeignete Textalternative verfügen. Die Textalternative muss die gesamte vom Bild übermittelte Information enthalten.
216 |
217 | Die Art der Textalternative ist dabei abhängig von der Art des Bildes:
218 |
219 | - Handelt es sich um eine Schmuckgrafik, sollte keine Textalternative angegeben werden. Screenreader sollen diese Bilder ignorieren; Eine Beschreibung ist daher wegzulassen.
220 | - Handelt es sich um die Illustration eines im Text beschriebenen Sachverhaltes, ist lediglich eine kurze Textbeschreibung notwendig.
221 | - Handelt es sich bei dem Bild um ein informatives Bild, welches nicht im Text beschrieben wird, ist eine ausführliche Textalternative für das Bild zu hinterlegen.
222 | - Handelt es sich bei dem Bild um ein aktives Element um auf eine andere Webseite zu verlinken oder als grafischer Button eine Aktion auszulösen, ist nicht das Bild inhaltlich zu beschreiben, sondern das Linkziel oder das was passiert, wenn man auf das Bild klickt.
223 |
224 | Um eine Textalternative eines Bildes anzugeben, verwendet man im HTML-Element ` ` das Attribut `alt=""`. Das Attribut `title=""` hingegen wird nur verwendet, um den Titel des Bildes anzugeben.
225 | Unterstützt das CMS des Webauftritts auch Bildunterschriften, sind auch diese anzugeben, sofern das Bild keine Schmuckgrafik ist.
226 |
227 | #### Beispiele:
228 |
229 | 1. Auf einer Seite wird der Versuchsaufbau eines physikalischen Experiments erläutert. Hierzu wird ein Bild angegeben.
230 |
231 | ```html
232 |
238 | ```
239 |
240 | Für einen sehenden Menschen wird die Information im Bild gegeben. Kann man hingegen das Bild nicht sehen, kann man den Versuchsaufbau anhand der Beschreibung im `alt`-Attribut nachvollziehen. Der Titel allein hätte nicht gereicht, um den Versuchsaufbau zu erläutern.
241 |
242 | 2. Bei einem dekorativen Bild wird das Attribut ```alt=""``` leer
243 | gelassen:
244 |
245 | ```html
246 |
247 | ```
248 |
249 | 3. Bei einem grafischen Link wird hingegen das Linkziel beschrieben und
250 | nicht mehr das Bild:
251 |
252 | ```html
253 |
254 |
255 |
256 | ```
257 |
258 | #### Verpflichtende Erfolgskriterien
259 |
260 | - [1.1.1 Nicht-Text-Inhalt](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) (Stufe A)
261 | - [2.4.4 Linkzweck (im Kontext)](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context) (Stufe A)
262 |
263 | #### Vertiefung
264 |
265 | - Jan Eric Hellbusch: [Informative Bilder](https://www.barrierefreies-webdesign.de/knowhow/textalternative/informative-bilder.html)
266 | - Jan Eric Hellbusch: [Entscheidungsschema für Textalternativen von Bildern](https://www.barrierefreies-webdesign.de/knowhow/textalternative/entscheidungsschema.html)
267 |
268 |
269 | ### Links
270 |
271 | Abseits von den Menüs und Navigationskonzepten einer Website werden auch Links im Inhaltsbereich von Seiten gesetzt. Auch wenn das eigentliche Setzen von Links nicht schwierig ist, können einige Fehler gemacht werden, die negative Auswirkungen auf Barrierefreiheit, Verständnis und auch Findbarkeit haben.
272 |
273 | Folgende Eigenschaften muss jeder Link erfüllen:
274 |
275 | - Ein Link sollte grundsätzlich immer klar und deutlich machen, was den Leser erwartet, wenn er diesen auswählt. Und zwar schon vor dem "Klick" und auch vor einem *Mouseover*.
276 | - Das Ziel eines Links muss stets klar erkennbar sein. Mit der Konformitätsstufe AA reicht hier auch die Betrachtung des Kontextes in dem sich der Link befindet. So ist ein Link mit dem Linktext "Download" durchaus legitim, sofern dies im Kontext einer Liste mit eigenen Überschriften statt findet.
277 | - Soll auch die Konformitätsstufe AAA erreicht werden, muss ein Link für sich allein genommen verständlich sein. So muss er auch dann, wenn er allein und ohne umgebenden Text ausgegeben wird, noch immer das Ziel und seinen Zweck klar beschreiben.
278 |
279 | Verlinkt man auf eine andere Webseite, ist der Linktext optimalerweise der Titel der verlinkten Webseite. Verlinkt man auf ein Dokument, so eignet sich der Titel der Dokuments oder eine Kurzfassung. Keinesfalls sollte man als Linktext jedoch Handlungsanweisungen verwenden.
280 | Ein Klassiker bei fehlerhaften Umsetzungen ist ein Link wie dieser: "*Klicken Sie **hier***" . Das Wort "**hier**" für sich allein genommen sagt nichts darüber aus, was passiert oder wohin man gelangt, wenn man tatsächlich auf den Link klickt. Stattdessen sollte an solchen Stellen besser so formuliert werden: "*Rufen Sie die **Online-Broschüre zum Thema ABC** auf.*". Der eigentliche Link wäre dann auf den Worten "**Online-Broschüre zum Thema ABC**". Dies ist ohne den Text davor auch für sich allein verständlich und der Leser wird wissen, was ihn beim Klick auf den Link erwartet.
281 |
282 | In normalen Textbereichen wird ein Link mit den HTML-Element ``
283 | gesetzt:
284 |
285 | ```html
286 | Rufen Sie die Online-Broschüre zum Thema ABC auf.
287 | ```
288 |
289 | Bei Nutzung eines WYSIWYG-Editors reicht es oft, den entsprechenden Text zu selektieren und dann in einem erscheinenden Fenster die Zieladresse einzugeben oder aus einer Liste vorhandener Seiten auszuwählen.
290 |
291 | 
292 |
293 | #### Weitere Attribute
294 |
295 | Zu beachten ist, dass im Fall einfacher Links auf Dokumente keine weiteren Angaben oder Attribute notwendig sind. Auch die Angabe, welche dafür sorgt, dass ein Link in einem neuen Fenster oder Tab geöffnet wird, sollte vermieden werden. Man kann nicht davon ausgehen, dass das Öffnen eines neuen Fensters für Links von jedem Leser erwünscht ist.
296 | Tatsächlich sorgt das Öffnen eines neuen Fensters auch zu einigen Nachteilen bei den Lesern der Seite: Die *"Zurück"-Funktion* des Browser funktioniert für das neue Fenster nicht mehr und der Rechner wird
297 | möglicherweise durch viele neue Fenster stärker belastet. Wurde die Seite zudem mit einem Smartphone aufgerufen, wird das neue Fenster üblicherweise das vorherige komplett überlagern. Ob ein neues Fenster
298 | oder ein Tab geöffnet wird, sollte daher grundsätzlich dem Leser selbst überlassen bleiben, der hierfür die dafür gedachten Werkzeuge seines Browsers nutzen kann.
299 |
300 | Auf manchen Webseiten sieht man, dass Links zusätzlich mit einem `title=""` -Attribut versehen wurden.
301 | Dies sollte man ebenfalls nur in besonderen Ausnahmefällen tun. Das Attribut sollte nur dann verwendet werden, wenn der Linktext nicht gleich dem tatsächlichen Titel des aufzurufenden Dokumentes ist.
302 | Screenreader werden bei einem Link üblicherweise sowohl den Titel, sofern vorhanden, als auch den Linktext vorlesen. Sind Linktext und Titel dagegen gleich, werden Menschen mit Screenreader daher denselben Text unnötigerweise zweimal anhören müssen.
303 |
304 | #### Verpflichtende Erfolgskriterien
305 |
306 | - [2.4.4 Linkzweck (im Kontext)](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context) (Stufe A)
307 |
308 | #### Optionale Erfolgskriterien
309 |
310 | - [2.4.9 Linkzweck (reiner Link)](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=249#link-purpose-link-only) (Stufe AAA)
311 |
312 | ### Tabellen
313 |
314 | Für die Nutzung von Tabellen gilt eine feste Regel: **Tabellen dürfen nur für tabellarische Daten genutzt werden.** Tabellen sind nicht dazu gedacht, Texte und Bilder auszurichten oder die Seite zu layouten. Es
315 | gilt auch hier das oben Genannte: Wenn eine besondere optische Darstellung benötigt wird, so ist es Aufgabe des Designs und der Technik, entsprechende Funktionalitäten bereitzustellen. Wird beispielsweise eine Ausrichtung des Inhaltes in zwei oder mehr Spalten gewünscht, wird dies bei modernen Websites oft durch eigene Anweisungen geleistet. So verfügen Websites, die auf dem populären Bootstrap-Framework beruhen, über eine umfangreiche Klassenbibliothek um Inhaltsbereiche in bis zu 12 Spalten aufzutrennen. Eine Tabelle erweist sich bei der Nutzung als Gestaltungswerkzeug spätestens bei dem Aufruf der Seite mit dem Smartphone als untauglich: So werden dann Inhalte nicht mehr erkennbar und es kommt zu horizontalen Scrollbalken. Wird hingegen ein vorgegebenes Grid-System verwendet, werden die Spalten serialisiert und in korrekter Reihenfolge übereinander positioniert.
316 |
317 | Bei der Nutzung von Datentabellen ist den jeweiligen Zellen eine Überschrift zuzuordnen. Dies erfolgt mit Hilfe des Elements ``. Die eigentlichen Zellen mit Daten werden dagegen mit dem Element ` `
318 | gekennzeichnet. Die Zeilen werden durch das Element ` ` ausgezeichnet.
319 |
320 | Eine einfache Datentabelle ist in HTML wie folgt aufgebaut:
321 |
322 | ```html
323 |
324 | Tabellenüberschrift
325 |
326 | Überschrift Spalte 1
327 | Überschrift Spalte 2
328 |
329 |
330 | Datenzelle
331 | Datenzelle
332 |
333 |
334 | ```
335 |
336 | Je nach Komplexität der Datentabelle ist es sinnvoll, weitere Überschriften und Beziehungen von Zellen zueinander zu definieren. Die [Anleitung des W3C zu Tabellen](https://www.w3.org/WAI/tutorials/tables/) bietet eine ausführliche Erläuterung mit Beispielen zum korrekten Gebrauch und Einsatz.
337 |
338 | Gängige WYSWIYG-Editoren, wie der TinyMCE-Editor, verfügen über Hilfsmittel um Tabellen auch ohne Kenntnisse von HTML zu erstellen.
339 |
340 | 
341 |
342 | Hier erfolgt die Bedienung ähnlich zu der in Microsoft Office.
343 |
344 | #### Verpflichtende Erfolgskriterien
345 |
346 | - [1.3.1 Info und Beziehungen](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships)
347 | (Stufe A)
348 |
349 | #### Vertiefung
350 |
351 | - W3C/WAI: [Tutorial zu Tabellen](https://www.w3.org/WAI/tutorials/tables/)
352 | - Einfach für Alle: [Benimmregeln für Datentabellen](https://www.einfach-fuer-alle.de/artikel/barrierefreie-datentabellen/)
353 |
354 | ### Listen
355 |
356 | Nummerierte Aufzählungen und Listen werden auf Webseiten mit eigenen HTML-Elementen deklariert. Wie bei Überschriften und Absätzen ist bei Listen die Einhaltung dieser Semantik wichtig, damit Aufzählungselemente und Listenpunkte von Screenreader erkannt werden können.
357 |
358 | Im Redaktionsalltag sind im wesentlichen zwei Formen von Listen in Gebrauch: Unsortierte und nummerierte Listen. (Es gibt noch eine dritte Form: [Definitionslisten](https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/dl); Diese werden jedoch nur selten verwendet).
359 |
360 | Eine einfache unsortierte Liste wird in HTML wie folgt aufgebaut:
361 |
362 | ```html
363 |
364 | Unnummeriertes Listenelement
365 | Unnummeriertes Listenelement
366 |
367 | ```
368 |
369 | Die sortierte Liste unterscheidet sich hiervon nur durch die Verwendung
370 | des Elements `` anstelle von ``:
371 |
372 | ```html
373 |
374 | Nummeriertes Listenelement 1
375 | Nummeriertes Listenelement 2
376 |
377 | ```
378 |
379 | In den Listenelementen können eigene Überschriften, Absätze, weitere Listen oder andere Elemente gesetzt werden. So kann eine Liste auch eine untergeordnete Liste enthalten.
380 |
381 | Gängige WYSIWYG-Editoren wie der TinyMCE unterstützen Listen durch eigene Bedienelemente:
382 |
383 | 
385 |
386 | Zu beachten ist auch hier, wie oben bereits bei den Überschriften und den Tabellen erwähnt: Listen dienen nicht der optischen Gestaltung beliebiger Texte oder zur Einrückung derselben. Sie haben den Zweck, eine
387 | Liste auszuzeichnen. Umgekehrt bedeutet das: Wer eine Liste auf einer Seite angeben möchte, der muss dazu auch die Listenelemente verwenden — und nicht etwa Absätze aus einzelnen Zeilen, die mit einer Zahl beginnen und einem erzwungen Umbruch enden.
388 |
389 | Eine korrekt ausgezeichnete Liste wird im Gegensatz zu Absatzzeilen von Screenreader und Analysesoftware als zusammenhängende Liste erkannt. Zusätzlich wird eine Liste auch bei der Darstellung auf mobilen Endgeräten mit kleinem Display korrekt umbrochen.
390 |
391 | Die Optik der unnummerierten Listen und das Zahlenformat der nummerierten Listen wird durch das zugrundeliegende Design bestimmt. Zwar lassen sich in HTML die Zahlenformate über das ```list-style-type``` Attribut vorgeben, dies sollte man jedoch nur in Ausnahmefällen nutzen, da üblicherweise das Webdesign die Nutzung ohne weitere Attribute als Standard betrachtet.
392 |
393 | #### Verpflichtende Erfolgskriterien
394 |
395 | - [1.3.1 Info und Beziehungen](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) (Stufe A)
396 |
397 | #### Vertiefung
398 |
399 | - Webkrauts: Artikel [Die etwas besseren Listen](http://webkrauts.de/artikel/2008/die-etwas-besseren-listen-teil-1)
400 | - SELFHTML: [Listen](https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/Listen)
401 |
402 | ### Zitate
403 |
404 | Um längere Zitate darzustellen, verwendet man das ``-Element. Die optische Form dieser Darstellung wird wie gewohnt von dem zugrundeliegenden Webdesign bestimmt. Üblicherweise wird
405 | ein Zitat jedoch optisch hervorgehoben, indem es links und rechts eingerückt wird und Schriftart und -stil verändert wird.
406 |
407 | ```html
408 |
409 |
410 | Der Universität ist vorbehalten, was nur der Mensch durch und durch in
411 | sich finden kann, die Einsicht in die reine Wissenschaft.
412 |
413 |
414 | ```
415 |
416 | Das ``-Element umrandet darin befindliche Absätze.
417 |
418 | Soll zusätzlich ein Zitatgeber oder eine Quelle genannt werden, kann dies mit Hilfe des `` Elements vorgenommen werden. Dies darf dann jedoch nicht im eigentlichen Zitat-Absatz stehen, sondern muss hiervon getrennt sein (beispielsweie mit einem `