<input
type="text"
name="password"
aria-required="true"
purpose="field: password; moreinfo: url('PasswordFAQ.html'); symbol: url('images/helpicon.png'); importance: critical;"
/>
- Only a single attribute has to be added
- Less attribute namespace to be taken
- On the surface this has less "attribute bloat" but it doesn't really offer any advantages over separating these out into their own attributes
<element
aui-field="password"
aui-moreinfo="PasswordFAQ.html"
aui-symbol="images/helpicon.png"
aui-importance="critical"
/>
- attribute values are "cleaner" than the above option (no awkward semi-colon delimitation)
- this will seem familiar to developers used to implementing
aria-*
style attributes - this will seem very familiar to angular developers (
<div ng-bind="..." />
) - great for modern frameworks (react, angular, etc) in which the "template" is built in a javascript file where relevant data will be available
- attribute bloat
- a lot of attributes to remember (although character delimited key/value pairs have the same problem only within the
purpose
attribute's value)
.foobar {
field: "password";
moreinfo: url('PasswordFAQ.html');
symbol: url('images/helpicon.png');
importance: critical;
}
- utilizing a selector allows elements to share configuration (an attribute approach would force a lot of repeating assuming multiple elements would require identical config)
- no attribute bloat whatsoever
- separation of markup and configuration
- requires a separate entity? (assuming this would be either within a special "tag" (like css in
<style />
), or a separate file all together
NOTE: This could be in JSON format as well (it'd look almost identical to the below code sample)
{
'.foobar': {
field: "password";
moreinfo: url('PasswordFAQ.html');
symbol: url('images/helpicon.png');
importance: critical;
}
}
- All of the pros for the "CSS-Style declaration of key/value pairs"
- Already in javascript which I'd assume would be the language consuming this anyway
- Developers are familiar with js so they'd be comfortable with the syntax
- All of the cons for the "CSS-Style declaration of key/value pairs"
<div
data-aui-field="password"
data-aui-moreinfo="PasswordFAQ.html"
data-aui-symbol="images/helpicon.png"
data-aui-importance="critical"
/>
- Modern frameworks all support passing data attributes through to the rendered html (react wounldn't throw any warnings)
- This is a very common convention which means less push-back/resistance from developers implementing this
- Basically all of the cons listed above in "AUI attributes (
aui-*
)"
My preference would be the single attribute with character delimited key/value pairs. With a limit of three pairs. To account for this limitation we could look at the semantics and define three base attributes. In the example about the based attribute is "purpose."
An addition my other preference is "data-" but not "data-aui-". I believe "aui" should be more descriptive. Potentially "custom" but not sure.