Link focus highlighting - how to correct

[Glasspoole]

Hi,

i have a problem with link focus highlighting. You can see it here: Fitness World - Ihr Fitness-Club in Nieder-Roden

The "...mehr Info" buttons are working the accordion. The problem is that for accessibillity you sure need the focus highlighting. But it looks stupid for mouse user's if you click javascript stuff and then have the highlighting. So what to do?

The other thing i don't like is that if you go to another page and then go back with the browser back button, the link in the menu is also highlighted.

[Stomme poes]

Hm, I find it a difficult setup. I click More Info and either I expect to get redirected to More Info, or I expect the More Info to appear in the box. These are both common ways sites deal with More...

Instead, I have to notice that something changed in some other, unrelated box.

Oh and without Javascript, I no can haz more info. Shame on me.

(as a side note, the text is too tiny for me to read, and when I do text-enlarge, it appears the entire design is fixed. Meaning the text just has to spill out of everything.
http://stommepoes.nl/textEnlarge.png)

The problem is that for accessibillity you sure need the focus highlighting. But it looks stupid for mouse user's if you click javascript stuff and then have the highlighting. So what to do?

Usually when I do :focus, it's pretty close to :hover styles. In this case, the only thing you're doing for :hover is adding an underline. Personally I'd be ok with both the underline and just the default browser :focus outline (what most browsers do out of the box if you don't turn it off). That would keep your button looking "focussy" without the ugly of a giant (though nicely obvious) orange border.

Another thing I do (but this wouldn't solve all your focus issues) is I'll "undo" focus styles when it's both hover and focus:
#someElement:focus:hover {
undo focus styles, keep hover styles;
}

I do this for instance when I'm using :focus to display title elements.... I don't want this for mousers since they get an actual tooltip anyway, and this is how I undo it for them.

The other thing i don't like is that if you go to another page and then go back with the browser back button, the link in the menu is also highlighted.

Yeah, some browsers (not all of them) remember where they last clicked and keep the focus there. Now I believe there is a Javascript snippet somewhere who checks for page unload and removes all focus, and this might be okay to do.


Someone else may come up with a better solution to your focus problems, but I am pretty sure that if you keep the orange border and the current accordion setup, your solution will be Javascript, since there's little CSS can do here to deal with browser default behaviour.

You may have to decide between how much you (or client) want to keep this design/setup vs more accessibility. I find the setup somewhat difficult to use and read, but I'm not representative of anyone but myself. I personally expect a site to deal gracefully with my enlarging of the text (as opposed to zoom), should be able to show me all the available text content whether I have JS on or not (this is probably pretty easy: all three info sections are "open" by default, and the More Info buttons are gone... when Javascript is enabled, the More Info buttons are added to the DOM and the accordion is closed, so users with JS on get what you have now, and users without just get non-fancy content), and I generally expect, as a user, to get More Info directly under where I'm at on the page (the boxes with the buttons themselves expand to show the more info) or that I go to another page (like on a blog).

Hope this helps

[Glasspoole]

Just did a quick read. Ill go deeper into it later.
Just a quick response.

The "more info" appears in the accordion.
The thing is the whole old site that was flash and everything was moving. I tried to make it as close as possible.

Most people have javascript on and if its turned of you see the message that you need to turn it on to use the site and get the link how to do it. Its just a site for a gym and not a shop and so i decided that there is no need that it needs to work without javascript.

What kind of browser are you useing that the text spills out?
Sure that happens at fixed layouts and if there is only text-zooming. But all new browser zoom the whole site.

[Stomme poes]

The "more info" appears in the accordion.

Yes I did find it eventually, but I actually had to click one of them a few times before I figured out where the new info was.

The thing is the whole old site that was flash and everything was moving. I tried to make it as close as possible.

That explains why I find it so unusable. It was (in my opinion) a bad Flash design. By "design" I mean UX, I don't know nothin about graphic design.

Most people have javascript on and if its turned of you see the message that you need to turn it on to use the site and get the link how to do it. Its just a site for a gym and not a shop and so i decided that there is no need that it needs to work without javascript.

Most people aren't blind or in wheelchairs. Most people aren't using a mobile device. Most people can see colour vision. Most people don't speak German. Most people have a desktop with 1024px screens. But when you are not most, the world is endless frustration, and usually for no terribly good reason. Since I'm a web developer, I see opportunity to make one little part of the world less frustrating, by learning all I can about usability and accessibility (to me they're practically the same thing).

To me, if there's an HTML document on the interwebz, it should be available and accessible to as many people as reasonably possible. It will never be fully accessible: this is just impossible and a waste of effort. But as accessible as reasonably possible? Definitely. That most people have a set up similar to yours is a very comfortable thought, but I demand better of web sites.

To me, images, CSS, Javascript... those are just fancy extras to make web pages not look like a university paper written in the 1980's. And generally there's no reason to require Javascript to show text content like this: the only reason I could agree is if totally dynamic (and so, unknown to you) content was being created on the fly by the server and AJAX was grabbing it to display without a screen refresh. This information on this site is pretty static.

Also the message telling me I need Javascript to see basic plain text content is partially obscured by Uncle Sam when my browser size isn't set to Ginormous.

(Again, this is all my opinion. You are the developer so ultimately you (and your client) make the final decisions)

What kind of browser are you useing that the text spills out?

Firefox, Safari, Konqueror, Epiphany, and Internet Explorer.
Only Opera and Chrome offer zoom alone.

Sure that happens at fixed layouts and if there is only text-zooming. But all new browser zoom the whole site.

Zoom isn't the same thing, and many people hate zoom. I personally dislike it since it makes the images blurry and when I'm trying to read text on top of blurry images, I get a headache.

[Glasspoole]

You can see the old site here: Fitness World Rodgau

After every click in the menu the menu is in another place. All text is blurry, images are pixelated and the "only html" startpage with that litle code has 16 Errors, 4 warnings on validator. The guy who did the flash site was earning his money in a company with stuff like that. For me its just a hobby.

I had a hart time to bring the owner to the point to change the site from flash to what it is now. Because the old develober was getting standing ovations for the site he made. There where getting mails from people and companys where there was getting congratulations for there great site. A fitness company was asking if they allow them to use there site (the old flash one) in a marketing seminar to show others how a site should look like. Can you imagine how hart it was to get rid of this flash shi...

Also here in Germany everybody want's a website but they wan't not spend money on it. I was getting 300 Euro for it, so for that money i really don't go to deep into it. And as it is a gym site with maybe 2 or 3 visitors a day the chance that there will be somebody blind look at it is near zero.

Also the message telling me I need Javascript to see basic plain text content is partially obscured by Uncle Sam when my browser size isn't set to Ginormous.

At 1024 everything is fine here.

Firefox, Safari, Konqueror, Epiphany, and Internet Explorer.
Only Opera and Chrome offer zoom alone.

Yes, but its not the standart setting. I personally know not one person who even know you can zoom a website.


Here are the sites from the other gyms in our area. All this sites are showing how much effort there are willing to put into a website.
http://www.das-aktuelle-fitnessstudio.de/
Willkommen auf der Startseite
Vitabel Frauen Fitness
SeeSports - Startseite
California Fitness Studio, Eppertshausen
Fitness und Gesundheit im INJOY Eppertshausen - Fitness-Studio in Eppertshausen

[Glasspoole]

Personally I'd be ok with both the underline and just the default browser :focus outline (what most browsers do out of the box if you don't turn it off). That would keep your button looking "focussy" without the ugly of a giant (though nicely obvious) orange border.

Hm, what i read everywhere is that the default browser :focus outline is not eye-catching enough in FX and IE.
Opera and Safari make it blue and Chrome orange so my problem there is still the same regardless of whether its the default style or my css.

[Stomme poes]

You can see the old site here: Fitness World Rodgau

Since Adobe hateses teh Linux, I don't even have Flash on this thing (I go boot up Windows on the Virtual Box).

After every click in the menu the menu is in another place. All text is blurry, images are pixelated and the "only html" startpage with that litle code has 16 Errors, 4 warnings on validator. The guy who did the flash site was earning his money in a company with stuff like that. For me its just a hobby.

I feel your pain. I work my butt off trying to make the front-end of my company's sites usable and accessible, but I'm the only one here who cares, getting paid minimum wage and meanwhile Photoshop jockies and Flash wizzes get paid like four times as much because they can deliver splash and pizaaz. Or something.

I had a hart time to bring the owner to the point to change the site from flash to what it is now. Because the old develober was getting standing ovations for the site he made. There where getting mails from people and companys where there was getting congratulations for there great site. A fitness company was asking if they allow them to use there site (the old flash one) in a marketing seminar to show others how a site should look like. Can you imagine how hart it was to get rid of this flash shi...

People, especially business owners, love Flash. The idea that there are potential customers who don't have computers set up exactly the same way they do never crosses their minds, and if it does, they don't care (as much) because to them How It Looks is more important than Does It Work or even Can It Bring Me More Customers. I think this is a sad thing, but it's true and it will be true for a long time.

It's kinda like how people looking to buy an appliance insist on getting the one with the most knobs and buttons, when they are in the store. So that's what manufacturers make: more buttons and knobs, more complicated stuff. People like to buy that.
But consumer research and post-purchase questionaires usually find people either don't use most of the features, or are confused by them. A particular UX design may end up with fewer buttons and a few less options or settings, but because it looks like it Does Less, and therefore doesn't look As Awesome As The Others, it gets bought less.
In other words, what people want is not what people want. Not new and frankly I'm never quite sure how far to bother pushing against that. It's probably built-in biology or something.

Also here in Germany everybody want's a website but they wan't not spend money on it

Not just Germany. It's like this everywhere.

I was getting 300 Euro for it, so for that money i really don't go to deep into it. And as it is a gym site with maybe 2 or 3 visitors a day the chance that there will be somebody blind look at it is near zero.

Yeah, I understand. I did all I could to make sure the blind could get insurance for their cars, motorcycles and scooters. I'm probably the only person who has ever visited any of those sites with a screen reader the whole 6 or so years these sites have been online. And it's not like I get paid extra for it or anything: why would I be?

You can just do what you can and what you can't, you don't. No shame in that. I personally find the current setup of the gym site difficult to use/navigate, though not impossible by any means, but for 300 euros, feh. Possibly a fancy graphic designer with a lot of CSS3 and Javascript knowledge could get away with some different design that still tickles the boss' eyes while being a better UX experience, but people like this boss would never hire them anyway, because they'd charge like 1 or 2000 euros for such a thing.

Though in general, for convincing someone to move away from all their content in Flash, all you need to do is mention Google and they usually start listening. It is possible to make Flash *more* accessible than it usually is and it's also possible to make some of the text content inside available to the googles, but it's still at a disadvantage compared to plain text + markup.

Also the message telling me I need Javascript to see basic plain text content is partially obscured by Uncle Sam when my browser size isn't set to Ginormous.

At 1024 everything is fine here.

There's a sticky that pretty much explains my response over in Web Design: Definitive screen resolution FAQ. No matter how old it gets (and it's getting pretty old), the basics are still true: it's not a great idea to rely on a screen (or a browser) being a certain minimum size just to be able to access all the content (there are obvious exceptions to this, like giant photos on a photography site, etc).

Firefox, Safari, Konqueror, Epiphany, and Internet Explorer.
Only Opera and Chrome offer zoom alone.

Yes, but its not the standart setting. I personally know not one person who even know you can zoom a website.

There are many settings which are not standard (actually, I don't even own a copy of Safari that zooms, tho they may have finally added it to version 5), but they are there because people need to be able to adapt web content to their needs. This is why browsers offer things like high-contrast mode and why people download plugins like NoScript. That "most people" don't need these things is, again, little comfort for those who do need them. You are relying on zoom being available in the browser and that the user finds that works well enough for them.
(Again, for 300 euros, zoom is fine. My personal standards vs someone working for peanuts are two different things, and I understand that.)

Here are the sites from the other gyms in our area. All this sites are showing how much effort there are willing to put into a website.

Some of those are pretty bad! But one caught my eye as being fairly nice: Vitabel Frauen Fitness

The way they set up their design, text-enlarge is pretty good. Their Mehr links don't work without JS (and they wrote their JS inline! <p class="tight">[<a href="javascript:showDetailedNews('newsitem12')" title="News anschauen">mehr</a>]</p> !! At the very least, get that stinking JS out of the markup and into an external file!) and when I do JS on, I get confused where the new information is. In fact, it looks like they've got it backwards: I see the information and a Mehr link, but when I click "mehr" instead of getting more, I get less! Only the header and an Ausblenden link. I think it was supposed to work the other way around. A few of them do increase text when I click them... so I think it might be a programmingfout.

Whoever built it may have been looking at search engines, since I see hidden headers and hidden hr's (hidden headers can be an accessibility aid). But no skip links. I dunno, that seems the best site of the lot.

Many of the others at least have a standard menu somewhere, though California fitness uses Javascript to show their navigation (why???), tho there's a link I can click which may be doubling as their site map (I suspect they wanted a special menu created with Javascript, and then have a link to the site menu for Google).

Hm, what i read everywhere is that the default browser :focus outline is not eye-catching enough in FX and IE.
Opera and Safari make it blue and Chrome orange so my problem there is still the same regardless of whether its the default style or my css.

Yes; I think the only way around this is to have a Javascript remove the focus from something after it's been clicked. I can't think of another option.

[ralph.m]

I did all I could to make sure the blind could get insurance for their cars, motorcycles and scooters.

I'd love to have seen your boss's face when you told him you'd spent the afternoon on that. Well done for sticking to your principles.

[Glasspoole]

actually, I don't even own a copy of Safari that zooms, tho they may have finally added it to version 5

Here also v4 zooms.

I checked:
FX 3.0, 3.6, 4
IE 8, 9
Safari 4, 5
Opera 9, 10, 11
they all zoom.

[Stomme poes]

Opera has only ever zoomed... I think they invented it.

IE has zoom since 7, but it's kinda buggy in 7 (but, generally works)

FF added to 3.0 I believe

Safari I wasn't sure, my last copy I had tried testing Zoom on, it hadn't existed... Safari was one of the last browsers to implement a zoom I think. Chrome had it earlier, even though they're both Webkit.

[adh32]

Page zoom should be an option rather than the default. Websites shouldn't have to be scrolled in two planes to see all of the content: the content should simply expand downwards as the text size is increased. I keep it turned off and, if my available sample of people is anything to go by, quite a few others do the same. Even my completely non-technical 64-yr-old father knows enough to prefer zooming text only.

If a site doesn't work acceptably without JS, I often go elsewhere. If it has the nerve to tell me that I need to enable JS, I almost always go elsewhere and even more quickly.

All of the above is just the opinion of one person who uses the web a lot and hates it when it doesn't work well.

[adh32]

I did all I could to make sure the blind could get insurance for their cars, motorcycles and scooters.

Off-topic, but I think that there may be quite a few drivers in my home town who would appreciate your diligence in accommodating their needs.