3 ms·
I'm cautious about using CSS to do things that feel like actual behaviours. For example, the modal that appears when you click on the button actually doesn't d
by IanCal 10y ago
I'm cautious about using CSS to do things that feel like actual behaviours.
For example, the modal that appears when you click on the button actually doesn't do things on "clicking" but focusing. This means if you tab over the button it'll load the modal, then tabbing away means the modal is gone. I can't tab into the content in the modal at all. How does that work with accessibility?
Though I generally dislike the idea of saying content isn't there by making it present in the document but invisible.
Edit - Some of the default behaviours are also a bit pants. In chrome, the form validation on a pattern starts working after I hit submit, then angrily shakes at me for every keypress until it's valid. Then, it ignores invalid input as I type more! Please never use this for phone numbers or credit card numbers. Stop requiring an exact format when what people type varies, and stop telling me I'm putting in something wrong when you ask for a phone number and I give you something that'll connect to me if you type into a phone.
Maxlength is not a validation it's just ignores any more letters you type. Quietly ignoring your users input is probably not what you want.
The "Would you prefer a banana or a cherry?" just shouts "Please match the requested format" if I type "a cherry". I know chrome has nothing else to go on other than "the regex wasn't matched" but it's a bad end user experience.
The tabs example is something I need to tab onto then use left and right, I assume because it's a radio box underneath, not a series of links. Are tabs really radio buttons?
The same for the accordion. Which I've found if I add any tabbable content inside them then I'm focused on a hidden item. Great. Tab onto "tab 1", hit tab, focus has disappeared and I'm now potentially going to click on random items I can't see. This is because although you want to pretend the content isn't there just because it's not visible, it's still there! It's in your document.
Sure, you might not need javascript. But maybe you should still use it.
- haalcion2 10y ago> The "Would you prefer a banana or a cherry?" just shouts "Please match the requested format" if I type "a cherry". I know chrome has nothing else to go on other than "the regex wasn't matched" but it's a bad end user experience. Localized custom validation messages for the provided pattern should be added as part of HTML spec. Someone should follow up on that, because it'll probably be too much of a waste of time for me. In the meantime, this works and gets around a bug in FF: http://stackoverflow.com/a/20189012 http://stackoverflow.com/a/20189012 <input type="text" id="username" required placeholder="Enter Name" oninvalid="this.setCustomValidity('Enter User Name Here')" oninput="setCustomValidity('')" /> where setCustomValidity could provide any text, even localized text from some other source like a DB, potentially, since it's JS. Requires a modern browser, though. > Sure, you might not need javascript. But maybe you should still use it. Yes, but if you are writing for a general audience, make sure it's accessible: http://webaim.org/techniques/javascript/ http://webaim.org/techniques/javascript/ Someone should put together a site that, given a set of browser restrictions the user provides, gives examples of each of these to show the most accessible and standards-compliant version of the code to use, minimizing external libraries required, with and without localization, because not everyone has the resources to provide localized content, unless localization could be provided by a built-in library in the browser or OS, which would be another great project. Yes, there are sites that provide a matrix of supported browsers, but I don't think that would be as simple to use; developers like copy-and-paste examples, for better or worse, e.g. StackOverflow.
- IanCal 10y ago>Localized custom validation messages for the provided pattern should be added as part of HTML spec. That sounds like a reasonable addition. Perhaps a series of validators and messages? > Yes, but if you are writing for a general audience, make sure it's accessible: http://webaim.org/techniques/javascript/ http://webaim.org/techniques/javascript/ Very true. Thanks for the link. > Someone should put together a site that, given a set of browser restrictions the user provides, gives examples of each of these to show the most accessible and standards-compliant version of the code to use, minimizing external libraries required, with and without localization, because not everyone has the resources to provide localized content, unless localization could be provided by a built-in library in the browser or OS, which would be another great project. This is something I'd like to see, because apart from a few things I know to look for (tabbing, for example), I don't know how well various devices and settings do with different content. Consistent approaches also help people working on things like screenreaders.
- oliv__ 10y agoYeah honestly banana or cherry is just screaming for a much simpler plain old radio input.