Is it possible to create a web using AngularJS and at the same time can pass the tests of compatibility WAI and accessibility AAt

[rrodr...@i3net.es]

AngularJS uses Javascript, uses tag modifiers with specific names and content created at runtime.


Even so, AngularJS is equipped with tools to solve these problems:

- Javascript is not prohibited on Web WAI (If used in right way)

- Modifiers can start with data-ng-keyword

- It makes use of the module NG-ARIA attributes that convey state or semantic information about the application for users of assistive technologies, such as screen readers.


Does anyone know if there is any point that I have not considered and where AngularJS could present an insurmountable problem if I want my development to be signed as WAI-AA and accessible?



At least I would be very happy of knowing if there are some document that guides me in the best practices to make compatible AngularJS with the requirements that W3C asks us to mark the Web as accessible type WAI-AA


Some good document where I can learn the points that I must take care of during the development of my Web AngularJS so that it ends up being accessible type WAI-AA.

Thanks in advance.

[Sander Elias]

Hi Rodriguez?,

Angular template syntax is 100% valid HTML, you don't need the data-ng stuff, that just adds unneeded clutter to your templates. You can use all normal aria stuff, and if your stuff needs to be highly dynamic, you might even use ngAria to support even the edgiest cases. 

It is neither easier nor harder to build a full WAI-AA compliant app with Angular. I'm not gonna lie to you, it will take extra effort, but angular will not be blocking. In most cases it will make it easier even.

Regards

Sander

[rrodr...@i3net.es]

Thanks for your Help.

We have been using angularJS a lot in our works.
But in this new project We are especially obliged by our clients to comply with the accessibility standards in order to apply the WAI-AA logo.

In this case we do not have experience and we could not give confirmation to our clients.

Searching the Web we did not find a resounding YES and we began to doubt

Thanks again.

[Sander Elias]

Hi Rodriguez,

If that would help you, here 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, 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, and any characters that are not defined by Unicode. In the HTML syntax, attribute names, even those for foreign elements, may be written with any mix of lower- and uppercase letters that are an ASCII case-insensitive match for the attribute’s name.
Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an 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

[rrodr...@i3net.es]

Hi Sander,

Thank you very much for your help.

I appreciate your comments and your help since I was a little lost and in many other forums, like stackoverflow, nobody answered me. Now I have more base and material on which to investigate and I am becoming more clear the possibilities of AngularJS in the world of accessibility.