WEBVTT
Kind: captions
Language: de

00:00:00.040 --> 00:00:01.700
Hi, mein Name ist Dmitry Dugarev. Ich bin

00:00:01.710 --> 00:00:03.310
der Gründer von Barrierenlos℠ und in diesem

00:00:03.320 --> 00:00:05.630
Video zeige ich Dir, warum wir Semanticality™

00:00:05.640 --> 00:00:07.550
entwickelt haben und wie Du es in Deinen

00:00:07.560 --> 00:00:09.110
WordPress Projekten einsetzen kannst. In

00:00:09.120 --> 00:00:10.990
Barrierenlos℠ helfen wir schon seit Jahren

00:00:11.000 --> 00:00:12.780
zahlreichen Unternehmen ihre Webseiten

00:00:12.790 --> 00:00:14.860
barrierenfrei zu gestalten. Dafür ist es

00:00:14.870 --> 00:00:17.470
unerlässlich semantisches HTML und auch WAI

00:00:17.480 --> 00:00:19.340
ARIA Attribute zu nutzen, zum Beispiel um solche

00:00:19.350 --> 00:00:23.150
Kriterien wie 1.3.1 zu treffen. Hier gibt es

00:00:23.160 --> 00:00:24.420
eine Menge von Maßnahmen, die die

00:00:24.430 --> 00:00:26.260
Nutzung von ARIA Attributen und auch

00:00:26.270 --> 00:00:27.790
semantisches HTML

00:00:27.800 --> 00:00:29.340
vorschreiben. Und genau hier kommt das

00:00:29.350 --> 00:00:31.230
Problem. Unsere Kunden, sie nutzen öfter

00:00:31.240 --> 00:00:32.740
WordPress Gutenberg Websites mit

00:00:32.750 --> 00:00:34.990
entsprechenden Themes. Dennoch diese Themes,

00:00:35.000 --> 00:00:37.110
sie generieren unsemantischen Code. Sagen

00:00:37.120 --> 00:00:38.510
wir diese Sektion hier. Die sollte

00:00:38.520 --> 00:00:40.190
eigentlich eine Sektion sein, aber im

00:00:40.200 --> 00:00:41.790
Code ist sie das nicht. Oder hier gibt

00:00:41.800 --> 00:00:44.380
es eine Menge von Karteikarten, die gleich

00:00:44.390 --> 00:00:46.150
aussehen und eigentlich eine Liste sind,

00:00:46.160 --> 00:00:47.350
aber im Code sind sie nicht mal

00:00:47.360 --> 00:00:49.110
gruppiert. Also die Nutzer, die ein

00:00:49.120 --> 00:00:50.590
Screenreader nutzen, sagen wir, sie

00:00:50.600 --> 00:00:52.060
werden davon überhaupt nicht mitbekommen,

00:00:52.070 --> 00:00:53.470
dass es eine Liste ist. Wir

00:00:53.480 --> 00:00:54.990
gehen mal zu dem Gutenberg Editor und versuchen

00:00:55.000 --> 00:00:56.830
das zu ändern. Und wenn wir hier

00:00:56.840 --> 00:00:58.470
auf der rechten Seite hingehen,

00:00:58.480 --> 00:01:00.590
wir sehen, dass es schon eine Möglichkeit gibt, z.B.

00:01:00.600 --> 00:01:02.270
eine Section zu einer Section zu machen,

00:01:02.280 --> 00:01:04.220
aber von den Attributen gibt es keine

00:01:04.230 --> 00:01:06.310
Rede, insbesondere von ARIA Attributen.

00:01:06.320 --> 00:01:08.230
Das heißt, wenn wir hier reingehen und

00:01:08.240 --> 00:01:10.030
diese Elemente als Liste markieren

00:01:10.040 --> 00:01:11.420
wollen, dafür wie Du siehst, gibt es

00:01:11.430 --> 00:01:13.100
absolut gar keine Möglichkeit. Genau aus

00:01:13.110 --> 00:01:15.230
diesem Grund haben wir Semanticality™ entwickelt. Das

00:01:15.240 --> 00:01:16.670
ist ein WordPress Plugin, das Dir

00:01:16.680 --> 00:01:18.670
erlaubt die Regeln zu definieren, mit

00:01:18.680 --> 00:01:20.630
denen Dein Code entsprechend angepasst

00:01:20.640 --> 00:01:22.390
wird. Das bedeutet, die Endnutzer, sie

00:01:22.400 --> 00:01:24.270
bekommen einen sauberen und semantischen

00:01:24.280 --> 00:01:25.670
Code, den Du mit Deinen Regeln

00:01:25.680 --> 00:01:27.230
entsprechend aufgestellt hast. Das

00:01:27.240 --> 00:01:28.710
Plugin macht nichts für Dich. Du musst

00:01:28.720 --> 00:01:30.670
schon diese Regeln selbst einsetzen,

00:01:30.680 --> 00:01:32.740
aber es gibt Dir alle Werkzeuge

00:01:32.750 --> 00:01:34.230
notwendig, um Deine Webseite

00:01:34.240 --> 00:01:36.030
entsprechend wirklich barrierefrei zu

00:01:36.040 --> 00:01:37.030
machen. Lass uns das entsprechend

00:01:37.040 --> 00:01:38.460
ausprobieren mit der Sektion. Wir

00:01:38.470 --> 00:01:39.990
versuchen sie zu einer Section zu machen

00:01:40.000 --> 00:01:42.030
und auch sie zu einer Landmark zu

00:01:42.040 --> 00:01:43.380
etablieren. Dafür wählst Du auf der

00:01:43.390 --> 00:01:45.380
linken Seite die Sektion oder den Block,

00:01:45.390 --> 00:01:46.740
den Du entsprechend manipulieren

00:01:46.750 --> 00:01:48.350
möchtest und hier gibt es einen Knopf

00:01:48.360 --> 00:01:50.060
Semanticality™ Rules und hier öffnet sich

00:01:50.070 --> 00:01:51.910
das Plugin in einem Popup. Rechts siehst

00:01:51.920 --> 00:01:53.460
Du den Code, wie er gerändert wird. Also

00:01:53.470 --> 00:01:54.780
von dieser Sektion, die Du ausgewählt

00:01:54.790 --> 00:01:56.100
hast. Hier sind auch alle

00:01:56.110 --> 00:01:58.140
Childrenelemente mitenthalten und Du

00:01:58.150 --> 00:01:59.350
kannst sie entsprechend manipulieren,

00:01:59.360 --> 00:02:00.780
aber wenn Du es wollen würdest, Du

00:02:00.790 --> 00:02:02.420
kannst auch hier die entsprechenden

00:02:02.430 --> 00:02:04.630
einzelnen Elemente auswählen, auf Semanticality™ Rules 

00:02:04.640 --> 00:02:06.510
drucken und wie Du siehst rechts

00:02:06.520 --> 00:02:08.350
stellst Du die Regeln auf nur für dieses

00:02:08.360 --> 00:02:10.100
konkrete Element. Wir wollen aber die

00:02:10.110 --> 00:02:11.910
Sektion verändern, deswegen gehen wir zu

00:02:11.920 --> 00:02:14.190
der Sektion drücken auf Semanticality™ Rules

00:02:14.200 --> 00:02:15.990
und legen unsere erste Regel ein. Hier

00:02:16.000 --> 00:02:17.790
bei Actions nehmen wir die Change Tag

00:02:17.800 --> 00:02:19.790
oder Modify Attributes. Diese sind

00:02:19.800 --> 00:02:21.990
verfügbar, aber in unserem Fall Change Tag ist

00:02:22.000 --> 00:02:23.750
das Optimalste, denn wir wollen aus

00:02:23.760 --> 00:02:25.220
diesem Div eine Section machen. Dann

00:02:25.230 --> 00:02:27.030
musst Du per CSS-Selektor diese Sektion

00:02:27.040 --> 00:02:28.790
irgendwie auswählen. Bei uns hat sie die

00:02:28.800 --> 00:02:30.580
Klasse .wp-block-group, deswegen nutzen

00:02:30.590 --> 00:02:32.910
wir das einfach, um diese Sektion per CSS-Selektor

00:02:32.920 --> 00:02:35.350
auszuwählen. Wichtig zu sagen ist, dass

00:02:35.360 --> 00:02:37.030
wenn Du Regeln in diesem konkreten Block

00:02:37.040 --> 00:02:38.390
einlegst, sie werden nur in diesem

00:02:38.400 --> 00:02:39.750
konkreten Block angewandt. Du musst Dir

00:02:39.760 --> 00:02:41.390
keine Sorgen machen, dass alle Elemente

00:02:41.400 --> 00:02:42.990
jetzt, die diese Klasse haben,

00:02:43.000 --> 00:02:44.220
ausgewählt werden und entsprechend zu

00:02:44.230 --> 00:02:46.140
einer Section werden. Es gilt nur hier

00:02:46.150 --> 00:02:48.300
und im Mode wählst Du einfach "First". Das

00:02:48.310 --> 00:02:50.300
bedeutet nur der erste Element in diesem

00:02:50.310 --> 00:02:52.190
entsprechenden Block wird betroffen. Und

00:02:52.200 --> 00:02:53.500
dann wählen wir einfach Section als

00:02:53.510 --> 00:02:56.430
neuen Tag. Hier werden alle Tags aus der

00:02:56.440 --> 00:02:59.070
WHATWG HTML Spezifikation unterstützt, keine

00:02:59.080 --> 00:03:00.630
Limitierungen an der Front. Und wie Du

00:03:00.640 --> 00:03:02.580
siehst rechts im Live Code Preview es

00:03:02.590 --> 00:03:04.430
wird direkt angezeigt was sich verändert

00:03:04.440 --> 00:03:06.300
hat nämlich eine div ist zu einer

00:03:06.310 --> 00:03:07.670
Section geworden. Lass uns jetzt eine

00:03:07.680 --> 00:03:09.390
weitere Regel anlegen. Wir versuchen

00:03:09.400 --> 00:03:11.430
hier für die H2 Überschrift eine

00:03:11.440 --> 00:03:13.470
eideutige ID zu vergeben. Dafür legen

00:03:13.480 --> 00:03:15.430
wir noch eine Regel ein und dieses Mal

00:03:15.440 --> 00:03:17.030
müssen wir Modify Attribute Action

00:03:17.040 --> 00:03:18.710
auswählen. Wie wählen wir jetzt diese

00:03:18.720 --> 00:03:20.630
H2? Das ist die erste in diesem Block.

00:03:20.640 --> 00:03:22.860
Also, wir können schon den Modus "First"

00:03:22.870 --> 00:03:24.710
einsetzen und bei CSS Selektor können wir

00:03:24.720 --> 00:03:26.350
einfach H2 wählen, denn das ist ja das

00:03:26.360 --> 00:03:27.710
einzige, was es gibt. Also die einzige

00:03:27.720 --> 00:03:28.990
H2 Überschrift in diesem Block. Dann

00:03:29.000 --> 00:03:30.190
wählen wir ein Attribute. Alle

00:03:30.200 --> 00:03:32.470
Attributes sind verfügbar und Du kannst

00:03:32.480 --> 00:03:34.270
auch Deine neuen Attributes wie z.B.

00:03:34.280 --> 00:03:35.940
Data-Attribut verwenden, falls Du das für

00:03:35.950 --> 00:03:37.780
einige Deine Funktionen später brauchst.

00:03:37.790 --> 00:03:39.830
In diesem Fall brauchen wir eine ID. Wir

00:03:39.840 --> 00:03:42.420
wählen die ID und Insertion wählen wir

00:03:42.430 --> 00:03:44.300
im Add oder Replace Modus. Wie Du siehst

00:03:44.310 --> 00:03:46.110
hier rechts, eine ID hat sich schon

00:03:46.120 --> 00:03:47.580
hinterlegt, sie ist nur leer. Lass uns

00:03:47.590 --> 00:03:49.670
eine Attribute-Value vergeben. Sagen wir

00:03:49.680 --> 00:03:52.270
section-title. Ind wie Du siehst genau

00:03:52.280 --> 00:03:54.030
das was wir hier geschrieben haben, ist

00:03:54.040 --> 00:03:56.270
auch live im Preview sichtbar und die ID

00:03:56.280 --> 00:03:57.780
ist jetzt section-title. Öfter ist es

00:03:57.790 --> 00:03:59.830
aber auchwendig den Überblick darüber zu

00:03:59.840 --> 00:04:02.670
behalten, welche IDs Du wo vergeben hast. Und dafür

00:04:02.680 --> 00:04:04.060
haben wir auch eine Lösung. Du kannst

00:04:04.070 --> 00:04:06.190
hier einfach eine Variable verwenden. Sie

00:04:06.200 --> 00:04:08.420
beginnt mit ID_ und danach kannst Du

00:04:08.430 --> 00:04:10.190
Dein Label vergeben zu dieser Variable.

00:04:10.200 --> 00:04:12.580
Und wie Du siehst jetzt ist die ID eine

00:04:12.590 --> 00:04:14.390
von dem Plugin generierte ID. Das

00:04:14.400 --> 00:04:16.620
Plugin wird sicherstellen, dass alle

00:04:16.630 --> 00:04:18.180
IDs, die Du auf diese Art und Weise

00:04:18.190 --> 00:04:19.870
generierst, einzigartig sind. Als

00:04:19.880 --> 00:04:22.030
nächstes müssen wir diese ID in aria-labelledby

00:04:22.040 --> 00:04:24.270
Attribute einsetzen bei der

00:04:24.280 --> 00:04:25.670
Section. Dafür nehmen wir Modify

00:04:25.680 --> 00:04:27.550
Attribute und beim CSS Selector können

00:04:27.560 --> 00:04:29.310
wir gleich Section einsetzen. Das ist

00:04:29.320 --> 00:04:30.620
die einzige Section, die es gibt in

00:04:30.630 --> 00:04:32.110
diesem Block und dadurch, dass wir diese

00:04:32.120 --> 00:04:33.900
Regel schon oben definiert haben und das

00:04:33.910 --> 00:04:35.670
im Code schon angepasst ist, diese Regel

00:04:35.680 --> 00:04:37.270
geht davon aus, dass all diese Regel

00:04:37.280 --> 00:04:38.950
oben entsprechend schon angewandt sind.

00:04:38.960 --> 00:04:40.350
Das bedeutet, wir können durchaus die

00:04:40.360 --> 00:04:42.350
Section hier als CSS Selektor verwenden. Und

00:04:42.360 --> 00:04:45.180
hier typen wir einfach aria-labelledby,

00:04:45.190 --> 00:04:48.620
"Add / Replace" und für die Value nehmen wir diese ID

00:04:48.630 --> 00:04:50.180
und setzen hier ein und wie Du siehst

00:04:50.190 --> 00:04:52.740
ist jetzt hat Sektion genau dieselbe ID

00:04:52.750 --> 00:04:55.150
wie die H2 Überschrift und somit sind

00:04:55.160 --> 00:04:56.710
sie verknüpft, jetzt ist die Sektion eine

00:04:56.720 --> 00:04:58.590
Landmark und die Screenreader Nutzer

00:04:58.600 --> 00:05:00.870
können sich sehr einfach jetzt über

00:05:00.880 --> 00:05:03.230
Landmark Menü hin und her navigieren, diese

00:05:03.240 --> 00:05:05.110
Sektion komplett überspringen und so

00:05:05.120 --> 00:05:06.310
weiter. Lass uns diese Änderungen

00:05:06.320 --> 00:05:07.790
speichern und wir gehen jetzt und

00:05:07.800 --> 00:05:09.790
speichern die Seite und schauen, ob die

00:05:09.800 --> 00:05:11.550
Änderungen tatsächlich angewandt wurden.

00:05:11.560 --> 00:05:13.460
Dafür wählen wir diese Sektion im DevTools,

00:05:13.470 --> 00:05:14.870
und wir sehen, dass sie

00:05:14.880 --> 00:05:16.510
tatsächlich zu einer Sektion wurde, und

00:05:16.520 --> 00:05:18.350
innen drin gibt es eine Überschrift, die

00:05:18.360 --> 00:05:21.270
entsprechende ID hat, und aria-labelledby hat

00:05:21.280 --> 00:05:23.270
dieselbe ID. Es ist jetzt offiziell eine

00:05:23.280 --> 00:05:24.990
Landmark und somit ist die Website

00:05:25.000 --> 00:05:26.510
Barrierefreiheit tatsächlich ein

00:05:26.520 --> 00:05:27.900
Stückchen besser geworden. Auf diese Art

00:05:27.910 --> 00:05:29.230
und Weise kannst Du auch mit anderen

00:05:29.240 --> 00:05:30.590
Blocks vorgehen. Es gibt sogar eine

00:05:30.600 --> 00:05:32.270
Möglichkeit diese Regeln zu kopieren. Du

00:05:32.280 --> 00:05:34.110
drückst einfach auf eine Regel. Mit der

00:05:34.120 --> 00:05:35.390
Shift-Taste kannst Du die weiteren

00:05:35.400 --> 00:05:37.460
auswählen und mit diesem Knopf 

00:05:37.470 --> 00:05:38.790
hier sie kopieren. Dann gehst Du zu

00:05:38.800 --> 00:05:40.180
Sektion, die Du anpassen möchtest, die

00:05:40.190 --> 00:05:41.790
vergleichbar ist, sagen wir diese.

00:05:41.800 --> 00:05:43.230
Öffnest das Plugin und drückst einfach

00:05:43.240 --> 00:05:44.950
diesen Knopf. Und somit sind die Regeln

00:05:44.960 --> 00:05:46.230
schon gleich eingesetzt und wie Du

00:05:46.240 --> 00:05:47.950
siehst rechts, sie sind auch gleich

00:05:47.960 --> 00:05:49.230
angewandt. Das einzige, was Du machen

00:05:49.240 --> 00:05:51.150
musst ist sie zu speichern. Sagen wir,

00:05:51.160 --> 00:05:53.300
Du willst das nicht immer wieder für

00:05:53.310 --> 00:05:55.180
dieselben Arten von Blocks diese Regeln

00:05:55.190 --> 00:05:57.180
anpassen. Wir löschen sie kurz, gehen zu

00:05:57.190 --> 00:05:58.620
dem ursprünglichen Block, löschen das

00:05:58.630 --> 00:05:59.790
auch und es gibt tatsächlich keine

00:05:59.800 --> 00:06:01.950
Möglichkeit diese Regeln global

00:06:01.960 --> 00:06:03.950
anzuwenden. Dafür gibt es dieser Reiter

00:06:03.960 --> 00:06:05.990
Global Block Rules. Wir gehen da rein und

00:06:06.000 --> 00:06:07.950
setzen diese Regeln dort ein hier. Diese

00:06:07.960 --> 00:06:09.710
Regeln werden für die gesamte Website

00:06:09.720 --> 00:06:10.990
angewandt. Das bedeutet, mit Deinen

00:06:11.000 --> 00:06:12.550
Selektoren müsstest Du schon ein

00:06:12.560 --> 00:06:14.430
Stückchen aufpassen. Wie Du siehst hier

00:06:14.440 --> 00:06:15.990
nicht nur diese erste Sektion, sondern

00:06:16.000 --> 00:06:17.670
auch die weiteren haben genau dasselbe

00:06:17.680 --> 00:06:19.300
bekommen. Von daher solltest Du mit

00:06:19.310 --> 00:06:20.870
Deinem Selektor hier etwas spezifischer

00:06:20.880 --> 00:06:22.270
gehen. Somit kannst Du globale Regeln

00:06:22.280 --> 00:06:23.870
definieren für alle Deine Blocks und

00:06:23.880 --> 00:06:25.580
sicher sein, dass Deine Website überall

00:06:25.590 --> 00:06:27.870
barrieref ist. Mit Semanticality™ machst Du Deine

00:06:27.880 --> 00:06:29.510
WordPress Gutenberg Websites semantisch

00:06:29.520 --> 00:06:31.580
sauber ohne Theme-Umbau schnell und

00:06:31.590 --> 00:06:33.270
nachhaltig. Ohne Semanticality™, der

00:06:33.280 --> 00:06:35.110
einzige Weg, den Du hast, diese alle

00:06:35.120 --> 00:06:37.070
Attribute und semantisches HTML zu

00:06:37.080 --> 00:06:39.300
verwenden, ist Dein Theme umzuprogrammieren,

00:06:39.310 --> 00:06:40.990
was öfter einfach unläubig und extrem

00:06:41.000 --> 00:06:42.790
zeitaufendig ist. Deswegen haben wir

00:06:42.800 --> 00:06:44.430
auch Semanticality™ für uns entwickelt,

00:06:44.440 --> 00:06:45.900
denn bei unseren Kundenprojekten hat es

00:06:45.910 --> 00:06:47.740
uns geholfen bis zu zehnfach schneller

00:06:47.750 --> 00:06:49.390
zu sein. Ein Projekt, was früher einen

00:06:49.400 --> 00:06:51.580
Monat gedauert hat, heute können wir in

00:06:51.590 --> 00:06:53.230
zwei Tagen umsetzen. So kannst Du Deine

00:06:53.240 --> 00:06:56.150
Website deutlich schneller BFSG und WCAG

00:06:56.160 --> 00:06:57.710
konform machen. Wenn Du Fragen hast, dann

00:06:57.720 --> 00:06:59.150
buch einfach eine kostenlose Demo bei

00:06:59.160 --> 00:07:00.860
mir und wir klären alle Deine Fragen.

00:07:00.870 --> 00:07:02.150
Ich zeige Dir alles noch mal, wie das

00:07:02.160 --> 00:07:03.430
geht. Oder wenn Du schon bereit bist

00:07:03.440 --> 00:07:05.670
loszlegen, sicher Dir gleich eine Lizenz

00:07:05.680 --> 00:07:07.300
unten und lass uns gemeinsam das

00:07:07.310 --> 00:07:09.110
Internet ein Stückchen barrierefreier

00:07:09.120 --> 00:07:11.240
machen.