Selectable Headings

Tags: , , February 7, 2006 (0 comments)

Here's a list of things that you have no problem doing with standard text, yet are often not doable when some method of using non-standard fonts in a web page is in place.

  1. Select the header.
  2. Start selecting the header (from the left of the first letter), and continue selecting down.
  3. Start selecting the text, and continue selecting up to just above the top of the header.
  4. Start selecting the header, from the middle, and continue selecting down.
  5. Start selecting the text, and continue selecting up to the middle of the header.

After each stage, copy and paste it before checking the content is what you started with on the web page.

sIFR

sIFR unquestionably has it's problems, for one it's dependent on Flash and Javascript; however, it is well tested, and has many advantages over other methods. That said, I have my doubts as to how well it'll do. So, onto the testing (which is being done on the sIFR home page).

  1. Pass.
  2. Fail. While we get the header, we don't get any of the body.
  3. Pass.
  4. Fail. Like 2, we don't get any of the body.
  5. Fail. We get the whole header, not just up to where the cursor is.

2 out of 5.

Phark Method

Mike Rundle of Phark offered a solution that uses text-indent to hide the text, by moving it waaayyyy off to the left of the page, moving it off the canvas, and therefore invisible.

  1. Fail. The text is far to far off to the left to be selected.
  2. Fail. The text is far to far off to the left to be selected.
  3. Pass.
  4. Fail. The text is far to far off to the left to be selected.
  5. Fail. The text is far to far off to the left to be selected.

1 out of 5.

Conclusion

What are, in my opinion, the two most used image replacement methods, did not do all that well in what is, for me at least, an in important usability test.

All I can say is watch this space, for my suggestion for an accessible and usable (or at least, in browsers that support certain parts of CSS3 ;)) image replacement method.

Comments

There aren't any comments yet, but feel free to leave one regardless.

Leave a Reply