Search
Items tagged with: html
š¤HTML semantics: <abbr> theory versus abbreviation reality
"The HTML <abbr> element is deceptively familiar and attractive, its been around forever (1999) and thus people assume that it does what it does and does it well. Nothing much changed over the iterations of the abbr element definition over the years."
tpgi.com/short-note-the-abbrevā¦
Short note: The abbreviation appreciation society - TPGi
The HTML element is an incredibly common, but do you know how you can make it accessible? Find out how in this article.Steve Faulkner (TPGi)
I disagree with use cases that rely on CSS, generally at risk from network interruptions and caching, to trigger programmatic state changes in the HTML that references it (see pic). Cart / horse and all.
Instead, use CSS to ensure your programmatic state is correct. Eg: adrianroselli.com/2021/06/usinā¦
#a11y #accessiblity #css #html
Using CSS to Enforce Accessibility
The CSS3 logo as a head atop a torso with its arms folded across its chest. I am a big proponent of the First Rule of ARIA (donāt use ARIA). But ARIA brings a lot to the table that HTML does not, such as complex widgets and state information thatā¦Adrian Roselli
SATAN EXPLAINS #HTML using DEATH METAL
SATAN EXPLAINS HTML using DEATH METAL
Wanna learn how to SCREAM or SING for free?Sign Up for our free four-part screaming or singing crash courses!Screaming āŗāŗāŗhttp://bit.ly/Screaming101ā Singin...YouTube
Progressive enhancement in Django with htmx
valentinog.com/blog/django-proā¦
Progressive enhancement in Django with htmx
Progressive enhancement in Django with htmx might be easier than you think.Valentino Gagliardi's Blog
Hey.
Donāt wrap a `<figure>` in a link.
Definitely donāt use a `title` on that link.
adrianroselli.com/2025/01/dontā¦
Donāt Wrap Figure in a Link
In my post Brief Note on Figure and Figcaption Support I demonstrate how, when encountering a figure with a screen reader, you wonāt hear everything announced at once: No screen reader combo treats the caption as the accessible name nor accessible deā¦Adrian Roselli
HTML Developers: Please Consider ā in the year of 2025
@aardrian returns to the Mastophone
#HTML #ARIA #WebDev #WebStandards #a11y
html5accessibility.com/stuff/2ā¦
New year, new role @Mastodon!
Our core team is looking for a senior Front-end Developer to elevate the web UI/UX experience for our users.
Ideally:
1. You are highly skilled in accessible and semantic #HTML
2. Proficient in modern #CSS
3. Experienced with #Javascript, #Typescript and complex React/Redux applications
This remote full-time position requires a 4-hour overlap with the CET timezone.
For more info/to apply:
jobs.ashbyhq.com/mastodon/6a09ā¦
#FediHire #GetFediHired #hiring #frontend
Front-end Developer (m/f/d)
We're looking for a Front-end Developer to work with us remotely on our free and open-source Mastodon software.jobs.ashbyhq.com
The underrated element - HTMHell
A collection of bad practices in HTML, copied from real websites.The underrated
- element - HTMHell
šš¼Know your Standards
11 HTML best practices for login & sign-up formsāMartian Chronicles, Evil Martiansā team blog
Even popular sites fail to implement the 11 best practices mentioned in this article, and thus have at least one mistake. Use this checklist on your next pull request review that deals with any form.Andrey Sitnik (Evil Martians)
ARIA in HTML Conformance Checker Bookmarklet
github.com/gezlemon/WAI-ARIA-Uā¦
GitHub - gezlemon/WAI-ARIA-Usage: Bookmarklet to evaluate WAI-ARIA usage
Bookmarklet to evaluate WAI-ARIA usage. Contribute to gezlemon/WAI-ARIA-Usage development by creating an account on GitHub.GitHub
The four most popular ways to use RDF-based metadata on websites are RDFa-Core, RDFa-Lite, Microdata, and inline JSON-LD.
I canāt use RDFa-Lite because I need rel HTML attributes. rel silently upgrades RDFa-Lite to RDFa-Core, which parses differently. I doubt all parsers upgrade correctly; some will try to parse RDFa-Core as RDFa-Lite. Conformant RDFa parsers upgrade RDFa-Lite pages to RDFa-Core despite many authors only being familiar with RDFa-Lite. I suppose resources like Schema.org and Googleās documentation only documenting RDFa-Lite markup worsens the confusion. Update 2024-12-16: Sarven Capadisli has clarified on the Fediverse that this is the behavior of one faulty parser; rel only triggers an upgrade when used with an RDFa namespace. I may re-evaluate RDFa.
With RDFa split between two incompatible alternatives with a confusing upgrade mechanism, the alternatives are Microdata and JSON-LD. I use structured data extensively; JSON-LD would duplicate most of the page. Letās use this relatively short article as an example. Exruct can convert the embedded Microdata into a massive JSON document featuring JSON-LD. Take a look at the JSON-LD and HTML side by side. Microdata attributes take a fraction of the footprint, encode the same information, and donāt require duplicating nearly the entire page.
Originally posted on seirdy.one: See Original (POSSE). #Microdata #SemanticWeb #RDFa #HTML
GitHub - scrapinghub/extruct: Extract embedded metadata from HTML markup
Extract embedded metadata from HTML markup. Contribute to scrapinghub/extruct development by creating an account on GitHub.GitHub
I don't know how many times we have to say this. Last I counted it was 1.2 million times and almost 20 years.
"Developers should always prefer using the correct semantic HTML element over using ARIA."
developer.mozilla.org/en-US/doā¦
#webdev #javascript #html #webdevelopment #a11y #aria
An overview of accessible web applications and widgets - Accessibility | MDN
Most JavaScript libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces. Sliders, menu bars, file list views, and more can be built with a combination of JavaScript, CSS, and HTML.MDN Web Docs
Good morning #fediverse !
I'm feeling #KISS today...
Ā« Keep
IT
Simple
Stupid Ā»
(Amazing, how many things you can do with just simple,
#html
+
#css
+
#javascript
cc @cferdinandi ... who amongst others, inspired me , thX
Can anyone recommend an accessible course to learn html? It must work with NVDA. I've heard of Code Camp and W3Schools, but how accessible are they and how do they differ in content and style? I like courses with a structured approach, where things are explained i.e. a deductive and not an inductive approach. I usually don't need a tutorial, but I am fine with general instructions. In this case, though, exercises would be very beneficial. I am using this prior to beginning Part 2 of the Web Developer's course at Deque. I am not a developer, but they don't have one for accessibility testers.
#accessibility #blind #blindness #computing #DequeUniversity #html #learning #NVDA #programming #screenreaders #W3Schools
š¤disabled and obscured
"My personal take on this is it sucks, as while the control is disabled for all, only for a subset of users (low vision) the text label for the disabled control is illegible."
#a11y #HTML #WCAG #accessibility
Remember in August when I gave a talk about HTML tables for the WebAIM online conference?
That video is online!
I have embedded it on my site:
adrianroselli.com/2024/08/talkā¦
Or you can go to YouTube directly (where you can find the other swell talks from that day).
Talkinā Tables ā WebAIM Conference 2024
I spoke at the 2024 Web Accessibility in Mind Conference (in partnership with PopeTech). As soon as the video is available I will embed it.Adrian Roselli
The unreasonable effectiveness of simple HTML
I've told this story at conferences - but due to the general situation I thought I'd retell it here. A few years ago I was doing policy research in a housing benefits office in London. They are singularly unlovely places.Terence Edenās Blog
Semantic websites are awesome! Among other things, they let you write reusable CSS. Please send me your semantic websites, so I can analyze them for common patterns and write a composable CSS framework.
jak2k.schwanenberg.name/post/cā¦
#indieweb #smolweb #semanticHTML #html #semantic #css #semanticcss
2024: 0.5% of the Global Top 200 Websites Use Valid HTML Ā· Jens Oliver Meiert
The annual HTML conformance analysis, validating 200 home pages of the most popular websites. Despite improvements, there is no signal of commitment to valid output as a quality baseline to benefit end users as well as web development as aĀ professionā¦meiert.com
Not so short note on aria-label usage ā Big Table Edition
āaria-label is one of a number of secondary methods to label native HTML UI elements. It works particularly well on interactive elements, it also works well on most block level elements old skoolterm that have explicitly or implicitly defined structural roles. It works less well or not at all on text level semantics.ā
#aria #HTML #accessibility #WebDev
docs.google.com/presentation/dā¦ #webdev #html #a11y
Even though I know #HTML inside out and use it virtually every day, I'm still reading #HTMLForPeople by @bw because it's a prime example of how a good guide should be written.
1. The book is simple and easy to follow, with relevant points explained well enough even for non-coders to understand.
2. Images are clearly described for #blind readers through the use of #AltText.
3. The website is easy to navigate with a #ScreenReader.
4. There are no annoying pop-ups or ads on the website.
5. The book is entirely free of charge.
HTML for People
HTML isn't only for people working in the tech field. It's for everyone. Learn how to make a website from scratch in this beginner friendly web book.htmlforpeople.com
š¦ JAWS (only) NO MORE
"In 2017 I embarked on a journey to improve and open the reporting of issues with JAWS support for Web Standards.
I continued to work on this after leaving TPGi, until nowā¦"
āš½ drugs button popover - updated October 1 2024
"Several people have questioned my reasoning for writing about the use case of popover as a tooltip, no I was not on drugs, at the time of writing I noticed that GitHub was using popover as a tooltip"
People on StackOverflow telling people to screw up #accessibility with the HTML dialog element defeats the purpose of using that element in the first place IMO. Please upvote my answer that corrects the numerous wrong answers, including the accepted answer, to this question if you have an SO account.
stackoverflow.com/a/79028606/2ā¦
#webDev #a11y #html #css #javaScript
Semantic Code In HTML: What Is It And Does It Still Matter?
Semantic code in HTML is still important in modern web development. It can improve accessibility, SEO, maintainability, cross-device compatibility, future-proofing, collaboration, and page load times.Paul Boag - User Experience Advice
Top `<table>` tips:
ā¢ Donāt span cells:
adrianroselli.com/2023/02/avoiā¦
ā¢ Donāt redefine column headers: adrianroselli.com/2022/02/coluā¦
ā¢ With one exception, you donāt need a `scope` attribute (the exception is sometimes the top corner):
tpgi.com/short-note-on-scopingā¦
ā¢ `column` is not a valid `scope` value:
html.spec.whatwg.org/multipageā¦
ā¢ Be wary of articles that donāt cite sources or testing when they make assertions about `<table>`.
#HTML #table #accessibility #a11y
Short note on scoping mechanisms - TPGi
In 2 recent articles I have illustrated why the scope attribute is not needed on data tables with one row or column of th elements, or data tables with 1...Steve Faulkner (TPGi)
In 2014, Steve Faulkner wrote an article What ARIA does not do. 10 years later, the message is unchanged.
#WebDev #WebDevelopment #ARIA #HTML #DigitalAccessibility #Accessibility #A11y
šš What ARIA still does not do
"Use of ARIA is a promise you as a developer make to screen reader users."
Why are my live regions not working? by @patrick_h_lauke
'Live regions have a reputation for being "flaky" and inconsistent. While this can be attributed in part to shortcomings in current implementations, the problem can also be caused by developers misunderstanding how live regions are intended to work.'
#accessibility #HTML #ARIA #WebDev
New post, another in my series of using the right lingo while also carrying the IKEA vibe:
āBe Careful Using āGridāā
adrianroselli.com/2024/07/be-cā¦
I try to disambiguate between 8 different meanings of the word āgridā in a web dev context.
#HTML #ARIA #CSS #accessibility #a11y
Be Careful Using āGridā
TL;DR: Be careful when using the word grid on its own. Be certain you have chosen the term that accurately describes the pattern you want.Adrian Roselli
aria-label is one of a number of secondary methods to label native HTML UI elements. It works in some scenarios, less well or not at all on others. Get the details on it's proper and effective usage.
#HTML #ARIA #WebDev #WebDevelopment #DigitalAccessibility #Accessibility #A11y
šļøNot so short note on aria-label usage ā Big Table Edition
Updated: 22 May 2024
#HTML #ARIA #WebDev #accessibility