Blog

A colleague found this issue yesterday 4/13/17. Try using pinch an zoom on the following page using an iPhone 6+. http://www.chrislane.info/examples/noResize.html You will see that you can still resize the page using pinch and zoom but you should not be able to due to the following meta tag. <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no”> This… Read more iOS VoiceOver is ignoring user-scalable=no

It seems that OS VoiceOver is ignoring table semantics when display:block is applied. The only way I’ve come up with to deal with this issue is dispense with the table headers and label the data inline. See the following example using a mobile screensize. http://www.chrislane.info/aria_examples/mobileTable.php See the bug report at https://bugs.webkit.org/show_bug.cgi?id=141524. A colleague also discovered that… Read more iOS VoiceOver is ignoring table semantics when display:block is applied

From https://www.w3.org/TR/wai-aria-practices-1.1/#link NOTE If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.

Thanks to Nat Tarnoff for helping me get ready for this talk. We talked about Angular 2’s strange relationship with attributes and addressed the ambiguity on how to work with native DOM elements from within an Angular application. Finally, we ended with a Demo of how to use Visual ARIA with Protractor to catch ARIA… Read more CSUN 2017 – Angular 2: Prototyping & Testing Accessible Widgets

An easy way to get started using ARIA in Angular 2. Also, see how Protractor and Visual ARIA combine to catch ARIA errors in your-end to-end tests. https://github.com/clane/A2A11yQuickstart

Currently, in the Angular 2 documentation, ElementRef is used in attribute directive example despite security warnings. This is quite confusing. I look forward to Renderer losing it’s experimental designation.

Data binding is a relationship between an HTML widget and data source. This relationship allows applications to display data values to a user and respond to user actions (clicks, touches, keystrokes). This relationship facilitates this, without needing to manually push application data values into the HTML, attach event listeners, pull changed values from the screen,… Read more Angular 2 doesn’t like attributes but still offers attribute bindings

https://www.bennadel.com/blog/3088-native-key-combination-event-binding-support-in-angular-2-beta-17.htm keydown.a keydown.b keydown.c keydown.dot keydown.Spacebar keydown.meta.Enter keydown.alt.Enter keydown.control.Enter keydown.shift.Enter keydown.meta.o keydown.meta.s keydown.meta.f keydown.escape The “special key” modifiers are: alt control meta – The Command key on Mac and the Windows key on Windows. shift There are then two replacement keys that are there just keep the syntax from breaking: Space – Or, you can… Read more Angular 2 Beta 17 actually ships with native key-combination support.

Setting focus in Angular 2 requires working with native DOM elements. While this is possible, the documentation recommends against doing so. But making ARIA widgets keyboard accessible requires focus management. So it looks like we have a choice between two APIs, ElementRef and Renderer. First we will look at ElementRef. At this time, it is… Read more Setting focus in Angular 2

Template binding works with properties and events, not attributes. In the world of Angular 2, the only role of attributes is to initialize element and directive state. When we data bind, we’re dealing exclusively with element and directive properties and events. Attributes effectively disappear. See https://angular.io/docs/ts/latest/guide/template-syntax.html