Was Sie schon immer über barrierefreie PDFs wissen wolltenMarkus Erle
Vortrag von Markus Erle, Wertewerk auf der Fachtagung "Aufbereitung barrierefreier Dokumente" im Rahmen der Daisy2009-Konferenz in Leipzig am 22.09.2009
Präsentation zur Vorbereitung auf die Prüfung zum TYPO3 CMS Certified Editor (TCCE) auf dem TYPO3camp RheinRuhr, Kamp-Lintfort, 05.11.2023
Tipps zum Lernen und für die Prüfung, allgemeine Themen (Browser, CMS, TYPO3, Frontend, Backend, SEO, Urheberrecht, Datenschutz, Zugänglichkeit/Barrierefreiheit), wichtige Bereiche und Funktionen im TYPO3-Backend
Was müssen NGO's bei der digitalen Barrierefreiheit beachten? Welche rechtlichen Aspekte und Richtlinien müssen beachtet werden? Was macht eine barrierefreie Webseite aus?
Hier wird vor allem auf Design und Inhalte eingegangen.
Am 6. November durfte ich am Frankfurter SAE-Institut den Studenten etwas über die Praxis der Webentwicklung erzählen. Ich habe einen großen Bogen gespannt, von der grundsätzlichen Natur des Internet über Detailprobleme bis zur Barrierefreiheit. Der Vortrag dauerte dreieinhalb Stunden.
Was Sie schon immer über barrierefreie PDFs wissen wolltenMarkus Erle
Vortrag von Markus Erle, Wertewerk auf der Fachtagung "Aufbereitung barrierefreier Dokumente" im Rahmen der Daisy2009-Konferenz in Leipzig am 22.09.2009
Präsentation zur Vorbereitung auf die Prüfung zum TYPO3 CMS Certified Editor (TCCE) auf dem TYPO3camp RheinRuhr, Kamp-Lintfort, 05.11.2023
Tipps zum Lernen und für die Prüfung, allgemeine Themen (Browser, CMS, TYPO3, Frontend, Backend, SEO, Urheberrecht, Datenschutz, Zugänglichkeit/Barrierefreiheit), wichtige Bereiche und Funktionen im TYPO3-Backend
Was müssen NGO's bei der digitalen Barrierefreiheit beachten? Welche rechtlichen Aspekte und Richtlinien müssen beachtet werden? Was macht eine barrierefreie Webseite aus?
Hier wird vor allem auf Design und Inhalte eingegangen.
Am 6. November durfte ich am Frankfurter SAE-Institut den Studenten etwas über die Praxis der Webentwicklung erzählen. Ich habe einen großen Bogen gespannt, von der grundsätzlichen Natur des Internet über Detailprobleme bis zur Barrierefreiheit. Der Vortrag dauerte dreieinhalb Stunden.
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...Bernard Zitzer
Die Slides zu meinem Vortrag: Das Navigationsmenu - selten voll augeschöpft. Finde die für deine Website passende Menu-Struktur inkl. DOs and DONTs. Die wichtigsten Infos gab es wie immer auf der Tonspur und Live im Workshop. Nicht umsonst gilt immer: Wer's verpasst, verpasst was! Dennoch viel Spaß damit!
Born to be accessible - Barrierefreie PDFs gemäß PDF/UA effizient erstellenMarkus Erle
Einführungsvortrag beim Fortgeschrittenen-Workshop zum Thema "Barrierefreie PDFs effizient erstellen" bei der Pre-Conference zur Capito-Fachtagung am 30.09.2014 im Kursaal, Stuttgart-Bad Cannstatt
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenAlineDeicke
Vortrag auf dem Workshop „Usability in Forschungsinfrastrukturen in den digitalen Geisteswissenschaften“, veranstaltet von TextGrid in Kooperation mit DARIAH-DE (22.-23. September 2014, DAI).
PDF und Barrierefreiheit - Bringt der neue ISO-Standard PDF/UA Universal Acce...Markus Erle
Auf dem Di-Ji-Kongress 2012 "Verständlich informiert, im Job integriert" am 19. und 20. September in Berlin stellte Markus Erle, Wertewerk den neuen ISO-Standard PDF/UA (14289-1) vor. Es ist der erste weltweit einheitliche Standard für barrierefreie PDF-Dokumente. Er gilt für Dokumente, Autorenprogramme, Viewer und assistive Technologien gleichermaßen.
Webseiten sind keine Gesamtkunstwerke, sondern Zusammenstellungen einzelner Module. Dieser Vortrag von der Jax 2013 ergründet, wie man vorgeht, um sinnvolle und pflegbare M;odule zu erschaffen. Dabei wird vor allem Wert auf das CSS gelegt. Das CSS wird dank Sass ebenso modular, wie das HTML.
Die Diversifizierung der Endgeräte, auf denen Inhalte im WWW angezeigt werden können, nimmt zu. Konzeptioner und Designer stehen vor der Aufgabe, für multiple Plattformen und "Devices" Inhalte bereit zu stellen.
Responsive Design stellt sich dieser Herausforderung.
Die Präsentation gibt einen ersten Einblick anhand einiger Beispiele. Der jeweils erste Screenshot eines Beispiels verlinkt dabei immer auf die entsprechende Webseite.
Kudos an Luke Wroblewski und Brad Frost für Ihre hochwertigen und unverzichtbaren Insights zu diesem Thema. Die beiden sollte man auf jeden Fall gelesen haben.
Kommentare und Feedback sind ausdrücklich erwünscht.
Vortrag an der Uni Mainz über die Grundlagen der Frontendentwicklung. Wie sollte man fürs Frontend denken? Woran muss man denken? Womit muss man sich beschäftigen?
Gratis-Webinar Schreiben für das Internet - Eduvision AusbildungenEduvision Ausbildungen
Im 1-stündigen Webinar (online-seminar) "Schreiben für das Internet" erfahren Sie vom Experten worauf Sie achten sollten, wenn Sie Texte fürs Internet verfassen. Wir gehen von der Zielgruppe aus und erarbeitet darauf zugespitzte Online-Texte. Dabei gehen wir auch auf den Aspekt der Suchmaschinenoptimierung mittels Textformulierung ein.
Nehmen Sie am Webinar teil und lassen Sie Ihre Website live checken. Alle Infos zum Webinar finden Sie unter: http://eduvision.de/webinars
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)Nicolai Schwarz
Professionelles Arbeiten bedeutet auch, effektiv zu arbeiten. Effektivität bedeutet für Webentwickler, nicht immer das Rad neu erfinden zu wollen oder müssen. Nicolai Schwarz und Dirk Jesse zeigen Best Practices, die bei der Entwicklung eigener Seiten helfen, schneller und besser mit der Aufgabe fertig zu werden.
Vortrag auf der WebTech 2009 in Karlsruhe
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...Bernard Zitzer
Die Slides zu meinem Vortrag: Das Navigationsmenu - selten voll augeschöpft. Finde die für deine Website passende Menu-Struktur inkl. DOs and DONTs. Die wichtigsten Infos gab es wie immer auf der Tonspur und Live im Workshop. Nicht umsonst gilt immer: Wer's verpasst, verpasst was! Dennoch viel Spaß damit!
Born to be accessible - Barrierefreie PDFs gemäß PDF/UA effizient erstellenMarkus Erle
Einführungsvortrag beim Fortgeschrittenen-Workshop zum Thema "Barrierefreie PDFs effizient erstellen" bei der Pre-Conference zur Capito-Fachtagung am 30.09.2014 im Kursaal, Stuttgart-Bad Cannstatt
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenAlineDeicke
Vortrag auf dem Workshop „Usability in Forschungsinfrastrukturen in den digitalen Geisteswissenschaften“, veranstaltet von TextGrid in Kooperation mit DARIAH-DE (22.-23. September 2014, DAI).
PDF und Barrierefreiheit - Bringt der neue ISO-Standard PDF/UA Universal Acce...Markus Erle
Auf dem Di-Ji-Kongress 2012 "Verständlich informiert, im Job integriert" am 19. und 20. September in Berlin stellte Markus Erle, Wertewerk den neuen ISO-Standard PDF/UA (14289-1) vor. Es ist der erste weltweit einheitliche Standard für barrierefreie PDF-Dokumente. Er gilt für Dokumente, Autorenprogramme, Viewer und assistive Technologien gleichermaßen.
Webseiten sind keine Gesamtkunstwerke, sondern Zusammenstellungen einzelner Module. Dieser Vortrag von der Jax 2013 ergründet, wie man vorgeht, um sinnvolle und pflegbare M;odule zu erschaffen. Dabei wird vor allem Wert auf das CSS gelegt. Das CSS wird dank Sass ebenso modular, wie das HTML.
Die Diversifizierung der Endgeräte, auf denen Inhalte im WWW angezeigt werden können, nimmt zu. Konzeptioner und Designer stehen vor der Aufgabe, für multiple Plattformen und "Devices" Inhalte bereit zu stellen.
Responsive Design stellt sich dieser Herausforderung.
Die Präsentation gibt einen ersten Einblick anhand einiger Beispiele. Der jeweils erste Screenshot eines Beispiels verlinkt dabei immer auf die entsprechende Webseite.
Kudos an Luke Wroblewski und Brad Frost für Ihre hochwertigen und unverzichtbaren Insights zu diesem Thema. Die beiden sollte man auf jeden Fall gelesen haben.
Kommentare und Feedback sind ausdrücklich erwünscht.
Vortrag an der Uni Mainz über die Grundlagen der Frontendentwicklung. Wie sollte man fürs Frontend denken? Woran muss man denken? Womit muss man sich beschäftigen?
Gratis-Webinar Schreiben für das Internet - Eduvision AusbildungenEduvision Ausbildungen
Im 1-stündigen Webinar (online-seminar) "Schreiben für das Internet" erfahren Sie vom Experten worauf Sie achten sollten, wenn Sie Texte fürs Internet verfassen. Wir gehen von der Zielgruppe aus und erarbeitet darauf zugespitzte Online-Texte. Dabei gehen wir auch auf den Aspekt der Suchmaschinenoptimierung mittels Textformulierung ein.
Nehmen Sie am Webinar teil und lassen Sie Ihre Website live checken. Alle Infos zum Webinar finden Sie unter: http://eduvision.de/webinars
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)Nicolai Schwarz
Professionelles Arbeiten bedeutet auch, effektiv zu arbeiten. Effektivität bedeutet für Webentwickler, nicht immer das Rad neu erfinden zu wollen oder müssen. Nicolai Schwarz und Dirk Jesse zeigen Best Practices, die bei der Entwicklung eigener Seiten helfen, schneller und besser mit der Aufgabe fertig zu werden.
Vortrag auf der WebTech 2009 in Karlsruhe
Composer is a dependency manager and package manager for PHP that allows projects to declare their dependencies in a composer.json file. It installs dependencies and manages autoloading so that dependencies are available to a project. The presentation discusses why Composer is useful for avoiding dependency issues, how to initialize a project with Composer, add and update dependencies, and how Composer can be used to manage modules and themes in Drupal projects. It also covers using Composer scripts and plugins as well as integrating Composer and Drush.
This document discusses theming in Drupal 8. It begins by explaining how template engines like Twig have replaced PHPTemplate for separating markup and logic. It then covers creating a Drupal theme with Twig templates and libraries, and registering templates in modules. Finally, it provides an overview of Twig syntax for variables, control structures, filters/functions, inheritance and an example block template.
Entities in Drupal 8 are classes that can represent content or configuration. The Entity API in Drupal 8 provides standardized methods for core entities and custom entities to perform CRUD operations like create, read, update, and delete. This allows entities to be managed consistently through an entity storage class and removes the need for proprietary entity functions. The Entity API also includes methods for querying entities and accessing entity properties through getters and setters.
The document discusses working with forms in Drupal 8. It covers creating a form by extending the FormBase class and implementing required methods. Forms can be rendered standalone or embedded in other pages. Validation checks form values and returns errors. Submitting stores values, outputs messages, and redirects. Existing forms can be reused and modified using form alterations.
This document describes the steps to create a configurable temperature display block module for Drupal 8. It involves:
1. Defining the module and block plugin.
2. Making the block configurable by adding a configuration form to set the city, and saving it in the block settings.
3. Providing a default city configuration that can be installed, and loading it on block build if no city is set.
4. Making the default configuration editable by adding a configuration form page under the admin menu.
Headless Drupal involves decoupling the Drupal backend from the frontend presentation layer. This allows for flexible frontend development while retaining Drupal's content management capabilities through a REST API. Key benefits include separation of concerns between content and presentation, using the best technologies for each, and improved performance through caching and scalability. Some topics to consider include available Drupal services, security, accessibility and SEO when implementing a headless architecture.
3. Es geht um Webseiten für uns alle!
Websites müssen trotz möglicher dauerhafter
oder vorübergehender Einschränkungen des
Besuchers verständlich und benutzbar sein!
Grafik: Microsoft
4. Anforderungen an barrierefreie Webseiten
Web Content Accessibility Guidelines (WCAG)
der Web Accessibility Initiative (WAI)
des World Wide Web Consortiums (W3C)
https://www.w3.org/WAI/standards-guidelines/
wcag/glance/
5. Anforderungen an barrierefreie Webseiten
Prinzip 1: Wahrnehmbarkeit
Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so
präsentiert werden, dass diese sie wahrnehmen können.
Prinzip 2: Bedienbarkeit
Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.
Prinzip 3: Verständlichkeit
Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.
Prinzip 4: Robustheit
Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an
Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.
6. Was können wir dafür tun?
● Barrierefreies Design
● Barrierefreie Inhalte
● Semantisches HTML
● Accessible Rich Internet Applications (ARIA)
8. Barrierefreies Design: Farben
● Unterscheidbarkeit durch Kontraste
○ gegenüber benachbarten Farben
○ gegenüber dem Hintergrund
○ nicht schätzen, messen!
○ WCAG-Empfehlung für Text:
4.5 : 1, oder 3 : 1 bei großen / fetten
Schriften!
● Farbe darf nie alleinstehendes Merkmal sein!
○ Beispiel: farbige Links zusätzlich fett machen oder unterstreichen
○ Ampel-Darstellungen oder Diagramme mit Texthinweisen versehen
Kontrast 8.4 : 1 Kontrast 2.5 : 1
9. Barrierefreies Design: Typografie
● Lesbare / vertraute Schriftarten verwenden
● Schriftgröße, z.B. >= 16px
● Zeilenabstand, z.B. 1.5 (abhängig von Schriftgröße)
● Absatzabstände
● Zeilenlänge begrenzen, z.B. 45 - 75 Zeichen
● Schriften skalierbar machen, z.B. bis 200 %, ohne sonstige Inhalte
-> relative Maßeinheiten, z.B. rem
-> aber nicht für Alles!
10. Beispiel: Typografie
Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich
keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich
werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders, blind zu sein. Und sollten Sie diese Zeilen noch immer
lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.
Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken
kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu
sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird
zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht
erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere?
Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte
schaffen das auch nicht. Und darum stört es mich nicht besonders, blind zu
sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner
Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist
nur träumen.
14. Barrierefreie Inhalte: Texte / Sprache
● Sprache muss identifizierbar sein (lang-Attribut)
● Texte müssen verständlich sein
● Alternative Fassung, z.B. Vorlesefunktion oder vereinfachte Sprache
Beispiel: die sogenannte “Leichte Sprache”
● kurze Sätze
● einfache Worte
● konsistente Begriffe
● keine Passiv-Formulierungen
siehe dazu Deutsche Gesellschaft für Leichte Sprache https://dg-ls.de/regelwerk/
15. Beispiel: Leichte Sprache
Ballistische Experimente mit
kristallinem H₂O auf dem
Areal der pädagogischen
Institutionen unterliegen
striktester Prohibition!
Das Werfen von
Schneebällen auf dem
Schulhof ist verboten!
Quelle: DGLS
16. Barrierefreie Inhalte: Bilder / Medien / Dokumente
● Beschreibungen für Bildinhalte (alt-Texte)
● Captions (Untertitel)
● Transkriptionen für Audio-/Video-Dateien
● Allgemein verfügbare Formate (jpg/png/webp, pdf, mp3/mp4)
● Barrierefreie PDF
● Keine selbststartenden Medien (Audio/Video)
● Icons: vertraute Bildsprache (z.B. Home, Menü, Download,...)
+ Text-Hinweis, z.B. title-Attribut (veraltet)
17. Barrierefreie Inhalte: Formulare
● Labels
● Feldbeschreibungen
● Felder gruppieren
● Bedienbarkeit per Tastatur
● Sinnvolle Feldtypen, z.B. select vs. radios
● Placeholder nie allein einsetzen!
● Keine rein grafischen Captchas!
● Aussagekräftige Validierungsmeldungen
20. Semantisches HTML: Was ist das?
● Semantik = Lehre von der Bedeutung
● Semantisches HTML-Tag: gibt Auskunft zur Bedeutung seines Inhalts
● Es gibt ca. 110 HTML-Tags
● Davon ca. 25 neue Tags in HTML5
● Zwei HTML-Tags sind nicht semantisch: <div> und <span>
Neu in HTML5 sind z.B. die Sectioning Elemente:
<article>, <aside>, <footer>, <header>, <main>, <nav>, <section>
22. Seitenstruktur: Elemente
● <header>
Seitenkopf, eventuell wiederholt auf allen Seiten
● <nav>
Navigation, typischerweise eine Liste mit Links
● <main>
Hauptinhalt der Seite
● <aside>
Zusätzliche Informationen zum Inhalt
● <footer>
Seitenfuß, eventuell wiederholt auf allen Seiten
● <article>
Strukturierter Content, der auch allein stehen könnte.
● <section>
Untergliederung eines längeren Content-Bereichs
23. Seitenstruktur: Empfehlungen
● Elemente beziehen sich immer auf das übergeordnete Strukturelement (also
nicht das Parent-Element), oder den <body>
● Elemente können verschachtelt werden, z.B. können <article> Elemente
einen eigenen <header> oder <footer> bekommen.
● Das <main> Element sollte nur einmal verwendet werden!
● Kein <header> oder <footer> in <header> und <footer>!
● Ein <header> nur mit einer Überschrift ist überflüssig!
● Bei wiederholt eingesetzten Elementen empfiehlt sich eine Kennzeichnung
zur Unterscheidung, z.B. Beginn mit einer Überschrift und ARIA-Attribut
24. Besonderheit: Überschriften <h1> - <h6>
● Bilden die Inhaltsstruktur der Seite (Document Outline)
● Ermöglichen schnellere Navigation
Regeln:
● Hierarchie beachten!
○ Starten mit <h1>
○ Keine Lücken lassen!
● Nicht wegen visueller Darstellung wählen!
Also nicht: Schrift soll groß sein, deshalb <h2>
Durch diese Regeln erweisen sich <h4> - <h6> meistens als überflüssig.
28. Auszüge aus dem Accessibility Object Tree
<ul aria-label="Obstsorten">
<li>Apfel</li>
<li>Birne</li>
<li>Pfirsich</li>
</ul>
Statt aria-label wäre ggf. auch title geeignet!
30. ARIA Rollen: “role” Attribut
● Ergänzung, um HTML-Tags semantisch(er) zu machen
● Inhaltlich geeignetes “role” Attribut, z.B. <div role=”complementary”>
Was ist zu beachten:
● Semantische HTML-Tags haben bereits implizite Rollen,
diese sollten nicht dupliziert werden!
Beispiel: <ul> => “list”, <nav> => ”navigation”
Also nicht: <nav role=”navigation”>
● Die implizite Rolle eines HTML-Tags sollte nur in Ausnahmefällen
überschrieben werden!
Also nicht: <nav role=”complementary”>
Ausnahme z.B. <a href=”...” role=”tab”>
31. ARIA Attribute: Eigenschaft oder Zustand von Elementen
<div role="dialog" aria-labelledby="dialogheader">
<h2 id="dialogheader">Wählen Sie eine Datei</h2>
.… Dialog Inhalte
<button aria-label="schließen" aria-describedby="descriptionClose" onclick="myDialog.close()">X</button>
….
<div id="descriptionClose">
Beim Schließen dieses Fensters werden eingegebene Daten verworfen.
Sie werden zur Hauptseite zurückgeleitet.
</div>
</div>
32. Regel: Semantisches HTML bevorzugen!
Also nicht:
<div role=”checkbox” aria-checked=”true” onclick=”…”>
⛝
</div>
sondern:
<input type=”checkbox” />
ARIA-Rollen und -Attribute einsetzen, wenn semantisches HTML nicht verfügbar ist oder
ausreicht, z.B. bei Custom Elements (Web Components) oder Formularen! Ebenso bei
Dialogen, Modals, Slidern, Tabs, Ajax-Inhalten u.ä.
33. Accessibility: Links
Web Content Accessibility Guidelines des W3C:
https://www.w3.org/WAI/standards-guidelines/wcag/
Web Accessibility in Mind:
https://webaim.org/
Mozilla Developer Network (MDN):
https://developer.mozilla.org/en-US/docs/Web/Accessibility
The A11Y Project:
https://www.a11yproject.com/
34. Accessibility: Tools
● Developer Tools des Browsers
● Browser-Erweiterungen, z.B. Web Developer, Axe, WAVE
● Screenreader, z.B. NVDA (Windows), VoiceOver (Mac), MS Edge Browser
● Online-Dienste zur Überprüfung
Sammlungen:
https://www.w3.org/WAI/ER/tools/
https://webaim.org/articles/evaluationguide/