Archive for the ‘Elements’ Category

Google Tech Talk: HTML5 demos

Friday, September 26th, 2008

I gave a talk at Google on Monday demonstrating the various features of HTML5 that are implemented in browsers today. The video is now on YouTube, so now you too can watch and laugh at my lame presentation skills!

The segments of this talk are as follows. Some of the demos are available online for you to play with and are linked to from the following list:

  1. Introduction
  2. <video> (00:35)
  3. postMessage() (05:40)
  4. localStorage (15:20)
  5. sessionStorage (21:00)
  6. Drag and Drop API (29:05)
  7. onhashchange (37:30)
  8. Form Controls (40:50)
  9. <canvas> (56:55)
  10. Validation (1:07:20)
  11. Questions and Answers (1:09:35)

If you're very interested in watching my typos, the high quality version of the video on the YouTube site is clear enough to see the text being typed. More details about the demos can be found on the corresponding demo page.

Reverse Ordered Lists

Wednesday, April 23rd, 2008

One of the newly introduced features in HTML 5 is the ability to mark up reverse ordered lists. These are the same as ordered lists, but instead of counting up from 1, they instead count down towards 1. This can be used, for example, to count down the top 10 movies, music, or LOLCats, or anything else you want to present as a countdown list.

In previous versions of HTML, the only way to achieve this was to place a value attribute on each li element, with successively decreasing values.

<h3>Top 5 TV Series</h3>
<ol>
  <li value="5">Friends
  <li value="4">24
  <li value="3">The Simpsons
  <li value="2">Stargate Atlantis
  <li value="1">Stargate SG-1
</ol>

The problem with that approach is that manually specifying each value can be time consuming to write and maintain, and the value attribute was not allowed in the HTML 4.01 or XHTML 1.0 Strict DOCTYPEs (although HTML 5 fixes that problem and allows the value attribute)

The new markup is very simple: just add a reversed attribute to the ol element, and optionally provide a start value. If there’s no start value provided, the browser will count the number of list items, and count down from that number to 1.

<h3>Greatest Movies Sagas of All Time</h3>
<ol reversed>
  <li>Police Academy (Series)
  <li>Harry Potter (Series)
  <li>Back to the Future (Trilogy)
  <li>Star Wars (Saga)
  <li>The Lord of the Rings (Trilogy)
</ol>

Since there are 5 list items in that list, the list will count down from 5 to 1.

The reversed attribute is a boolean attribute. In HTML, the value may be omitted, but in XHTML, it needs to be written as: reversed="reversed".

The start attribute can be used to specify the starting number for the countdown, or the value attribute can be used on an li element. Subsequent list items will, by default, be numbered with the value of 1 less than the previous item.

The following example starts counting down from 100, but omits a few items from the middle of the list and resumes from 3.

<h3>Top 100 Logical Fallacies Used By Creationists</h3>
<ol reversed="reversed" start="100">
  <li>False Dichotomy</li>
  <li>Appeal to Ridicule</li>
  <li>Begging the Question (Circular Logic)</li>
  <!-- Items omitted here -->
  <li value="3">Strawman</li>
  <li>Bare Assertion Fallacy</li>
  <li>Argumentum ad Ignorantiam</li>
</ol>

Dlaczego atrybut alt można pominąć

Sunday, January 13th, 2008

This is a Polish translation of this article: Why the Alt Attribute May Be Omitted.

Prace prowadzone ostatnio nad specyfikacją atrybutu alt mają na celu gruntowną poprawę jego definicji, m.in. dokładne wyjaśnienie sposobów tworzenia poprawnego tekstu zastępczego oraz jasne sprecyzowanie wymagań autorskie.

Wymagania te określają sytuacje, w których konieczne jest użycie tekstu zastępczego, zastosowanie pustego atrybutu alt oraz, co najbardziej zaskakujące, kiedy atrybut alt można całkowicie pominąć. Jest to kwestia kontrowersyjna, ponieważ na pierwszy rzut oka wygląda to na próbę zachęcania do złego i sprzecznego z zasadami dostępności zwyczaju pomijania atrybutu alt, co wydaje się być kolejnym policzkiem dla dostępności w sieci. Jest to niewłaściwe rozumowanie, które należy przeanalizować ze szczególną uwagą tak, aby rozwiać wszelkie wątpliwości, jakie mogą powstać. Choć taka sytuacja wydawać się może uwstecznieniem jest to w rzeczywistości bardzo pozytywny zabieg.

W wielu sytuacjach tekst zastępczy jest po prostu niedostępny i nic nie można na to poradzić. Przykładowo, większość użytków serwisów wymiany zdjęć takich jak Flickr nie miałoby pojęcia jak, ani dlaczego, należy dołączyć tekst zastępczy, nawet gdyby Flickr dawał im taką możliwość. Chociaż wszyscy są zgodni co do tego, że wspaniale byłoby gdyby wszyscy użytkownicy stosowali tekst zastępczy (specyfikacja wyraźnie to zaleca), to większość z nich po prostu tego nie zrobi.

Należy zastanowić się nad problemem co zrobić w sytuacji kiedy tekst alt jest niedostępny i nie ma tak naprawdę sposobu żeby go wstawić. Przy obecnych wymaganiach stosowania atrybutu alt w HTML4 zaobserwować można próby spełnienia tego wymagania przez systemy, które podejmują próbę utworzenia tekstu zastępczego w oparciu o metadane obrazu.

Flickr na przykład powtarza tytuł obrazu; Photobucket najwyraźniej łączy ze sobą nazwę pliku, jego tytuł i nazwę autora; z kolei Wikpedia niepotrzebnie powtarza podpis pod obrazem. Problemem wynikającym z takiego podejścia jest to, że stosowanie takich wartości nie dostarcza ani dodatkowych ani użytecznych informacji dotyczących obrazu, co w niektórych przypadkach jest gorsze niż całkowity brak tekstu zastępczego.

Korzyścią płynącą z wymogu opuszczenia atrybutu alt zamiast pozostawienia po prostu pustej wartości jest jasne rozróżnienie pomiędzy obrazem, który nie posiada tekstu zastępczego (jak np. reprezentacja otaczającego tekstu w postaci grafiki lub ikony) a obrazem będącym kluczowym elementem zawartości, dla którego tekst zastępczy nie jest dostępny. Podobno Lynx i Opera stosują już takie rozróżnienie. Przy obrazach bez atrybutu alt Lynx wyświetla nazwę pliku a Opera pokazuje napis "Obraz", jednak żadne z nich nie wyświetla niczego przy obrazach z pustym atrybutem alt. Wciąż niewiadomo do końca czy takie rozróżnienie jest naprawdę użyteczne oraz czy przeglądarki mogą realistycznie je stosować. Kwestia ta jest otwarta do dyskusji jeżeli tylko ktoś dysponuje argumentami.

Sugeruje się też, że zrezygnowanie z bezwarunkowej konieczności stosowania atrybutu alt wpłynie na zdolność walidatorów do powiadamiania autorów o błędach i odbierze nam narzędzie pomocne w promowaniu dostępności. Jednak wykorzystywanie komunikatów o błędach walidacji jako narzędzia oświatowego nie jest ani jedynym ani najlepszym rozwiązaniem problemu.

O ile autorzy lubią wiedzieć kiedy przypadkowo pominęli atrybut alt, to bezwarunkowe wymuszanie użycia tego atrybutu przy wykorzystaniu tak prymitywnego narzędzia jakim jest walidator daje dokładnie przeciwne wynik, ponieważ zachęca do korzystania z generowanych automatycznie tekstów kiepskiej jakości. Zresztą nic nie powstrzyma narzędzi autorskich i sprawdzających zgodność ze standardami przed powiadomieniem autorów jeśli będą sobie tego życzyć.

Przyznając, że nie da się zmusić każdego do stosowania tekstu zastępczego i czyniąc atrybut alt opcjonalnym w standardach dokumentu nie traci się żadnych praktycznych korzyści płynących z dostępności. Nikt nie twierdzi, że zgodność z HTML5 jest tym samym co zgodność ze wymogami dostępności. Wiele rzeczy uważa się za spełniające techniczne wymogi HTML, a jednak ich niewłaściwe stosowanie czyni je niedostępnymi. Uczynienie atrybutu alt opcjonalnym nie jest sprzeczne z wymogami dostępności ani nie ma wielkiego wpływu na ich propagowanie. Opisuję tu tylko rzeczywistość mając przy tym nadzieję na zmniejszenie powszechności automatycznie generowanego tekstu alt kiepskiej jakości.

Major content model changes in HTML5 (and Validator.nu)

Sunday, January 13th, 2008

The HTML5 content models became more lax in December in response to feedback from various people who found the stricter content model—especially the bimorphic content model of div—unhelpful. The notions “strictly inline content”, “structured inline content”, “block content” and “block or inline content but not both” (aka. bimorphic) are now gone.

The elements formerly known as inline are now phrasing elements in order to make a distinction with the display: inline; CSS property. Content models that previously accepted only block content or either block or inline but not both now accept both. Phrasing content and content formerly known as block content are now prose content when taken together. The practical effect is that the conformance requirements became closer to HTML 4.01 Transitional than Strict; the former requirement for strictness turned out to be hard to justify in face of actual authoring patterns and browser support for those authoring patterns.

The content model changes are now also reflected in Validator.nu. There are some known differences from the spec, though:

La loterie du longdesc

Tuesday, September 18th, 2007

This is a French translation of this article : The longdesc lottery

Parlons maintenant de l'attribut longdesc. En HTML 4, il est défini comme un pointeur vers une longue description, pour une image complexe. Tout le monde peut apprendre à écrire une longue description pertinente. Il n'y a qu'un seul problème : dans les faits, personne ne s'en soucie, et celui qui s'en soucie se trompe.

Maintenant, quantifions le phénomène. En Août 2007, Ian Hickson a analysé un échantillon d'un milliard d'éléments <img> dans l'index de Google. Approximativement 1,3 millions (soit 0,13 %) avaient efectivement un attribut longdesc. Eh bien direz-vous, c'est normal : toutes les images n'ont pas besoin d'un tel attribut. Et vous auriez raison. Mais sans se soucier de savoir s'il est nécessaire ou pas, longdesc n'est pas utilisé si souvent : un seul pour une centaine d'image.

Maintenant, voyons dans combien de cas l'attribut longdesc est utilisé judicieusement. Bien sûr, ce critère est plus subjectif, mais on peut tout de même relever les erreurs les plus évidentes. Des 1,3 millions d'images qui avaient un attribut longdesc, ôtons celles ou l'attribut longdesc ...

  • est vide
  • n'est pas une url valide
  • pointe vers l'image elle-même (c'est à dire la même url que l'attribut src)
  • pointe vers la page sur laquelle on se trouve déjà
  • pointe vers la racine d'un autre domaine
  • est le même que l'attribut href du lien qui entoure l'image (le longdesc est redondant, puisqu'il est possible de suivre le lien de l'image à la place)

Cela élimine purement et simplement 1,25 million (environ 96%) d'images du lot. Ce n'est pas 96% de toutes les images présentes sur le web - c'est 96% des 0.13% des images qui incluaient un attribut longdesc en première instance. Et lorsqu'on regarde plus attentivement aux 50 000 images restantes, (soit 4% de 1,3 million) les résultats empirent encore : des liens vers d'autres images, des liens brisés, des liens vers une description d'une ligne identiques à l'attribut alt, et des liens vers une page qui vous indique les dimensions de l'image, mais pas son contenu (Wikipedia, c'est bien de toi dont je parle). Si on extrapole à 1,3 million d'image, les 50 000 se réduisent à 10 000. Cela signifie que moins de 1% des images qui fournissent un attribut longdesc sont réellement utiles. Pas plus d'une image sur 100 est correcte (sur les 1% qui se donnent la peine d'essayer).

Parallèlement, les même personnes qui souhaitaient conserver l'attribut longdesc ont récemment réalisé quelques expériences de test par les utilisateurs. C'est-à-dire qu'ils ont testé avec quelle précision une vraie personne aveugle avec un vrai lecteur d'écran pouvait lire une vraie page web. Il s'est avéré que le sujet ne connaissait pas l'existence de l'attribut longdesc avant que le testeur n'en fasse mention. Peut-on vraiment lui en vouloir ? 99.87% des images qu'il avait rencontré n'avaient même pas d'attribut longdesc. Même s'il en avait eu connaissance, et qu'il en avait rencontré une par hasard, il restait tout même 99% de chances que les informations fournies ne présentent aucun intérêt. Il a ainsi plus de chance de gagner à la loterie.

Je ne dis pas qu'il n'y a pas là un réel problème qu'il faudrait résoudre. Il y en a bel et bien un. Les gens peuvent publier des images complexes qui nécessitent des alternatives textuelles tout aussi complexes. Les diagrammes, graphiques et autres photos très détaillées. Mais peu importe. « une image vaut mieux qu'un long discours » et tout ça ... L'attribut longdesc est, théoriquement, une solution à ce problème. Mais cela ne veut pas dire pour autant qu'il s'agisse d'une bonne solution et encore moins de la seule solution. Cela fait 10 ans maintenant que nous vivons avec longdesc et je peux vous l'assurer : cela ne fonctionne pas. Ainsi, pourrions nous éviter la levée de boucliers et commencer à parler d'une meilleure solution ?