The various states have been defined in a specific order in the previous example: link,
visited, hover, focus, active. This is because certain states override others, and those
“closest” to the link on the web page take precedence.
There is debate regarding which order the various states should be in, so I can only provide
my reasoning for this particular example. It makes sense for the link to be a certain
color when you hover over it, and then a different color on the active state (when
clicked), to confirm the click action. However, if you put the hover and active states in
the other order (active, hover), you may not see the active one when the link is clicked.
This is because you’re still hovering over the link when you click it.
The focus state is probably primarily use keyboard users, and so they won’t typically see
hover anyway. However, for mouse users, it makes logical sense to place focus after hover,
because it’s a more direct action—in other words, the link is selected, ready for activation
visited, hover, focus, active. This is because certain states override others, and those
“closest” to the link on the web page take precedence.
There is debate regarding which order the various states should be in, so I can only provide
my reasoning for this particular example. It makes sense for the link to be a certain
color when you hover over it, and then a different color on the active state (when
clicked), to confirm the click action. However, if you put the hover and active states in
the other order (active, hover), you may not see the active one when the link is clicked.
This is because you’re still hovering over the link when you click it.
The focus state is probably primarily use keyboard users, and so they won’t typically see
hover anyway. However, for mouse users, it makes logical sense to place focus after hover,
because it’s a more direct action—in other words, the link is selected, ready for activation
during the focus state; but if you ordered the states focus, hover, a link the cursor is
hovering over would not change appearance when focused, which from a user standpoint
is unhelpful.
However, there is a counter argument that recommends putting focus before hover, so
that when an already focused link (or potentially any other focused element for non-IE
browsers) is hovered over, it will change from the focused state to indicate that it is now
being hovered over. Ultimately, this is a chicken-and-egg scenario—do you want a hovered
link to change from hover to focus to active? The focus will get lost somewhere in there
until the link is depressed (and the active state removed), by which time the link will be
in the process of being followed.
In the end, the decision should perhaps rest with how you’re styling states and what information
you want to present to the user, and often the focus state is a duplication of hover
anyway, for the benefit of keyboard users. And on some occasions, it doesn’t matter too
much where it’s put, if the styling method is much different from that for other states—
for example, when a border is applied to focus, but a change of color or removal of
underlines is used for the other states. However, if you decide on LVFHA or some other
order, you’ll have to make your own way of remembering the state order!
hovering over would not change appearance when focused, which from a user standpoint
is unhelpful.
However, there is a counter argument that recommends putting focus before hover, so
that when an already focused link (or potentially any other focused element for non-IE
browsers) is hovered over, it will change from the focused state to indicate that it is now
being hovered over. Ultimately, this is a chicken-and-egg scenario—do you want a hovered
link to change from hover to focus to active? The focus will get lost somewhere in there
until the link is depressed (and the active state removed), by which time the link will be
in the process of being followed.
In the end, the decision should perhaps rest with how you’re styling states and what information
you want to present to the user, and often the focus state is a duplication of hover
anyway, for the benefit of keyboard users. And on some occasions, it doesn’t matter too
much where it’s put, if the styling method is much different from that for other states—
for example, when a border is applied to focus, but a change of color or removal of
underlines is used for the other states. However, if you decide on LVFHA or some other
order, you’ll have to make your own way of remembering the state order!
No comments:
Post a Comment