StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
18654767
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-09-06T09:44:53.707
FavoriteCount
0
LastActivityDate
2013-09-06T09:44:53.707
LastEditDate
2017-05-23T11:46:58.490
LastEditorUserId
-1
OwnerUserId
431880
ParentId
18619186
PostTypeId
2
Score
6
ViewCount
0
LastEditorDisplayName
text
Body
<p>Taking the answer from <a href="https://stackoverflow.com/a/18631501/431880">@AlastairC</a>, and the comments below it. I've taken this a bit further now and am going with this as my solution going forward:</p> <hr> <h1>My go-forward solution</h1> <p>I found that just reading out the first heading wasn't really that useful. Especially if the last page you were on was a loading sequence. You can hear that there something new has been focused, but it's certainly not clear that this forms the part of a whole now page.</p> <h3>Add some useful, <em>descriptive</em> text to the page</h3> <p>As such I now have a single paragraph at the top of my page layout template. This includes a screen-reader friendly message, along with a very rough overview of what the page.</p> <pre><code><p class="screenreader-summary" tabindex="-1"> The <strong>Dashboard</strong> page is now on-screen. It contains several widgets for summarizing your data. </p> </code></pre> <p>Note that the <code>tabindex</code> value allows us to focus this element with JavaScript. <em>You might not want to use a <code>p</code> element for this, you can use anything you like really.</em></p> <h3>Hide it off-screen (optional, only required if it would break your design/readability)</h3> <p>This is then coupled with CSS to move this element off-screen:</p> <pre><code>.screenreader-summary { position: absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; outline: none; /* Important, don't show an outline on-focus */ } </code></pre> <h3>Focus this element, when a new page is shown on-screen</h3> <p>Finally, in the JavaScript code that shows your page on screen (e.g. in MarionetteJS using <code>onShow</code> or the <code>show</code> event):</p> <pre><code>$yourViewEl.find('.screenreader-summary').focus(); </code></pre> <h1>The result</h1> <p>I'm a sighted person, so take what I say with a pinch of salt - however I found that reading out a short description is <em>so</em> much more useful.</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POTell screen reader that page has changed in Backbone/Angular single-page app
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. USisNaN1247
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

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.