How to set priority for screen readers of some HTML page parts?

Question

I want to make my HTML page suitable for screen readers.

Currently, the page have 3 main parts: header, sidebar and content:

Screen readers read header at first, then sidebar and finally search results.

Unfortunately, users which has problems with eyesight wait for a long time while the program will read all side bar content (cause sidebar contain many filters). How can I set a bigger priority for search results? Cause search results should be read before the sidebar content.

And it will be great if someone provide me a HTML tutorial about what can I do to increase accessibility level of HTML pages:

• How can I change some DIV elements to be skipped by screen reader?
• How can I change a sequence of reading page content?
• How can I make readable only search form and search results (and a few links)?

Answer 1

Do not try to hide the content from screen reader users, they will want to get access to that content. Instead, you can add landmarks to your content areas. Screen readers will then be able to jump directly to the relevant portion of the page, including the results, but will still be able to get to the other controls when they need them.

If you can use HTML5, use the <header>, <aside> or <nav> and then the <main> elements for your header, filters and side navigation and search results respectively.

If you cannot use HTML5, then add role="banner", role="complementary", role="navigation" and role="main" to the wrapping elements of these regions.

As a best practice you should also add heading structure to the document (screen readers can navigate by these too) and a skip link (for sighted, keyboard-only users)

Answer 2

A common thing to do is have a "skip navigation" link which is an anchor reference down to where your real content begins. This allows screen readers to skip ahead.

<a href="#main" class="skip-navigation">Skip Navigation</a>

...

<h1 id="main">Search Results</h1>

If you want, you can style it in a way that will still be picked up by screen readers but invisible to normal browsers.

.skip-navigation {
  position: absolute;
  left: -5000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Answer 3

Problem was fixed with "aria-live" propery

Screen reader reads "aria-live" tag after each content changes. So, if user change text in search form - screen reader will read "aria-live" tag's content with ajax-loaded search results.

Tested with ChromeVox