WEBVTT - generated by Video Portal TU Dortmund

1
00:00:00.000 --> 00:00:04.520
Herzlich willkommen zu unserer heutigen Ausgabe
des Formats “Themen im Fokus”.

2
00:00:04.840 --> 00:00:07.840
Heute geht es um barrierefreie Webseiten.

3
00:00:08.080 --> 00:00:11.280
Notwendig ist es für viele, aber auf jeden
Fall für alle ein Gewinn.

4
00:00:11.600 --> 00:00:14.600
Das werden wir später im Verlauf des Vortrags
noch sehen.

5
00:00:15.160 --> 00:00:17.240
Was sind primär unsere Zielgruppen?

6
00:00:17.240 --> 00:00:20.480
Das sind Seh- und Hörbehinderte, sowie Menschen

7
00:00:20.480 --> 00:00:25.480
mit motorischen Beeinträchtigungen oder auch
Autismus usw.

8
00:00:26.440 --> 00:00:29.640
Die Prüfung der Barrierefreiheit muss jährlich
erfolgen.

9
00:00:30.120 --> 00:00:34.080
Also sprich: es reicht nicht, wenn Sie Ihren
Auftritt vor dem Go-Live

10
00:00:34.080 --> 00:00:37.080
einmal auf Barrierefreiheit testen und es dann
für immer vergessen.

11
00:00:37.600 --> 00:00:40.600
Das muss jährlich wiederholt werden.

12
00:00:40.600 --> 00:00:44.440
Und wo ich auf jeden Fall darauf hinweisen
möchte, ist, das zweimal jährlich

13
00:00:44.440 --> 00:00:47.440
eine sehr gute Schulung des DoBuS stattfindet,

14
00:00:47.480 --> 00:00:50.480
die aber wie gesagt leider nur zweimal jährlich
stattfindet.

15
00:00:50.520 --> 00:00:54.360
Deswegen haben wir auch noch dieses Themen
im Fokus für Sie,

16
00:00:54.360 --> 00:00:58.880
als kleinen Ausschnitt aus dem da Dargebotenen,
ins Leben gerufen.

17
00:01:00.000 --> 00:01:04.000
Die Schulung ist wesentlich umfangreicher -
die Schulung des DoBuS.

18
00:01:04.000 --> 00:01:07.000
Es ist eine eintägige Online-Fortbildung.

19
00:01:07.000 --> 00:01:09.000
Es werden die Grundlagen vermittelt,

20
00:01:09.000 --> 00:01:13.000
Prüfverfahren werden vorgestellt, automatische
und halbautomatische Tools

21
00:01:14.000 --> 00:01:17.000
und die Teilnehmer haben auch immer die Möglichkeit,

22
00:01:18.000 --> 00:01:21.000
das direkt zu testen.

23
00:01:23.000 --> 00:01:26.000
Kommen wir jetzt erstmal zu der Frage: was
muss geprüft werden?

24
00:01:27.000 --> 00:01:29.000
Das sind zum einen globale Dinge.

25
00:01:29.000 --> 00:01:32.000
Da müssen Sie sich Gott sei Dank nicht drum
kümmern.

26
00:01:32.000 --> 00:01:35.000
Es wird durch das Template unserer TYPO3 Webseiten
bereitgestellt

27
00:01:35.000 --> 00:01:37.000
und bei jeder Weiterentwicklung auch getestet,

28
00:01:37.000 --> 00:01:40.000
so dass die barrierefreien Teile auch so bleiben.

29
00:01:40.000 --> 00:01:42.000
Das sind die Farbkontraste.

30
00:01:42.000 --> 00:01:46.000
Da haben wir ein kleines Problem mit unserem
Grün und Weiß.

31
00:01:47.000 --> 00:01:50.000
Das ist allerdings eine relativ ausweglose
Situation.

32
00:01:51.000 --> 00:01:53.000
Wir würden das Grün gern dunkler machen.

33
00:01:53.000 --> 00:01:55.000
Das dürfen wir wegen des CI/CDs nicht.

34
00:01:55.000 --> 00:02:00.000
Darum haben wir als Alternative den Kontrastumschalter
oben im Header eingeführt.

35
00:02:01.000 --> 00:02:04.000
Zweite Sache, um die Sie sich nicht bemühen
müssen,

36
00:02:04.000 --> 00:02:07.000
ist die korrekte HTML-Syntax.

37
00:02:07.000 --> 00:02:09.000
Auch das wird durch uns festgelegt.

38
00:02:09.000 --> 00:02:13.000
Und ebenso kümmern wir uns darum, dass die
von uns bereitgestellten Elemente

39
00:02:14.000 --> 00:02:17.000
auch ohne Tastatur und Maus bedienbar sind.

40
00:02:19.000 --> 00:02:22.000
Dann kommen wir aber schon zu den individuellen
Tests.

41
00:02:22.000 --> 00:02:23.000
Da unterscheide ich jetzt

42
00:02:23.000 --> 00:02:27.000
einmal zwischen halbautomatisch testbaren und
manuell zu testenden Dingen.

43
00:02:28.000 --> 00:02:30.000
Was sehr wichtig ist, sind zum Beispiel

44
00:02:30.000 --> 00:02:35.000
die Alt-Texte von Bildern - für sehbehinderte
Menschen

45
00:02:35.000 --> 00:02:38.000
- und die logische Struktur durch Überschriften.

46
00:02:39.000 --> 00:02:42.000
Das ist eigentlich auch für jeden wichtig,
auch für Menschen

47
00:02:42.000 --> 00:02:45.000
ohne irgendeine Einschränkung.

48
00:02:45.000 --> 00:02:48.000
Weil, wenn ein heilloses Durcheinander von
Überschriften herrscht,

49
00:02:49.000 --> 00:02:52.000
verliert man auf jeden Fall den Überblick
auf der Seite.

50
00:02:52.000 --> 00:02:56.000
Als guter Nebeneffekt fällt noch ab, dass
die logische Struktur

51
00:02:56.000 --> 00:03:00.000
durch Überschriften auch für die Suchmaschinenoptimierung
sehr wichtig ist.

52
00:03:02.000 --> 00:03:05.000
Manuell zu testen ist die Qualität von Alt-Texten.

53
00:03:05.000 --> 00:03:08.000
Klar, man kann da irgendwas hinschreiben, aber
ob das auch gut ist,

54
00:03:08.000 --> 00:03:11.000
das muss aktuell noch ein Mensch beurteilen.

55
00:03:12.000 --> 00:03:16.000
Dann: sprechende Links - das muss manuell getestet
werden.

56
00:03:16.000 --> 00:03:21.000
Ob die Dokumente barrierefrei sind und ob die
Videos barrierefrei sind.

57
00:03:21.000 --> 00:03:25.000
Dies liegt also in der Hand der Redakteure
und Redakteurinnen

58
00:03:25.000 --> 00:03:28.000
und muss pro Auftritt individuell geprüft
werden.

59
00:03:30.000 --> 00:03:33.000
Befassen wir uns erst mal mit den Alt-Texten.

60
00:03:33.000 --> 00:03:35.000
Welche Bilder benötigen einen Alt-Text?

61
00:03:35.000 --> 00:03:38.000
Also da wird im Großen und Ganzen gesagt:

62
00:03:38.000 --> 00:03:41.000
alle Bilder, die nicht einem rein dekorativen
Zweck dienen.

63
00:03:42.000 --> 00:03:45.000
Also wenn ich zum Beispiel ein Symbol habe

64
00:03:45.000 --> 00:03:47.000
für eine Veranstaltung

65
00:03:47.000 --> 00:03:52.000
oder auch nur ein Symbol, was mir sagt, das
ist jetzt eine News,

66
00:03:52.000 --> 00:03:55.000
da brauche ich im Allgemeinen keinen Alt-Text.

67
00:03:55.000 --> 00:03:57.000
Bei der Entscheidung ist aber Vorsicht geboten.

68
00:03:57.000 --> 00:04:00.000
Also lieber ein Alt-Text zu viel als einen
zu wenig.

69
00:04:00.000 --> 00:04:03.000
Wie können wir jetzt diese Alt-Texte testen?

70
00:04:03.000 --> 00:04:04.000
Ich zeige es Ihnen

71
00:04:04.000 --> 00:04:06.000
erst mal anhand einer Folie hier, da können
wir auch nochmal

72
00:04:06.000 --> 00:04:08.000
über die Qualität der Alt-Texte sprechen.

73
00:04:08.000 --> 00:04:09.000
Und dann zeige ich Ihnen,

74
00:04:09.000 --> 00:04:12.000
wie man das mit diesen hier oben erwähnten
Web Developer Tools macht.

75
00:04:13.000 --> 00:04:16.000
Wir fokussieren uns hier auf den Firefox

76
00:04:16.000 --> 00:04:20.000
Browser, weil das der Browser ist, der an der
TU am meisten benutzt wird.

77
00:04:21.000 --> 00:04:24.000
Ähnliche Tools gibt es aber auch zum Beispiel
für Google Chrome.

78
00:04:25.000 --> 00:04:29.000
So, wenn man diese Web Developer Tools installiert
hat,

79
00:04:29.000 --> 00:04:32.000
kann man sagen: “zeige mir mal alle Alt-Texte
der Bilder.”

80
00:04:33.000 --> 00:04:35.000
Beim ersten sehen wir - also bei dem Deutschen

81
00:04:35.000 --> 00:04:38.000
Akademischen Austauschdienst - da gibt es keinen
Alt-Text.

82
00:04:38.000 --> 00:04:41.000
Kann man weglassen, weil es ist ein reines
Schmuckbild.

83
00:04:41.000 --> 00:04:42.000
Es ist das Logo.

84
00:04:42.000 --> 00:04:46.000
Es würde aber auch nicht wehtun, wenn man
hinschreibt: “Logo des Deutschen

85
00:04:46.000 --> 00:04:49.000
Akademischen Austauschdienst - weiße Schrift
auf blauem Grund”.

86
00:04:50.000 --> 00:04:52.000
Also es reicht nicht einfach hinzuschreiben:

87
00:04:52.000 --> 00:04:54.000
“Logo des Akademischen Austauschdienstes”.

88
00:04:54.000 --> 00:04:58.000
Man sollte schon auch beschreiben, was zu sehen
ist.

89
00:04:58.000 --> 00:05:02.000
Zweite ist klar, da ist ein Alt-Text vergeben.

90
00:05:02.000 --> 00:05:04.000
Dritte, die Flagge von Japan.

91
00:05:04.000 --> 00:05:08.000
Eigentlich ist das ein guter Alt-Text nur,
wenn man nicht weiß,

92
00:05:08.000 --> 00:05:10.000
wie die Flagge von Japan aussieht und auch
nicht sehen

93
00:05:10.000 --> 00:05:13.000
kann, wäre es vielleicht doch schön dazuzuschreiben:

94
00:05:14.000 --> 00:05:16.000
“Roter Punkt auf weißem Grund”.

95
00:05:16.000 --> 00:05:20.000
Das ist bei der Europaflagge besser: ”Goldene
Sterne auf blauem Hintergrund”.

96
00:05:20.000 --> 00:05:22.000
Hier fehlt allerdings der Kontext.

97
00:05:22.000 --> 00:05:25.000
Es wäre auch schön zu erwähnen, dass es
sich dabei um die Europaflagge handelt.

98
00:05:29.000 --> 00:05:31.000
So, machen wir noch ein paar Beispiele.

99
00:05:31.000 --> 00:05:35.000
Erstmal: Das Ganze gibt es natürlich auch
auf Ihrer englischsprachigen Webseite,

100
00:05:35.000 --> 00:05:36.000
insofern Sie eine haben.

101
00:05:36.000 --> 00:05:38.000
Und wie wir hier beim zweiten Beispiel sehen,

102
00:05:38.000 --> 00:05:41.000
ist es vergessen worden, diesen Alt-Text zu
übersetzen.

103
00:05:42.000 --> 00:05:44.000
Also “Ein Planer mit dem Text “Make it
happen””,

104
00:05:44.000 --> 00:05:48.000
das bringt jemanden, der des Deutschen nicht
mächtig ist, überhaupt nichts.

105
00:05:48.000 --> 00:05:50.000
Und hier hinten sehen wir ein klassisches Beispiel.

106
00:05:50.000 --> 00:05:52.000
Da wurde es einfach vergessen.

107
00:05:52.000 --> 00:05:56.000
Da hätte also eigentlich ein Alt-Text gesetzt
werden müssen.

108
00:05:56.000 --> 00:05:58.000
Auf jeden Fall.

109
00:05:58.000 --> 00:06:02.000
Jetzt zeige ich Ihnen aber erst einmal, wie
man mit den Web

110
00:06:02.000 --> 00:06:05.000
Developer Tools diese Sachen testet.

111
00:06:06.000 --> 00:06:09.000
So - erstmal die Frage: Wie installiere ich
das denn?

112
00:06:10.000 --> 00:06:14.000
Wenn Sie hier mit dem Burger-Menü dieses Pulldownmenü
öffnen,

113
00:06:15.000 --> 00:06:18.000
dann können Sie hier auf die Einstellungen
klicken

114
00:06:18.000 --> 00:06:22.000
und können hier auch dann “Erweiterungen
& Themes” auswählen.

115
00:06:23.000 --> 00:06:26.000
Hier würden Sie dann “Web Developer Tools”
eingeben.

116
00:06:29.000 --> 00:06:32.000
Das bringt bei mir jetzt nichts, weil ich habe
die schon installiert

117
00:06:32.000 --> 00:06:35.000
und dann könnten Sie die Web Developer Tools
installieren.

118
00:06:37.000 --> 00:06:39.000
Wenn Sie das getan haben,

119
00:06:39.000 --> 00:06:42.000
haben Sie hier oben so ein kleines Zahnrad.

120
00:06:42.000 --> 00:06:44.000
Wenn ich da mal draufklicke, entfaltet

121
00:06:44.000 --> 00:06:47.000
sich auch ein Menü, mit dem ich mehrere Dinge
tun kann.

122
00:06:48.000 --> 00:06:48.000
Wir machen jetzt mal das,

123
00:06:48.000 --> 00:06:52.000
was Sie gerade im Screenshot schon gesehen
haben: “Display Alt Attributes”.

124
00:06:52.000 --> 00:06:55.000
Nehmen wir die Startseite des Hauptauftritts.

125
00:06:55.000 --> 00:07:00.000
Und da sehen Sie, da sind glücklicherweise
alle Bilder mit Alt-Texten versehen.

126
00:07:01.000 --> 00:07:04.000
Wie gut und wie schlecht die sind, möchte
ich jetzt hier nicht beurteilen.

127
00:07:05.000 --> 00:07:07.000
Aber Sie sehen, so können Sie im Kontext sehen,

128
00:07:07.000 --> 00:07:10.000
welchen Alt-Text haben Sie denn überhaupt?

129
00:07:13.000 --> 00:07:15.000
Eine weitere Möglichkeit, festzustellen,

130
00:07:15.000 --> 00:07:19.000
ob all Ihre Bilder mit Alt-Texten versehen
sind,

131
00:07:19.000 --> 00:07:22.000
finden Sie als Redakteur im TYPO3 Backend.

132
00:07:23.000 --> 00:07:25.000
Und zwar gibt es da

133
00:07:25.000 --> 00:07:28.000
ein Modul, das heißt “Dateien SEO”.

134
00:07:28.000 --> 00:07:31.000
Ich habe Ihnen hier ein Beispiel gemacht, bei
dem man direkt sieht,

135
00:07:31.000 --> 00:07:35.000
es gibt 18 Bilder und davon haben 16 einen
Alt-Text und es fehlen 2.

136
00:07:36.000 --> 00:07:39.000
Ich zeig Ihnen auch das noch mal am lebenden
Objekt.

137
00:07:39.000 --> 00:07:40.000
Also in einem Beispiel. Dazu

138
00:07:42.000 --> 00:07:42.000
müssen wir

139
00:07:42.000 --> 00:07:45.000
uns mal ins TYPO3 Backend begeben.

140
00:07:45.000 --> 00:07:49.000
Und ich habe jetzt den TYPO3 Doku-Auftritt
gewählt.

141
00:07:49.000 --> 00:07:52.000
Hier finden Sie das Modul “Dateien SEO”

142
00:07:52.000 --> 00:07:55.000
und Sie sehen, wir haben da in diesem

143
00:07:56.000 --> 00:07:58.000
Auftritt im Ordner Bilder 891

144
00:07:58.000 --> 00:08:01.000
Bilder, wo bei 881 ein Alt-Text vorhanden ist.

145
00:08:01.000 --> 00:08:04.000
Es fehlen also 10. Das habe ich jetzt extra
so gemacht.

146
00:08:04.000 --> 00:08:09.000
Normalerweise kümmern wir uns natürlich darum,
dass die Alt-Texte auch da sind.

147
00:08:10.000 --> 00:08:12.000
Direkt unterhalb des Bildes

148
00:08:12.000 --> 00:08:15.000
könnten Sie diese Dinge eingeben, die fehlen.

149
00:08:15.000 --> 00:08:17.000
Sie sehen, es ist kein alternativer Text eingegeben.

150
00:08:17.000 --> 00:08:20.000
Das kann ich nicht empfehlen, weil dieses Modul
untersucht

151
00:08:20.000 --> 00:08:23.000
nur die deutschen Bilder, also die deutschsprachigen

152
00:08:23.000 --> 00:08:27.000
Bilder, sprich, eigentlich die Bilder in ihrer
führenden Sprache.

153
00:08:27.000 --> 00:08:29.000
Bei den meisten ist das Deutsch.

154
00:08:29.000 --> 00:08:30.000
Also sie wüssten nicht,

155
00:08:30.000 --> 00:08:33.000
ob Sie für dieses Bild auch englische Alt-Texte
hinterlegt haben.

156
00:08:33.000 --> 00:08:35.000
Besser ist es, Sie gehen über diesen Stift.

157
00:08:37.000 --> 00:08:40.000
Und dann kommen sie in

158
00:08:40.000 --> 00:08:43.000
den bekannten Dialog,

159
00:08:43.000 --> 00:08:45.000
den Sie immer beim Bearbeiten von Bildern haben.

160
00:08:45.000 --> 00:08:48.000
Da schreibe ich mal alternativen Text rein:

161
00:08:50.000 --> 00:08:53.000
“gestreifte Tabelle”.

162
00:08:57.000 --> 00:08:59.000
Dann speichere ich das.

163
00:08:59.000 --> 00:09:01.000
Jetzt ist mein deutscher Alt-Text erledigt.

164
00:09:01.000 --> 00:09:03.000
Und jetzt schaue ich mal und sehe:

165
00:09:03.000 --> 00:09:06.000
Für Englisch habe ich überhaupt noch gar
keine Metadaten.

166
00:09:06.000 --> 00:09:09.000
Das würden Sie in dem Modul “Dateien SEO”
nicht sehen.

167
00:09:09.000 --> 00:09:10.000
Ich lege also jetzt noch direkt

168
00:09:10.000 --> 00:09:14.000
die englischen Metadaten an, würde die hier
passend übersetzen

169
00:09:15.000 --> 00:09:18.000
- das mache ich jetzt nicht aus Zeitgründen
- und das speichern.

170
00:09:18.000 --> 00:09:22.000
Und dann wären sowohl meine deutschen als
auch meine englischen Metadaten,

171
00:09:22.000 --> 00:09:25.000
insbesondere die Alt-Texte, in Ordnung.

172
00:09:25.000 --> 00:09:28.000
Und wie wir sehen, haben wir jetzt 882

173
00:09:29.000 --> 00:09:32.000
mit Alt-Text und 891 ohne Alt-Text.

174
00:09:33.000 --> 00:09:35.000
Und so können Sie sich durchhangeln.

175
00:09:35.000 --> 00:09:38.000
Sie müssen das nicht von oben an machen, Sie
können sich auch

176
00:09:38.000 --> 00:09:41.000
einzelne Ordner raussuchen.

177
00:09:41.000 --> 00:09:42.000
Da sehen Sie hier, die sind alle toll.

178
00:09:44.000 --> 00:09:48.000
Also bei den älteren Sachen ist das bei uns
im Allgemeinen in Ordnung.

179
00:09:48.000 --> 00:09:50.000
Ich hatte jetzt extra ein paar

180
00:09:50.000 --> 00:09:54.000
Bilder angelegt ohne Alt-Text, damit wir dieses
Beispiel halt

181
00:09:54.000 --> 00:09:57.000
jetzt machen können.

182
00:10:00.000 --> 00:10:02.000
Dann kommen wir jetzt zum manuellen Prüfen.

183
00:10:02.000 --> 00:10:07.000
Also die Qualität der Alt-Texte kann man bisher
im Allgemeinen nur manuell prüfen.

184
00:10:07.000 --> 00:10:11.000
Hier bieten sich dann die Web Developer Tools
eher an, als

185
00:10:11.000 --> 00:10:15.000
das Modul “Dateien SEO”, weil Sie da die
Alt-Texte im Kontext sehen.

186
00:10:15.000 --> 00:10:20.000
Ich habe hier mal ein Bild rausgesucht, was
mich in große Verwirrung stürzt.

187
00:10:20.000 --> 00:10:23.000
Der Alt-Text ist “Grafik Erfolgsrezept”.

188
00:10:23.000 --> 00:10:25.000
Das sagt mir noch nicht mal irgendwas.

189
00:10:25.000 --> 00:10:27.000
Das ist

190
00:10:27.000 --> 00:10:29.000
ein Beispiel für einen nicht ganz so gut gelungenen
Alt-Text.

191
00:10:29.000 --> 00:10:32.000
Da würde man jetzt eigentlich eher beschreiben:

192
00:10:32.000 --> 00:10:35.000
“Auf dem Bild sind mehrere Birnen zu sehen,

193
00:10:36.000 --> 00:10:39.000
die mit dem Pluszeichen zu mehreren Zahnrädern

194
00:10:39.000 --> 00:10:44.000
zusammen addiert werden und als Ergebnis wird
ein Chart angezeigt”.

195
00:10:44.000 --> 00:10:50.000
So etwas in der Art, aber “Grafik Erfolgsrezept”
ist relativ sinnlos als Alt-Text.

196
00:10:53.000 --> 00:10:55.000
So, jetzt schauen wir uns das an.

197
00:10:55.000 --> 00:10:56.000
Das ist zum einen etwas,

198
00:10:56.000 --> 00:11:00.000
wovor ich warnen müsste, aber andererseits
ein fantastisches Beispiel.

199
00:11:00.000 --> 00:11:03.000
Das ist ein Poster, was hier abfotografiert
wurde

200
00:11:03.000 --> 00:11:05.000
und in einer News verwendet.

201
00:11:05.000 --> 00:11:08.000
Da würde man an sich sofort sagen: “Ja,
also das geht überhaupt nicht.

202
00:11:08.000 --> 00:11:12.000
Das ist ein Bild, da kann man ja den Text überhaupt
nicht lesen.” Das ist richtig.

203
00:11:12.000 --> 00:11:15.000
Aber in dem Alt-Text wurde der wirklich akribisch
beschrieben.

204
00:11:15.000 --> 00:11:20.000
Es gibt ein kleines Problem: “In the top
left corner of the graphic is a hand...”.

205
00:11:20.000 --> 00:11:22.000
Das, nicht wahr, das ist rechts. Aber,

206
00:11:22.000 --> 00:11:25.000
ich habe auch eine Links-Rechts-Schwäche,
dafür habe ich Verständnis.

207
00:11:26.000 --> 00:11:29.000
Und ich sage mal, selbst wenn jemand das sehen
kann

208
00:11:30.000 --> 00:11:33.000
und ist dann aber der deutschen Sprache nicht
mächtig:

209
00:11:33.000 --> 00:11:36.000
auch dem helfen solche Alt-Texte, weil das
ist

210
00:11:36.000 --> 00:11:39.000
der Alt-Text der englischen Version der Webseite.

211
00:11:39.000 --> 00:11:42.000
Also wirklich ein sehr, sehr guter Alt-Text.

212
00:11:46.000 --> 00:11:49.000
Als nächsten Punkt befassen wir uns mit der
logischen Struktur

213
00:11:49.000 --> 00:11:51.000
durch Überschriften.

214
00:11:51.000 --> 00:11:54.000
Wie ich schon eingangs erwähnte, ist das nicht
nur für die Barrierefreiheit

215
00:11:54.000 --> 00:11:57.000
wichtig, sondern auch für die Suchmaschinenoptimierung.

216
00:11:57.000 --> 00:12:00.000
Die Überschriften-Hierarchie sollte der inhaltlichen
Hierarchie

217
00:12:00.000 --> 00:12:01.000
des Textes entsprechen

218
00:12:01.000 --> 00:12:04.000
und auf keinen Fall sollten Überschriften
wegen der Farbe gewählt werden.

219
00:12:04.000 --> 00:12:06.000
Da kommen wir später noch zu.

220
00:12:06.000 --> 00:12:09.000
Überschriften erster Ordnung ist zum Beispiel
der Seitentitel.

221
00:12:10.000 --> 00:12:11.000
Die Überschriften

222
00:12:11.000 --> 00:12:15.000
zweiter Ordnung sind Hauptüberschriften zur
Kennzeichnung von Abschnitten

223
00:12:15.000 --> 00:12:18.000
und die Überschriften dritter Ordnung sind
Zwischenüberschriften

224
00:12:18.000 --> 00:12:21.000
innerhalb des Textes zur Kennzeichnung von
Absätzen.

225
00:12:22.000 --> 00:12:25.000
Es ist weniger schlimm, wenn Sie mal eine Überschriften-Hierarchie

226
00:12:25.000 --> 00:12:28.000
überspringen, als wenn Sie mischen.

227
00:12:28.000 --> 00:12:32.000
Es ist weniger schlimm, wenn Sie haben “H1,
H3”, als wenn Sie haben

228
00:12:33.000 --> 00:12:37.000
“H1, H3, H2, H1”, also so ein heilloses
Durcheinander.

229
00:12:37.000 --> 00:12:39.000
Die Hierarchie ist dann nicht mehr erkennbar.

230
00:12:39.000 --> 00:12:42.000
Pro einzelner Seite Ihres Webauftritts sollten
Sie auch

231
00:12:42.000 --> 00:12:45.000
auf jeden Fall möglichst nur eine H1 haben.

232
00:12:46.000 --> 00:12:47.000
Wir schauen uns ein paar Beispiele an

233
00:12:48.000 --> 00:12:51.000
- nein, ich sage Ihnen erst, wie Sie das prüfen
können.

234
00:12:51.000 --> 00:12:54.000
Auch dafür gibt es ein Browser-Plugin

235
00:12:54.000 --> 00:12:57.000
für Firefox und auch für Chrome.

236
00:12:57.000 --> 00:12:59.000
Das ist das Plugin “HeadingsMap”.

237
00:12:59.000 --> 00:13:00.000
Das schauen wir uns gleich an.

238
00:13:00.000 --> 00:13:04.000
Das visualisiert die Überschriftenstruktur
und zeigt Ihnen Fehler auf.

239
00:13:05.000 --> 00:13:08.000
Wir schauen uns erst mal ein paar Beispiele
an.

240
00:13:08.000 --> 00:13:11.000
So, auf dieser Seite sieht man, also

241
00:13:11.000 --> 00:13:15.000
wenn Sie diese HeadingsMap eingeschaltet haben,
hier ist ein Bruch drin.

242
00:13:15.000 --> 00:13:20.000
Also hier ist eine H1, dann kommen ein paar
H3s und dann kommt eine H2.

243
00:13:21.000 --> 00:13:24.000
Und ich bin ziemlich sicher, Studieninhalte
ist nach H3

244
00:13:24.000 --> 00:13:28.000
und ich bin fest davon überzeugt - weiter
wollte ich noch gar nicht -,

245
00:13:28.000 --> 00:13:32.000
dass das wegen der Farbe gewählt worden ist,
weil das Schwarz hier

246
00:13:32.000 --> 00:13:35.000
vielleicht ein bisschen schöner aussieht als
das Grün.

247
00:13:36.000 --> 00:13:38.000
Die H2 ist eine grüne Überschrift.

248
00:13:38.000 --> 00:13:41.000
Kann man machen, ist aber nicht unbedingt optimal.

249
00:13:43.000 --> 00:13:44.000
So, hier noch mal

250
00:13:44.000 --> 00:13:47.000
zusammengefasst: Es gibt einen Bruch in der
Überschriften-Hierarchie.

251
00:13:47.000 --> 00:13:51.000
H1, H3, dann geht es wieder auf H2 hoch und
dann wieder H5.

252
00:13:52.000 --> 00:13:56.000
Höchstwahrscheinlich wurde die H3 Überschrift
aus optischen Gründen gewählt.

253
00:13:56.000 --> 00:14:00.000
Lösung wäre hier, man zieht noch eine Zwischenüberschrift
vom Typ H2 ein.

254
00:14:01.000 --> 00:14:03.000
Dann wäre die Hierarchie wiederhergestellt.

255
00:14:03.000 --> 00:14:07.000
Für die H5 Überschriften können die Redakteure
nichts.

256
00:14:07.000 --> 00:14:10.000
Es gibt auch bei manchen unserer Inhaltselemente,
in diesem Fall

257
00:14:10.000 --> 00:14:14.000
beim Akkordeon, Überschriften, die haben wir
immer in der Hierarchie

258
00:14:14.000 --> 00:14:18.000
recht weit unten gewählt, damit Sie sie an
allen Stellen verwenden können.

259
00:14:18.000 --> 00:14:21.000
In diesem Fall beim Akkordeon ist es eine H5.

260
00:14:23.000 --> 00:14:26.000
Zweites Beispiel: das ist diese Seite.

261
00:14:27.000 --> 00:14:30.000
Da sehen Sie, da geht es von H1 direkt zu H3.

262
00:14:30.000 --> 00:14:33.000
Auch das mit Sicherheit wegen der Farbe.

263
00:14:33.000 --> 00:14:34.000
Es kommen hier unten - das habe ich leider

264
00:14:34.000 --> 00:14:38.000
auf diesen Screenshot nicht drauf bekommen
- noch weitere Kästen dieser Art.

265
00:14:38.000 --> 00:14:42.000
Hier hätte also auch von der Logik her

266
00:14:42.000 --> 00:14:46.000
eine H2 für das archäologische Projekt sehr
gut gepasst.

267
00:14:46.000 --> 00:14:49.000
Wurde mit Sicherheit wieder wegen der Farbe
gewählt.

268
00:14:50.000 --> 00:14:51.000
Es gibt aber immerhin kein Hin und Her.

269
00:14:51.000 --> 00:14:53.000
Es geht hinterher nicht wieder hoch.

270
00:14:55.000 --> 00:14:58.000
Lösung: Man kann die Überschriften einfach
als H2 setzen.

271
00:14:58.000 --> 00:15:02.000
Das würde in diesem Fall noch nicht mal optisch
irgendwie ausbrechen.

272
00:15:02.000 --> 00:15:03.000
Es würde gut passen.

273
00:15:03.000 --> 00:15:06.000
Da muss man natürlich die daraus resultierenden
H4

274
00:15:06.000 --> 00:15:09.000
Überschriften, die es noch gibt, auf H3 hochziehen.

275
00:15:11.000 --> 00:15:13.000
So, jetzt wollte ich ihnen

276
00:15:13.000 --> 00:15:16.000
aber noch zeigen, wie das mit der Extension
geht.

277
00:15:20.000 --> 00:15:21.000
Also die HeadingsMap,

278
00:15:21.000 --> 00:15:24.000
das wird genauso installiert wie die Web Developer
Tools.

279
00:15:24.000 --> 00:15:25.000
Und dann haben Sie hier oben -

280
00:15:25.000 --> 00:15:28.000
ich habe das jetzt nicht mit in meine Leiste
oben gezogen -

281
00:15:29.000 --> 00:15:32.000
Sie haben hier so was, das ein bisschen aussieht
wie ein Puzzleteil,

282
00:15:32.000 --> 00:15:35.000
wo alle installierten Extensions drin sind.

283
00:15:35.000 --> 00:15:37.000
Ich schalte die HeadingsMap mal ein.

284
00:15:37.000 --> 00:15:40.000
Wir haben jetzt mal die Startseite unseres
Doku-Auftritts genommen.

285
00:15:41.000 --> 00:15:44.000
Sie sehen, das erste ist eine H1,

286
00:15:44.000 --> 00:15:47.000
in der wir so ein bisschen sagen, worum es
überhaupt in dem Auftritt geht.

287
00:15:48.000 --> 00:15:51.000
Dann kommen mehrere H2s, nämlich jeweils

288
00:15:52.000 --> 00:15:56.000
als Überschrift zu den Blöcken an News, die
wir hier bekannt geben.

289
00:15:57.000 --> 00:16:00.000
Auch wir haben einen Bruch.

290
00:16:00.000 --> 00:16:03.000
Es kommt jetzt keine H3, sondern eine H4.

291
00:16:03.000 --> 00:16:04.000
Das liegt an den News.

292
00:16:04.000 --> 00:16:07.000
Die News haben immer - das ist in diesem Fall
die Überschrift

293
00:16:07.000 --> 00:16:11.000
- eine H4 Überschrift, weil das für sie flexibler
ist.

294
00:16:11.000 --> 00:16:13.000
Ich sagte ja am Anfang,

295
00:16:13.000 --> 00:16:14.000
es ist nicht so schlimm,

296
00:16:14.000 --> 00:16:17.000
wenn sie in der Überschriften-Hierarchie eine
Stufe auslassen.

297
00:16:18.000 --> 00:16:21.000
Es ist viel schlimmer, wenn Sie hin und her
und rauf und runter springen.

298
00:16:21.000 --> 00:16:24.000
Darum haben wir bei den von uns festgelegten
Überschriften

299
00:16:24.000 --> 00:16:28.000
immer relativ - von den Nummern her - hohe
Überschriften gewählt.

300
00:16:29.000 --> 00:16:31.000
Als nächstes sprechen wir über Links.

301
00:16:31.000 --> 00:16:34.000
Barrierefreie Links sind immer aussagekräftig,

302
00:16:34.000 --> 00:16:38.000
also keine Verwendung von Links ohne Nennung
des Ziels.

303
00:16:38.000 --> 00:16:41.000
Also Bezeichnungen wie “hier”, “mehr”
oder “Download”,

304
00:16:41.000 --> 00:16:44.000
die sind nicht sonderlich zielführend.

305
00:16:44.000 --> 00:16:48.000
Laut Dokument des W3C - also das ist die Organisation,

306
00:16:48.000 --> 00:16:52.000
die sich um barrierefreie Webseiten bemüht
- dient das Titel-Attribut,

307
00:16:52.000 --> 00:16:54.000
das Sie auch setzen können bei Links, dazu,

308
00:16:54.000 --> 00:16:58.000
zusätzliche Informationen zu liefern, um den
Zweck eines Links zu beschreiben.

309
00:16:59.000 --> 00:17:03.020
Screenreader können das lesen, aber die Einstellung
wird vom Benutzer

310
00:17:03.020 --> 00:17:09.020
immer wieder abgeschaltet, da oft unklare oder
zum Linktext selbst redundante

311
00:17:10.020 --> 00:17:13.020
Titel-Attribute - sogenannte Tooltips - vergeben
werden.

312
00:17:14.020 --> 00:17:17.020
Schauen wir uns auch hier ein Beispiel an.

313
00:17:17.020 --> 00:17:20.020
Sie sehen, hier wurde einfach benutzt “hier”.

314
00:17:20.020 --> 00:17:23.020
Das ist jetzt wirklich nicht sonderlich sprechend.

315
00:17:24.020 --> 00:17:27.020
Da könnte man “Sie finden hier einen Beispiel-Stundenplan”

316
00:17:28.020 --> 00:17:31.020
und dann das Wort “Beispiel-Stundenplan”
verlinken.

317
00:17:31.020 --> 00:17:33.020
Noch unklarer - ich meine, ich verstehe es.

318
00:17:33.020 --> 00:17:36.020
Es ist auch ein Platzproblem.

319
00:17:36.020 --> 00:17:39.020
Diese Links sind beim besten Willen nicht sprechend.

320
00:17:39.020 --> 00:17:42.020
Also das ist ja auch für Studierende, die
anfangen

321
00:17:42.020 --> 00:17:45.020
und die wissen vielleicht noch nicht so genau,

322
00:17:45.020 --> 00:17:48.020
was ein “HAPRA” ist oder “WrumS” oder
“Mafi”.

323
00:17:49.020 --> 00:17:51.020
Als nächstes kämen wir dann zu

324
00:17:51.020 --> 00:17:54.020
barrierefreien Dokumenten.

325
00:17:54.020 --> 00:17:58.020
Also 2020 haben wir in die Barrierefreiheitserklärung
geschrieben:

326
00:17:58.020 --> 00:18:02.080
“Ja, es gibt PDF-Dokumente, die nicht barrierefrei
sind.

327
00:18:02.080 --> 00:18:06.080
Aufgrund der Menge der Dokumente haben wir
es noch nicht geschafft,

328
00:18:06.080 --> 00:18:08.080
die umzustellen.” Jetzt haben wir 2025.

329
00:18:08.080 --> 00:18:10.080
Dieses Argument zieht also nicht mehr.

330
00:18:11.080 --> 00:18:14.080
Es gibt eine Anleitung dazu im ServicePortal,

331
00:18:14.080 --> 00:18:19.080
die man sich durchlesen kann und zweimal jährlich
findet auch dazu

332
00:18:19.080 --> 00:18:23.080
eine sehr gute Fortbildung vom DoBuS statt.

333
00:18:23.080 --> 00:18:27.080
Ich habe hier unten die Inhalte mal aufgelistet.

334
00:18:27.080 --> 00:18:29.080
Also die dauert zwei Vormittage.

335
00:18:29.080 --> 00:18:33.080
Einmal geht es um barrierefreie PDF-Dokumente

336
00:18:33.080 --> 00:18:38.080
und dann geht es im zweiten Teil um barrierefreie
Formulare und Tabellen.

337
00:18:38.080 --> 00:18:40.080
Also man muss nicht beides machen.

338
00:18:40.080 --> 00:18:42.080
Man kann auch sagen, ich mache nur das mit
den PDF-Dokumenten.

339
00:18:42.080 --> 00:18:47.080
Das mit den barrierefreien Formularen und Tabellen
interessiert mich nicht. So.

340
00:18:47.080 --> 00:18:50.080
Es handelt sich dabei nicht um Formulare und
Tabellen auf Webseiten,

341
00:18:50.080 --> 00:18:55.080
da geht es nur um Formulare und Tabellen in
Dokumenten.

342
00:18:55.080 --> 00:18:58.080
Also die Schulung kann ich Ihnen auch sehr
ans Herz legen.

343
00:18:58.080 --> 00:19:01.040
Und da es hier viel zu weit führen würde,
erwähnen wir das nur

344
00:19:02.040 --> 00:19:05.040
dass es diese Schulung gibt und das dieses
Argument “da hatten wir

345
00:19:05.040 --> 00:19:07.040
noch keine Zeit für” auf keinen Fall mehr
zählt.

346
00:19:09.040 --> 00:19:10.040
Was Sie ebenfalls noch

347
00:19:10.040 --> 00:19:13.040
beachten müssen, sind barrierefreie Videos.

348
00:19:14.040 --> 00:19:15.040
Videos sind dann barrierefrei,

349
00:19:15.040 --> 00:19:19.040
wenn sie über Untertitel und eine Audiodeskription
verfügen.

350
00:19:19.040 --> 00:19:22.040
Also im Untertitel, da wird einfach wiedergegeben,

351
00:19:22.040 --> 00:19:24.040
was gesagt wird und in der Audiodeskription,

352
00:19:24.040 --> 00:19:26.040
die beschreibt Dinge.

353
00:19:26.040 --> 00:19:28.040
Es gibt auch Videos, da wird gar nichts gesagt,

354
00:19:28.040 --> 00:19:30.040
da sieht man nur irgendwas.

355
00:19:30.040 --> 00:19:33.040
Und auch das muss natürlich

356
00:19:33.040 --> 00:19:34.040
auf jeden Fall beschrieben werden.

357
00:19:34.040 --> 00:19:38.040
Also: “Enthält ein Video auf der Tonspur
Informationen, müssen Untertitel

358
00:19:38.040 --> 00:19:42.040
als Alternative bereitgestellt werden.” Und:
“Bei fremdsprachigen Videos müssen” -

359
00:19:42.040 --> 00:19:46.040
wenn sie wirklich barrierefrei sein sollen
- “sowohl die Übersetzung in Form

360
00:19:46.040 --> 00:19:50.040
von Untertiteln als auch eine adäquate alternative
Tonspur

361
00:19:50.040 --> 00:19:53.040
in übersetzter Sprache zur Verfügung stehen”.

362
00:19:54.040 --> 00:19:56.040
Die Audiodeskription, das ist das, was ich
vorhin schon sagte,

363
00:19:56.040 --> 00:20:01.000
beschreibt die visuellen Informationen, die
für das Verständnis des Videos

364
00:20:01.000 --> 00:20:01.000
wichtig sind.

365
00:20:01.000 --> 00:20:06.000
Also ich hatte jetzt eins gesehen - irgendwie
ging es um mathematische Formeln

366
00:20:06.000 --> 00:20:07.000
- und dann wird zwischendurch mal

367
00:20:07.000 --> 00:20:10.000
ein Dreieck gezeigt, und dann erzählt er da
was zu.

368
00:20:10.000 --> 00:20:13.000
Das müsste in der Audiodeskription beschrieben
werden:

369
00:20:13.000 --> 00:20:15.000
“Das ist jetzt ein rechtwinkliges Dreieck.”
Usw.

370
00:20:15.000 --> 00:20:16.000
und so fort.

371
00:20:16.000 --> 00:20:17.000
Sonst kann man nämlich den

372
00:20:17.000 --> 00:20:20.000
restlichen folgenden Text überhaupt nicht
mehr verstehen.

373
00:20:21.000 --> 00:20:25.000
Gute Materialien finden Sie hierzu unter dem
angegebenen Link

374
00:20:25.000 --> 00:20:29.000
auf der Seite “barrierefreiheit.dh.nrw”,

375
00:20:29.000 --> 00:20:34.000
in den Abschnitten “Leitfaden zur Erstellung
von Untertiteln”

376
00:20:34.000 --> 00:20:38.000
und “Leitfaden zur Erstellung von Audiodeskription
im

377
00:20:39.000 --> 00:20:41.000
Hochschulkontext”.

378
00:20:41.000 --> 00:20:45.000
Als nächstes möchte ich Sie auf die häufigsten
Fehler hinweisen.

379
00:20:45.000 --> 00:20:47.000
Also, was sollten Sie auf jeden Fall vermeiden?

380
00:20:47.000 --> 00:20:50.000
Das machen wir anhand einiger Beispiele.

381
00:20:50.000 --> 00:20:55.000
Die sind alle aus Auftritten der TU und

382
00:20:56.000 --> 00:20:57.000
wahllos rausgepickt.

383
00:20:57.000 --> 00:20:59.000
Also ich möchte niemanden vorführen,

384
00:20:59.000 --> 00:21:02.060
das sind einfach Beispiele, die mir aufgefallen
sind.

385
00:21:02.060 --> 00:21:05.060
Das ist hier zum Beispiel ein Bild.

386
00:21:05.060 --> 00:21:07.060
Auf der Seite geht es um Stellenanzeigen.

387
00:21:07.060 --> 00:21:10.060
Der einzige Inhalt ist dieses Bild.

388
00:21:10.060 --> 00:21:12.060
Ich habe da jetzt Dinge geschwärzt oder

389
00:21:12.060 --> 00:21:15.060
vielmehr “geweißt”, damit man nicht sieht,
aus welchem Auftritt das ist.

390
00:21:17.060 --> 00:21:19.060
Das hat auch keinen Alt-Text.

391
00:21:19.060 --> 00:21:23.060
Also für Sehbehinderte, insbesondere für
Screenreader-Nutzer,

392
00:21:23.060 --> 00:21:27.060
ist die Seite komplett leer und sie bekommen
keine Information

393
00:21:27.060 --> 00:21:28.060
über Stellenanzeigen.

394
00:21:28.060 --> 00:21:31.060
Also auch die Information “es gibt im Augenblick
keine” ist eine Information.

395
00:21:32.060 --> 00:21:35.060
Diese Information wird Ihnen vorenthalten.

396
00:21:36.060 --> 00:21:39.060
Schauen wir uns das nächste Beispiel an.

397
00:21:39.060 --> 00:21:44.060
Diese Information wird auch auf der Seite “Zeitplan
für die Studien-

398
00:21:44.060 --> 00:21:49.060
und Berufswahl” nur in diesen Bildern oder
Diagrammen zur Verfügung gestellt.

399
00:21:49.060 --> 00:21:52.060
Einige Dinge werden weiter unten auf der Seite
noch mal erwähnt,

400
00:21:53.060 --> 00:21:55.060
aber auf keinen Fall alle.

401
00:21:55.060 --> 00:21:58.060
Also, wenn Sie so eine Grafik darstellen wollen,
weil Sie das optisch schön finden,

402
00:21:59.060 --> 00:22:01.020
müssen Sie auf jeden Fall alle Informationen,

403
00:22:01.020 --> 00:22:06.020
die in dieser Grafik enthalten sind, auf Ihrer
Webseite noch mal wiederholen.

404
00:22:08.020 --> 00:22:11.020
Als nächstes haben wir hier einen Stundenplan.

405
00:22:11.020 --> 00:22:15.020
Der Alt-Text ist ein klassisches Beispiel für
einen nicht

406
00:22:15.020 --> 00:22:18.020
sonderlich gelungenen Alt-Text: “Stundenplan
des ersten Semesters”.

407
00:22:18.020 --> 00:22:21.020
Ja - aber ich weiß nicht, was da steht.

408
00:22:22.020 --> 00:22:26.020
Und auch dieser Text wird auf der Webseite
nicht weiter wiederholt.

409
00:22:26.020 --> 00:22:29.020
Also weiß der sehbehinderte Mensch nur:

410
00:22:30.020 --> 00:22:32.020
Da steht der Stundenplan des ersten Semesters.

411
00:22:32.020 --> 00:22:35.020
Mehr möchten die mir darüber nicht mitteilen.

412
00:22:39.020 --> 00:22:40.020
Der nächste Fehler.

413
00:22:40.020 --> 00:22:42.020
Das hatten wir auch am Anfang schon bei einem
Beispiel.

414
00:22:42.020 --> 00:22:45.020
Alternativtexte werden nicht übersetzt.

415
00:22:45.020 --> 00:22:48.020
Ich gebe zu, dass ich das verstehe.

416
00:22:48.020 --> 00:22:50.020
Ich zeige Ihnen auch gleich, warum.

417
00:22:50.020 --> 00:22:53.020
Aber es ist trotzdem ein Problem.

418
00:22:53.020 --> 00:22:56.020
Ich zeig ihnen, wie so was passieren kann.

419
00:22:57.020 --> 00:23:00.080
Da begebe ich mich mal wieder ins Backend.

420
00:23:00.080 --> 00:23:03.080
Wenn wir jetzt hier in der Dateiliste sind

421
00:23:03.080 --> 00:23:05.080
und haben hier unsere Bilder,

422
00:23:05.080 --> 00:23:09.080
dann sehe ich nicht, ob die Metadaten übersetzt
sind.

423
00:23:09.080 --> 00:23:12.080
Ich sehe das erst, wenn ich hier auf dieses
Icon gehe.

424
00:23:12.080 --> 00:23:13.080
Dann sehe ich,

425
00:23:13.080 --> 00:23:17.080
die Metadaten müssen übersetzt werden, also
habe ich es augenscheinlich

426
00:23:17.080 --> 00:23:18.080
noch nicht getan.

427
00:23:18.080 --> 00:23:23.080
Es gibt bedauerlicherweise aktuell auch keine
Gesamtübersicht von uns,

428
00:23:23.080 --> 00:23:26.080
in der wir Ihnen sagen können: “Ja, Sie
haben aber noch jede Menge Bilder,

429
00:23:26.080 --> 00:23:29.080
zu denen Ihnen die Übersetzung der Metadaten
fehlt.”

430
00:23:29.080 --> 00:23:33.080
Was wir hier an dieser Stelle immer unbedingt
empfehlen ist:

431
00:23:33.080 --> 00:23:37.080
Wenn Sie einen zweisprachigen Auftritt haben
- auch wenn Sie erst mal nur

432
00:23:37.080 --> 00:23:38.080
mit einer Sprache online sind,

433
00:23:38.080 --> 00:23:42.080
und die zweite nachrüsten -, sobald Sie ein
Bild hochladen,

434
00:23:42.080 --> 00:23:47.080
vergeben Sie sofort sowohl die deutschen als
auch die englischen Metadaten.

435
00:23:48.080 --> 00:23:50.080
Auch wenn Sie sie erst mal nicht brauchen.

436
00:23:50.080 --> 00:23:51.080
Wir erleben das

437
00:23:51.080 --> 00:23:54.080
sehr, sehr oft, dass jemand sagt: “Ja, wir
sind jetzt fertig mit Englisch.

438
00:23:55.080 --> 00:23:58.080
Würden Sie uns bitte den Sprachumschalter
freischalten.” Und dann muss ich sagen:

439
00:23:58.080 --> 00:23:59.080
“An sich gerne,

440
00:23:59.080 --> 00:24:03.040
aber Sie haben noch 200 Bilder, bei denen Sie
den Alt-Text nicht übersetzt haben”.

441
00:24:03.040 --> 00:24:05.040
Und das ist natürlich dann ganz ärgerlich.

442
00:24:05.040 --> 00:24:06.040
Also besser

443
00:24:06.040 --> 00:24:10.040
immer direkt beim Hochladen des Bildes deutsche
und englische Alt-Texte

444
00:24:11.040 --> 00:24:13.040
und auch die anderen Metadaten - Copyright,
Titel, usw.

445
00:24:13.040 --> 00:24:16.040
- hinterlegen, dann haben Sie hinterher auch
keine Probleme.

446
00:24:18.040 --> 00:24:21.040
Das sind so die häufigsten Fehler, die man
machen kann.

447
00:24:21.040 --> 00:24:25.040
Es gibt in NRW eine Überwachungsstelle für
die Barrierefreiheit.

448
00:24:26.040 --> 00:24:30.040
Zu den Aufgaben gehört eben das Überwachen,
Beraten und Testen

449
00:24:30.040 --> 00:24:34.040
auf Barrierefreiheit von Webseiten und mobilen
Apps der öffentlichen Stellen.

450
00:24:35.040 --> 00:24:38.040
Die picken sich immer einzelne Institutionen

451
00:24:38.040 --> 00:24:40.040
oder auch Universitäten raus.

452
00:24:40.040 --> 00:24:42.040
Dann erstellen die umfassende Berichte.

453
00:24:42.040 --> 00:24:43.040
Ich habe schon mal einen Bericht gesehen

454
00:24:43.040 --> 00:24:47.040
von einer anderen Uni, das ist also wirklich
sehr umfangreich.

455
00:24:47.040 --> 00:24:51.040
Und dann bekommt man eine Frist, in der die
angegebenen

456
00:24:51.040 --> 00:24:53.040
Mängel behoben werden müssen.

457
00:24:53.040 --> 00:24:54.040
Ich will Ihnen da jetzt keine Angst machen.

458
00:24:54.040 --> 00:24:57.040
Die würden uns wahrscheinlich wegen unseres
Kontrasts anmahnen,

459
00:24:57.040 --> 00:25:01.000
wo wir dann sagen müssen: “Ja, können wir
nichts dran ändern.

460
00:25:01.000 --> 00:25:01.000
Das ist das CI/CD.

461
00:25:01.000 --> 00:25:05.000
Dafür haben wir einen Kontrastumschalter.”
Die werden Sie nicht anmahnen,

462
00:25:05.000 --> 00:25:09.000
weil Sie einen Alt-Text vergessen haben.

463
00:25:10.000 --> 00:25:12.000
Das heißt aber nicht, dass Sie es nicht tun
sollten.

464
00:25:12.000 --> 00:25:16.000
Also bitte sorgen Sie dafür, dass Ihre Webseiten

465
00:25:16.000 --> 00:25:18.000
so barrierefrei wie möglich sind.

466
00:25:18.000 --> 00:25:20.000
Es gibt schon genug Barrieren im Alltag.

467
00:25:20.000 --> 00:25:23.000
Da müssen wir mit unseren Webseiten keine
weiteren schaffen.

468
00:25:24.000 --> 00:25:25.000
Vielen Dank.