Posted By

brettb on 10/29/10


Tagged

accessibility designpattern


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Tyster


Aria in Widgets


 / Published in: JavaScript
 

Reusable function to create an aria alert for any widget and provide a better abstraction to setting its innerHTML.

  1. //within a widget:
  2. X.Widget.X = function(data, instanceID){
  3. this._ariaAlert = (function(widgetID){
  4. var widget = document.getElementById(widgetID),
  5. ariaAlert = document.createElement("div");
  6. ariaAlert.setAttribute("role", "alert");
  7. ariaAlert.className = "rn_ScreenReaderOnly";
  8. if(widget)
  9. YAHOO.util.Dom.insertBefore(ariaAlert, widget.firstChild || widget);
  10. return function(alertText){
  11. ariaAlert.innerHTML = alertText;
  12. };
  13. })("rn_" + this.instanceID);
  14. // ...
  15. };
  16.  
  17. X.Widget.X.prototype = {
  18.  
  19.  
  20. _someMethod: function(){
  21. this._ariaAlert("loading new content");
  22. // ...
  23. this._ariaAlert("");
  24. }
  25.  
  26. };
  27.  
  28.  
  29. //OR
  30.  
  31.  
  32.  
  33. //Within namespace:
  34.  
  35. X.UI = {
  36. // ...
  37.  
  38. createAriaAlert: function(widgetID){
  39. var widget = document.getElementById(widgetID),
  40. ariaAlert = document.createElement("div");
  41. ariaAlert.setAttribute("role", "alert");
  42. ariaAlert.className = "rn_ScreenReaderOnly";
  43. if(widget)
  44. YAHOO.util.Dom.insertBefore(ariaAlert, widget.firstChild || widget);
  45. return function(alertText){
  46. ariaAlert.innerHTML = alertText;
  47. };
  48. }
  49. // ...
  50. };
  51.  
  52. //then using it within the widget:
  53.  
  54. X.Widget.X = function(instanceID, data){
  55. // ...
  56. this._ariaAlert = X.UI.createAriaAlert("rn_" + this.instanceID);
  57. // ...
  58. };
  59.  
  60. X.Widget.X.prototype = {
  61. _someMethod: function(){
  62. this._ariaAlert("Loading");
  63. // ...
  64. this._ariaAlert("");
  65. }
  66. };

Report this snippet  

You need to login to post a comment.