A List Apart

Menu

Topic: HTML

  • The Accessibility Hat Trick: Getting Abbreviations Right

    ·

    The acronym element is missing in XHTML 2.0. Internet Explorer 6 ignores the abbr element. JAWS doesn’t like dfn. AAA-level compliance requires you to find a solution. Make it work.

  • Sensible Forms: A Form Usability Checklist

    ·

    Sometimes it’s the little things that drive you nuts. As many of us have probably noticed during this season of holiday shopping, usability problems in online forms can be infuriating. Brian Crescimanno helps solve the problem with a checklist of form-usability recommendations.

  • Printing a Book with CSS: Boom!

    ·

    You like microformats? We’ll give you some freakin’ microformats. CSS luminaries Håkon Wium Lie and Bert Bos introduce the boom! microformat and show you how to make book the easy way.

  • High Accessibility Is Effective Search Engine Optimization

    ·

    It’s no coincidence that search engines love highly accessible websites; in fact, by designing for accessibility, you’re already using effective search-engine optimization techniques. Andy Hagans explains yet another reason to pay attention to accessibility.

  • CSS Swag: Multi-Column Lists

    ·

    Multi-column lists: can’t live with ’em, can’t achieve perfect bliss without ’em. Paul Novitski offers a staggering six possible methods for accomplishing this commonly requested layout trick. Examine your options and choose wisely.

  • High-Resolution Image Printing

    ·

    Your client looks up and says, “Why does our logo look funny when we print the pages?” Do you sigh dramatically, or learn about Ross Howard’s technique for printing high-resolution images via CSS? We vote for option B.

  • More About Custom DTDs

    ·

    Your web page uses non-standard elements, so, following the advice of earlier ALA articles, you bang out a custom DTD to make sure your document still validates. Not so fast, says the W3C’s Quality Assurance team, who argue that crafting a custom DTD for the sole purpose of validation is a mistake … and then tell when it is the right thing to do.

  • Spruced-Up Site Maps

    ·

    The clean-n-simple site map gets a nice haircut and and a shoe-shine as Kim Siever shows us how to hook custom bullet styles to troublesome nested lists.

  • Validating a Custom DTD

    ·

    In his article in this issue, Peter-Paul Koch proposes adding custom attributes to form elements to allow triggers for specialized behaviors. The W3C validator won’t validate a document with these attributes, as they aren’t part of the XHTML specification.  Not to worry! This article will show you how to create a custom DTD that will add those custom attributes, and will also show you how to validate documents that use those new attributes.

  • The Way It’s Supposed to Work

    ·

    Groundbreaking accessibility information. Project management and information architecture theory from old-school experts. Plug-and-play solutions to universal design and development problems. Experimental CSS/DOM hacks that use non-semantic elements to do funky design tricks. One of these things is not like the others…which is why we’re introducing a tiny new feature to the magazine.

  • Invasion of the Body Switchers

    ·

    Wouldn’t it be great if we could update the classic ALA style switcher to accommodate multiple users and devices, including some that aren’t even traditional browsers, all from a single JavaScript and CSS file? Well, now we can! Enter the Body Switcher.

  • Drop-Down Menus, Horizontal Style

    ·

    Multi-tiered drop-down menus can be a hassle to build and maintain — especially when they rely on big, honking chunks of JavaScript. Nick Rigby presents a way to handle this common navigation element with a cleanly structured XHTML list, straightforward CSS, and only a few concessions to browser quirks.

  • Dynamically Conjuring Drop-Down Navigation

    ·

    Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down.

  • Dynamic Text Replacement

    ·

    Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow.

  • Separation: The Web Designer’s Dilemma

    ·

    Presentation separated from structure. Structure separated from content. The foot bone connected to the ... what were we talking about? Michael Cohen steps in to examine our assumptions and relieve our separation anxiety.

  • Power To The People: Relative Font Sizes

    ·

    Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution.

  • The Table Ruler

    ·

    Make your site easier to use by giving your visitors a virtual “ruler” to guide and track their progress down long data tables. With a pinch of JavaScript and a dash of the DOM, your table rows will light up as your visitors hover over them.

  • Accessible Pop-up Links

    ·

    Sometimes we have to use pop-ups — so we might as well do them right. This article will show you how to make them more accessible and reliable while simplifying their implementation.

  • Zebra Tables

    ·

    While misused tables are becoming increasingly rare, the table retains a legitimate role in data formatting. A little CSS and JavaScript magic can make tables better at what they do best: displaying tabular data.

  • CSS Sprites: Image Slicing’s Kiss of Death

    ·

    Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution.