Screen readers are really cool pieces of software, but as a web-developer you should help the screen reader to handle your webpages better for the blind users. Besides you add more text content to your pages, and search engines loves text content.

Here some really simple tricks:

<map title=”My favorite links”>
The <map> tag is not only for imagemaps, you should use it to group link-lists. In the title-attribute you have to write a description for the elements within the map. Screen readers can now readout the description, so blind people can decide if they want hear the list.

WCAG Techniques – Link Blocks

<abbr title=”What the fuck”>WTF</abbr>
With the <abbr> tag you can markup abbreviations for screen readers, maybe search engines can use this additional data too.

WCAG Techniques – Abbreviations

<hr />
Use the oldschool horizontal ruler for your document structure, you can style it with css or hide it from non-blind users. Screen readers use it to tell users if there is a new content block.

Skip Links
With a “Skip to content”-Link, blind users can fast jump to the main content section. If you don’t provide such links screen readers must read always the main/sub-menu of your pages. You can hide the skip-links with css.

accesskey=”9″
Provide access key attribute, so blind users can faster navigate through your pages. You should add an access key to every main-menu point.

Transformationen

Mit Transformationen kann man Elemente drehen, verschieben und skalieren. Transformationen funktionieren in Chrome (Beta), Safari und Firefox 3.6.

1
2
3
4

#test1 {
	-webkit-transform: translate(80px, 0) rotate(-65deg) scale(1.5);
	-moz-transform: translate(80px, 0) rotate(-65deg) scale(1.5);
}

Transitions

Mit CSS-Transitions lassen sich flüssig animierte Übergänge zwischen zwei CSS-Angaben machen. Brauchbar für einfache Animationen, Farbübergänge (Hover-Effekte) usw. Transitions funktionieren derzeit nur mit Webkit, die nächste Version von Firefox wird auch Transitions unterstützen.

1
2
3
4
5
6
7

#test7 {
	background:#eee;
	-webkit-transition: background 2s;
}
#test7:hover {
	background: lime;
}

Animationen

Für komplexere Abläufe können in Zukunft auch Keyframe-Animationen definiert werden. Jede Animation bekommt einen eindeutigen Namen der via animation-Eigenschaft getriggert werden kann.

1
2
3
4
5
6
7
8
9
10
11

#test5:hover {
	-webkit-animation: 'wobble' 5s;
	-webkit-animation-iteration-count: infinite;
}		
@-webkit-keyframes 'wobble' {
	0% { -webkit-transform: translate(0, 0) rotate(10deg) scale(1); }
	25% { -webkit-transform: translate(0, 0) rotate(-10deg) scale(1.3); }
	50% { -webkit-transform: translate(0, 0) rotate(10deg) scale(1); }
	75% { -webkit-transform: translate(0, 0) rotate(-10deg) scale(0.7); }	
	100% { -webkit-transform: translate(0, 0) rotate(10deg) scale(1); }
}

Alle Beispiele ansehen, am Besten mit Chrome (Beta) oder Safari.

mehr Infos und Tutorials

Beim CSSGirl wird ein neuer PNG Fix vorgestellt, ich werd ihn nicht gleich ausprobieren aber er scheint wohl besser zu sein als das was es bisher gegeben hat. Es wird SuperSlight mit dem neuen Unit PNG Fix verglichen und jeder hat seine Vor- und Nachteile aber der Unit PNG Fix hat dann doch die Nase vorn.

Wieder mal ein Feature das sicher keiner brauch. Aber wenn dich eine nette Grafikerin fragt, kannst auch nicht einfach “so a schaaas” sagen.

Selection Background Color via CSS ändern

Und gleich noch einer … den werd ich demnext sorgar noch wo verwenden müssen, man kann ja nicht erwarten das die User die Browserfunktionen nützen können ???

Textgröße mittels Javascript ändern

Gleich mal merken für die Zukunft …

Mehrere Hintergrundbilder mittels CSS3

Dean Edwards hat eine neue Beta-Version seiner Javascript Library veröffentlicht.

Kurzbeschreibung: “IE7 is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSSPNG work correctly under IE5 and IE6. issues and makes transparent “.

Funktions-Übersicht und Demos

base2 ist eine Library die Javascript um einige Funktionen erweitert und versucht die Konsistenz zwischen den einzelnen Browser Implementierungen zu verbessern. In der base2 Einführung wird alles genau erklärt.

Kurzbeschreibung: “base2 is a lightweight library that irons out all the annoying differences in JavaScript implementations. It provides the additional functionality from JavaScript 1.6+ that only Mozilla browsers implement. It also adds some features from ES4. The library is only 6KB (gzipped).“

Melissa Hie hat da eine wirklich tolle Seite fabriziert. Aber neben den Javascript Effekten sind auch einige Inhalte interessant …

“My all time favorite is The X-Files, which I have been watching literally half my life! Other honorable mentions are Battlestar Galactica and House MD“. – yeah … I want to believe Mulder.

“I also enjoy reading books, but I like webcomics even better! My favorite comics are XKCD and The Perry Bible Fellowship.” – BestOf: 01, 02, 03, 04, 05, 06, 07

“Comfortable with hand-coding (X)HTML and CSS from scratch” – Gibt’s da eine geile deutsche Übersetzung? “sich wohlfühlen bei”, “Von Grund auf”, “ganz von vorne”, “hand-crafted”, “handgefertigt”, “von Hand gefertigt”

“fast learner” – ist das “scharfe Auffassungsgabe”, “guter Schüler”, “helles Köpfchen”, “Schnellchecker”
mootools – MouseWheel Event (Custom), Tips, Chain, Group

(via rbthmr)

ToDo: mootools testen, ab und zu ein Comic anschaun

A very quick and dirty test implementation of the new google reader feature “infinite scrolling”. All in one file (except jquery of course). The four lines php ajax server, returns the list items. Some jquery javascript checks the scrolling and does the list item fetching with ajax.

See it in action
Source Code incl. PHP

Wie Golem und Microsoft stolz berichten wird der IE8 den ACID2 bestehen. Allerdings gibts da derzeit ein kleines Problem mit dem ACID2, irgendwie scheint er kaputt zu sein. Da bleibt jetzt die Frage offen wie die M$-Leute getestet haben … am kaputten Orginal-Test? Hoffentlich nicht :)

Für seine Referenzen verwendet Marius Roosendaal ein sehr lässiges Accordion. Um einige Features ergänzt ergibt dieses Widget eine passable Bilder-Gallerie inkl. Paging und Beschreibungen.

http://www.mariusroosendaal.com

ps.: Sehr geil ist auch der Style-Switcher mit dem man zwischen Tag/Nacht-Theme umschalten kann.

Ist es grundsätzlich möglich ein isometrisches Spielfeld im Browser darzustellen? Im ersten Augenblick wird man sagen, “Sicher, why not.”, aber nach einer kurzen Denkpause sollte einem auffallen das man da einige Probleme bekommt.

1. Man hat keine Zeichenfunktionen, ich will kein svg, canvas oder dergleichen verwenden (das wär ja leicht).
2. Damit kann man nur rechteckige Bilder verwenden … das macht die Sache nicht einfacher, vorallem im Bezug: Wie erkenn ich auf welchem der Bilder die Maus gerade steht (überlappen sich ja).

Aber mit ein bissl Fantasie hats dann doch hingehauen. Dann noch mittels jquery ein wenig Drag hier und ein bisschen Drop dort, und schon wars fertig.

http://bohuco.net/webiso/