Should a Search Icon Inside a Search Bar Be Tabable?

Clash Royale CLAN TAG#URR8PPP

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
3
down vote

favorite

1

I'm developing a search bar. The input field and the icon are uniform in design, and thus a tabable icon feels superfluous because the default behaviour when pressing the enter key while the input field has focus is to submit the form. Hit tab>enter and you're achieving the exact same. However the icon is a clickable button, which I believe is a necessity. Should there be a 1:1 relationship between tabbing and clicking? Meaning if something is clickable, then it needs to be tabable?

Another challenge is the "X" left of the search icon, having the role of clearing the input. Because it has a behaviour different to the default one of the input field, I feel like it should be tabable. But at the moment it feels like I'm tabbing backwards when giving it focus. It also looks a little weird in its focused state.

Any input on this situation? Thanks.

forms buttons accessibility tab

share|improve this question

asked 4 hours ago

Audun Olsen

162

New contributor

Audun Olsen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

up vote
3
down vote

favorite

1

I'm developing a search bar. The input field and the icon are uniform in design, and thus a tabable icon feels superfluous because the default behaviour when pressing the enter key while the input field has focus is to submit the form. Hit tab>enter and you're achieving the exact same. However the icon is a clickable button, which I believe is a necessity. Should there be a 1:1 relationship between tabbing and clicking? Meaning if something is clickable, then it needs to be tabable?

Another challenge is the "X" left of the search icon, having the role of clearing the input. Because it has a behaviour different to the default one of the input field, I feel like it should be tabable. But at the moment it feels like I'm tabbing backwards when giving it focus. It also looks a little weird in its focused state.

Any input on this situation? Thanks.

forms buttons accessibility tab

share|improve this question

asked 4 hours ago

Audun Olsen

162

New contributor

Audun Olsen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

up vote
3
down vote

favorite

1

up vote
3
down vote

favorite

1

1

I'm developing a search bar. The input field and the icon are uniform in design, and thus a tabable icon feels superfluous because the default behaviour when pressing the enter key while the input field has focus is to submit the form. Hit tab>enter and you're achieving the exact same. However the icon is a clickable button, which I believe is a necessity. Should there be a 1:1 relationship between tabbing and clicking? Meaning if something is clickable, then it needs to be tabable?

Another challenge is the "X" left of the search icon, having the role of clearing the input. Because it has a behaviour different to the default one of the input field, I feel like it should be tabable. But at the moment it feels like I'm tabbing backwards when giving it focus. It also looks a little weird in its focused state.

Any input on this situation? Thanks.

forms buttons accessibility tab

share|improve this question

asked 4 hours ago

Audun Olsen

162

New contributor

Audun Olsen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

I'm developing a search bar. The input field and the icon are uniform in design, and thus a tabable icon feels superfluous because the default behaviour when pressing the enter key while the input field has focus is to submit the form. Hit tab>enter and you're achieving the exact same. However the icon is a clickable button, which I believe is a necessity. Should there be a 1:1 relationship between tabbing and clicking? Meaning if something is clickable, then it needs to be tabable?

Another challenge is the "X" left of the search icon, having the role of clearing the input. Because it has a behaviour different to the default one of the input field, I feel like it should be tabable. But at the moment it feels like I'm tabbing backwards when giving it focus. It also looks a little weird in its focused state.

Any input on this situation? Thanks.

forms buttons accessibility tab

forms buttons accessibility tab

share|improve this question

asked 4 hours ago

Audun Olsen

162

New contributor

Audun Olsen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

asked 4 hours ago

Audun Olsen

162

New contributor

Audun Olsen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

share|improve this question

asked 4 hours ago

Audun Olsen

162

New contributor

Audun Olsen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked 4 hours ago

Audun Olsen

162

asked 4 hours ago

Audun Olsen

162

162

New contributor

Audun Olsen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

New contributor

Audun Olsen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Audun Olsen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

add a comment | 

4 Answers
4

active

oldest

votes

up vote
1
down vote

As a user I would expect, and I assume you're apply tab as a verb when you say
"tabbable," the search to be performed when I tapped or clicked the search icon or the control lost focus.

I would expect the clear button to require and physical tap to clear the input.

If you included the clear button in the tab list, it strikes me that it would become quite irritating and people would inadvertently delete their search term.

share|improve this answer

answered 4 hours ago

DarrylGodden

4,771930

add a comment | 

up vote
1
down vote

I think you should make a stance at this situation since both behaviors are valid. Ask yourself: Is this a behavior you'd like to encourage? Do you want your users to hit tab>enter, or simply hit enter?
I myself in favor of simply hitting enter, and not allowing tab>enter. Advanced users who use the keyboard will most probably hit enter, mouse users will probably too, but in case they don't you have the search button.

share|improve this answer

answered 3 hours ago

VitskyDS

634

add a comment | 

up vote
1
down vote

I would suggest making the search icon to be replaced by the X when a user searches. If the user presses the X button, the input is deselected and the X is replaced with the search icon again.

share|improve this answer

answered 3 hours ago

Zasul

566

New contributor

Zasul is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  I should've adressed this in my question. Yes, the X is great for clarity and disincentivizing searching for the exact same term. But I see great value in having both visible at the same time so a user does not have to spam backspace. E.G. I have a autocomplete dropdown, and if you key down you may get some long search terms placed in the input field, thus the value of a clear button if no suggestions satisfied the user.
  – Audun Olsen
  53 mins ago
  

  
  
  
  

add a comment | 

up vote
1
down vote

Overview

You created this UI element to allow users to easily clear their search input criteria. In most cases users who use their keyboard to interact with the form will be choosing search button over the clear button as this is the primary action. By using keyboard navigation your first concern would be your indexing order, should clear come before search or not at all?

Tabable?

In my opinion good design is inclusive, some users may be using assistive technology. Removing clear from the index removes this feature from these users. That being said, yes you should make the clear button indexable.

Clear before search or search before clear?

It has become common place that to complete the primary action in a form you press Enter. In most cases users will expect that the tabbing order does not change from common designs (top to bottom, left to right. The user should tab into the input field, tab to access clear, and finally tab to access search. At anytime you can press enter to submit the search as long as your focus is in the form (input field).

Things to consider

• Information Architecture

Since "clear" is specific to this input field and not the form (even though the form only has one input field) it makes sense to put the clear button inside the input field (very common UI architecture Parent->child). However, the "Search" icon is your forms primary action. It makes more sense to put this outside of your input field. This will keep all forms following the same information architecture.

• Textual Call to action

If there is search results does "clear" also remove the results or just the input in the form? The "Close", "Delete", "Stop" icon is holistic and is not representative of exactly what the action is your trying to inform the users of. Consider removing this icon and just use text to tell users what this does. Perhaps use a tool tip, but don't forget to use alt="" attribute for those on screen readers.

The same consideration could apply to the search call to action. Right now your using a label to inform us of the input fields action not what the input field is. However, you can achieve this by using "Search" as the action and not the label. This again will keep all forms following the same patterns and removes any ambiguity.

Since search is at the top of your site, users read top to bottom, left to right. AT the time of seeing this input field, they may have little context of what it does. Does this search products, contact info, blogs, search engines? Try to let your call to actions be clear and concise, for example "search products". If there is not a lot of room, you can use placeholder text to convey this to the users.

Never make the user think. "Don't make me think"

share|improve this answer

answered 3 hours ago

Bromox

1466

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "102"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
noCode: true, onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

Audun Olsen is a new contributor. Be nice, and check out our Code of Conduct.

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f121571%2fshould-a-search-icon-inside-a-search-bar-be-tabable%23new-answer', 'question_page');

);

Post as a guest

Name Email

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
1
down vote

As a user I would expect, and I assume you're apply tab as a verb when you say
"tabbable," the search to be performed when I tapped or clicked the search icon or the control lost focus.

I would expect the clear button to require and physical tap to clear the input.

If you included the clear button in the tab list, it strikes me that it would become quite irritating and people would inadvertently delete their search term.

share|improve this answer

answered 4 hours ago

DarrylGodden

4,771930

add a comment | 

up vote
1
down vote

As a user I would expect, and I assume you're apply tab as a verb when you say
"tabbable," the search to be performed when I tapped or clicked the search icon or the control lost focus.

I would expect the clear button to require and physical tap to clear the input.

If you included the clear button in the tab list, it strikes me that it would become quite irritating and people would inadvertently delete their search term.

share|improve this answer

answered 4 hours ago

DarrylGodden

4,771930

add a comment | 

up vote
1
down vote

up vote
1
down vote

As a user I would expect, and I assume you're apply tab as a verb when you say
"tabbable," the search to be performed when I tapped or clicked the search icon or the control lost focus.

I would expect the clear button to require and physical tap to clear the input.

If you included the clear button in the tab list, it strikes me that it would become quite irritating and people would inadvertently delete their search term.

share|improve this answer

answered 4 hours ago

DarrylGodden

4,771930

As a user I would expect, and I assume you're apply tab as a verb when you say
"tabbable," the search to be performed when I tapped or clicked the search icon or the control lost focus.

I would expect the clear button to require and physical tap to clear the input.

If you included the clear button in the tab list, it strikes me that it would become quite irritating and people would inadvertently delete their search term.

share|improve this answer

answered 4 hours ago

DarrylGodden

4,771930

share|improve this answer

share|improve this answer

answered 4 hours ago

DarrylGodden

4,771930

answered 4 hours ago

DarrylGodden

4,771930

answered 4 hours ago

DarrylGodden

4,771930

4,771930

add a comment | 

add a comment | 

up vote
1
down vote

I think you should make a stance at this situation since both behaviors are valid. Ask yourself: Is this a behavior you'd like to encourage? Do you want your users to hit tab>enter, or simply hit enter?
I myself in favor of simply hitting enter, and not allowing tab>enter. Advanced users who use the keyboard will most probably hit enter, mouse users will probably too, but in case they don't you have the search button.

share|improve this answer

answered 3 hours ago

VitskyDS

634

add a comment | 

up vote
1
down vote

I think you should make a stance at this situation since both behaviors are valid. Ask yourself: Is this a behavior you'd like to encourage? Do you want your users to hit tab>enter, or simply hit enter?
I myself in favor of simply hitting enter, and not allowing tab>enter. Advanced users who use the keyboard will most probably hit enter, mouse users will probably too, but in case they don't you have the search button.

share|improve this answer

answered 3 hours ago

VitskyDS

634

add a comment | 

up vote
1
down vote

up vote
1
down vote

I think you should make a stance at this situation since both behaviors are valid. Ask yourself: Is this a behavior you'd like to encourage? Do you want your users to hit tab>enter, or simply hit enter?
I myself in favor of simply hitting enter, and not allowing tab>enter. Advanced users who use the keyboard will most probably hit enter, mouse users will probably too, but in case they don't you have the search button.

share|improve this answer

answered 3 hours ago

VitskyDS

634

I think you should make a stance at this situation since both behaviors are valid. Ask yourself: Is this a behavior you'd like to encourage? Do you want your users to hit tab>enter, or simply hit enter?
I myself in favor of simply hitting enter, and not allowing tab>enter. Advanced users who use the keyboard will most probably hit enter, mouse users will probably too, but in case they don't you have the search button.

share|improve this answer

answered 3 hours ago

VitskyDS

634

share|improve this answer

share|improve this answer

answered 3 hours ago

VitskyDS

634

answered 3 hours ago

VitskyDS

634

answered 3 hours ago

VitskyDS

634

634

add a comment | 

add a comment | 

up vote
1
down vote

I would suggest making the search icon to be replaced by the X when a user searches. If the user presses the X button, the input is deselected and the X is replaced with the search icon again.

share|improve this answer

answered 3 hours ago

Zasul

566

New contributor

Zasul is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  I should've adressed this in my question. Yes, the X is great for clarity and disincentivizing searching for the exact same term. But I see great value in having both visible at the same time so a user does not have to spam backspace. E.G. I have a autocomplete dropdown, and if you key down you may get some long search terms placed in the input field, thus the value of a clear button if no suggestions satisfied the user.
  – Audun Olsen
  53 mins ago
  

  
  
  
  

add a comment | 

up vote
1
down vote

I would suggest making the search icon to be replaced by the X when a user searches. If the user presses the X button, the input is deselected and the X is replaced with the search icon again.

share|improve this answer

answered 3 hours ago

Zasul

566

New contributor

Zasul is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  I should've adressed this in my question. Yes, the X is great for clarity and disincentivizing searching for the exact same term. But I see great value in having both visible at the same time so a user does not have to spam backspace. E.G. I have a autocomplete dropdown, and if you key down you may get some long search terms placed in the input field, thus the value of a clear button if no suggestions satisfied the user.
  – Audun Olsen
  53 mins ago
  

  
  
  
  

add a comment | 

up vote
1
down vote

up vote
1
down vote

I would suggest making the search icon to be replaced by the X when a user searches. If the user presses the X button, the input is deselected and the X is replaced with the search icon again.

share|improve this answer

answered 3 hours ago

Zasul

566

New contributor

Zasul is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

I would suggest making the search icon to be replaced by the X when a user searches. If the user presses the X button, the input is deselected and the X is replaced with the search icon again.

share|improve this answer

answered 3 hours ago

Zasul

566

New contributor

Zasul is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this answer

share|improve this answer

answered 3 hours ago

Zasul

566

New contributor

Zasul is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

answered 3 hours ago

Zasul

566

answered 3 hours ago

Zasul

566

566

New contributor

Zasul is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

New contributor

Zasul is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Zasul is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  I should've adressed this in my question. Yes, the X is great for clarity and disincentivizing searching for the exact same term. But I see great value in having both visible at the same time so a user does not have to spam backspace. E.G. I have a autocomplete dropdown, and if you key down you may get some long search terms placed in the input field, thus the value of a clear button if no suggestions satisfied the user.
  – Audun Olsen
  53 mins ago
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  I should've adressed this in my question. Yes, the X is great for clarity and disincentivizing searching for the exact same term. But I see great value in having both visible at the same time so a user does not have to spam backspace. E.G. I have a autocomplete dropdown, and if you key down you may get some long search terms placed in the input field, thus the value of a clear button if no suggestions satisfied the user.
  – Audun Olsen
  53 mins ago
  

  
  
  
  

I should've adressed this in my question. Yes, the X is great for clarity and disincentivizing searching for the exact same term. But I see great value in having both visible at the same time so a user does not have to spam backspace. E.G. I have a autocomplete dropdown, and if you key down you may get some long search terms placed in the input field, thus the value of a clear button if no suggestions satisfied the user.
– Audun Olsen
53 mins ago

I should've adressed this in my question. Yes, the X is great for clarity and disincentivizing searching for the exact same term. But I see great value in having both visible at the same time so a user does not have to spam backspace. E.G. I have a autocomplete dropdown, and if you key down you may get some long search terms placed in the input field, thus the value of a clear button if no suggestions satisfied the user.
– Audun Olsen
53 mins ago

add a comment | 

up vote
1
down vote

Overview

You created this UI element to allow users to easily clear their search input criteria. In most cases users who use their keyboard to interact with the form will be choosing search button over the clear button as this is the primary action. By using keyboard navigation your first concern would be your indexing order, should clear come before search or not at all?

Tabable?

In my opinion good design is inclusive, some users may be using assistive technology. Removing clear from the index removes this feature from these users. That being said, yes you should make the clear button indexable.

Clear before search or search before clear?

It has become common place that to complete the primary action in a form you press Enter. In most cases users will expect that the tabbing order does not change from common designs (top to bottom, left to right. The user should tab into the input field, tab to access clear, and finally tab to access search. At anytime you can press enter to submit the search as long as your focus is in the form (input field).

Things to consider

• Information Architecture

Since "clear" is specific to this input field and not the form (even though the form only has one input field) it makes sense to put the clear button inside the input field (very common UI architecture Parent->child). However, the "Search" icon is your forms primary action. It makes more sense to put this outside of your input field. This will keep all forms following the same information architecture.

• Textual Call to action

If there is search results does "clear" also remove the results or just the input in the form? The "Close", "Delete", "Stop" icon is holistic and is not representative of exactly what the action is your trying to inform the users of. Consider removing this icon and just use text to tell users what this does. Perhaps use a tool tip, but don't forget to use alt="" attribute for those on screen readers.

The same consideration could apply to the search call to action. Right now your using a label to inform us of the input fields action not what the input field is. However, you can achieve this by using "Search" as the action and not the label. This again will keep all forms following the same patterns and removes any ambiguity.

Since search is at the top of your site, users read top to bottom, left to right. AT the time of seeing this input field, they may have little context of what it does. Does this search products, contact info, blogs, search engines? Try to let your call to actions be clear and concise, for example "search products". If there is not a lot of room, you can use placeholder text to convey this to the users.

Never make the user think. "Don't make me think"

share|improve this answer

answered 3 hours ago

Bromox

1466

add a comment | 

up vote
1
down vote

Overview

You created this UI element to allow users to easily clear their search input criteria. In most cases users who use their keyboard to interact with the form will be choosing search button over the clear button as this is the primary action. By using keyboard navigation your first concern would be your indexing order, should clear come before search or not at all?

Tabable?

In my opinion good design is inclusive, some users may be using assistive technology. Removing clear from the index removes this feature from these users. That being said, yes you should make the clear button indexable.

Clear before search or search before clear?

It has become common place that to complete the primary action in a form you press Enter. In most cases users will expect that the tabbing order does not change from common designs (top to bottom, left to right. The user should tab into the input field, tab to access clear, and finally tab to access search. At anytime you can press enter to submit the search as long as your focus is in the form (input field).

Things to consider

• Information Architecture

Since "clear" is specific to this input field and not the form (even though the form only has one input field) it makes sense to put the clear button inside the input field (very common UI architecture Parent->child). However, the "Search" icon is your forms primary action. It makes more sense to put this outside of your input field. This will keep all forms following the same information architecture.

• Textual Call to action

If there is search results does "clear" also remove the results or just the input in the form? The "Close", "Delete", "Stop" icon is holistic and is not representative of exactly what the action is your trying to inform the users of. Consider removing this icon and just use text to tell users what this does. Perhaps use a tool tip, but don't forget to use alt="" attribute for those on screen readers.

The same consideration could apply to the search call to action. Right now your using a label to inform us of the input fields action not what the input field is. However, you can achieve this by using "Search" as the action and not the label. This again will keep all forms following the same patterns and removes any ambiguity.

Since search is at the top of your site, users read top to bottom, left to right. AT the time of seeing this input field, they may have little context of what it does. Does this search products, contact info, blogs, search engines? Try to let your call to actions be clear and concise, for example "search products". If there is not a lot of room, you can use placeholder text to convey this to the users.

Never make the user think. "Don't make me think"

share|improve this answer

answered 3 hours ago

Bromox

1466

add a comment | 

up vote
1
down vote

up vote
1
down vote

Overview

You created this UI element to allow users to easily clear their search input criteria. In most cases users who use their keyboard to interact with the form will be choosing search button over the clear button as this is the primary action. By using keyboard navigation your first concern would be your indexing order, should clear come before search or not at all?

Tabable?

In my opinion good design is inclusive, some users may be using assistive technology. Removing clear from the index removes this feature from these users. That being said, yes you should make the clear button indexable.

Clear before search or search before clear?

It has become common place that to complete the primary action in a form you press Enter. In most cases users will expect that the tabbing order does not change from common designs (top to bottom, left to right. The user should tab into the input field, tab to access clear, and finally tab to access search. At anytime you can press enter to submit the search as long as your focus is in the form (input field).

Things to consider

• Information Architecture

Since "clear" is specific to this input field and not the form (even though the form only has one input field) it makes sense to put the clear button inside the input field (very common UI architecture Parent->child). However, the "Search" icon is your forms primary action. It makes more sense to put this outside of your input field. This will keep all forms following the same information architecture.

• Textual Call to action

If there is search results does "clear" also remove the results or just the input in the form? The "Close", "Delete", "Stop" icon is holistic and is not representative of exactly what the action is your trying to inform the users of. Consider removing this icon and just use text to tell users what this does. Perhaps use a tool tip, but don't forget to use alt="" attribute for those on screen readers.

The same consideration could apply to the search call to action. Right now your using a label to inform us of the input fields action not what the input field is. However, you can achieve this by using "Search" as the action and not the label. This again will keep all forms following the same patterns and removes any ambiguity.

Since search is at the top of your site, users read top to bottom, left to right. AT the time of seeing this input field, they may have little context of what it does. Does this search products, contact info, blogs, search engines? Try to let your call to actions be clear and concise, for example "search products". If there is not a lot of room, you can use placeholder text to convey this to the users.

Never make the user think. "Don't make me think"

share|improve this answer

answered 3 hours ago

Bromox

1466

Overview

You created this UI element to allow users to easily clear their search input criteria. In most cases users who use their keyboard to interact with the form will be choosing search button over the clear button as this is the primary action. By using keyboard navigation your first concern would be your indexing order, should clear come before search or not at all?

Tabable?

In my opinion good design is inclusive, some users may be using assistive technology. Removing clear from the index removes this feature from these users. That being said, yes you should make the clear button indexable.

Clear before search or search before clear?

It has become common place that to complete the primary action in a form you press Enter. In most cases users will expect that the tabbing order does not change from common designs (top to bottom, left to right. The user should tab into the input field, tab to access clear, and finally tab to access search. At anytime you can press enter to submit the search as long as your focus is in the form (input field).

Things to consider

• Information Architecture

Since "clear" is specific to this input field and not the form (even though the form only has one input field) it makes sense to put the clear button inside the input field (very common UI architecture Parent->child). However, the "Search" icon is your forms primary action. It makes more sense to put this outside of your input field. This will keep all forms following the same information architecture.

• Textual Call to action

If there is search results does "clear" also remove the results or just the input in the form? The "Close", "Delete", "Stop" icon is holistic and is not representative of exactly what the action is your trying to inform the users of. Consider removing this icon and just use text to tell users what this does. Perhaps use a tool tip, but don't forget to use alt="" attribute for those on screen readers.

The same consideration could apply to the search call to action. Right now your using a label to inform us of the input fields action not what the input field is. However, you can achieve this by using "Search" as the action and not the label. This again will keep all forms following the same patterns and removes any ambiguity.

Since search is at the top of your site, users read top to bottom, left to right. AT the time of seeing this input field, they may have little context of what it does. Does this search products, contact info, blogs, search engines? Try to let your call to actions be clear and concise, for example "search products". If there is not a lot of room, you can use placeholder text to convey this to the users.

Never make the user think. "Don't make me think"

share|improve this answer

answered 3 hours ago

Bromox

1466

share|improve this answer

share|improve this answer

answered 3 hours ago

Bromox

1466

answered 3 hours ago

Bromox

1466

answered 3 hours ago

Bromox

1466

1466

add a comment | 

add a comment | 

Audun Olsen is a new contributor. Be nice, and check out our Code of Conduct.

 

draft saved

draft discarded

Audun Olsen is a new contributor. Be nice, and check out our Code of Conduct.

Audun Olsen is a new contributor. Be nice, and check out our Code of Conduct.

Audun Olsen is a new contributor. Be nice, and check out our Code of Conduct.

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f121571%2fshould-a-search-icon-inside-a-search-bar-be-tabable%23new-answer', 'question_page');

);

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Name Email

Name

Email

Name Email

Name

Email