I have a group of 3 radio selects each radio select has a tool tip next to it. I'm not sure what order each of these should receive keyboard focus?
Should it be...
1. First radio select 2. First corresponding tool tip 3. Second radio 3. Second tool tip etc.
You don't really get a choice if you're using a native <input type='radio'>. Even if your code looked like:
<input type="radio" name="pet" id="r1" value="dog"><label for="r1">Dog</label> <a href='#'>tooltip 1</a><br>
<input type="radio" name="pet" id="r2" value="cat"><label for="r2">Cat</label> <a href='#'>tooltip 2</a><br>
<input type="radio" name="pet" id="r3" value="fish"><label for="r3">Fish</label> <a href='#'>tooltip 3</a><br>
Once a radio button is selected, the group of radio buttons acts like one tabstop. The active button determines where in the tab order it is. In the case above, where "Cat" is selected, the tab order is "tooltip 1", radio group, "tooltip 2", "tooltip 3". If "Dog" were selected, the order would be radio group, "tooltip 1", "tooltip 2", "tooltip 3".
Basicly, a tooltip isn't ment to be focusable normally, because you never interact with it per se directly.
Equally as for regular mouse users, the tooltip must appear for keyboard users and be spoken by screen readers.
However, as nothing happens when clicking on it and there is no real interaction with it, it's theortically non-sense to have it focusable.
You can use aria-live to make the text of the tooltip be spoken by screen readers when it appears on screen.
Related
The question consists of two parts:
Is it ok (from the UX/UI p.o.v.) to make a search box on the page activated on the first tab keypress?
How to do it technically keeping the rest of the tabbing mechanism intact (e.g. the first element activated on tab keypress by default is now activated right after the search box on the second tab keypress)?
For the desktop browsers it okay. But bad UX for the mobile browser as it will popup the keyboard focus automatically comes to search box.
Set attribute tabindex="0" for the elements programmatically using JavaScript after the the search box leaves focus. Use onblur() event.
You can use tabindex=1 attribute in your search input element to achieve. Like this,
<input type="text" placeholder="Search here" tabindex="1" />
Whether you should or not, This article might help
I have HTML buttons and want them to not be announced as buttons by the screen reader. Is there a way for it? I am using the button for Rating.
What kind of object would you like it announced as? When you have a "ratings" type object, doesn't the user have to click on it to set the rating? So, for example, if you have 5 possible stars and the user wants to give it a rating of 4 stars, don't they have to click on the 4th star? The act of clicking needs to be conveyed to screen readers too.
Instead of having 5 single "buttons", it could be a radio group with 5 radio buttons. Or I suppose it could be a "slider". But whatever object you think is appropriate, the role of that object needs to be announced so that the screen reader user knows how to interact with it. When a screen reader user hears "button", they know they can press Space or Enter on it to select it. If they hear "radio button" or "slider", they know they can use the arrow keys to change the selection.
I would go with a radio group and radio buttons since your rating will be a mutually exclusive set of X objects that you can only choose one of.
For an example, see https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating
I'm trying to use ui-select to make a state selection but when I select a
state the placeholder goes blank, does anyone know how to not make
"Filter by province/state" disappear.
Here is the code for ui-select-match section of my ui-select:
<ui-select-match
placeholder="Filter by province/state">
{/ $item /}
</ui-select-match>
You may want to use a separate label because ui-select usually has the saved array inside of the input box which is why the display label disappears once their is one item in the array.
It may be a very minor thing, but a problem to me now.
I made a custom meta box on the post edit page in the WP back end, where I put two radio buttons saying "Yes" and "No". If the "Yes" radio button is selected, then on save the post will save a meta data with "Featured". By default the radio button will be on "No", because no post is Featured yet.
I checked with Inspect Element, when I opened a new post to write, my code's working well:
<input name="insert_featured_post" id="insert_featured_post" type="radio" value="yes">Yes
<input name="insert_featured_post" id="insert_featured_post" type="radio" value="no" selected="selected">No
But by default, no radio button is showing selected, not even the "No" one. ()
If I click on the "Yes" one, it's working, and the radio button is visible too. If I save the post, it's working well and saving it's value "Featured".
If I reopen a Featured Post to edit, by default the "Yes" should be highlighted, but no button is highlighted, but using Inspect Element, I saw that, the "Yes" button is highlighted.
How could I solve this UI problem?
For radio-buttons is checked attribute for default value, not selected, change selected="selected" to checked="checked".
I have sort of a general question.
I am making a shopping cart for a project where I am selling electronics. So, for example I am selling an iPhone and a Samsung Galaxy on the same "Phones.aspx" page, and I am assigning one single Radio Button to each. This way, if the customer wants to add the iPhone, they check the iPhone radio button and hit the ADD button under the iPhone to add it to the cart.
I plan to the DataSourceId for RadioButton connected to my ObjectDataSource. My question is, how do I specify in the RadioButton the single ID for the iPhone? I know that using the DataValueField and setting that to Id, will specify all of the Ids for my table. But what property do I use to specify the specific Id for the iPhone, or can I even do that?
With radio buttons, the value property is the one that differentiates within a group of radios. So you may see this:
<input type='radio' id='ID_product' value='iPhone'> iPhone
<input type='radio' id='ID_product' value='Samsung Galaxy'> Samsung Galaxy<br>
<br>