UI Design/Front-End + Barrierefreiheit - Farben & Kontrast Probleme schnell lösen! [DE/Tutorial]

[@caterpillar4153]

Ist halt auch ein wichtiges Thema, wie ich finde. Navigieren mit der Tastatur wäre interessant. Hoffe, da kommt noch mehr! Danke! :)

[@ScriptRaccoon]

Freut mich sehr dass du dich auf dem Kanal mit Barrierefreiheit beschäftigst! Gerne mehr davon. Ich selbst nutze seit einer Zeit die axe Devtools zur automatisierten Suche nach a11y Issues und commite in meinen privaten Projekten zumindest nichts mehr sofern der Scan mehr als 0 Issues anzeigt. Sehr praktisch! Natürlich muss man immer noch manuell testen. Ich habe auf meinem Kanal auch vor ein paar Wochen ein Video zum Thema barrierefreie Formulare veröffentlicht.

[@stefanhiob9105]

Sehr schön das Thema hier auch angesprochen wird , interessier leider no h zu wenige aber spätestens ab nächsten Jahr sollte man über den Bereich zwingend Bescheid wissen

[@UnleashedDesign]

Danke für das Feedback freut mich wenn es dir gefällt und ja das wird Spannend nächstes Jahr :D

[@Temarii92]

ich bin seit einem Jahr Frontend Entwicklerin und befasse mich nun seit einiger Zeit mit dem Thema Barrierefreiheit, weil es einfach zu wenig beachtet wird. Bin grade dabei mich auf dem Gebiet zertifizieren zu lassen :) Aktuell bin ich bei der CPACC und danach kommt die WAS - Kann ich nur empfehlen!

[@UnleashedDesign]

Spannend gibts einen Grund für die Schulungen oder einfach aus Interesse ? :)

[@Temarii92]

@@UnleashedDesign tatsächlich wurde mir vor fast genau einem Jahr von meinem "Mentor" in der Firma gesagt als Frontend Entwicklerin muss ich neben HTML, CSS und JS auch Wissen was SEO und Accessibility ist. Als Berufsanfängerin hab ich dann angefangen mich in alle Themen einzulesen. Barrierefreiheit hat mich dann besonders gecatcht und als dann Anfang diesen Jahres ins Gespräch kam das wir intern eine AG zu dem Thema aufmachen war klar für mich das ich da mitwirken will. Und dann kam das halt zustande mit den Zertifizierungen. Und ich muss sagen, das ist super interessant! Kann die Vorbereitung der Deque University wirklich empfehlen :)

[@tecion]

Super Interessant, bitte mehr davon :)

[@mm-yt-24]

Habe ebend dein Kanal entdeckt. Ich finde es super das du das Thema ansprichst, da Barrierefreiheit auch im Web ein immer größere und auch wichtiges Thema wird. Es hilft ein Teil der Bevölkerung die eine Sehbehinderung bzw. Sehschwäche haben enorm, wenn man Angebote auch für diese Menschen bereitstellen kann. Ein Daumen Hoch für das Video und ich werde dich natürlich abbonieren. 👍

[@ScriptRaccoon]

Tastaturbedienbarkeit gehört ebenfalls zur Barrierefreiheit, und diese kommt ebenfalls Nutzern zu Gute die (zum Beispiel aus medizinischen Gründen) keine Maus bedienen können, sonst aber gut sehen. :)

[@UnleashedDesign]

Danke freut mich wenn es dir gefällt :) Aber ist erst das erste Video von vielen das kommen wird :)

[@vt9988]

Sehr informativ 👍 Gerne mehr davon

[@UnleashedDesign]

Danke, werde ich auf jedenfall machen :)

[@pimpulsiv]

Sehr hilfreiches Video!

[@UnleashedDesign]

Danke freut mich wenn es dir gefällt :)

[@chrizzzly_hh]

Sehr schön - eins der wichtigsten Themen heutzutage für alle größeren Unternehmen. Es sollten ggf noch paar Basics angegeben werden, z.B. das man rem statt px als Unit wählen sollte wenn es geht (vor allem bei Texten) um so Skalierungen einzubeziehen. Neben den Klassikern wie alt-Texten sind natürlich semantische Attribute wie ARIA fundamental für screenreader und somit Leuten die wahrscheinlich eine Sehschwäche haben.

[@groovebird812]

Für Semantik gibt es ja die entsprechenden HTML-Tags und Aria Attribute sind daher an dieser Stelle nicht notwendig.

[@ScriptRaccoon]

In diesem Video ging es ja nur um Farben. Ich hoffe andere Aspekte (auch die du ansprichst) werden in zukünftigen Videos besprochen. :)

[@UnleashedDesign]

Ja wie hier schon beschrieben wird ist es das erste in einer Reihe von Videos, alles in einem anzusprechen ist quasi unmöglich Zeitlich :D es wird noch Videos zu Animationen, Struktur, Aria, Screenreaders usw. geben :)

[@chrizzzly_hh]

@@groovebird812 Es gibt jedoch diverse Sachen wie Tabs, Slider, etc. die es noch nicht als HTML-Äquivalent gibt.

[@user-gs4gn7js3f]

Wichtiges Thema und wirklich kompakt informativ vorgestellt, danke dafür 👍. Ich beschäftige mich auch schon recht lang mit dem Thema Barrierefreiheit, aktuell natürlich sehr stark bzgl. des Stichtags 2025. PS: Kleine Anmerkung nur: Ich würde das opacity durch display none ersetzen, da man dann die nicht eingeblendeten Container aus dem DOM nimmt und keine margins und paddings stören 😊.

[@UnleashedDesign]

Ja das stimmt, geht hier weniger um die Darstellung aber hast absolut recht damit :)

[@borisbojic]

Barrierefreiheit / Zugänglichkeit bzw. A11y heißt nicht nur sich um "sehschwächen" zu kümmern. Es gibt alles mögliche an Einschränkugen und es reicht nicht, einen automatisierten Scanner (Lighthouse, Axe Tools) drüber laufen zu lassen. Um 100% sicher zu gehen, muss man ein oder zwei Screenreader benutzen und auch mal die Augen zu machen. Da wird ganz schnell klar, dass ein Scanner vllt keine Fehler findet, aber die Seite dennoch unbedienbar ist, bzw. das vorgelesene keinen Sinn macht. Es ist ein großes Thema ;-)

[@jwhgrafik]

Wirklich interessant - Was ist denn, wenn ich das Formular runterladen möchte - es sollte dann ja auch Barrierefrei sein - wie funktioniert denn das?

[@nobkd]

Letztes Beispiel: Ich glaube, es wäre sinnvoll statt "opacity: 0", eher "display: none" zu verwenden, weil - die Meldungen sich nicht gegenseitig von der Position beeinflussen, z.B. wenn der Text, der weiter oben im DOM ist, zwar nicht zu sehen ist, aber doch eine Zeile einnimmt - und "display: none" auf jeden Fall nicht von einem Screenreader gelesen wird, wo ich mir bei "opacity: 0" nicht so sicher wäre

[@ScriptRaccoon]

Absolut richtig. Das sollte korrigiert werden. Grundsätzlich ist es ohnehin fragwürdig eine Formular-Validierung nur mit CSS zu bauen.

[@UnleashedDesign]

Es geht in dem Video ja weniger um die Perfekte "Umsetzung" sondern als Beispiel wie man sowas Lösen könnte :) du hast hier absolut recht

[@PicSta]

Wichtiges Thema, aber dem Designer graut es. Wenn man es man überspitzt sieht und man nichts dem Zufall überlassen möchte, hat man leicht 4-5 verschiedene Designs einer Seite. Wenn man mal ehrlich ist, wird das ganze Thema auch aufgebauscht und nur weil jeder über „Web Accessibility“ spricht, was man vor 20 Jahren und mehr nicht getan hat, gibt es nicht mehr Menschen mit Einschränken. Viele Funktionen, auch im Browser helfen den Betroffenen schon sehr Webseiten aufzubereiten/umzuwandeln .... Interesse in mehr Videos dieser Art habe ich trotzdem, aber eher aus Neugierde und um Up to Date zu bleiben. Dazu kommt noch, dass viele Kunden nicht bereit sind den Mehraufwand zu bezahlen. Der Designer möchte mehr, der Entwickler natürlich auch und da muss man dann auch abwägen 🙂

[@UnleashedDesign]

Da muss ich widersprechen, also das Thema ist in Deutschland wie alles was Digitales angeht einfach extrem vernachlässigt worden. In anderen Länden z.B. USA, Indien, Australien oder Kanada ist es schon sehr sehr lang Pflicht diese Features zu ermöglichen. Die großen Plattformen z.B. werden alle kein Problem haben bzw. haben 0 Aufwand die neuen Regeln Umzusetzen weil ab einer gewissen Größe z.B. 100 Millionen Nutzern sind halt 2-3% 1-3 Millionen Nutzer die betroffen sind bei einem Shop wären das große Umsätze die man evtl. auf der Strecke liegen lassen würde.

[@PicSta]

@@UnleashedDesign Genau, Shops wie Amazon :)

[@haus_automation]

Neues Ziel: Nicht mehr als 2 Mio Umsatz machen. Bisher sieht es gut aus :)

[@UnleashedDesign]

Cooler Channel ;) muss man ja immer mal sehen wenn jemand mit Hacken was schreibt :) wobei ich sagen muss :D wenn man >2 Millionen Umsatz macht sollten die paar Anpassungen kein Problem sein :D

[@haus_automation]

​@@UnleashedDesign Ja, das sollte so sein. Aber nur weil man viel Geld bewegt, macht man ja nicht unbedingt viel Gewinn. Siehe Autohändler o.ä.

[@bitterlin]

Hmm also so selten ist die Rot/Grün Farbenschwäche gar nicht, es sind immerhin 3 bis 4% der Männer die an dieser Fehlbildung der Nervenzäpfen leiden, ich bin zum Beispiel einer davon :)