10

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

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

enter image description here

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)?
bmalets
  • 3,207
  • 7
  • 35
  • 64
  • This is only a partial answer, but using HTML5 elements like header, footer, nav, aside, article and section will help your cause. In addition, make sure to utilize aria landmark roles (role="search", role="navigation", role="main", etc.) on appropriate div elements. – cfnerd Jun 10 '15 at 18:07
  • May I ask why you are trying to do these things? – unobf Jun 10 '15 at 18:15
  • @unobf because I have a big list of search filters and users want to hear search results at first – bmalets Jun 10 '15 at 19:00
  • @unobf that's why I want to skip header and sidebar when search results is founded – bmalets Jun 10 '15 at 19:04

3 Answers3

4

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)

unobf
  • 7,158
  • 1
  • 23
  • 36
0

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;
}
Brad
  • 159,648
  • 54
  • 349
  • 530
  • thanks @Brad, but what about `div` tags? will it be skipped as link if contain `skip-navigation` class? – bmalets Jun 10 '15 at 17:17
  • 2
    HTML5 provides tags like `header`, `aside` and `article` which adds semantic meaning to a web page. Along with the skip links, these can also used for a better accessible page. – Pratap Jun 10 '15 at 17:44
  • @bmalets The `skip-navigation` class here is only for styling. You don't need to use it. The whole action here is that you have a link to an on-page reference. – Brad Jun 10 '15 at 20:29
0

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

bmalets
  • 3,207
  • 7
  • 35
  • 64