Question

I am looking for some possible best practices for a vertical tab/button that when clicked slides out a form panel. The tab/button/image travels with the slide out and remains attached to the upper right of the panel then when clicked again it gets hidden (but, of course, the tab is showing)

I am trying to figure out the best way to build the button.

Is there such a thing as a vertical button (perhaps jquery ui button)? Should it be an image? should it be coded in CSS?

Is one better (or worse) for accessibility?

Thanks!

Answer 1

I haven’t looked at these close enough to comment if there is a best practise, however if you are concerned about accessibility, I recommend not using these slide things. The first thing you have to keep in mind is where in the content order it would go. If it is first, that says it is pretty important, so why wouldn’t you make a normal page for the form. If it is last, there is a chance that people using assistive technology may never “see” the form, which may lead to ROI. They may not see it because not everybody reads every line/word on a page.

The next question, and getting at your question a bit, is how is the slide-out made? Is it like a lightbox, so the iformation is provided only if they open the slide form or will people have to tab through this hidden form every time to get to the content?

Is there such a thing as a vertical button (perhaps jquery ui button)? Should it be an image? should it be coded in CSS?

I would make this an image, then wrap it in a normal link. The alt should be descriptive. I don’t think you can use CSS to align text vertically, so you would have to do something like

<a>
W<br />
o<br />
r<br />
d<br />
</a>

Which would be annoying to read.