Google's Gemini A.I. : "a web developer should strongly prefer native HTML elements over autonomous custom elements"

[ronnievsmith]

Can one of the Material 3 Web Architects explain: is Material 3 for Web intended for general web development, or is it a niche product intended only for special use cases?

Google Gemini says that Material Web 3 should be "strongly" rejected by Web Developers who should "use [Material Web 3] cautiously." ?

Gemini Prompt: "According to ARIA best practices, Should a web developer prefer native HTML elements over autonomous custom elements?"

You are correct. According to ARIA best practices, yes, a web developer should strongly prefer native HTML elements over autonomous custom elements whenever possible. This aligns with the "first rule of ARIA use":

If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Here's why this preference exists:

Advantages of native HTML elements:

Wide browser support: Native elements are guaranteed to be understood and rendered consistently across all modern browsers.
Built-in accessibility: They come with pre-defined accessibility features like keyboard navigation and screen reader support, ensuring a smooth experience for users with disabilities.
Standardized behavior: Users and developers have clear expectations of how native elements will behave, reducing confusion and improving usability.
Disadvantages of custom elements:

Accessibility considerations: Developers need to ensure custom elements are implemented accessibly with appropriate ARIA roles and attributes. This requires additional effort and expertise, and neglecting it can create accessibility barriers.
Potential compatibility issues: Newer custom elements might not be supported by all browsers, leading to inconsistent rendering and functionality.
Lack of inherent meaning: They may not carry the same semantic meaning as native elements, requiring additional explanations for screen readers and assistive technologies.
When to use custom elements:

While native elements are preferred, there are situations where custom elements might be necessary:

Unique functionality: When no native element offers the desired functionality, a custom element can be developed. For example, a complex data visualization component might not be achievable with native elements alone.
Specific styling requirements: In rare cases, achieving the desired visual design necessitates a custom element with tailored styles, as long as accessibility is not compromised.
Remember: Even when using custom elements, accessibility remains paramount. Developers must follow ARIA best practices and rigorously test their implementation with assistive technologies.

In essence, prioritize native HTML elements due to their inherent accessibility and broader compatibility. Use custom elements cautiously, ensuring they enhance, not hinder, accessibility for all users.

[ronnievsmith]

Hostility towards constructive criticism is unprofessional, disrespectful, discourages participation in your product, and likely explains the issue(s) that your product suffers from. Constructive criticism should not be discouraged or maligned by Google or it's employees. Fix your code and your attitude.

…

On Thu, Feb 15, 2024 at 3:16 PM olmstd ***@***.***> wrote: @ronnieroyston <https://github.com/ronnieroyston> Do you really think that prompting a LLM and quoting its response is helpful for aligning the goals that this repository wishes to fulfill? You are spamming me and everyone else who follows this project. In the future, please consider refraining from this behavior. — Reply to this email directly, view it on GitHub <#5469 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADBJF6YBO5PFGO23IYYIPDTYTZ3JLAVCNFSM6AAAAABDK223OWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DIOBVGYYDQ> . You are receiving this because you were mentioned.Message ID: <material-components/material-web/repo-discussions/5469/comments/8485608@ github.com>

-- Ronnie Royston (504) 460-1592

[asyncliz]

Let's please remember the code of conduct for this repository.

Gemini answered well:

While native elements are preferred, there are situations where custom elements might be necessary:

Unique functionality: When no native element offers the desired functionality, a custom element can be developed. For example, a complex data visualization component might not be achievable with native elements alone.

Specific styling requirements: In rare cases, achieving the desired visual design necessitates a custom element with tailored styles, as long as accessibility is not compromised.

This aligns with our previous explanations for why this project uses custom elements and JavaScript.

[ronnievsmith]

Thanks for replying Elizabeth. I agree that Gemini answered well - "rare cases".

Web developers should strongly prefer native HTML to Material 3.

This is obviously unacceptable. I would love to work for Google. We should join forces and build a better tomorrow?

[asyncliz]

Your quote is misleading and we should be accurate. Gemini did not say prefer native HTML over Material 3:

"...a web developer should strongly prefer native HTML elements over autonomous custom elements whenever possible."

It's also important to not take quotes out of context. "Whenever possible", does not mean always. Gemini also offers suggestions on when developers need to use custom elements, not that they never should be used.

[ronnievsmith]

That's my quote which is worth at least a satin jacket. You are proficient in logic and understand the statement of fact is accurate.

M3Web == Autonomous Custom Elements

Google M3Web does not align with canonical web standards committees which provide crystal clear guidance to web developers.

[asyncliz]

I am sorry that we disagree! We believe our use cases for this library are aligned with web standards, the living HTML spec, and WAI-ARIA guidelines, all of which explain how autonomous custom elements are used for web development.