Questions tagged [html5]

HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard and currently remains under development.

Filter by
Sorted by
Tagged with
0 votes
1 answer
357 views

Best way to organize search form interface?

I have a tab in my application where users can search Accounts. The account table has two different types of accounts, User and Staff type. User type is one that has a username, password, etc. Staff ...
1 vote
2 answers
215 views

HTML input of type color has no empty state

The HTML input of type color has no empty state. Therefore it always shows a selected color. What would be the best way to convey to the user that they have to select a color. I restyled the color ...
0 votes
2 answers
245 views

What tag should you use for the title of a "fixed" dialog? (cookie consent banner, subscribe to notifications, etc.)

For "fixed" dialogs displayed over the page, like a "cookie consent banner" or "subscribe to notifications", what is the recommended tag for the title (e.g. "Your ...
68 votes
4 answers
51k views

Why aren't HTML5 typed number inputs right aligned, and should they be?

As you may know, with HTML5 when an input has type="number" the field is "customized". Two little arrows are added to the field (w3school example) but the numbers are still left aligned. I saw that ...
2 votes
2 answers
3k views

For Screen Readers: How to markup a group of text items to be read as one item? Should I even try?

How might I mark up the following component in accordance with WCAG 2.1 guidelines, accessibility best practices, and with as much assistive technology compatibility as possible (I don't want to ...
1 vote
1 answer
358 views

Should I override controls so that it handle different locale's or let the browser handle it?

Similar to A good solution how to localize and let user choose language on HTML page but I am specifically wondering about localization of control elements such as required on input or date fields. ...
15 votes
2 answers
9k views

When is it appropriate to add the HTML5 "autofocus" attribute to a page?

For usability it can be useful to autofocus on something like the search input form on a search page. Where the primary purpose of a page is to search or add content, it can be appropriate to assume ...
2 votes
2 answers
664 views

Do users actually use the arrows in <input type="number">?

Does the average user actually use these really tiny arrows?
2 votes
1 answer
64 views

Wcag 2.1 Success criteria-1.3.6

I am unable to understand the examples available on w3.org, which are: The links in the navigation of a website are marked up so that users can add their own icons. Icons on a website are marked up ...
0 votes
1 answer
52 views

Feedback on my document management system [closed]

I've created a document management system and want to make the table look more stylish. https://codepen.io/reonLOW/pen/abbbMrZ
1 vote
4 answers
172 views

How to solve UX vs screen reader accessibility problem?

I'm learning web-development and semantic html markup. Recently a tutorial suggested that because "Click here" or "Read more" anchor texts are not so descriptive to visually impaired users depending ...
0 votes
2 answers
101 views

Do HTML5 browsers have to be able to properly process HTML4 tags when the tags appear in HTML5 pages? [closed]

According to the post here, the HTML5 specification requires HTML5 browsers to be able to properly process HTML4 tags when they are in HTML5 pages. Unfortunately, the post doesn't very well ...
2 votes
1 answer
3k views

Need explanation how Clear input button accessibility works

I've a text input with a clear button (looks like "x"). When clicked, this button will remove all the text from the input: The markup for this looks like: <label for="first-name">First name&...
1 vote
1 answer
4k views

Is a label-tag inside a button-tag valid and / or has any UX- / ergonomic-reasons?

I am checking an application and I found this in HTML DOM: <button type="submit"> <label>Submit</label> </button> I have never seen this before and asking myself if this is ...
0 votes
1 answer
552 views

HTML5 placeholder attribute used to hold default even after value change?

I have a HTML form that is used to modify preexising values. Thus on load values are prepopulated and upon submission, a check is made so that a confirmation message could be shown upon change. We ...
1 vote
1 answer
521 views

Where should keyboard focus after closing a dialog with the button opening the dialog removed?

In the UI design, each item panel contains a remove button. If clicking the remove button, a confirmation dialog would prompt. If cancel, the keyboard would focus back to the remove button. If confirm,...
23 votes
6 answers
4k views

WAI-ARIA & HTML5 - Why should I favor the latter?

I want to learn more about how to make webpages more accessible, so I've spend the last few hours reading about WAI-ARIA. Still, the whole concept isn't quite clear to me - HTML5 is part of that ...
8 votes
3 answers
14k views

Why are alert/confirm dialogs bad for mobile web?

I'm currently working on a mobile web app with external designers, but we (the developers) are allowed some input. They keep wanting to add alert and confirmation dialogs for things like form ...
1 vote
2 answers
828 views

What is the best practice for images on websites? [closed]

I am using right now svg images, because it looks great at any size, but not all the browsers has support for this. So, is it better practice work with .png/.jpg?
0 votes
1 answer
190 views

Using placeholders on input elements

I have a number of forms where users must enter phone numbers, credit card numbers, amounts, e-mail addresses and I am using placeholders for these fields in hope to guide the user on what to type in ...
0 votes
1 answer
178 views

UI element names and hierarchy for web SaaS B2B application [closed]

I´m building an ReactJS based library of web elements for a SaaS B2B application. I know this is common, but I´m having lots of difficulties choosing right names for my visual hierarchy. What I call ...
5 votes
1 answer
915 views

JavaScript and Section 508

I was wondering if someone has an article of common practices a web developer should practice while using JavaScript on a web page, keeping in mind the web page should be Section 508 compliant. I saw ...
3 votes
1 answer
4k views

Should I use the native HTML5 date picker when available?

My application is using the Material UI style, and I need to provide a date picker to the users. I have two options: Use the native date picker when the browser supports it (e.g. on Edge, Chrome), ...
4 votes
4 answers
10k views

Ordered Multi-select control in HTML

I'm developing a highly customisable SaaS application. It has at several places a multi select, for some cases additionally to selecting the items, the user can define an order, for other cases it is ...
3 votes
3 answers
5k views

Use a web framework (Bootstrap) or write my own CSS from scratch? [closed]

We are a startup building an ERP platform. It has lots of screens (10-15) and will be a browser first application. We are a team of 3 and our skillset is mostly javascript specifically Angular. We ...
1 vote
1 answer
976 views

What are the differences between icon and button badges?

iOS style badges are overlayed atop the upper right part of the icon. It's usually red with white text. When displayed inline on a button or next to a header or link, IMHO, the badge seems to take on ...
0 votes
3 answers
85 views

Proper way to describe saving canvas to server?

Problem I have an app where the user draws to an HTML5 canvas, and then is presented an option to save it to the server. Currently a button that says "Save" is shown, which instructs the server to ...
8 votes
5 answers
875 views

Which form widget for (seemingly) linear input without default value?

For answers in digital questionnaires, is there any reasonably well understood form widget between a horizontal group of radio buttons (or check boxes) and a slider gauge that lets the user input a ...
0 votes
2 answers
364 views

how better place back button?

Our main goal is, to keep the ability to go back SOMEWHERE but we don’t want it to be too prominent. Where should we put that button? This is the link to the live page where this button called 'Ürün ...
9 votes
5 answers
5k views

Are Placeholders good for default values?

I read (and believe) this article that data entry tips in HTML placeholders are generally harmful and should be avoided. In-context descriptions or hints can help clarify what goes inside each ...
53 votes
6 answers
36k views

Should disabled elements be focusable for accessibility purposes?

For example, if we have a set up wizard with 3 steps, and the user is on step 1, should the user be able to focus on the control to continue to the next step, regardless of whether or not that control ...
2 votes
2 answers
2k views

Is there a pattern for an HTML select box that provides existing hardcoded values but also needs to be able to take custom input?

I have a menu of reference information, like below. download bmml source – Wireframes created with Balsamiq Mockups The above fields are progressively pre-populated by the system, and user has ...
2 votes
0 answers
187 views

I need horizontal scroll bar with fixed width and right side checkbox [closed]

I need horizontal scroll bar with fixed width and right side check box. Currently I truncate the text, but I need horizontal scroll without truncate. Refer my sample page is here:- https://jsfiddle....
8 votes
1 answer
2k views

What is the benefit of using the HTML5 <time> tag?

I have a web application I am writing the HTML for. In the app I will be displaying a lot of dates and in HTML5 they added a <time> tag. If I wrap all of my dates and times in the <time> ...
3 votes
1 answer
1k views

How best to show a document preview

I have a fairly basic web form that gathers information such as name, address, description, yada, yada. I have to do a rewrite and so am wondering what the best practice currently is to show a ...
2 votes
3 answers
611 views

Does anyone know of any examples of the use of character counter on an input field?

I am working on a project that allows users to edit objects named by clicking on it using something similar to the HTML 5 Content-editable attribute. Update: The character limit is 30 not three. ...
2 votes
2 answers
2k views

when to choose one between dropdown and typeahead

I am about to design a webpage wherein I got confused between few components which suits. Here, I would like to understand what is the best scenario for choosing between typeahead and dropdown menu ...
0 votes
2 answers
1k views

How to make HTML-dashboards of SPA printable?

We have a SPA (Single Page Application) SaaS product (https://www.webbsc.at/home/) which displays user's financial data and analysis. Obviously it would be great if the user could print the data to ...
3 votes
2 answers
769 views

User Interface design for HTML based mobile applications [closed]

I'm currently working on the User Interface design for a responsive mobile app that is being coded using html. This is the first mobile app development project for me as well as my Head of Engineering ...
6 votes
8 answers
24k views

How wide should a responsive-designed website be?

Maybe this is a stupid question but I wonder if it changed. Websites used to be 960px wide so all screen resolution could easily see all the content. But with the new 'responsive-design' and html5 ...
1 vote
2 answers
140 views

What is this input type or form setup called? [duplicate]

Couple of us arguing about this and none of us can remember what this is or would be called. Commonly seen on forms where you are moving an option from one box on the left to a box on the right and ...
0 votes
1 answer
335 views

Pop up modal with alert box notification

So I have a pop-up modal which serves as subscription point and it has an email field, this email field has email validation and the error message is displayed in alert box. My question, is it a good ...
2 votes
3 answers
338 views

Is this a parallax effect design?

Here: http://www.ginventory.co/ I am not sure if this is also called parallax. If not, I'd like to know what is it called?
11 votes
4 answers
3k views

Does the content of the HTML5 placeholder attribute affect usability?

When using the placeholder attribute in HTML5 has there been any research into how the content of the placeholder affects the usability of the form? I'm thinking specifically about using the ...
0 votes
1 answer
129 views

Ideas for application layout using angularJS [closed]

I am converting a classic asp application that displays the status of any number of applications, can be one, can be 10+. I am using angularJS for the front end and restful web service for back end. ...
2 votes
1 answer
145 views

Handling lack of support for HTML5 [closed]

I've made a client-side JS script that runs when the Register button is clicked for the current version of a site, but want to implement real-time validation on the client. How do I handle some ...
6 votes
5 answers
4k views

Best practices for direction control in 2d game on mobile

I've been working on a pacman clone in HTML5 for quite a while. (http://pacman.platzh1rsch.ch) One important thing for me was always to keep it responsive, so it would be playable on all different ...
0 votes
1 answer
54 views

How to manage a growing drop down on my blog

I have a blog and I add articles on it quite frequently. One caters to Short Stories and the other to Articles. Not the drop-down has become huge and is covering most of the screen. Can you please ...
1 vote
1 answer
515 views

bootstrap auto-hint/validation on form field types [closed]

It seems that Bootstap has a 'field type' validation, that it performs automatically. Is there a way I can turn that off, OR, maybe better, pass messages to that along with making it work on plain ...
6 votes
2 answers
2k views

When should a text input be auto selected?

By default in most browsers, text inputs become fully selected when you tab into them, but not when you click on them. But in some instances, applications choose to focus the text input when it ...