What's the difference between [visibility: hidden;] and [display:none;]?

But if it’s hidden, how do they see it?
Why would anyone click on some thing if they did not know what the result is going to be? I would see that as a security risk.

That’s not the way websites should work. You should clearly indicate what a control or link is for BEFORE anyone clicks on it.

3 Likes

I can put text on it.

I do mean anyone, if the button is hidden and unlabelled.

1 Like

How’s this?
http://www.cssdesk.com/t8a4L

Oh dear.

Screen readers help those with visual impairments to use the Internet. That’s the same Internet everybody else uses. So screen reader users are as likely to want to activate a button as any other user.

Likewise, those with difficulty using a mouse navigate using just the keyboard. If you can’t tab to a button or link, you can’t activate it.

How come it works for me then, with no issue?

activate what, what’s there to activate if I can click on it and it works fine?

The same reason as before.

Or does your screen reader read it?

Because not everyone has your setup not will use it like you do. There are those that do not use a mouse to navigate, but rely on keyboards. Or they use a screen reader for many reasons. And we won’t even talk about trying to use it through a phone, which has it’s own idiosynracies

I put text on it, don’t you see it?
http://www.cssdesk.com/t8a4L

Yes, and that is a basic improvement. It works, even with keyboard navigation, because that link is not using display:none or visibility:hidden.

It is, however, impossible to stop the audio once started, but that seems to be equally broken for mouse users and others.

2 Likes

I didn’t think of that. damn. I don’t know how I can put a pause on there.

I can’t make it visible cause every browser has a different size audio player.

That really is no excuse.

If I need it to be a specific height and width.

Then you can use CSS to control the size of the player. Browsers have default display settings for various elements. CSS is there to allow you to change that to whatever you want.

2 Likes

There seem to be any number of customisable players around which you could use. For example: http://kolber.github.io/audiojs/

It uses native

A quick search on the Web will provide many more options.

Are you now starting to understand why we keep advising you against a design which requires exact height and width measurements? The Internet is not like a printed page; you have no control over the size or resolution of monitor which your visitors will be using, their chosen font size, etc. Your design really needs to be flexible enough to cope with these differences.

I’ll just stick with what I was initially using then. jw player flash.