Items tagged with: HTML

Search

Items tagged with: HTML

Recent datepicker experience:
1. Control is presented as three separate spin controls, supporting the Up/Down Arrow keys to increment and decrement the value as well as manual typing. But because they're not text inputs, I can't use the Left/Right Arrow keys to review what each separate one contains, only to move between day, month, and year.
2. I tab to year.
3. I press Down Arrow, and the value is set to 2075. I'm unclear how many use cases require the year to be frequently set to 2075, but I can't imagine it's many so this seems like a fairly ridiculous starting point.
4. I press Up Arrow, and the value gets set to 0001. The number of applications for which 0001 is a valid year is likewise vanishingly small.
5. I delete the 0001, at which point my #screenReader reports that the current value is "0". Also not a valid year.
6. Out of curiosity, I inspect the element to see which third-party component is being used to create this mess... only to find that it's a native `<input>` with `type="date"` and this is just how Google Chrome presents it.

A good reminder that #HTML is not always the most #accessible or user-friendly.

#accessibility #usability

#Accessibility #accessible #screenreader #html #usability

#html #css #вебдизигн #вопрос

Using <fieldset> without a <legend> (or using another method for an accessible name) is useless as its semantics are not conveyed to screen reader users. You may as well use <div style="border: 1px solid">

#a11y #webDev #HTML

#a11y #webdev #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."

#a11y #webdev #HTML

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)
#a11y #webdev #html

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

Change certain HTML attributes via CSS (hello --aria-expanded!)

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
#a11y #html #css #accessiblity

#html

#html #django

#a11y #Accessibility #html

Sensitive content

#a11y #webdev #html #webdesign #uidesign #webdevelopment #crisiscontinues #sotiredofthisshit

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
#html #typescript #javascript #css #hiring #FediHire #getfedihired #frontend @Mastodon

#a11y #Accessibility #webdev #html #css

#html #markup #epub #indesign #xhtml

#webdev #html #webdevelopment

#html #webdesign #uidesign #uxdesign #forms #ixd

#html #aria #checker

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
#html #microdata #rdfa #semanticweb

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
#a11y #webdev #html #aria #javascript #webdevelopment

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

#fediverse #html #javascript #css #kiss @Chris Ferdinandi ⚓️

#a11y #Accessibility #html #wcag

#webdev #html #css #webdesign #hiring

#a11y #Accessibility #html

#webdev #html

#html #css #indieWeb #semantichtml #smolweb #semantic #semanticcss

#webdev #html #webdevelopment

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

html5accessibility.com/stuff/2…

Not so short note on aria-label usage – Big Table Edition – HTML Accessibility

html5accessibility.com
#Accessibility #webdev #html #aria

#a11y #webdev #html

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.

htmlforpeople.com/


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
#blind #screenreader #html #AltText #htmlforpeople @Blake Watson

#Accessibility #screenreader #html #webstandards

✍🏽 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"

#accessibility #HTML #ARIA

html5accessibility.com/stuff/2…

#Accessibility #html #aria

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

#a11y #Accessibility #webdev #html #javascript #css

#webdev #html #fail #webdevelopment

#webdev #html #webdevelopment

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)
#a11y #Accessibility #html #table

#a11y #Accessibility #webdev #html #aria #webdevelopment #digitalaccessibility

#a11y #webdev #html #aria

#Accessibility #webdev #html #aria @Patrick H. Lauke

#a11y #Accessibility #html #aria #css

#a11y #Accessibility #webdev #html #aria #webdevelopment #digitalaccessibility

⇧