Ein barrierefreies Webdesign ist für die Gesellschaft, betroffene User und auch für SEO Suchmaschinenoptimierung wichtig. Aber was zeichnet das denn eigentlich aus und wie funktionieren eigentlich Screenreader. Never Code Alone setzt sich immer und gerne für soziale Projekte und Software-Qualität ein. Ein Grund mehr ein Live-Coding-Meetup mit einem ganz besonderen User auf die Beine zu stellen. Dabei werden wir von der Agentur Kreativrudel aus Bonn mit der Location unterstützt, da jedes zweite #NCAMeetup ein Auswärtsspiel ist.
Anmeldung Barrierefreies Webdesign Meetup
Das Event ist auf Meetup verfügbar. Bitte meldet euch dort an und folgt der Gruppe.
https://www.meetup.com/de-DE/meetup-group-PNulFhzz/events/251527462/
Live-Coding für barrierefreies Webdesign
Auf “Never Code Alone”-Veranstaltungen gibt es ausschließlich Live-Coding mit der Funktastatur. Hier kommt Wissen in den Fingern an, es hat einen guten Unterhaltungswert und es werden viel mehr Fragen gestellt und beantwortet. “Wer Bullet-Point Präsentationen sehen will, der findet auf Meetups ja ein reichhaltiges Angebot. Zu uns kommen die besten Entwickler aus der Community und coden gemeinsam fancy Shit auf höchstem Niveau” freut sich Roland Golla, der vor zwei Jahren NCA ins Leben gerufen hat. Eine Session dauert 90 Minuten. Der Speaker stellt das Thema bis zu 30 Minuten lang vor und dann gehen zwei Funktastaturen im Kreis rum. Da kommt jeder dran. Und getreu dem Motto “Never Code Alone” kommt natürlich auch ständiges Feedback zum Code, der dadurch immer lesbarer und besser wird. So lernt jeder etwas für sich und nimmt es auch als Skill in den eigenen Fingern mit nach Hause. Pair Programming und Code Reviews gibt es im Tagesgeschäft leider nicht und genau das macht die Events so einzigartig.
Von Geburt an blind – Domingos de Oliveira – Online-Redakteur und Berater
Barrierefreies Webdesign Consultant-Domingos de Oliveira
Das Meetup hat diesmal auch einen ganz besonderen Gast. Domingos de Oliveira ist Online-Redakteur, Autor des Bestsellers “Barrierefrei im Internet” und Berater für die unterschiedlichsten Organisationen, die barrierefrei im Internet sein wollen. Er wird der “Never Code Alone”-Community zeigen auf was man achten muß und auch direktes Feedback mit seinem Screenreader zu der aktuellen Umsetzung geben. So haben wir gemeinsam eine echte Chance ganz konkretes Wissen aufzubauen, dass uns sonst gar nicht zugänglich gemacht wird. Das Thema Weiterbildung von Programmierern ist gerade im Agenturgeschäft absolut tabu. Das ist ein großes Problem und NCA setzt sich für kostenlose Weiterbildung und die Community ein. Kostenlose Angebote gibt es immer mehr, allerdings werden sie nur von einem kleinen Teil der Entwickler freiwillig in ihrer Freizeit wahrgenommen. Hier sind auch der hohe Druck und schlechte Arbeitsbedingungen ein Grund für die fehlende Motivation. Wir haben bereits zwei Open Source Projekte für den guten Zweck veröffentlicht und versuchen immer wieder ganz konkrete Projekte mit unseren Schulungen zu unterstützen und so auch nachhaltig zu bleiben. Schließlich können wir alle „Hello World“ Anwendungen schreiben und wollen hier über den Tellerrand gefördert und gefordert werden.
Marc Haunschild Frontend Web Developer für barrierefreies Webdesign
Frontend Freelancer Marc Haunschild
Domingo ist nicht alleine, sondern ein Part eines eingespielten Teams. Das Meetup hält er gemeinsam mit Marc Haunschild. Als Autor beim Herdt-Verlag für HTML, CSS und Accessibility bringt er ein sehr gutes Know-How in die lockere Entwickler-Runde. Zu dem wichtigen Thema ist er auch als Dozent und Berater tätig und führt auch selber Schulungen durch. Für ihn ist es auch persönlich ein wichtiges Thema und er hat sich seit Jahren darauf spezialisiert und auch den großen Markt im Bereich E-Commerce erkannt. Da die meisten Entwickler auf dem Event aus dem Bereich der Shop-Entwicklung kommen wird sicherlich schnell ein technischer Fokus auf Navigationen, Suchen und der Bedienbarkeit von Formularen und UX-Design liegen. Im Laufe des Abends werden auch einige Seiten der Teilnehmer durchleuchtet und natürlich auch dieser Blog hier. Praktisches Feedback ist hier sehr wichtig und das hat Marc auch schon früh erkannt und ist daher immer im praktischen Austausch mit Domingo. Er hat eine ganze Menge praktisches Wissen und es ist sicher nicht die letzte Session mit dem Bonner Gespann.
Kreativrudel richtet das Meetup aus
Barrierefreies Webdesign Consultant-Domingos de Oliveira
Im Kern bringt Never Code Alone gute Arbeitgeber und gute Arbeitnehmer zusammen. Aus diesem Grund sollte das Auswärtsspiel jedes zweite Mal immer bei einer Firma stattfinden, die Entwickler sucht und etwas von ihrer Arbeit zeigen möchte. So bekommen Entwickler einen Einblick und nehmen einen Arbeitgeber persönlich wahr. Hier ist Employer Branding das Stichwort, daß im großen Stil auf “Never Code Alone”-Events stattfindet. Da Marc und Domingo aber keine Agentur haben und das Event in Bonn stattfindet war schnell klar, daß wir beim Kreativrudel landen. “Wir freuen uns Never Code Alone und Roland unterstützen zu können. NCA ist eine super Sache und das Thema bringt uns und die Community weiter. Wir freuen uns auf den Abend und werden unsere Entwickler natürlich auch mitbringen” sagt Miron Ogrodowicz, Partner / Gesellschafter und Technischer Leiter der Kreativrudel GmbH & Co. KG.
#NCAMeetup
Die Heimspiele finden ruhr:HUB in Essen statt und beim letzten Mal ging es sehr erfolgreich um TDD – Test Driven Development mit dem Symfony Framework. Alle Events von Never Code Alone werden u.a. auf Facebook und Meetup veröffentlicht. Folgen lohnt sich 😉
6 Kommentare
[…] Anmeldung und weitere Infos zu der „Never-Code-alone“-Veranstaltung unter Barrierefreies Webdesign (live coding #ncameetup) […]
Wie versprochen die Klassen, um Elemente vor Sehenden Nutzern zu verbergen, die von Screenreadern ausgegeben werden sollen. Auch sehr sinnvoll für gliedernde Zwischenüberschriften, die das Nutzererlebnis bei fehlendem/defekten/abgeschaltetem CSS verbessern wie „Navigation“ oder „Weiterführende Informationen“, die man bei vorhandenem Layout nicht benötigt (weil man beispielsweise die Hauptnavigation an Ort und Gestaltung erkennt).
Focusable ist wichtig, wenn Links verborgen werden. Diese können nämlich weiterhin angehabt (fokussiert) werden. Es verwirrt Nutzer, wenn mehrere Tabs hintereinander unsichtbar sind. Daher sollten fokussierbare Elemente sichtbar gemacht werden, wenn diese den Fokus erhalten.
Die Klassen sind der HTML5boilerplate entnommen, finden sich aber so oder in ähnlichen Versionen häufig im Netz.
Mehr Informationen zu den diversen Möglichkeiten, Elemente zugänglich zu verbergen unter https://a11yproject.com/posts/how-to-hide-content/
Viel Spaß und Erfolg!
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
overflow: visible;
position: static;
display: block;
margin: 5em auto;
padding: 1em;
background: pink;
min-width: 50%;
max-width: 100%;
white-space: inherit;
text-align: center;
}
nav a.visuallyhidden.focusable:active,
nav a.visuallyhidden.focusable:focus {
position: relative;
left: 10em;
top: 10em;
display: block;
z-index: 2;
}
[…] teure Konferenz Tickets allerdings auch nicht. Auf unserem neuen Meetup gibt es natürlich nur Live Coding mit der Funktastatur – getreu dem Motto Never Code Alone. Einige Meetups sind aber wirklich empfehlenswert. Zu […]
[…] und bedienbar ist, ist keine Innovation mehr sondern, sondern einfach eine Pflicht. Innovativ wäre Barrierefreies Webdesign. Daraus ergeben sich drei Dinge, die getestet werden müssen. Oben stehen auf der Testpyramide die […]
[…] damit man den User auch von seinem Formular überzeugt. Hier zählt neben der guten Usability und Accessibility auch das mit HTML und CSS umgesetzte […]
[…] Was genau macht professionelles Webdesign aus? Aktuelle und neue Internetseiten sind schick, aber reicht das auch? Ist es genug, damit sich die Investition rentiert? Wird das Internet damit schon ein eigenständiger Vertriebskanal? Neben dem Webdesign spielen auch Ziele eine wichtige Rolle. Seiten wie “Über uns” ein wichtiges Werkzeug, um den Besucher zum Kunden und Kundinnen zu verwandeln. Und nicht nur das. Der Kunde soll überzeugt werden sich auf das beste Angebot, nämlich unseres, einzulassen. Hinzu kommen Themen wie Suchmaschinenoptimierung (SEO), Datenschutz und die sehr wichtige Barrierefreiheit. […]