Differences

This shows you the differences between two versions of the page.

--- dev:angular_dev_best_practices [2019/01/21 13:43] – prevent wiki autoconversion of double-dash rjs7
+++ dev:angular_dev_best_practices [2019/05/13 13:24] – Adding some a11y considerations sandbergja
@@ Line 24: / Line 24: @@
     * <label for="patron-name" i18n>Name</label><input id="patron-name" .../>
     * Beware repeatable components have unique form input IDs (extend id with incrementor, random(), etc.)
-  * Give images, buttons, etc. meaningful title attributes
+  * Give buttons meaningful title or aria-label attributes
+  * Give images meaningful alt attributes (alt="" is okay for decorative or redundant images; see the [[https://www.w3.org/WAI/tutorials/images/decision-tree/|W3C decision tree for alt text]])
+  * Test keyboard navigation with tab, shift+tab, arrow keys, and other keys as appropriate. Make sure that all buttons, links, and other interactive elements are focusable.
+    * The [[https://www.w3.org/TR/wai-aria-practices-1.1/|WAI-Aria Authoring Practices]] may help you determine the appropriate keyboard interactions for more complex widgets
+    * Don't add Bootstrap's "btn" class to unfocusable elements, like <span>s, <label>s, or <a>s that don't also have a "href" attribute.  Use a tag that is already focusable instead, like <button> or <a> with a "href" attribute.
@@ Line 33: / Line 37: @@
     * e.g. idl.service.ts and idl.spec.ts are in the same directory.
   * See Open-ILS/src/eg2/src/app/core/*.spec.ts files unit test examples of core services.
-  * The highest priority for unit test implementation are shared *.service.ts files since changes to these files have the broadest impact.
+  * The highest priority for unit test implementation are shared *.service.ts files, followed by shared components, since changes to these files have the broadest impact.