2

I am facing issues using Web Accessibility (using ARIA) with Backbone. When a view is getting rendered, automatically focus is going to that view and screen reader is reading that section in the order views are getting rendered. Is this the right behavior? I want to control this as I want screen reader to read the content the order I want. Please let me know your suggestions.

Ryne Everett
  • 6,427
  • 3
  • 37
  • 49

1 Answers1

1

If you are using templates for your views you can put your ARIA attributes in the HTML tag.

<ul role="tablist">
 <li id="ch1Tab" role="tab">
  {{data}}
 </li>
</ul>

as far as screen readers it reads it from top to bottom but it doesn't trigger it to read the page again.

here is a discussion on the approach Accessibility and all these JavaScript frameworks

Javascript is not an issue its the foundation of the markup that is rendered in the browser. w

Community
  • 1
  • 1
nolawi
  • 4,439
  • 6
  • 22
  • 45
  • Thank you Nol for the update, Here is the code I am re-rendering after change in combo box (combo box contains list of accounts). I want to refresh the view with out calling view. is this possible. Below function is called for each change in combo box acctRefresh: function(){ this.render(); acctHeadView.render(); acctFooterView.render(); /*$('#acctDetailSub').focus(); $('#acctDetail').focus(); $('#headChange').focus();*/ $('#modelName').val(selVal); } – user3593269 May 05 '14 at 16:47
  • My question was is there a way to update the view with out calling render function again as this is causing the problem. Looking similar to Angular binding. Thank you. – user3593269 May 05 '14 at 20:01
  • if you have an event .. like a click you can do something like this `$('.target').append(this.$el.html(this.template()))` but you need someway to trigger it – nolawi May 05 '14 at 20:07