?

Log in

No account? Create an account
 

Relevancy and Context in Web Pages with CSS2 and PHP - Web Developer

About Relevancy and Context in Web Pages with CSS2 and PHP

Previous Entry Relevancy and Context in Web Pages with CSS2 and PHP Mar. 12th, 2005 @ 06:12 am Next Entry
Hi all. This will be my first post to the community, so before anything I'd just like to say how educational its been reading your posts all this time. Now then, here's my contribution.

I've recently been playing with what I think is an interesting technique for adding relevancy and context to my pages. Basically, I embed a small, invisible message within the HTML of a page or within the link to that page which is only visible to people who follow special links. This enables me to embed certain so-called "relevancy messages" on the destination page of a link that helps keep visitors oriented when browsing through my site. (This is exceptionally beneficial when back-linking to old blog posts!)

A much more detailed explanation of what I'm talking about is on my site. A brief explanation of what I first did is this:


  1. When I write links that reference my old pages, I go back to those old pages and insert a named anchor (or tag the element with an id to reference in my link with a fragment identifier).

  2. I add a title to that element so I can hide it within the HTML for visitors who browse normally, but show it to visitors who follow links to that fragment.

  3. I've added a style rule in my pages to display that title text before the fragment only for visitors who follow the special links, specifically, *:target::before { content: attr(title); }



(See an example in action on my test pages.)

This means when visitors click on a link to a fragment within a page, they see a clear, short message explaining its relevance. Especially on long pages where my link only references a small part of it, this is an enormous enhancement to usability because it ensures a smooth transition of context between one page and the next. Coupled with helpful title text on the source link itself, it can help create an extremely smooth yet still unobtrusive browsing experience.

As an extension and major enhancement, I've also been experimenting with "dynamic relevancy messages" as a sort of mini-API to allow anyone to include their own relevancy message into my pages when they link to me. The crux of this technique uses a variable within a GET query-string to plug into the above CSS content-before rule.

So what do you think about this technique? Useless? Great? Superfluous? All feedback welcome.

I'd be especially interested to hear from web accessibility gurus who can test the accessibility of this technique and PHP gurus who can help break my site by using XSS attacks for the dynamically generated CSS rule. As I'm somewhat of a novice in that area (that is XSS in the context of CSS, since it's usually an HTML/SQL thing), I'd appreciate it if you can help me fortify my defenses against what is potentially a very obvious attack vector on my site now.

Thanks for your time. :)

(Oh yeah, and, um, you gotta use Firefox or another CSS2-compliant browser such as Safari, or a recent version of Netscape, or Mozilla in order for the CSS to work, obviously. It won't work with any version of Internet Explorer or Opera. Sorry.)
Leave a comment
[User Picture Icon]
From:ceejayoz
Date:March 12th, 2005 04:56 pm (UTC)
(Link)
I'd be especially interested to hear from web accessibility gurus who can test the accessibility of this technique

I think you answered your own question with:

Oh yeah, and, um, you gotta use Firefox or another CSS2-compliant browser such as Safari, or a recent version of Netscape, or Mozilla in order for the CSS to work, obviously. It won't work with any version of Internet Explorer or Opera. Sorry.
[User Picture Icon]
From:maymaym
Date:March 13th, 2005 02:26 am (UTC)

Browser Compatibility is not Accessibility Testing

(Link)
You said I'd answered my own question, but I'm afraid I have not.

Accessibility testing does not have a direct corrolation to browser compability issues. Especially in the non-dynamic approach where title attributes are used to embed relevancy messages inside page elements, a screen reader may inform the user that a title exists. It may read the title. This may pose problems which hamper the relevancy of the text by introducing a new context to visitors who were not supposed to hear the relevancy message, or vice verca.

Since screen readers first formulate the HTML and disregard many CSS rules, this method is potentially harmful to these forms of assistive technologies. But we won't know until someone hears how it is read by a screen reader.

The second technique, using the PHP mini-API is far more dependant upon a CSS2-compliant browser and screen reader because both tiers of the software application need to understand and correctly interpret the CSS content-before rule to actually end up with relevancy messages.

Again, this is either good or bad but WE WON'T KNOW UNTIL WE TRY. And as I have no access to a screen reader, I can only hope that someone else out there gives it a shot.

That said, does anybody have any comments, good, bad, or ugly?
[User Picture Icon]
From:ceejayoz
Date:March 13th, 2005 02:46 am (UTC)

Re: Browser Compatibility is not Accessibility Testing

(Link)
[User Picture Icon]
From:maymaym
Date:March 13th, 2005 11:30 am (UTC)
(Link)
Thank you for that resource! I'll be using it.
(Leave a comment)
Top of Page Powered by LiveJournal.com