Tiffany B. Brown heeft een handig overzicht van alle symbolen en hoe je ze schrijft in HTML: http://tiffanybbrown.com/htmlentities/ en ze schrijft af en toe ook een interessant blogbericht. Althans, interessant voor mensen die houden van webontwikkeling.
html
gebruiksvriendelijke en toegankelijke dropdownmenu’s
Voor een website met een dropdownmenu in het ontwerp wilde ik deze keer graag iets gebruiksvriendelijkers maken en ik vond deze 2 artikelen die mij aanstonden:
Dit artikel legt de basis goed uit, inclusief een goed voorbeeld van ARIA en nog een handige link:
http://terrillthompson.com/blog/202
Hij verwijst namelijk ook naar optie 6 van dit artikel: http://simplyaccessible.com/article/better-for-accessibility/ Hoewel ik zelf een voorkeur heb voor optie 5.
Maar dit is mijn favoriet op het gebied van toegankelijkheid ook zonder javascript, en ondersteunt 3 levels:
http://blakehaswell.com/lab/dropdown/deux/. Lees ook het artikel en neem de opmerking van Stomme poes onderaan de pagina even mee: http://blakehaswell.wordpress.com/2009/03/20/long-lost-nephew-of-suckerfish-part-deux/
Nog wel belangrijk, en daar wordt in beide niet veel aandacht aan besteed, zijn ook acceskeys en tabindex.
1 naslag en 1 gereedschapje
Het naslag is een overzicht van w3schools met welke css3 elementen door welke browser (en hoe worden) ondersteund:
http://www.w3schools.com
Het gereedschap is “sprite me” om het aanroepen van de server te beperken. Sprite me doet al het harde werk voor je:
http://spriteme.org
“continuous scrolling” plaatjes
Ohhet is verschrikkelijk! En ik vind het heerlijk. Ik gebruik het zelfs in een geval als back-up voor mensen die hun JavaScript uit hebben staan:
De HTML marquee-element!
http://www.quackit.com/html/codes/scrolling_images.cfm
Ook leuk, hoewel om bijna tegenovergestelde redenen, een CSS3 en HTML gallerij:
http://designshack.net/articles/css/infinitephotobanner/
(Ik vind de mijne ook leuk maar er zit geen scroll in, alleen een overlay: http://your.blindeman.com/portfolio/)
Deze is zoet, eenvoudig en degelijk:
http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../imagery/imgscroll3h.htm
En zelfs een jquery gallerij die ik leuk vind:
http://www.smoothdivscroll.com
Dit is grappig
en het is ook al redelijk oud:
How is That Different from Using HTML Tables?
First and foremost, display: table is not an HTML tag, it’s a CSS display property. If you have qualms, remember that you’re not creating an actual table; you’re just applying a style. Where HTML table elements imply semantic meaning (and take too long to load, more or less throw accessibility out the window, and do very unpleasant things to search engine optimization), all we’re doing here is applying cascading style sheet rules to semantically correct HTML div elements.
It still feels like a hack
This is not a hack. There’s no reason to feel guilty about applying display: inline to create a horizontal menu from an unordered list. You’re not changing the semantic content of the list (it’s a navigation list, after all), you’re just changing its presentation. I seem to recall reading somewhere that the whole point of cascading style sheets was to separate content from presentation. Where have I read that?
Oh yeah, EVERYWHERE.