Category Archives: CSS

Cascading Style Sheets

Clearing floats and printing with Firefox.

Half of my resume was missing. It was there on the screen, but in print preview and on the printed page reams of experience disappeared. Not ideal.

I discovered that when you use the formatting context to clear floats, firefox treats each printed page as a “box” with the overflow hidden. Elements with overflow: hidden applied will be printed partially or not at all.

.myElement{
  overflow:hidden;
  _overflow:visible;
  zoom:1;
}

The solution I found was to remove the formatting context using an overload in the print style sheet. This meant I needed to simplify the design, but frankly, for print, simplification is appropriate. If it is important that your layout remain exactly the same on the printed page, test overflow:auto instead of hidden.

In print.css :

.myElement{
  overflow:visible;
  /* plus corrections to errors in layout this creates */
}

Perhaps a better float clearing technique is the one employed by YUI grids.css. I don’t think it would have the effect of avoiding wrap around floated elements, so you might be forced to float all your containers.

.myElement:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}

To visualize the problem, open the old version of my resume and then do print preview.

The original technique :

Why are women not on the A-list?

I’ve been reading the book Guns, germs, and steel and though I am only halfway through it leads me to ask a different question.

Why are women less known in front end design / CSS / standards ?

I’m sure it doesn’t apply to all of us, but I am simply not willing to participate in the world of forums. I’ve lurked for years learning and gleaning information from posts and responses but the flame wars and nastiness are generally something I’m not willing to risk. The same guys who are delightful at a conference, bright, and eager to share information will flame someone in an online environment as if the rules of politeness that your mother taught you don’t apply in digital format.

A particular example that comes to mind is an ALA article from just before the redesign. It was basic (but shouldn’t ALA also publish those), and the technique left something to be desired and yet the response to it was rabid.

A while back I saw in technorati that Joe Clark had linked to an article I had written on accessibility. I adore his writing style and have a lot of respect for his work, and yet my first thought was “Oh jesus, I’ve been FLAMED”.

Maybe this speaks more to do with my timidity than my gender, but I suspect that if you guys were a little more respectful you might have a few more women around. (Not such a bad thing, right?) So, Eric, perhaps you are asking the wrong question. I’m not a proponent of lowering the skill level for diversity’s sake, but is it possible that there are CSS Goddesses on the A-list in terms of technical skill, speaking ability, and vision who simply aren’t on the radar of the web development community?

Pourquoi des sites au design accessible ?

Traduction de l’article Why design accessible web sites?

Introduction

Un site accessibles et un site inaccessibles peuvent paraître exactement les mêmes pour un utilisateur qui n’est pas handicapé. Il peut alors être difficile de comprendre les raisons de tout ce remue-ménage. Pourquoi est-il aussi important de tenir compte de cette accessibilité lorsqu’on conçoit et lorsqu’on met en forme des pages Internet ?

  1. Premièrement, la société dont nous faisons tous parti a décidé que chaque individu doit avoir droit à un accès et à des chances égales même s’il est handicapé. Dans ce but, le gouvernement a créé la « loi pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées » (http://www.senat.fr/leg/pjl03-183.html)
  2. Deuxièmement, les moteurs de recherche comme Google effectuent plus de 150 millions de recherches par jour et les programmes qu’ils utilisent pour collecter les informations à propos d’un site distinguent ce qu’un visiteur aveugle pourrait voir. Donc si vous avez un site qui est considéré comme vide pour des visiteurs non-voyants, il l’est également pour tous ceux qui utilisent Google pour rechercher des produits et des services.
  3. Troisièmement, les sites qui ont utilisé standard web vont fonctionner sur les nouveaux et les futurs appareils/systèmes (comme l’accès au web via un téléphone portable ou un PDA). Cela évite d’avoir à remettre en forme votre site chaque fois qu’un nouvel appareil ou qu’un nouveau navigateur sort.

Alors que deux sites peuvent sembler identiques à vos yeux, ils peuvent être construits de manière radicalement différente. L’architecture d’un page web, quand elle est utilisée correctement, est ce qui fournit aux visiteurs déficients une utilisation très différente, adaptée à leurs besoins.

Remarque : Aucun article bref ne peut expliquer l’aménagement ou l’accessibilité en rapport avec la « loi pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées » dans son intégralité. La lecture la plus conseillée est incluse dans Les Ressources Techniques.

Un exemple

L’accessibilité du web est particulièrement difficile à déterminer car, contrairement aux briques visibles sur la façade d’une boutique, on ne peut pas voir la rampe d’accès ou l’ascenseur prévu pour les fauteuils roulants sur un site web. Néanmoins, il existe des moyens pour mieux comprendre ce qu’un visiteur handicapé perçoit en naviguant sur votre site web.

Un exemple, donné par Jeffery Zeldman dans son livre Designing With Web Standards : The Gilmore est un très beau site et il est véritablement le fruit d’un investissement considérable.

Le site avec images est tres beau

Cependant, lorsqu’on le regarde sans les images, pour simuler l’expérience d’un visiteur non-voyant (ou de quelqu’un qui chercherait avec Google), le site est pratiquement vide.

le meme site sans images est vide

Comme vous pouvez le voir, la navigation a complètement disparu et tout le contenu, mis à part l’adresse, a été perdu.

Ajouter du texte au code du site (qui est invisible pour la plupart des visiteurs, mais qui permet aux utilisateurs non-voyants de naviguer) est l’une des mesures les plus essentielles que l’on peut adopter pour favoriser l’accessibilité.

The Gilmore utilise également des images à la place de texte pour certains des mots de sa page. Lorsqu’on grossit le texte, on peut simuler ce que voit une personne qui utilise une loupe d’écran.

Comme vous pouvez le voir, lorsque les images sont utilisées à la place d’un texte, le résultat est flou et donc d’aucun recours. Quand du texte est utilisé pour l’ensemble du site, cela reste clair et lisible –peu importe le pourcentage de grossissement.

Résultat d’images utilisées à la place d’un texte :
Images utilisées en tant que texte texte simple
Images utilisées en tant que texte texte simple

Plus de remarques concernant l’accessibilité :

The Gilmore fournit deux exemples démontrant comment un site web peut être inaccessible pour les malvoyants. Les autres conseils d’accessibilité sont :

  • Des instructions uniquement sonores/audio laissent l’utilisateur malentendant dans l’interrogation de ce qu’il manque.
  • Des sites affichant des prix de vente en rouge ne permettent pas aux visiteurs qui ne distinguent pas les couleurs de se rendre compte des offres promotionnelles.
  • Des sites dont l’organisation repose sur des tableaux peuvent laisser le visiteur désemparé, bloqué dans une partie du site, l’empêchant ainsi d’accéder à d’autres pages -en particulier quand nombre de tableaux sont eux-mêmes insérés dans d’autres tableaux.

Comment réaliser cet aménagement :

  1. Standardiser son site. Il est plus facile de concevoir un site accessible lorsqu’il répond aux standards de l’industrie.
  2. Veiller à ce que votre page réponde aux directives de la « loi pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées »
  3. Prévoir. L’aménagement de votre site, comme toute chose, coûte beaucoup plus cher lorsque vous l’incluez dès l’élaboration plutôt que d’essayer de l’intégrer lorsque celle-ci est achevée.
  4. Choisir le bon éditeur HTML. Le choix de l’éditeur est extrêmement important lorsqu’on conçoit l’accessibilité aux handicapés. Certains éditeurs prennent en charge l’écriture de pages accessibles et standardisées, alors que d’autres requièrent un codage à la main fastidieux ou des extensions à coûts élevés chargées de générer ce code. Pour plus d’informations : WYSIWYG Editor Accessibility Test Results (anglais)
  5. L’aménagement est un continuum et chaque étape que vous franchissez dans la bonne direction augmente la valeur de votre site. Vous n’avez pas besoin d’être parfait pour être meilleur.

Ressources Techniques (anglais)

Plus d’informations

Pour plus d’information, veuillez contacter nicole A stubbornella POINT org.

YUI announces free hosting at their birthday party

If your visitors have visited Yahoo! or another YUI using site today there is a chance the library will be in their cache since they are now offering free hosting of the library on their servers. This just rocks. It means that normal people get to take advantage of the lightning fast Yahoo servers and world wide routing. If someone visits your site from China, YUI will be served from the closest server.

Another couple of things I learned were that all script tags should be located at the bottom of the body tag and CSS as high up in the document as possible. Apparently every time the browsers encounter a script tag they stop all other downloads until that the content of the script is read. This nugget of efficiency information will be put to good use.

I hope I managed to amuse people with stories of div-ML, I think we soundly beat the competition at the YUI birthday party for the category of number of divs used to create rounded corner boxes.

Some of the other projects I saw there were:

A List Apart

A List Apart has launched a new site design. They had a couple seconds of style-less content, and then boom, the new site was born. At first glance it is a 1000px wide, four column design based on ruby on rails. Take a look.

New design. New structure. New server. New publishing system powered by Ruby on Rails. As the dog days of summer draw to a close, we present A List Apart 4.0.