Search
Items tagged with: html
Brief Note on Description List Support
TL;DR: Description list support is generally good (with Safari being the outlier), even if you may not like how it is supported.Adrian Roselli
I have started contributing PR's to improve the @w3c #HTML Validator/Checker, you should too!
github.com/validator/validator…
Issues · validator/validator
Nu Html Checker – Helps you catch problems in your HTML/CSS/SVG - Issues · validator/validatorGitHub
web.dev/learn/html/ &
developer.mozilla.org/en-US/do…
#html #webdev #tutorial
HTML: A good basis for accessibility - Learn web development | MDN
You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will help to fill gaps in this knowledge, but this article has taken care of the basics.developer.mozilla.org
Glad <dialog> focus is finally being implemented/defined in a reasonable way after a torturous years long, largely pointless, discussion.
“1. Make the dialog focusing steps look at sequentially focusable elements instead of any focusable element.
2. Make the dialog element itself get focus if it has the autofocus="" attribute set.
3. Make the dialog element itself get focus as a fallback instead of focus being reset to the body element.”
#HTML #WebStandards #a11y
github.com/whatwg/html/commit/…
Implement dialog initial focus proposal · whatwg/html@a9f103c
This implements the changes proposed here: https://github.com/whatwg/html/wiki/dialog--initial-focus,-a-proposal#dialog-draft-text Specifically: 1. Make the dialog focusing steps look at seq...GitHub
Overlapping interactive areas
When an interactive element like a button, link, and form field sits on top of another interactive element, accessibility (and usability) problems arise.tempertemper
Added a color theme picker to my site recently, using a progressive enhancement strategy.
If you're interested, I wrote an article on how I approached it:
darins.page/articles/progressi…
#ux #frontend #development #html #css #javascript #userexperience #webdev
Progressively-enhanced dark mode - Darin Senneff
Recently, I added a dark mode setting to my website. Dark mode is a color theme feature that’s pretty common these days. Letting users adjust the color of…Darin Senneff
Common nesting issues in HTML - HTMHell
A collection of bad practices in HTML, copied from real websites.Common nesting issues in HTML - HTMHell
github.com/raven2cz/markdown-v…
fishlive.org:5005/raven2cz/sig…
Now they have to be accessible, so read well with screen readers, and be fully keyboard navigable. This includes things like lists, tab bars, menus, etc.
So here's the problem. I have some things that need to be inside a container. A list for example. So you have the list container, and then the list items inside it.
When you tab around, I want the container to be tabbable, not the list item. So you don't tab through the list, you tab to the list, and then use the arrows to move around.
Now here's the problem. When the container is tabbable, and not the list item, when you tab to the container, it either:
* reads something like "List title section" and then nothing, not even the item you have selected. Or
* Reads all the list items at once.
Either of those are not great obviously. Ideally, I'd like it to read the list title, then list, and then the selected item.
So the way I get it to do this is by detecting when you tab/focus the list container, and then immediately set the focus to the selected list item instead.
Now this works fantastic. You can tab around, and it automatically puts you right on the list item you have selected, and it even gets read.
But somehow, when you don't just tab around, but also shift tab around, this shift tab lands you back on the list container. And that automatically moves your focus back inside the list. So effectively, once you're in a list, you're trapped.
Does anyone have an idea how to get around this without doing ugly hacks like stealing tab and shift tab and implementing tab order myself? I want to use as many native browser features as possible so if there's another way to do this, please feel free to tell me.
#HTML #JavaScript #accessibility
There can be only one: Options for building “choose one” fields - HTMHell
A collection of bad practices in HTML, copied from real websites.There can be only one: Options for building “choose one” fields - HTMHell
Upgrade Your HTML IV · Jens Oliver Meiert
HTML forms the heart of the Web. The beautiful thing is, HTML is easy to learn. Unfortunately, it’s difficult to master. In the Upgrade Your HTML series, I’m taking examples of HTML, discuss these examples, and make them a little better.meiert.com
Reading the meter - HTMHell
A collection of bad practices in HTML, copied from real websites.Reading the meter - HTMHell
📝 Upgrade Your HTML IV:
My new book is out! It’s about #HTML #minimization and #optimization, the theme of the respective book series.
“Apart from discussing the appropriate use and the subtleties of HTML elements, this edition covers general topics like conformance, maintainability, and the balancing of optimization vectors. It also covers topics like attribute minimization, void elements, metadata, table buttons and button links, and even CSS art.”
meiert.com/en/blog/upgrade-you…
Upgrade Your HTML IV · Jens Oliver Meiert
HTML forms the heart of the Web. The beautiful thing is, HTML is easy to learn. Unfortunately, it’s difficult to master. In the Upgrade Your HTML series, I’m taking examples of HTML, discuss these examples, and make them a little better.meiert.com
You Don't Need ARIA For That - HTMHell
A collection of bad practices in HTML, copied from real websites.You Don't Need ARIA For That - HTMHell
Wonder no more:
ARIA in HTML
w3.org/TR/html-aria/
#webdevelopment #accessibility #W3C
ARIA in HTML
This specification defines the authoring rules (author conformance requirements) for the use of Accessible Rich Internet Applications (WAI-ARIA) 1.2 and Digital Publishing WAI-ARIA Module 1.0 attributes on [HTML] elements.www.w3.org
6 Steps to Improve HTML Images For Users & Developers
Learn how to make HTML images better for users with responsive sizes and modern formats without making your life as a developer much harder.Austin (Austin Gil)
Hi, I'm treefit, a #foss dev working on #deltachat. I'm responsible for the desktop client together with @jikstra.
My favorite coding language is #rustlang, but I "speak" #typescript, #javascript, #html, #css, too.
I'm also capable in #python and #swift, but not as much.
I'm new to the mastodon/toot style of communication (never used Twitter, either), so I'm still learning of how this all works.
My goal is to give you some behind-the scenes peeks onto the DeltaChat development.
"7 Cool HTML Elements Nobody Uses"
tapajyoti-bose.medium.com/7-co…
7 Cool HTML Elements Nobody Uses - Tapajyoti Bose - Medium
Searching for cool HTML elements, especially if you don’t know what you’re looking for, is often like being thrown into a pile of garbage After scavenging through the seemingly endless pile of HTML…Tapajyoti Bose (Medium)
Parser-Error bei FridaysForFuture
Ist wahrscheinlich kein Thema von Friendica, aber ich schreibe es hier doch einfach mal...
Beim Versuch, die Seite von #FridaysForFuture zu sharen, gibt es scheinbar Parser-Error. Jedenfalls gibt der Editor nur sowas raus:
Enter a title
Enter a description
https://fridaysforfuture.de Vermutlich hat die dortige Seite invalides #HTML? Oder können wir etwas machen?
Beispiel: fridaysforfuture.de/x-fuer-lue…
