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
Comments are closed for this entry.


