Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Overall, you should not need to trigger a 're-read', and depending on your UI that might not be a good thing anyway.</p> <p>My experience has been with angular.js (as an accessibility person rather than the developer), and our overall approach was to manage the focus rather than trigger a re-read. (We do extensive accessibility testing.)</p> <p>The key thing from a UI point of view (primarily for screen reader users) is that selecting a link (e.g. <code>about.html</code>) should take you somewhere.</p> <p>In this case the appropriate place to put the focus would be the top of the content area of the about 'page', hopefully an <code>&lt;h1&gt;</code>.</p> <p>In order for that to work the target element should be focusable via a script, so probably needs <code>tabindex</code> unless it is a link or form control:</p> <pre><code>&lt;h1 id="test" tabindex="-1"&gt; </code></pre> <p>The <code>-1</code> means it is <em>not</em> in the default tab order, but is focusable via a script. See more at <a href="http://www.w3.org/TR/wai-aria-practices/#focus_tabindex">WAI-ARIA authoring practices</a>.</p> <p>Then at the end of the function that loads the new content, including the tabindex attribute, add something like:</p> <pre><code>$('#test').attr('tabindex', '-1').css('outline', 'none'); $('#test').focus(); </code></pre> <p>When adding <code>tabindex</code> dynamically it is best to do so in a line before the <code>focus()</code> function otherwise it may not work (I remember that from testing with JAWS).</p> <p>To test this I would use either:</p> <ul> <li>NVDA &amp; Firefox, Windows</li> <li>Jaws &amp; IE, Windows</li> </ul> <p>It is also good to test with VoiceOver on Safari/OSX, but that works differently and may not hit the same issues as a windows based screen reader.</p> <p>You will hit a lot of issues with Chrome/NVDA as that is not supported very well, and end-users are very unlikely to use that. IE is ok with NVDA, but <a href="http://community.nvda-project.org/wiki/ApplicationSupport">Firefox is best</a>.</p> <p>Overall, it is worth getting to know the WAI-ARIA authoring practices, particularly <a href="http://www.w3.org/TR/aria-in-html/">Using ARIA in HTML</a>. Even though you are using a JS app, the browser (and therefore screen reader) is interpreting the resulting HTML so that advice is still relevant.</p> <p>Lastly, if you are updating page content <strong>without</strong> the user pressing space/enter to activate something, you might find that JAWS/NVDA do not know about the new content as their 'virtual buffer' has not updated. In that case, you might need to add a <a href="http://juicystudio.com/article/making-ajax-work-with-screen-readers.php">JS shim to make them update</a>, but only do that if you run into problems in testing, it should not be a global patch.</p>
    singulars
    1. This table or related slice is empty.
    1. POTell screen reader that page has changed in Backbone/Angular single-page app
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USFelipeAls
    1. USAlastairC
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POTell screen reader that page has changed in Backbone/Angular single-page app
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI had *just* started writing a similar write-up so thanks for saving the time! Having tried out various solutions in NVDA and VoiceOver I came to the same conclusion. In my backbone application I now have a handler that is triggered each time a route is fired, which finds the first heading - sets the tabindex to -1 and focuses: `$(':header:first').attr('tabindex', '-1').focus();`
      singulars
      1. PO
      1. USisNaN1247
    2. COSlightly tweaked code, to hide the outline on header: `$(':header:first').attr('tabindex', '-1').css('outline', 'none').focus();`
      singulars
      1. PO
      1. USisNaN1247
    3. COGreat stuff. Be careful including the `tabindex` and `focus` in the same line though, we found that didn't work unless the `tabindex` was assigned in a line before `focus`.
      singulars
      1. PO
      1. USAlastairC
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload