20060919 Tuesday September 19, 2006

Base Tag & The Named Anchor

I recently ran into an accessibility problem while developing a very large site. To make development easier I used a <base> tag, but what I hadn't planned for (now that I was about 280 pages into development) was the "skip to content" anchor that is needed on every page.

After much cursing, I sat down to hack out a solution. Implementing the anchor link globally wasn't a problem (I just put it in the header include and had the anchor link jump to a div ID, rather than an physical link). This solution technically worked fine, this is where the <base> tag trouble comes into play. I 'Googled' for about 3 hours to find out that this is a fairly common problem, but there aren?t many large-scale fixes out there for it. So I sat down with a co-worker and we came up with this stuff:

Just to clarify:
With the <base> tag, we'll call it: http://www.<root>.com/, is in the header of every page; a normal anchor link "#content" will load up the page http://www.root.com/#content....every time. This is a problem on all pages, other than the index (and there are A LOT), because we can't have people clicking on an anchor and getting sent back to the homepage.

SOLUTION 1:
This is for a static HTML page...
base tag: <base href="http://www.<root>.com/"></base>
current page: http://www.<root>.com/contactus.html
anchor link: <a href="contactus.html#content">skip to content</a>

Your anchor links should work just fine, and you can still use the <base> tag. This is a good solution (IMO) for a reasonably size site.
If you have a large PHP driven site here is the solution we came up with:

SOLUTION 2:
base tag:
<base href="http://www.<root>.com/"></base>
current page: http://www.<root>.com/contactus.php
php in header include:
<?php
    $replaceTxt = 'http://www.<root>.com';
    $anchorUrl = str_replace($replaceTxt,'',$_SERVER['SCRIPT_FILENAME']);
?>
anchor link: <a href="<?php echo $anchorUrl; ?>#content">skip to content</a>

again, I made the anchor jump to: <div id="content"> because I already had it in every page, you can also use a regular named anchor.

That's it, pretty straight forward and it works great! DON'T FEAR THE BASE TAG!

cheers,
Tim

Posted by tcwrigh2 ( Sep 19 2006, 10:18:01 AM EDT ) Permalink