Basically I have a form with a LOT of links to other pages in it, mostly to explain some questions or show information on said questions. The problem is the form is now a complete mess to navigate with the keyboard if you just want to fill it because of all these links, which most people will either not, or very rarely click.
I'm limited in modifying the layout as it is a current Excel form I have to adapt to a web app while keeping the same layout.
Is there any easy way to make TAB navigation skip the links? Via an attribute I'm not aware of maybe?
Quick example, being focused on Input A and pressing tab would bring me directly to input B, skipping links 1 and 2:
<form>
<input A />
<a 1></a>
<a 2></a>
<input B />
</form>
A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it).
<input type="text">
<input type="text">
or
<input type="text" tabindex="1">
1
1
<input type="text" tabindex="2">
Related
I have a search field that does not (visually) require a <label>.
I add a title attribute on input to reminder (with the tooltip) the field description. The submit button has offscreen description to explain its function. [Q1] : Maybe it would be better to use an aria-label here?
[Q2] : To be compliant, do you always have to provide a label even if it means removing it from the screen via the sr-only class or it's not always necessary?
<div class="field field-search">
<form action="" method="GET">
<button type="submit" class="btn-search">
<span class="sr-only">Search</span>
<svg class="icon icon--search" aria-hidden="true »>…</svg>
</button>
<input title="Search in events" placeholder="Search in events" id="search" type="search" name="search">
</form>
</div>
[Q2.1] Same question for those fields where the user must add links.
Is a title on the input sufficient or a label is mandatory? If so, can I also set it to "sr-only"?
<form method="post" action="">
<ul class="social-links social-links--inline">
<li class="social-links__item">
<div class="social-links__icon">
<svg class="icon" aria-hidden="true »>…/svg>
</div>
<input title="My website" placeholder="My website" id="website" type="text" name="user_website_url">
</li>
</ul>
<br>
<input aria-label="Save links" type="submit" value="Submit">
</form>
There are two kinds of answers to this:
What do I minimally have to do to be accessible
What's the best user experience
From a minimal perspective, what does WCAG require? Remember that WCAG is a baseline. Just because you pass WCAG does not mean you have a pleasant user experience.
WCAG 3.3.2 says your input field needs a label, but that label does not have to be a text label. It can be an icon, provided the icon has an accessible name so that it can be associated with the input field.
So in your search field example, having a magnifying glass to serve as the input field's label is ok. It's generally accepted that that icon means search. But there could be some users that are not familiar with the icon so having a real text label would benefit them. Is the text label required (by WCAG)? No, but it's a better user experience.
With your other link fields, those icons may or may not be recognized. YouTube and Twitter might be reconigized but there's a chance the person filling in the fields is not a social media person so they might not know what the icons mean. Does having the icon pass WCAG? Yes. Is it good for the user? It depends on your target audience. If your page is intended for people who are social media savvy, then it's probably ok. If the page is meant for people in general, then it might not be sufficient.
Remember that the placeholder attribute disappears as soon as the user starts typing so the visible label provided by the placeholder won't be visible anymore and could be confusing for some users.
From a user experience perspective, I would recommend both an icon and a real text label. For the text label, you can make it a "floating" label.
Float Label Pattern
Avoid Placeholder Text by Animating Form Labels
Testing Placeholder Method
I'm currently facing a situation that I have never faced before. I need to create a list of users, each item of the list is editable and automatically sends data to our backend.
The basic example that I can give is the following:
<ul>
<li>
<label for="username">User name</label>
<input id="username"/>
<label for="enabled">Enabled</label>
<input id="enabled" type="checkbox" />
</li>
</ul>
This is just a simple example, but it is basically the structure, as you can see I have not added any form and that is the question that I have.
Based on my knowledge of semantic HTML or each item is a form:
<ul>
<li>
<form>
<label for="username">User name</label>
<input id="username"/>
<label for="enabled">Enabled</label>
<input id="enabled" type="checkbox" />
</form>
</li>
</ul>
Or I would do a single form for the entire list:
<form>
<ul>
<li>
<label for="username">User name</label>
<input id="username"/>
<label for="enabled">Enabled</label>
<input id="enabled" type="checkbox" />
</li>
</ul>
</form>
But, my first attempt before coming here to ask, I tried to look on some websites, like youtube, twitch, gmail and even here, on stackoverflow to see how they do it, and I found this on Twitch that made me think if a form is even necessary. If you click on your avatar on twitch, it give you two options:
Inspecting the page I could only find a label and an input for each of those options, but looking at the remaining HTML I could not find any form nor a div with form role.
So I'm thinking, is semantically correct to have input outside of any forms? If so, what are the conditions to have a form or not?
Because as far I could understand, whenever you need to submit data somewhere, you should have a form for semantically reasons.
Although is a best practice, sometimes yout your input tag doesn't need to be inside a form or a div with form role. On this case you can simply create the elements and handle the inputs through JS. I don't think there's actually a clear rule for whether using form or not. It was most commonly used before along with the type="submit" to pass data easily on the URL, but with AJAX and web frameworks there's no more need for that and the action attribute might actually trick you.
Check out these references:
MDN article
This SO answer
One other reason you might not find a form or equivalent role on your HTML inspection is because most (if not all) of these platforms run on top of various javascript frameworks, like React, Angular, etc. and the role is injected through js.
I'm working on an HTML form for a web app. I'm adding the enterkeyhint attribute to indicate and navigate to the next input until the last one submits the form.
The problem is that enterkeyhint doesn't navigate to the next input if its type is type=text.
This happens on Chrome/83.0.4103.101 for Android 7. In Safari the hints button appears but they all do nothing.
Example:
<form (submit)="submitForm()">
<div>
<label>Name</label>
<input type="text" enterkeyhint="next" inputmode="text" />
</div>
<div>
<label>Email</label>
<input type="email" inputmode="email" enterkeyhint="next" />
</div>
<div>
<label>Comments</label>
<input type="text" />
</div>
</form>
Focusing on Name input, the Next button doesn't do anything.
Focusing on Email input, it navigates to any next input (Comments)
Now, if I change the type=email for type=text it doesn't navigate to the next input.
Similar behavior happens for type=tel. It does navigate to the next input of the form.
Am I missing something to make this work?
Thanks
enterkeyhint is just a hint to the browser what to display on the virtual keyboard, but you need to implement the actual behaviour yourself. See for example Focus Next Element In Tab Index, or How to focus next input field on keypress if your DOM is simple enough that the input fields are siblings with the default tab order.
From the spec:
The enterkeyhint content attribute is an enumerated attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards. This allows authors to customize the presentation of the enter key in order to make it more helpful for users.
There is nothing in the spec to suggest that enterkeyhint actually affects the behaviour of the Enter key.
I managed to make a youtube search bar using HTML which, when clicked, links user to the youtube page for whatever he typed in the bar.
However, for another part of the assignment, I needed to make a code that does the same thing using only HTML and CSS but the results should be within the year 2010-2019 (custom range). The website in question is https://www.worldscientific.com/search/advanced. I have tried searching for similar cases online but the solutions were either too complicated (involving PHP/bootstrap etc) or had no relevance at all. I have a feeling the solution is very simple but I am just stumped. Please try and explain in simple terms if possible and I have left the snippet of the youtube search bar code for an clearer idea of the level of 'complicatedness'.
<form id="vb_yt_search-form" action="http://www.youtube.com/results" method="get" target="_blank">
<input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" placeholder="search"/>
<input type="submit" value="Search" />
</form>
Is not really what you asked, but is doing the job.The code is searching on google rathen than youtube between a custom range 2010-2019. When you press the submit button, the href will update with text box value. (I know when you will press the submit open it will open an useless tab but I don't bother to fix it, just close and try to press on text)
<a id="test" href="https://www.google.com/search?safe=active&tbs=cdr%3A1%2Ccd_min%3A1%2F1%2F2010%2Ccd_max%3A1%2F1%2F2019&ei=5zBDXPf8Dof_swGM4bKADw&q=site%3Ayoutube.com+"> test </a>
<form id="vb_yt_search-form" action="return myFunction()" target="_blank">
<input id="vb_yt_search-term" type="text" maxlength="128"/>
<input type="submit" onclick="myFunction()" />
</form>
<script>
function myFunction(){
var value = document.getElementById('vb_yt_search-term').value;
document.getElementById("test").href="https://www.google.com/search?safe=active&tbs=cdr%3A1%2Ccd_min%3A1%2F1%2F2010%2Ccd_max%3A1%2F1%2F2019&ei=5zBDXPf8Dof_swGM4bKADw&q=site%3Ayoutube.com+"+value;
}
</script>
This is my parent form parent-form.html with one submit button.
<form name="parent_form">
Name
<input type="text" id="name" name="name">
<input type="submit" id="submit" type="button" value="Submit"></button>
</form>
<iframe src="iframe_form.html" id="iframe_id" name="iframe_name"></iframe>
This is my iframe form iframe_form.html with one field in it.
<form name="iframe_form">
Address
<input type="text" id="address" name="address">
</form>
I want to submit both address field of iframe as well as name field of parent-form by clicking submit button of parent form.
There were other post related but none appropriate with simple method.
There's nothing wrong with iFrames but in this case, it's not efficient or easy.
If you want to avoid the problem of frames and forms, then use a scrollable division:
<div id="scrollcontent1" style="overflow-y: scroll; height:100px;">
Address: <input type="text" id="address" name="address">
</div>
If you want to have more than one on your page, use a sequence of them making sure the ID has a different name for each. You can then dynamically present what you need using the visible property and whatever javascript triggers you desire. Make sure you set the height property and if you want both scrollbars present, use overflow instead of overflow-y. It's a simple solution and it avoids the headaches of jquery as well as iframes.
Ihope you will get better mileage out of a helpful answer than and snobbish "ask the right question".