SlideShare ist ein Scribd-Unternehmen logo
Größer. Schneller. Weiter.
Best Practices in JavaScript und CSS

 EB RAUTS | Dirk Jesse und Nicolai Schwarz
Kommentierte Fassung
Best Practices in JavaScript und CSS
Vortrag auf der WebTech 2009 in Karlruhe

In diesem Vortrag präsentieren wir ein paar kleine Tipps und Tricks, die vielleicht noch nicht alle
Leute kennen. Oft geht es darum, die Inhalte für Screenreader oder Tastaturnutzer sinnvoll
aufzubereiten. Viele der Kapitel lassen sich recht einfach bei allen Projekten umsetzen.

Alle Links sind gesammelt auf delicious zu finden: www.delicious.com/textformer/webtech09

Wer den Vortrag gehört hat, kann ihn gerne hier kommentieren:
http://joind.in/talk/view/1120
http://www.webkrauts.de
CSS-Reset
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td { margin:0; padding:0; }

table { border-collapse:collapse; border-spacing:0; }

fieldset,img { border:0; }

address,caption,cite,code,dfn,em,strong,th,var {
  font-style:normal; font-weight:normal; }

ol,ul { list-style:none; }

caption,th { text-align:left; }

h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }

q:before,q:after { content:’’; }
abbr,acronym { border:0; }

http://developer.yahoo.com/yui/reset/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0; border: 0; outline: 0;
    font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;
    vertical-align: baseline; }

/* remember to define focus styles! */
:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
/* tables still need ‘cellspacing=”0”’ in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: “”; }
blockquote, q { quotes: “” “”; }

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0; border: 0; outline: 0;
    font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;
    vertical-align: baseline; }

/* remember to define focus styles! */
:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
/* tables still need ‘cellspacing=”0”’ in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: “”; }
blockquote, q { quotes: “” “”; }
http://people.opera.com/patrickl/experiments/keyboard/test
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
{ overflow: hidden; } verhindert den langen Rahmen links heraus.
Prüfen, ob die Reset-Anweisungen sinnvoll sind


:focus { outline: 0; }

unterdrückt die Outline für alle User; sowohl beim Draufklicken mit der Maus
als auch bei Nutzung der Tastatur



:active { outline: 0; }

unterdrückt die Outline beim Draufklicken mit der Maus
Nutzer mit Tastatur sehen nun aber den fokussierten Link mit Outline
CSS-Reset
Worum geht‘s?

Reset-Style-Sheets sind ein guter Start für das eigene Design. Dabei sollten wir die Anweisungen aber
nicht alle unreflektiert übernehmen. Das Style-Sheet von Eric Meyer setzt zum Beispiel die outline beim
focus auf Null. Designer mögen es nicht unbedingt, wenn beim Klick auf einen grafischen Link diese
Outline erscheint, die Anweisung verhindert das.
Aber die Outline ist dann hilfreich, wenn Besucher die Webseite per Tastatur navigieren. Wenn ein
Webworker vergisst, die Zustände für den :focus anzulegen und durch das Reset die outline auf Null
steht, bekommt der Tastatur-Nutzer gar keine Rückmeldung auf welchem Link der Fokus gerade steht.

Statt den :focus auf Null zu setzen, ist es besser, nur :active auf Null zu setzen. Maus-Nutzer sehen
dann keine Outline, aber Tastatur-Nutzer sehen die Outline.
Border für die Navigation
http://www.webkrauts.de/2008/07/08/sonnenseiten-barrierefreiheit/
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
/* Hauptnavigation 2. Level */

#hauptnavigation ul li ul li a {
border-left: 5px solid #FFF;
padding-left: 40px;
}

#hauptnavigation ul li ul li a:hover,
#hauptnavigation ul li ul li a:focus,
#hauptnavigation ul li ul li a:active {
border-left: 10px solid #FFF;
padding-left: 35px;
background: url(‘http://www.landtag.nrw.de/portal/CPMO/images/
  icon_ebene2_pfeil.gif’) no-repeat 18px 2px #F4F8FB;
}
Border für die Navigation
Worum geht‘s?

Es gibt einige Nutzer, die ihren Browser so einstellen, dass die Farbeinstellungen von Webseiten igno-
riert werden. Es werden nur rudimentäre Farben, in diesem Beispiel schwarz, weiß und blau, genutzt.
Normale Farbänderungen bei :hover und :focus werden hier nicht mehr angezeigt.

Ein einfacher Trick sorgt dafür, dass auch Nutzer mit diesen Einstellungen :hover und :focus nutzen
können. Der Rand (border) ist hier zunächst 5px breit, bei :hover und :focus aber 10px breit. Da der
Rand die Farbe des Links annimmt, kann der Nutzer auch bei diesen Einstellungen :hover und :focus
wahrnehmen.
Inhalte verstecken
CSS für versteckte Inhalte


 position:absolute;
 left: -10000px;
 top: auto;
 width: 1px;
 height: 1px;
 overflow: hidden;



 Für fokusierbare Elemente wie Links oder Formulare




http://webaim.org/blog/hiding-content-for-screen-readers/
Inhalte verstecken
Worum geht‘s?

Manchmal werden Inhalte für Screeneader auf der Webseite für sehende Nutzer versteckt. Sie werden
einfach aus dem sichtbaren Feld verschoben. Wer die Seite per Tatstatur navigiert, kommt aber den-
noch an diese Inhalte (wenn sie fokusierbar sind). Ist der Inhalt dabei nach oben verschoben, springt
die Ansicht auch ganz nach oben. Besser ist es, solche Inhalte nur nach links zu verschieben. Der Bild-
schirm bleibt dann auf derselben Höhe stehen – und springt nicht mehr wild nach oben und unten.
Skiplinks einblenden
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
<body id=”top”>
  <div id=”skip”>
    <p class=”skiplink”><a href=”#textsprung”>Sprung zum Inhalt</a>.</p>
  </div>
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
.skiplink a:link, .skiplink a:visited {
    position: absolute;
    width: 1px; height: 1px;
    left: -100px; top: -100px;
}

.skiplink a:hover, .skiplink a:focus, .skiplink a:active {
    display: block;
    position: absolute;
    left: 290px; top: 3px;
    width: 200px;
    height: auto !important;
}
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Skiplinks einblenden
Worum geht‘s?

Skiplinks für Screenreader sollten auch für Tastatur-Nutzer zumindest kurz eingeblendet werden.
Nämlich dann, wenn die Skiplinks auch den Fokus haben. Dazu am besten eine geeignete Stelle im
Design vorsehen, um die Skipinks einzublenden.
Bessere Skiplinks
Skiplinks
Techniques for WCAG 2.0
G1: Adding a link at the top of each page that goes directly to the main
content area

Test Procedure
• Check that a link is the first focusable control on the Web page.
• Check that the description of the link communicates that it links to the
  main content.
• Check that the link is either always visible or visible when it has keyboard
  focus.
• Check that activating the link moves the focus to the main content.
• Check that after activating the link, the keyboard focus has moved to the
  main content.

Expected Results
•All checks above are true.

http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G1
Skiplinks – Integriert
Skiplinks – Overlay
Skiplinks – Overlay




<body>
<!--skiplink navigation-->
<ul id=”skiplinks”>
 <li><a class=”skip” href=”#nav”>Skip tonavigation(Press Enter).</a></li>
 <li><a class=”skip” href=”#content”>Skip tomaincontent(Press Enter).</a></li>
</ul>

...
</body>
Skiplinks & Webkit-Browser
Problem: Tastaturfocus wird nicht verschoben.
Lösung: Korrektur per JavaScript

var webkitFocusfix= {
   init: function() {
       var is_webkit = navigator.userAgent.toLowerCase().indexOf(‘webkit’) > -1;
       var i = 0;
       var skiplinks = [ ];
       if (is_webkit) {
              if (document.getElementsByClassName!== undefined) {
                    skiplinks = document.getElementsByClassName(‘skip’);
                    for (i=0; i<skiplinks.length; i++) {
                          var target= skiplinks[i].href.substr(skiplinks[i].href.indexOf(‘#’)+1);
                          var targetElement= document.getElementById(target);
                          targetElement.href= ‘#’+target;
                          targetElement.setAttribute(“tabindex”, “0”);
                          skiplinks[i].setAttribute(“onclick”,”document.getElementById(‘”+target+”’).focus();”);
} } } } };

webkitFocusfix.init();
Bessere Skiplinks
Worum geht‘s?

Nicht immer lässt sich für die einzublendenden Skiplinks ein geeigneter Platz finden. Insbesondere bei
grafisch anspruchsvollen Layouts kann daneben auch schwierig sein, Skiplinks gut sichtbar in Szene zu
setzen.

Eine Alternative ist daher, die Skiplinks per Overlay über dem Layout einzublenden. Auf diese Weise
kann man Größe, Form und Farbe relativ unabhängig festlegen und somit absichern, dass diese von
Nutzern auch wahrgenommen werden.

Ein weiterer Punkt betrifft den Tabfocus. Dieser sollte beim Benutzen eines Skiplinks ebenfalls dem Ziel
folgen (siehe WCAG 2.0 Testkriterien). In Webkit-Browsern (Safari, Chrome) passiert jedoch genau das
nicht. Diesem Problem kann mit etwas JavaScript begegnet werden.
Margin Collapsing
Margin Collapsing


Beschreibung
• Betrifft Elemente im normalen Elementfluss
• Betrifft nur vertikale Randabstände
• „Der größere gewinnt …“



Unterbrechung durch:
• Containing Float Techniken: float, overflow:auto|hidden, display:table
• CSS-Eigenschaft: border
• Internet Explorer: hasLayout+ padding/border
Heading
                                                                        20px
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no-
numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam




<h1>HeadingContent</h1>               h1 {
<p>Paragraph content</p>                margin: 0 0 20px 0;
                                        background: #0335;
                                      }

                                      p{
                                        margin: 10px 0 0 0;
                                        background: #0335;
                                      }
Heading
                                                                        40px

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no-
numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam



<h1>HeadingContent</h1>               h1 {
<div>                                   margin: 0;
<p>Paragraph content</p>                background: #335; }
</div>
                                      div {
                                         margin: 40px 0 25px 0;
                                         background: #335; }

                                      p{
                                        margin: 10px 0 0 0; }
Heading
                                                                         40px

                                                                         10px
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no-
numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam


<h1>HeadingContent</h1>               h1 {
<div>                                   margin: 0;
<p>Paragraph content</p>                background: #335; }
</div>
                                      div {
                                         margin: 40px 0 25px 0;
                                         background: #335;
                                         border-top: 1px solid #ccf; }

                                      p { margin: 10px 0 0 0; }
Margin Collapsing
Worum geht‘s?

Das Margin Collapsing ist eine der Verhaltensweisen von CSS, mit denen insbesondere Anfänger
zunächst so ihre Schwierigkeiten haben. Vertikale Margins aufeinander folgender Elemente werden
nicht einfach addiert, sondern überlagern sich. Kurz gesagt, gilt die Regel: „Der Größere gewinnt!”.

Speziell bei verschachtelten Elementen ist der Überblick und die Ursache für ungewöhnliche Abstände
im Layout nicht immer einfach zu erkennen. Hier werden deshalb kurz einige CSS-Methoden vorgestellt,
mit denen das Margin-Collapsing unterbunden werden kann.
Alphatransparenz
Alphatranzparenz: Lösungen
Variante: rgba()                        Variante: opacity




Eric Eggert - Cross-Browser rgba()      Transparente Hintergründe mit CSS
http://yatil.de/Weblog/cross-browser-   http://www.highresolution.info/web-
rgba                                    log/entry/transparente_hintergruen-
                                        de_mit_css/
Alphatransparente Hintergründe


CSS 3: rgba()

• Moderne Browser (FF3+, Safari 4+, Opera 10+)
  background-color: rgb(255,255,255); /* Fallback */
  background-color: rgba(255,255,255,.3);

• Internet Explorer 6+
  background-color: transparent9; /* Fallback Reset */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#4CFFFFFF,end
  Colorstr=#4CFFFFFF);
  zoom:1; /* activatehasLayout*/
Alphatransparenz
Worum geht‘s?

Alphatransparente Hintergründe sind immer öfter gefragt in modernen Layouts. Bisher waren diese
Effekte crossbrowser nur über alphatransparente PNG-Grafiken oder verschachtelte Elemente und der
CSS-Eigenschaft opacity möglich. Diese CSS-Lösung bedingt jedoch zusätzliche Elemente rein zu
Präsentationszwecken.
Mit der Ankunft von Opera 10 und dessen erweiterter CSS3-Unterstützung eröffnet sich mit der CSS3-
Eigenschaft rgba() eine weitere, sehr einfach anzuwendende Methode, um diesen Transparenz-Effekt
zu erzeugen. Und auch im Internet-Explorer kann mit einem kleinen Workaround ein identischer Effekt
- rein auf CSS-Basis - erzeugt werden.

Die rgba() Methode funktioniert crossbrowser und ist eine echte Alternative zum Einsatz von
PNG-Grafiken.
Bilder mit Unterzeilen
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
<dl class=”bildUnterschrift right-
Float clear”>

   <dt><a href=”http://ais.
badische-zeitung.de/pi-
ece/01/56/f5/d1/22476241.jpg”
class=”nyroModal” target=”_
blank” title=”&#8222;Er heißt Big
Mac, ...”><img src=”http://ais.ba-
dische-zeitung.de/piece/01/56/f5/
d1/22476241-p-349_261.jpg” alt=””
/></a></dt>

    <dd>&#8222;Er heißt Big Mac,
...</dd>

</dl>
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
<div class=”photo right”>

   <img src=”http://pix.sueddeut-
sche.de/politik/173/494508/spd80-
1258300472.jpg” width=”180”
height=”180” alt=”SPD Parteitag in
Dresden” title=”SPD Parteitag in
Dresden” border=”0”>

    <p>Will seiner Partei das Den-
ken in veralteten Kategorien ab-
gewöhnen: Sigmar Gabriel, der
ebenso sprachmächtige wie schil-
lernde Vorsitzende. (<cite>Foto:
AP</cite>)</p>

</div>
<div>
    <img />
    <p>Untertitel</p>
 </div>


Noch nicht ideal: Ein Screenreader würde Bild und Untertitel hier als zwei
unterschiedliche Blöcke behandeln.



 <div>
    <p>
      <img />
      <span>Untertitel</span>
    </p>
 </div>

Best Practice: Ein Screenreader sieht Bild und Untertitel nun als Einheit an.
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
[caption id=”attachment_637” align=”alignnone” width=”307”
caption=”WebTech-Logo”]<img src=”http://www.webkrauts.de/wp-con-
tent/uploads/2009/10/webtech.png” alt=”WebTech-Logo” title=”webtech”
width=”307” height=”81” class=”size-full wp-image-637” />[/caption]
[caption id=”attachment_637” align=”alignnone” width=”307”
caption=”WebTech-Logo”]<img src=”http://www.webkrauts.de/wp-con-
tent/uploads/2009/10/webtech.png” alt=”WebTech-Logo” title=”webtech”
width=”307” height=”81” class=”size-full wp-image-637” />[/caption]


<div id=”attachment_637” class=”wp-caption alignnone” style=”width:
317px”>
   <img src=”http://www.webkrauts.de/wp-content/uploads/2009/10/
   webtech.png” alt=”WebTech-Logo” title=”webtech” width=”307”
   height=”81” class=”size-full wp-image-637” />
   <p class=”wp-caption-text”>WebTech-Logo</p>
</div>
Bilder mit Unterzeilen
Worum geht‘s?

Die derzeit beste Lösung für Bilder mit Unterzeilen steht auf Seite 51. Die Frage ist, wie einfach der
WYSIWYG-Editor eingerichtet werden kann, um diese Struktur zu erzeugen. Alternativ kann man statt
des span auch <em> oder <strong> nutzen, wenn diese Elemente einfacher per Editor handhabbar sind.

Noch besser ist vielleicht ein Zwischen-Code wie er etwa bei WordPress erzeugt wird. Bei der Ausgabe
kann dieser Code dann durch den gewünschten HTMl-Code ersetzt werden. Solch ein Filter hat Vor-
teile, wenn sich irgendwann mal ein besserer Code für Bilder mit Unterzeile ergibt. Zum Beispiel falls
in HTML5 ein eigenes Element (figure) dafür vorgesehen sein wollte. In diesem Fall müsste der Admin
nur den Ausgabe-Filter umschreiben, schon werden alle Bilder mit Unterzeile im neuen Code darge-
stellt.
HTML Purifier
Zum Beispiel: Import aus Word
<h1 class=”MsoNormal” style=”text-align: center; line-height: normal;
margin: 0cm 0cm 0pt;”><span style=”font-family:
&quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;
mso-ansi-language: DE;”>Patientensymposium
Netzhautdegenerationen</span></h1><h1 class=”MsoNormal” style=”text-align:
center; line-height: normal; margin: 0cm 0cm 0pt;”><span style=”font-family:
&quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;
mso-ansi-language: DE;”>&nbsp;</span><span style=”font-family:
&quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;
mso-ansi-language: DE;”>Einblicke - Ausblicke</span></h1><p
class=”MsoNormal” style=”line-height: normal; margin: 0cm 0cm 0pt;”><span
style=”font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size:
12pt; mso-ansi-language: DE;”>&nbsp;</span></p><h2 class=”MsoNormal”
style=”line-height: normal; margin: 0cm 0cm 0pt;”><span style=”font-family:
&quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;
mso-ansi-language: DE;”>Moderation</span>
...
http://htmlpurifier.org
<h1 class=””MsoNormal””>
    <span>Patientensymposium Netzhautdegenerationen</span>
 </h1>
 <h1 class=””MsoNormal””>
    <span> </span>
    <span>Einblicke - Ausblicke</span>
 </h1>
 <p class=””MsoNormal””>
    <span> </span>
 </p>
 <h2 class=””MsoNormal””>
    <span>Moderation</span>
 </h2>

Ergebnis ohne weitere Einstellungen. (die „doppelten“ Anführungszeichen sind
nicht wirklich doppelt, das liegt an der gewählten Schrift)
<h1>
   <span>Patientensymposium Netzhautdegenerationen</span>
</h1>
<h1>
   <span>Einblicke - Ausblicke</span>
</h1>
<h2>
   <span>Moderation</span>
</h2>
HTML Purifier


• beseitigt bösartigen Code
• fehlende End-Tags werden geschlossen
• falsch verschachtelte Elemente werden
  repariert
• veraltetete Tags werden konvertiert
• CSS wird validiert
• Leere Elemente können ausgefiltert
  werden
• Es lässt sich konfigurieren, welche
  Elemente und Attribute erlaubt sind
• Ebenso lassen sich etwa ids festlegen,
  die nicht erlaubt sind
HTML Purifier
Worum geht‘s?

Einige CMS und WYSIWYG-Editoren bemühen sich bereits, den Quellcode, den die Redakteure ein-
geben, beim Speichern oder bei der Ausgabe zu bereinigen. Nach meinen Tests stoßen beide recht
schnell an ihre Grenzen und können auch nur in bestimmten Grenzen konfiguriert werden.

Der beste Filter, um HTML-Code sauber auszugeben, ist für mich bisher der HTML Purifier. Er kann auch
nicht verhindern, dass Redaktere eine Zwischenüberschrift falsch auszeichnen oder eine Liste nicht als
HTML-Liste eingeben. Aber der Purifier repariert fehlerhaften Code viel besser als WYSIWYG-Editoren
oder CMS-eigene Filter.

Einfach mal testen.
Ein Suchformular
Die Basis


<form action=”/”>
  <div>
    <input type=”text” />
    <input type=”submit” value=”Suchen” />
  </div>
</form>




XMHTL 1.0 Code - Laut Spezifikation dürfen die input-Elemente keine direkten
Kindelemente von form sein, daher das div.

http://www.webkrauts.de/2008/12/09/der-perfekte-suchschlitz/
Mehr Semantik


<form action=”/”>
  <fieldset>
    <legend>Volltextsuche</legend>
    <label for=”suchbegriff”>Suchbegriff</label>
    <input type=”text” id=”suchbegriff” />
    <input type=”submit” value=”Suchen” />
  </fieldset>
</form>




Mit etwas CSS auch:
Interaktiv mit Pseudoklassen


input[type=text]:focus {
  border-color: #000 #444 #444 #000;
  background-position: 0 0;
}

input[type=submit]:hover {
  cursor: pointer;
}

input[type=submit]:focus,
input[type=submit]:active {
  background: #6c0000;
}

Der Internet Explorer 6 versteht diese Anweisungen nicht!
Interaktiv mit JavaScript


<input type=”text” id=”suchbegriff” value=”Suchbegriff” />




myTextfeld = document.getElementById(‘suchbegriff’);
if (document.addEventListener) {
  myTextfeld.addEventListener(‘focus’, textLeeren, false);
}
function textLeeren() {
  myTextfeld.value = “”;
}



Leert das Suchfeld, wenn ein Nutzer reinklickt
Interaktiv mit JavaScript II
myTextfeld = document.getElementById(‘suchbegriff’);
if (document.addEventListener) {
  myTextfeld.addEventListener(‘focus’, textLeeren, false);
  myTextfeld.addEventListener(‘blur’, textFuellen, false);
}
function textLeeren() {
  mySuchspeicher = myTextfeld.value;
  myTextfeld.value = “”;
}
function textFuellen() {
  if (myTextfeld.value == “”) {
    myTextfeld.value = mySuchspeicher;
  }
}

Merkt sich das Wort im Eingabefeld.
Das finale Suchfeld




• Markup nach Standards
• legend und label helfen in erster Linie Screenreadern, für sehende Nutzer
  werden die Elemente versteckt
• Es gibt interaktive Pseudoklassen für :hover, :focus, :active
• Das Wort „Suchbegriff“ hilft dem Nutzer statt eines sichtbaren labels, die
  Funktion des Feldes zu erklären
• Per JavaScript wird das Wort „Suchbegriff“ beim Klick ins Feld ausgeblendet.
• Schreibt der Nutzer ein neues Wort hinein, wird dieses beibehalten,
  andernfalls schreibt JavaScript wieder „Suchbegriff“ ins Feld.
Ein Suchformular
Worum geht‘s?

Das steht im Grunde alles schon gut erklärt in dem Artikel von Gerrit van Aaken:
http://www.webkrauts.de/2008/12/09/der-perfekte-suchschlitz/
(Dabei auch die Kommentare beachten)
Formulare effektiv gestalten
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Standardmarkup für Formulare
Zielsetzung
• Einheitliches Markup für
  alle Formularbausteine
• Visuelle Gestaltungsfreiheit
• Berücksichtigung von
  Feedback-Informationen
• Unterstützung für
  fixe & flexible Breiten

Grundgedanke
Formularelement und Label
bilden eine Einheit und werden
kontextabhängig formatiert.
Textfeld
Standardmarkup für Formulare
 <div class=”type-text”>
    <label for=”your-id”>your label</label>
Zielsetzung
• Einheitliches Markup name=”your-id” id=”your-id” size=”20” />
     <input type=”text” für
  </div>
  alle Formularbausteine
• Visuelle Gestaltungsfreiheit
• Berücksichtigung von
  Feedback-Informationen
• Unterstützung für
  fixe & flexible Breiten

Grundgedanke
Formularelement und Label
bilden eine Einheit und werden
kontextabhängig formatiert.
Textfeld
Standardmarkup für Formulare
 <div class=”type-text”>
    <label for=”your-id”>your label</label>
Zielsetzung
• Einheitliches Markup name=”your-id” id=”your-id” size=”20” />
     <input type=”text” für
  </div>
  alle Formularbausteine
• Visuelle Gestaltungsfreiheit                                      Selectfeld
• <div class=”type-select”>
  Berücksichtigung von
  Feedback-Informationen Options</label>
     <label for=”your-id”>More
     <select name=”your-id” id=”your-id” size=”1”>
• Unterstützung für
  fixe <option value=”0” selected=”selected” disabled=”disabled”>
       & flexible Breiten
           Please choose</option>
      <optgrouplabel=”First options to choose from”>
Grundgedanke value=”value #1”>Option 1</option>
           <option
Formularelement value=”value #2”>Option 2</option>
           <option und Label
      </optgroup>
bilden<optgrouplabel=”Yet more options to choose from”>
        eine Einheit und werden
kontextabhängig formatiert. #3”>Option 3</option>
           <option value=”value
           <option value=”value #4”>Option 4</option>
           <option value=”value #5”>Option 5</option>
      </optgroup>
    </select>
 </div>
Textarea
Standardmarkup für Formulare
 <div class=”type-text”>
    <label for=”your-id”>your label</label>
Zielsetzung
• Einheitliches Markup für id=”your-id” cols=”30” rows=”7”></textarea>
     <textareaname=”your-id”
  </div>
  alle Formularbausteine
• Visuelle Gestaltungsfreiheit
• Berücksichtigung von
  Feedback-Informationen
• Unterstützung für
  fixe & flexible Breiten

Grundgedanke
Formularelement und Label
bilden eine Einheit und werden
kontextabhängig formatiert.
Textarea
Standardmarkup für Formulare
 <div class=”type-text”>
    <label for=”your-id”>your label</label>
Zielsetzung
• Einheitliches Markup für id=”your-id” cols=”30” rows=”7”></textarea>
     <textareaname=”your-id”
  </div>
  alle Formularbausteine
• Visuelle Gestaltungsfreiheit                        Checkboxen & Radiobuttons
• <div class=”type-check”>
  Berücksichtigung von
  Feedback-Informationenname=”your-id” id=”your-id” />
     <input type=”checkbox”
     <label for=”your-id”>Your checkbox label</label>
• Unterstützung für
  </div>
  fixe & flexible Breiten
 <div class=”type-check”>
    <input type=”radio” name=”your-id” value=”value #1” id=”your-id” />
Grundgedanke
    <label for=”your-id”>Your radio-button label</label>
 </div>
Formularelement und Label
bilden eine Einheit und werden
kontextabhängig formatiert.
Textarea
Standardmarkup für Formulare
 <div class=”type-text”>
    <label for=”your-id”>your label</label>
Zielsetzung
• Einheitliches Markup für id=”your-id” cols=”30” rows=”7”></textarea>
     <textareaname=”your-id”
  </div>
  alle Formularbausteine
• Visuelle Gestaltungsfreiheit                        Checkboxen & Radiobuttons
• <div class=”type-check”>
  Berücksichtigung von
  Feedback-Informationenname=”your-id” id=”your-id” />
     <input type=”checkbox”
     <label for=”your-id”>Your checkbox label</label>
• Unterstützung für
  </div>
  fixe & flexible Breiten
 <div class=”type-check”>
    <input type=”radio” name=”your-id” value=”value #1” id=”your-id” />
Grundgedanke
    <label for=”your-id”>Your radio-button label</label>
 </div>
Formularelement und Label
bilden eine Einheit und werden
                                                                 Buttons
kontextabhängig formatiert.
  <divclass=”type-button”>
     <inputtype=”button” value=”button” id=”button1” name=”button1” />
     <inputtype=”reset” value=”reset” id=”reset” name=”reset” />
     <inputtype=”submit” value=”submit” id=”submit” name=”submit” />
  </div>
Präsentationsmöglichkeiten


Lineare Abfolge              Spalten links-/rechtsbündig
Präsentationsmöglichkeiten


Mehrspaltige Formulare       Feedbackmöglichkeiten




                              <div class=”type-text error”>
                                 <strong >Field «Last name»
                                 not properly filled.</strong>
                                 …
                              </div>
„Formularbaukasten“


Implementation
CSS Framework YAML, Version 3.2




• Dokumentation
  http://www.yaml.de/de/dokumentation/css-bausteine/formularbaukasten.html
• Beispiel: Grundelemente
  http://www.yaml.de/fileadmin/examples/01_layouts_basics/building_forms.html
• Beispiel: Mehrspaltige Formulare
  http://www.yaml.de/fileadmin/examples/01_layouts_basics/multicolumnar_
  forms.html
Formulare effektiv gestalten
Worum geht‘s?

Je nach Platzangebot im Layout oder der Komplexität der vom Nutzer erfragten Daten haben sich
unterschiedliche Darstellungsformen als vorteilhaft erwiesen. Die Herausforderung besteht nun darin,
ein möglichst sinnvolles Basismarkup für Formulare zu entwickeln, das all diese verschiedenen
Anforderungen abdeckt. Gleichzeitig soll der Pflegeaufwand für das dazugehörige CSS möglichst gering
gehalten werden.

Im Rahmen des Vortrages stelle ich die Lösung vor, die ich im Rahmen des CSS-Frameworks YAML als
„Formularbaukasten” implementiert habe.
Inhalte in Tab-Reitern
Erwarten Sie das Unerwartete


Mit JavaScript                 Ohne JavaScript
Erwarten Sie das Unerwartete


Mit JavaScript                           Ohne JavaScript


                                                         Tabs ohne Funktion!




 <a onfocus=”blur()” onclick=”spToggleMPC(‘topbox’,1)”
    href=”javascript:void(0);”>Gelesen</a>
Zugängliche Tabinhalte


Zielvorgaben

• Zugänglichkeit und ansprechende Präsentationder Inhalte
  mit und ohne JavaScript
• Vollständige Tastatursteuerung
• Feedback für Screenreaderbeim Tabwechsel
• Synchronisation der Tabreiter(gleiche Höhen)
Ziel: Zugängliche Tabinhalte


Mit JavaScript                 Ohne JavaScript
Ausgangspunkt: Linearer Inhalt
Identifikation Tabreiter/Inhalt
                                  H3 Heading




                                  H3 Heading




                                  H3 Heading
Identifikation Tabreiter/Inhalt
                                         H3 Heading

                                  DIV class=“content“




                                         H3 Heading

                                  DIV class=“content“




                                         H3 Heading

                                  DIV class=“content“
Aktives JavaScript: DOM-Scripting
                                           H3 Heading

                                    DIV class=“content“




                                           H3 Heading

                                    DIV class=“content“




                                           H3 Heading

                                    DIV class=“content“
„AccessibleTabs“ für jQuery


Autor: Dirk Ginader
AccessibleTabs (jQueryPlugin)
• Projekthomepage
• Dokumentation (deutsch/ englisch)




Implementation
CSS Framework YAML, Version 3.2
• Optional mit Tab-Synchronisation
  http://www.yaml.de/fileadmin/examples/
  09_add-ons/accessible_tabs.html
Inhalte in Tab-Reitern
Worum geht‘s?

Wann sind Tabreiter wirklich zugänglich für Screenreader? Wie gestalte ich Tab-Inhalte sinnvoll, falls
JavaScript beim Nutzer deaktiviert ist? Diese Fragen werden anhand des „Accessible Tabs” Plugins von
Dirk Ginader beantwortet.
Danke. Und schönen Abend noch...
Oder hat etwa jemand eine Frage?
Die Referenten


Dirk Jesse                              Nicolai Schwarz
twitter.com/djesse                      twitter.com/textformer

• Bauingenieur aus Dresden              • freier Designer und Webentwickler
• Freiberuflicher Softwareentwickler:     aus Dortmund
  – CSS Framework „Yet Another          • Autor für t3n, PHP User,
     Multicolumn Layout“ (YAML)           Create or Die
  – JavaScript-Applikationen            • Redaktionelle Mitarbeit beim
  – CSSDOC                                Webstandards-Magazin
• Autor                                 • Redaktion Webkrauts
  – T3N Magazin,                        • Redaktion pisto-magazin.de
     Webstandards-Magazin
  – Fachbuch „CSS-Layouts,
     Praxislösungen mit YAML 3.0“
• Redaktion Webkrauts

Weitere ähnliche Inhalte

Andere mochten auch

Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Nicolai Schwarz
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit Drupal
Nicolai Schwarz
 
120215_PM_Dt. See_puu.pdf
120215_PM_Dt. See_puu.pdf120215_PM_Dt. See_puu.pdf
120215_PM_Dt. See_puu.pdf
unn | UNITED NEWS NETWORK GmbH
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-Trends
Nicolai Schwarz
 

Andere mochten auch (6)

Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit Drupal
 
120215_PM_Dt. See_puu.pdf
120215_PM_Dt. See_puu.pdf120215_PM_Dt. See_puu.pdf
120215_PM_Dt. See_puu.pdf
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-Trends
 

Ähnlich wie WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
Torsten Landsiedel
 
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Peter Müller
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
Henning Schmidt
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
Jens Grochtdreis
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
Hans Mittendorfer
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
Jens Grochtdreis
 
XHTML
XHTMLXHTML
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
Torsten Landsiedel
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
Michael Kollmannsberger
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...
Bernard Zitzer
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
Acquia
 
Barrierefreiheit und Karrierefrauen
Barrierefreiheit und KarrierefrauenBarrierefreiheit und Karrierefrauen
Barrierefreiheit und Karrierefrauen
Kai Laborenz
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
Jens Grochtdreis
 

Ähnlich wie WebTech 2009: Best Practices in JavaScript und CSS (kommentiert) (20)

The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
Contao Konferenz 2013 - Workshop "Responsive Contao" - Teil 1
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
XHTML
XHTMLXHTML
XHTML
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...
Navigationsoptimierung - Wichtige SEO, UX & Usability DOs and DONTs - SEO Cam...
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Barrierefreiheit und Karrierefrauen
Barrierefreiheit und KarrierefrauenBarrierefreiheit und Karrierefrauen
Barrierefreiheit und Karrierefrauen
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 

Mehr von Nicolai Schwarz

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015
Nicolai Schwarz
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Nicolai Schwarz
 
DNA von Gadgets
DNA von GadgetsDNA von Gadgets
DNA von Gadgets
Nicolai Schwarz
 
Gadgets Galore
Gadgets GaloreGadgets Galore
Gadgets Galore
Nicolai Schwarz
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
Nicolai Schwarz
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
Nicolai Schwarz
 
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityBarrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Nicolai Schwarz
 
Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit Schildbürgern
Nicolai Schwarz
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz
 

Mehr von Nicolai Schwarz (9)

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
 
DNA von Gadgets
DNA von GadgetsDNA von Gadgets
DNA von Gadgets
 
Gadgets Galore
Gadgets GaloreGadgets Galore
Gadgets Galore
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
 
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityBarrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
 
Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit Schildbürgern
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
 

WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

  • 1. Größer. Schneller. Weiter. Best Practices in JavaScript und CSS EB RAUTS | Dirk Jesse und Nicolai Schwarz
  • 2. Kommentierte Fassung Best Practices in JavaScript und CSS Vortrag auf der WebTech 2009 in Karlruhe In diesem Vortrag präsentieren wir ein paar kleine Tipps und Tricks, die vielleicht noch nicht alle Leute kennen. Oft geht es darum, die Inhalte für Screenreader oder Tastaturnutzer sinnvoll aufzubereiten. Viele der Kapitel lassen sich recht einfach bei allen Projekten umsetzen. Alle Links sind gesammelt auf delicious zu finden: www.delicious.com/textformer/webtech09 Wer den Vortrag gehört hat, kann ihn gerne hier kommentieren: http://joind.in/talk/view/1120
  • 5. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:’’; } abbr,acronym { border:0; } http://developer.yahoo.com/yui/reset/
  • 6. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need ‘cellspacing=”0”’ in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: “”; } blockquote, q { quotes: “” “”; } http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
  • 7. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need ‘cellspacing=”0”’ in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: “”; } blockquote, q { quotes: “” “”; }
  • 10. { overflow: hidden; } verhindert den langen Rahmen links heraus.
  • 11. Prüfen, ob die Reset-Anweisungen sinnvoll sind :focus { outline: 0; } unterdrückt die Outline für alle User; sowohl beim Draufklicken mit der Maus als auch bei Nutzung der Tastatur :active { outline: 0; } unterdrückt die Outline beim Draufklicken mit der Maus Nutzer mit Tastatur sehen nun aber den fokussierten Link mit Outline
  • 12. CSS-Reset Worum geht‘s? Reset-Style-Sheets sind ein guter Start für das eigene Design. Dabei sollten wir die Anweisungen aber nicht alle unreflektiert übernehmen. Das Style-Sheet von Eric Meyer setzt zum Beispiel die outline beim focus auf Null. Designer mögen es nicht unbedingt, wenn beim Klick auf einen grafischen Link diese Outline erscheint, die Anweisung verhindert das. Aber die Outline ist dann hilfreich, wenn Besucher die Webseite per Tastatur navigieren. Wenn ein Webworker vergisst, die Zustände für den :focus anzulegen und durch das Reset die outline auf Null steht, bekommt der Tastatur-Nutzer gar keine Rückmeldung auf welchem Link der Fokus gerade steht. Statt den :focus auf Null zu setzen, ist es besser, nur :active auf Null zu setzen. Maus-Nutzer sehen dann keine Outline, aber Tastatur-Nutzer sehen die Outline.
  • 13. Border für die Navigation
  • 17. /* Hauptnavigation 2. Level */ #hauptnavigation ul li ul li a { border-left: 5px solid #FFF; padding-left: 40px; } #hauptnavigation ul li ul li a:hover, #hauptnavigation ul li ul li a:focus, #hauptnavigation ul li ul li a:active { border-left: 10px solid #FFF; padding-left: 35px; background: url(‘http://www.landtag.nrw.de/portal/CPMO/images/ icon_ebene2_pfeil.gif’) no-repeat 18px 2px #F4F8FB; }
  • 18. Border für die Navigation Worum geht‘s? Es gibt einige Nutzer, die ihren Browser so einstellen, dass die Farbeinstellungen von Webseiten igno- riert werden. Es werden nur rudimentäre Farben, in diesem Beispiel schwarz, weiß und blau, genutzt. Normale Farbänderungen bei :hover und :focus werden hier nicht mehr angezeigt. Ein einfacher Trick sorgt dafür, dass auch Nutzer mit diesen Einstellungen :hover und :focus nutzen können. Der Rand (border) ist hier zunächst 5px breit, bei :hover und :focus aber 10px breit. Da der Rand die Farbe des Links annimmt, kann der Nutzer auch bei diesen Einstellungen :hover und :focus wahrnehmen.
  • 20. CSS für versteckte Inhalte position:absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; Für fokusierbare Elemente wie Links oder Formulare http://webaim.org/blog/hiding-content-for-screen-readers/
  • 21. Inhalte verstecken Worum geht‘s? Manchmal werden Inhalte für Screeneader auf der Webseite für sehende Nutzer versteckt. Sie werden einfach aus dem sichtbaren Feld verschoben. Wer die Seite per Tatstatur navigiert, kommt aber den- noch an diese Inhalte (wenn sie fokusierbar sind). Ist der Inhalt dabei nach oben verschoben, springt die Ansicht auch ganz nach oben. Besser ist es, solche Inhalte nur nach links zu verschieben. Der Bild- schirm bleibt dann auf derselben Höhe stehen – und springt nicht mehr wild nach oben und unten.
  • 24. <body id=”top”> <div id=”skip”> <p class=”skiplink”><a href=”#textsprung”>Sprung zum Inhalt</a>.</p> </div>
  • 26. .skiplink a:link, .skiplink a:visited { position: absolute; width: 1px; height: 1px; left: -100px; top: -100px; } .skiplink a:hover, .skiplink a:focus, .skiplink a:active { display: block; position: absolute; left: 290px; top: 3px; width: 200px; height: auto !important; }
  • 28. Skiplinks einblenden Worum geht‘s? Skiplinks für Screenreader sollten auch für Tastatur-Nutzer zumindest kurz eingeblendet werden. Nämlich dann, wenn die Skiplinks auch den Fokus haben. Dazu am besten eine geeignete Stelle im Design vorsehen, um die Skipinks einzublenden.
  • 30. Skiplinks Techniques for WCAG 2.0 G1: Adding a link at the top of each page that goes directly to the main content area Test Procedure • Check that a link is the first focusable control on the Web page. • Check that the description of the link communicates that it links to the main content. • Check that the link is either always visible or visible when it has keyboard focus. • Check that activating the link moves the focus to the main content. • Check that after activating the link, the keyboard focus has moved to the main content. Expected Results •All checks above are true. http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G1
  • 33. Skiplinks – Overlay <body> <!--skiplink navigation--> <ul id=”skiplinks”> <li><a class=”skip” href=”#nav”>Skip tonavigation(Press Enter).</a></li> <li><a class=”skip” href=”#content”>Skip tomaincontent(Press Enter).</a></li> </ul> ... </body>
  • 34. Skiplinks & Webkit-Browser Problem: Tastaturfocus wird nicht verschoben. Lösung: Korrektur per JavaScript var webkitFocusfix= { init: function() { var is_webkit = navigator.userAgent.toLowerCase().indexOf(‘webkit’) > -1; var i = 0; var skiplinks = [ ]; if (is_webkit) { if (document.getElementsByClassName!== undefined) { skiplinks = document.getElementsByClassName(‘skip’); for (i=0; i<skiplinks.length; i++) { var target= skiplinks[i].href.substr(skiplinks[i].href.indexOf(‘#’)+1); var targetElement= document.getElementById(target); targetElement.href= ‘#’+target; targetElement.setAttribute(“tabindex”, “0”); skiplinks[i].setAttribute(“onclick”,”document.getElementById(‘”+target+”’).focus();”); } } } } }; webkitFocusfix.init();
  • 35. Bessere Skiplinks Worum geht‘s? Nicht immer lässt sich für die einzublendenden Skiplinks ein geeigneter Platz finden. Insbesondere bei grafisch anspruchsvollen Layouts kann daneben auch schwierig sein, Skiplinks gut sichtbar in Szene zu setzen. Eine Alternative ist daher, die Skiplinks per Overlay über dem Layout einzublenden. Auf diese Weise kann man Größe, Form und Farbe relativ unabhängig festlegen und somit absichern, dass diese von Nutzern auch wahrgenommen werden. Ein weiterer Punkt betrifft den Tabfocus. Dieser sollte beim Benutzen eines Skiplinks ebenfalls dem Ziel folgen (siehe WCAG 2.0 Testkriterien). In Webkit-Browsern (Safari, Chrome) passiert jedoch genau das nicht. Diesem Problem kann mit etwas JavaScript begegnet werden.
  • 37. Margin Collapsing Beschreibung • Betrifft Elemente im normalen Elementfluss • Betrifft nur vertikale Randabstände • „Der größere gewinnt …“ Unterbrechung durch: • Containing Float Techniken: float, overflow:auto|hidden, display:table • CSS-Eigenschaft: border • Internet Explorer: hasLayout+ padding/border
  • 38. Heading 20px Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no- numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam <h1>HeadingContent</h1> h1 { <p>Paragraph content</p> margin: 0 0 20px 0; background: #0335; } p{ margin: 10px 0 0 0; background: #0335; }
  • 39. Heading 40px Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no- numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam <h1>HeadingContent</h1> h1 { <div> margin: 0; <p>Paragraph content</p> background: #335; } </div> div { margin: 40px 0 25px 0; background: #335; } p{ margin: 10px 0 0 0; }
  • 40. Heading 40px 10px Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no- numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam <h1>HeadingContent</h1> h1 { <div> margin: 0; <p>Paragraph content</p> background: #335; } </div> div { margin: 40px 0 25px 0; background: #335; border-top: 1px solid #ccf; } p { margin: 10px 0 0 0; }
  • 41. Margin Collapsing Worum geht‘s? Das Margin Collapsing ist eine der Verhaltensweisen von CSS, mit denen insbesondere Anfänger zunächst so ihre Schwierigkeiten haben. Vertikale Margins aufeinander folgender Elemente werden nicht einfach addiert, sondern überlagern sich. Kurz gesagt, gilt die Regel: „Der Größere gewinnt!”. Speziell bei verschachtelten Elementen ist der Überblick und die Ursache für ungewöhnliche Abstände im Layout nicht immer einfach zu erkennen. Hier werden deshalb kurz einige CSS-Methoden vorgestellt, mit denen das Margin-Collapsing unterbunden werden kann.
  • 43. Alphatranzparenz: Lösungen Variante: rgba() Variante: opacity Eric Eggert - Cross-Browser rgba() Transparente Hintergründe mit CSS http://yatil.de/Weblog/cross-browser- http://www.highresolution.info/web- rgba log/entry/transparente_hintergruen- de_mit_css/
  • 44. Alphatransparente Hintergründe CSS 3: rgba() • Moderne Browser (FF3+, Safari 4+, Opera 10+) background-color: rgb(255,255,255); /* Fallback */ background-color: rgba(255,255,255,.3); • Internet Explorer 6+ background-color: transparent9; /* Fallback Reset */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#4CFFFFFF,end Colorstr=#4CFFFFFF); zoom:1; /* activatehasLayout*/
  • 45. Alphatransparenz Worum geht‘s? Alphatransparente Hintergründe sind immer öfter gefragt in modernen Layouts. Bisher waren diese Effekte crossbrowser nur über alphatransparente PNG-Grafiken oder verschachtelte Elemente und der CSS-Eigenschaft opacity möglich. Diese CSS-Lösung bedingt jedoch zusätzliche Elemente rein zu Präsentationszwecken. Mit der Ankunft von Opera 10 und dessen erweiterter CSS3-Unterstützung eröffnet sich mit der CSS3- Eigenschaft rgba() eine weitere, sehr einfach anzuwendende Methode, um diesen Transparenz-Effekt zu erzeugen. Und auch im Internet-Explorer kann mit einem kleinen Workaround ein identischer Effekt - rein auf CSS-Basis - erzeugt werden. Die rgba() Methode funktioniert crossbrowser und ist eine echte Alternative zum Einsatz von PNG-Grafiken.
  • 48. <dl class=”bildUnterschrift right- Float clear”> <dt><a href=”http://ais. badische-zeitung.de/pi- ece/01/56/f5/d1/22476241.jpg” class=”nyroModal” target=”_ blank” title=”&#8222;Er heißt Big Mac, ...”><img src=”http://ais.ba- dische-zeitung.de/piece/01/56/f5/ d1/22476241-p-349_261.jpg” alt=”” /></a></dt> <dd>&#8222;Er heißt Big Mac, ...</dd> </dl>
  • 50. <div class=”photo right”> <img src=”http://pix.sueddeut- sche.de/politik/173/494508/spd80- 1258300472.jpg” width=”180” height=”180” alt=”SPD Parteitag in Dresden” title=”SPD Parteitag in Dresden” border=”0”> <p>Will seiner Partei das Den- ken in veralteten Kategorien ab- gewöhnen: Sigmar Gabriel, der ebenso sprachmächtige wie schil- lernde Vorsitzende. (<cite>Foto: AP</cite>)</p> </div>
  • 51. <div> <img /> <p>Untertitel</p> </div> Noch nicht ideal: Ein Screenreader würde Bild und Untertitel hier als zwei unterschiedliche Blöcke behandeln. <div> <p> <img /> <span>Untertitel</span> </p> </div> Best Practice: Ein Screenreader sieht Bild und Untertitel nun als Einheit an.
  • 53. [caption id=”attachment_637” align=”alignnone” width=”307” caption=”WebTech-Logo”]<img src=”http://www.webkrauts.de/wp-con- tent/uploads/2009/10/webtech.png” alt=”WebTech-Logo” title=”webtech” width=”307” height=”81” class=”size-full wp-image-637” />[/caption]
  • 54. [caption id=”attachment_637” align=”alignnone” width=”307” caption=”WebTech-Logo”]<img src=”http://www.webkrauts.de/wp-con- tent/uploads/2009/10/webtech.png” alt=”WebTech-Logo” title=”webtech” width=”307” height=”81” class=”size-full wp-image-637” />[/caption] <div id=”attachment_637” class=”wp-caption alignnone” style=”width: 317px”> <img src=”http://www.webkrauts.de/wp-content/uploads/2009/10/ webtech.png” alt=”WebTech-Logo” title=”webtech” width=”307” height=”81” class=”size-full wp-image-637” /> <p class=”wp-caption-text”>WebTech-Logo</p> </div>
  • 55. Bilder mit Unterzeilen Worum geht‘s? Die derzeit beste Lösung für Bilder mit Unterzeilen steht auf Seite 51. Die Frage ist, wie einfach der WYSIWYG-Editor eingerichtet werden kann, um diese Struktur zu erzeugen. Alternativ kann man statt des span auch <em> oder <strong> nutzen, wenn diese Elemente einfacher per Editor handhabbar sind. Noch besser ist vielleicht ein Zwischen-Code wie er etwa bei WordPress erzeugt wird. Bei der Ausgabe kann dieser Code dann durch den gewünschten HTMl-Code ersetzt werden. Solch ein Filter hat Vor- teile, wenn sich irgendwann mal ein besserer Code für Bilder mit Unterzeile ergibt. Zum Beispiel falls in HTML5 ein eigenes Element (figure) dafür vorgesehen sein wollte. In diesem Fall müsste der Admin nur den Ausgabe-Filter umschreiben, schon werden alle Bilder mit Unterzeile im neuen Code darge- stellt.
  • 57. Zum Beispiel: Import aus Word <h1 class=”MsoNormal” style=”text-align: center; line-height: normal; margin: 0cm 0cm 0pt;”><span style=”font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt; mso-ansi-language: DE;”>Patientensymposium Netzhautdegenerationen</span></h1><h1 class=”MsoNormal” style=”text-align: center; line-height: normal; margin: 0cm 0cm 0pt;”><span style=”font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt; mso-ansi-language: DE;”>&nbsp;</span><span style=”font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt; mso-ansi-language: DE;”>Einblicke - Ausblicke</span></h1><p class=”MsoNormal” style=”line-height: normal; margin: 0cm 0cm 0pt;”><span style=”font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt; mso-ansi-language: DE;”>&nbsp;</span></p><h2 class=”MsoNormal” style=”line-height: normal; margin: 0cm 0cm 0pt;”><span style=”font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt; mso-ansi-language: DE;”>Moderation</span> ...
  • 59. <h1 class=””MsoNormal””> <span>Patientensymposium Netzhautdegenerationen</span> </h1> <h1 class=””MsoNormal””> <span> </span> <span>Einblicke - Ausblicke</span> </h1> <p class=””MsoNormal””> <span> </span> </p> <h2 class=””MsoNormal””> <span>Moderation</span> </h2> Ergebnis ohne weitere Einstellungen. (die „doppelten“ Anführungszeichen sind nicht wirklich doppelt, das liegt an der gewählten Schrift)
  • 60. <h1> <span>Patientensymposium Netzhautdegenerationen</span> </h1> <h1> <span>Einblicke - Ausblicke</span> </h1> <h2> <span>Moderation</span> </h2>
  • 61. HTML Purifier • beseitigt bösartigen Code • fehlende End-Tags werden geschlossen • falsch verschachtelte Elemente werden repariert • veraltetete Tags werden konvertiert • CSS wird validiert • Leere Elemente können ausgefiltert werden • Es lässt sich konfigurieren, welche Elemente und Attribute erlaubt sind • Ebenso lassen sich etwa ids festlegen, die nicht erlaubt sind
  • 62. HTML Purifier Worum geht‘s? Einige CMS und WYSIWYG-Editoren bemühen sich bereits, den Quellcode, den die Redakteure ein- geben, beim Speichern oder bei der Ausgabe zu bereinigen. Nach meinen Tests stoßen beide recht schnell an ihre Grenzen und können auch nur in bestimmten Grenzen konfiguriert werden. Der beste Filter, um HTML-Code sauber auszugeben, ist für mich bisher der HTML Purifier. Er kann auch nicht verhindern, dass Redaktere eine Zwischenüberschrift falsch auszeichnen oder eine Liste nicht als HTML-Liste eingeben. Aber der Purifier repariert fehlerhaften Code viel besser als WYSIWYG-Editoren oder CMS-eigene Filter. Einfach mal testen.
  • 64. Die Basis <form action=”/”> <div> <input type=”text” /> <input type=”submit” value=”Suchen” /> </div> </form> XMHTL 1.0 Code - Laut Spezifikation dürfen die input-Elemente keine direkten Kindelemente von form sein, daher das div. http://www.webkrauts.de/2008/12/09/der-perfekte-suchschlitz/
  • 65. Mehr Semantik <form action=”/”> <fieldset> <legend>Volltextsuche</legend> <label for=”suchbegriff”>Suchbegriff</label> <input type=”text” id=”suchbegriff” /> <input type=”submit” value=”Suchen” /> </fieldset> </form> Mit etwas CSS auch:
  • 66. Interaktiv mit Pseudoklassen input[type=text]:focus { border-color: #000 #444 #444 #000; background-position: 0 0; } input[type=submit]:hover { cursor: pointer; } input[type=submit]:focus, input[type=submit]:active { background: #6c0000; } Der Internet Explorer 6 versteht diese Anweisungen nicht!
  • 67. Interaktiv mit JavaScript <input type=”text” id=”suchbegriff” value=”Suchbegriff” /> myTextfeld = document.getElementById(‘suchbegriff’); if (document.addEventListener) { myTextfeld.addEventListener(‘focus’, textLeeren, false); } function textLeeren() { myTextfeld.value = “”; } Leert das Suchfeld, wenn ein Nutzer reinklickt
  • 68. Interaktiv mit JavaScript II myTextfeld = document.getElementById(‘suchbegriff’); if (document.addEventListener) { myTextfeld.addEventListener(‘focus’, textLeeren, false); myTextfeld.addEventListener(‘blur’, textFuellen, false); } function textLeeren() { mySuchspeicher = myTextfeld.value; myTextfeld.value = “”; } function textFuellen() { if (myTextfeld.value == “”) { myTextfeld.value = mySuchspeicher; } } Merkt sich das Wort im Eingabefeld.
  • 69. Das finale Suchfeld • Markup nach Standards • legend und label helfen in erster Linie Screenreadern, für sehende Nutzer werden die Elemente versteckt • Es gibt interaktive Pseudoklassen für :hover, :focus, :active • Das Wort „Suchbegriff“ hilft dem Nutzer statt eines sichtbaren labels, die Funktion des Feldes zu erklären • Per JavaScript wird das Wort „Suchbegriff“ beim Klick ins Feld ausgeblendet. • Schreibt der Nutzer ein neues Wort hinein, wird dieses beibehalten, andernfalls schreibt JavaScript wieder „Suchbegriff“ ins Feld.
  • 70. Ein Suchformular Worum geht‘s? Das steht im Grunde alles schon gut erklärt in dem Artikel von Gerrit van Aaken: http://www.webkrauts.de/2008/12/09/der-perfekte-suchschlitz/ (Dabei auch die Kommentare beachten)
  • 73. Standardmarkup für Formulare Zielsetzung • Einheitliches Markup für alle Formularbausteine • Visuelle Gestaltungsfreiheit • Berücksichtigung von Feedback-Informationen • Unterstützung für fixe & flexible Breiten Grundgedanke Formularelement und Label bilden eine Einheit und werden kontextabhängig formatiert.
  • 74. Textfeld Standardmarkup für Formulare <div class=”type-text”> <label for=”your-id”>your label</label> Zielsetzung • Einheitliches Markup name=”your-id” id=”your-id” size=”20” /> <input type=”text” für </div> alle Formularbausteine • Visuelle Gestaltungsfreiheit • Berücksichtigung von Feedback-Informationen • Unterstützung für fixe & flexible Breiten Grundgedanke Formularelement und Label bilden eine Einheit und werden kontextabhängig formatiert.
  • 75. Textfeld Standardmarkup für Formulare <div class=”type-text”> <label for=”your-id”>your label</label> Zielsetzung • Einheitliches Markup name=”your-id” id=”your-id” size=”20” /> <input type=”text” für </div> alle Formularbausteine • Visuelle Gestaltungsfreiheit Selectfeld • <div class=”type-select”> Berücksichtigung von Feedback-Informationen Options</label> <label for=”your-id”>More <select name=”your-id” id=”your-id” size=”1”> • Unterstützung für fixe <option value=”0” selected=”selected” disabled=”disabled”> & flexible Breiten Please choose</option> <optgrouplabel=”First options to choose from”> Grundgedanke value=”value #1”>Option 1</option> <option Formularelement value=”value #2”>Option 2</option> <option und Label </optgroup> bilden<optgrouplabel=”Yet more options to choose from”> eine Einheit und werden kontextabhängig formatiert. #3”>Option 3</option> <option value=”value <option value=”value #4”>Option 4</option> <option value=”value #5”>Option 5</option> </optgroup> </select> </div>
  • 76. Textarea Standardmarkup für Formulare <div class=”type-text”> <label for=”your-id”>your label</label> Zielsetzung • Einheitliches Markup für id=”your-id” cols=”30” rows=”7”></textarea> <textareaname=”your-id” </div> alle Formularbausteine • Visuelle Gestaltungsfreiheit • Berücksichtigung von Feedback-Informationen • Unterstützung für fixe & flexible Breiten Grundgedanke Formularelement und Label bilden eine Einheit und werden kontextabhängig formatiert.
  • 77. Textarea Standardmarkup für Formulare <div class=”type-text”> <label for=”your-id”>your label</label> Zielsetzung • Einheitliches Markup für id=”your-id” cols=”30” rows=”7”></textarea> <textareaname=”your-id” </div> alle Formularbausteine • Visuelle Gestaltungsfreiheit Checkboxen & Radiobuttons • <div class=”type-check”> Berücksichtigung von Feedback-Informationenname=”your-id” id=”your-id” /> <input type=”checkbox” <label for=”your-id”>Your checkbox label</label> • Unterstützung für </div> fixe & flexible Breiten <div class=”type-check”> <input type=”radio” name=”your-id” value=”value #1” id=”your-id” /> Grundgedanke <label for=”your-id”>Your radio-button label</label> </div> Formularelement und Label bilden eine Einheit und werden kontextabhängig formatiert.
  • 78. Textarea Standardmarkup für Formulare <div class=”type-text”> <label for=”your-id”>your label</label> Zielsetzung • Einheitliches Markup für id=”your-id” cols=”30” rows=”7”></textarea> <textareaname=”your-id” </div> alle Formularbausteine • Visuelle Gestaltungsfreiheit Checkboxen & Radiobuttons • <div class=”type-check”> Berücksichtigung von Feedback-Informationenname=”your-id” id=”your-id” /> <input type=”checkbox” <label for=”your-id”>Your checkbox label</label> • Unterstützung für </div> fixe & flexible Breiten <div class=”type-check”> <input type=”radio” name=”your-id” value=”value #1” id=”your-id” /> Grundgedanke <label for=”your-id”>Your radio-button label</label> </div> Formularelement und Label bilden eine Einheit und werden Buttons kontextabhängig formatiert. <divclass=”type-button”> <inputtype=”button” value=”button” id=”button1” name=”button1” /> <inputtype=”reset” value=”reset” id=”reset” name=”reset” /> <inputtype=”submit” value=”submit” id=”submit” name=”submit” /> </div>
  • 79. Präsentationsmöglichkeiten Lineare Abfolge Spalten links-/rechtsbündig
  • 80. Präsentationsmöglichkeiten Mehrspaltige Formulare Feedbackmöglichkeiten <div class=”type-text error”> <strong >Field «Last name» not properly filled.</strong> … </div>
  • 81. „Formularbaukasten“ Implementation CSS Framework YAML, Version 3.2 • Dokumentation http://www.yaml.de/de/dokumentation/css-bausteine/formularbaukasten.html • Beispiel: Grundelemente http://www.yaml.de/fileadmin/examples/01_layouts_basics/building_forms.html • Beispiel: Mehrspaltige Formulare http://www.yaml.de/fileadmin/examples/01_layouts_basics/multicolumnar_ forms.html
  • 82. Formulare effektiv gestalten Worum geht‘s? Je nach Platzangebot im Layout oder der Komplexität der vom Nutzer erfragten Daten haben sich unterschiedliche Darstellungsformen als vorteilhaft erwiesen. Die Herausforderung besteht nun darin, ein möglichst sinnvolles Basismarkup für Formulare zu entwickeln, das all diese verschiedenen Anforderungen abdeckt. Gleichzeitig soll der Pflegeaufwand für das dazugehörige CSS möglichst gering gehalten werden. Im Rahmen des Vortrages stelle ich die Lösung vor, die ich im Rahmen des CSS-Frameworks YAML als „Formularbaukasten” implementiert habe.
  • 84. Erwarten Sie das Unerwartete Mit JavaScript Ohne JavaScript
  • 85. Erwarten Sie das Unerwartete Mit JavaScript Ohne JavaScript Tabs ohne Funktion! <a onfocus=”blur()” onclick=”spToggleMPC(‘topbox’,1)” href=”javascript:void(0);”>Gelesen</a>
  • 86. Zugängliche Tabinhalte Zielvorgaben • Zugänglichkeit und ansprechende Präsentationder Inhalte mit und ohne JavaScript • Vollständige Tastatursteuerung • Feedback für Screenreaderbeim Tabwechsel • Synchronisation der Tabreiter(gleiche Höhen)
  • 87. Ziel: Zugängliche Tabinhalte Mit JavaScript Ohne JavaScript
  • 89. Identifikation Tabreiter/Inhalt H3 Heading H3 Heading H3 Heading
  • 90. Identifikation Tabreiter/Inhalt H3 Heading DIV class=“content“ H3 Heading DIV class=“content“ H3 Heading DIV class=“content“
  • 91. Aktives JavaScript: DOM-Scripting H3 Heading DIV class=“content“ H3 Heading DIV class=“content“ H3 Heading DIV class=“content“
  • 92. „AccessibleTabs“ für jQuery Autor: Dirk Ginader AccessibleTabs (jQueryPlugin) • Projekthomepage • Dokumentation (deutsch/ englisch) Implementation CSS Framework YAML, Version 3.2 • Optional mit Tab-Synchronisation http://www.yaml.de/fileadmin/examples/ 09_add-ons/accessible_tabs.html
  • 93. Inhalte in Tab-Reitern Worum geht‘s? Wann sind Tabreiter wirklich zugänglich für Screenreader? Wie gestalte ich Tab-Inhalte sinnvoll, falls JavaScript beim Nutzer deaktiviert ist? Diese Fragen werden anhand des „Accessible Tabs” Plugins von Dirk Ginader beantwortet.
  • 94. Danke. Und schönen Abend noch...
  • 95. Oder hat etwa jemand eine Frage?
  • 96. Die Referenten Dirk Jesse Nicolai Schwarz twitter.com/djesse twitter.com/textformer • Bauingenieur aus Dresden • freier Designer und Webentwickler • Freiberuflicher Softwareentwickler: aus Dortmund – CSS Framework „Yet Another • Autor für t3n, PHP User, Multicolumn Layout“ (YAML) Create or Die – JavaScript-Applikationen • Redaktionelle Mitarbeit beim – CSSDOC Webstandards-Magazin • Autor • Redaktion Webkrauts – T3N Magazin, • Redaktion pisto-magazin.de Webstandards-Magazin – Fachbuch „CSS-Layouts, Praxislösungen mit YAML 3.0“ • Redaktion Webkrauts