Hi Rodriguez, If that would help you, here <https://www.w3.org/TR/html51/syntax.html#elements-attributes>is the relevant spec.
quote: > Attributes have a name and a value. Attribute names must consist of one or > more characters other than the space characters > <https://www.w3.org/TR/html51/infrastructure.html#space-characters>, > U+0000 NULL, U+0022 QUOTATION MARK ("), U+0027 APOSTROPHE ('), U+003E > GREATER-THAN SIGN (>), U+002F SOLIDUS (/), and U+003D EQUALS SIGN (=) > characters, the control characters > <https://www.w3.org/TR/html51/infrastructure.html#control-characters>, > and any characters that are not defined by Unicode. In the HTML syntax, > attribute names, even those for foreign elements > <https://www.w3.org/TR/html51/syntax.html#foreign-elements>, may be > written with any mix of lower- and uppercase letters that are an ASCII > case-insensitive > <https://www.w3.org/TR/html51/infrastructure.html#ascii-case-insensitive> > match for the attribute’s name. > Attribute values are a mixture of text > <https://www.w3.org/TR/html51/dom.html#text> and character references > <https://www.w3.org/TR/html51/syntax.html#character-references>, except > with the additional restriction that the text cannot contain an ambiguous > ampersand <https://www.w3.org/TR/html51/syntax.html#ambiguous-ampersand>. The link shows you the complete story, but the paragraph above highlights that an attribute can be a mixture of all possible characters except: " ' > / = and the null chr. This means that all brackets: []{}() are allowed in an attribute name, Also * is valid. Some people seem to think otherwise, and not all validators seem to be aware of this, but the spec is quite clear! That is a pretty resounding YES isn't it ;) Applying to all rules of WAI-AA is some work, but if you take it into account from the get-go, it's not that hard. What might help you, is use the aria roles, to aid your styling: as an example: <span aria-role="alert" *ngIf='needAlert'>{{alertText}}</span> then in the css: [aria-role="alert"] { background-color: #dff0d8; border-color: #d0e9c6; color: #3c763d; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; } This will make your life a lot easier! If needed, you can even make a directive to add extra needed functionality based on the aria selector, and keep your html 'clean' (in my sample, you can add for example a dismiss button to the alert, completely transparent) Regards Sander -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
