The Modern Internet Through the Eyes of the Blind - Headings (supplement)

Foreword

In this article, I talked about increasing site accessibility for people with visual impairments using HTML headers. As I understand it, the article aroused interest in a certain category of readers, in this regard, I decided to continue writing articles on such topics and slightly deepen the topic of “Headings”. In this article, I suggest that the reader familiarize himself with some successful and not so good examples of using headers on web pages.

A bit about software

One person in the comments on my previous article was interested in the software that I use. I use Win 7 64-bit, Firefox 39 32-bit and Jaws 16 64-bit.

Attention

In this article, I use links to some commercial resources that I have been visiting or are visiting. These links are not advertising services and products that are placed on the pages of these resources. I need them as a good or bad example.
Also, the opinion I expressed in this article about these resources is my personal opinion and nothing more.

Some of the most popular web pages

As you know, the most visited pages are the pages of search engines, Yandex and Google. Let's start to study the domestic search engine.

I have a mailbox on Yandex, and I have been using it for a long time, but we will consider the page of an unauthorized user. The unauthorized page is very simple and quite convenient from the point of view of the blind. All sections of it are placed under headings of the second level, which is very convenient and makes it possible one of the fastest ways to get to the desired part of the page. I’ll give headings from beginning to end of the page: News -> Central Bank rates -> here the Yandex Music service advertisement -> Map of my city -> Weather (Apparently also in my city) -> Poster -> Services -> TV program -> Mail. One thing is not clear why the mail header is located at the end of this chain, because it is one of the most visited services. The only and main part of the page where you cannot quickly reach the headings is the search field.

On the page with search results, all ten (if you are authorized, you can increase their number on one page) links are second-level headings, which is very convenient. There are no more headings on the page, that is, you can safely navigate through the search results without fear of wandering into any jungle. Only one thing saddens, the word “Pages” does not stand out at all, that is, it is impossible to get to it by means of quick navigation, but the page numbers themselves are buttons, which makes it possible to get to them relatively quickly, on the same page there are about a dozen buttons.

On the main page of Google, everything is much more modest, if you are not an authorized user, then it will not be difficult for you to get to the search. And if authorized, then this task will become more difficult for several links. There are no headings on this page. On the search results page, everything is not as good as Yandex. In addition to ten links in the results, which is again convenient, for some reason it is made the title of the Google chart. There is also an absolutely meaningless heading “Search Results” and a more useful heading “Search along with it.” And here is the sadness, page numbers are the most common links. You can go to the links, but there are quite a lot of them on the page, so this is not a quick navigation.

The navigation of the pages of the two most popular search engines in this article is considered a little one-sided, since we do not consider the other elements that are found on web pages, we only consider the competent and not very use of headings and the convenience of their use.

Millions of people visit YouTube every day. So why don’t we listen to music and “watch” the video! In fact, the site is quite conveniently built. On the main page (I am an authorized user) we are greeted by the heading of the second level “Home”, and followed by “Subscriptions”, the third level. It is noteworthy that if you click on the subscription, we will go there, but we won’t be able to return through the “Home” heading, since the second-level heading “Home” has ceased to exist, and in its place is just a link. You can’t be so careless, comrades! We follow further. I draw your attention to the fact that we have not yet passed the menu on the left, which allows us to quickly bypass the entire top of the site, go to the headings and from them use the arrows to get to this menu, there are faster ways to get to it, but more about that in another article ... On the main page are new subscriptions and popular videos. Each channel name from subscriptions and each name of a popular video category are all second-level headlines. I forgot, there are still recommended channels, but their names are also headings of the same level, and along with the phrase “recommended channel”. Under each of these headings of the second level there is a thumbnail of the video, its name and date of addition. Each video title, in turn, is a third-level title. Under each of these headings of the second level there is a thumbnail of the video, its name and date of addition. Each video title, in turn, is a third-level title. Under each of these headings of the second level there is a thumbnail of the video, its name and date of addition. Each video title, in turn, is a third-level title.

Here it is necessary to clarify that Jaws allows you to click not only on all the headings on the page, but also on the headings of the desired level, from the first to the sixth (the availability of this feature was not checked by me in NVDA). Thus, you get the possibility of lightning fast navigation through all the videos on the page! We quickly step through the headers of the second level, select the channel, then immediately from the name of the channel we step through the third level, view the names of the video. Unfortunately, flipping through the headings of the third level, it is impossible to understand which channel they belong to. I think about YouTube is enough.

Lyrical digression

Today, commercial activity on the World Wide Web is growing more and more. Thousands of online store sites sell services and goods. In these electronic stores you can find things that are sold in a store on the next street, or you can find things that are not found in the whole city. This is very convenient when you order goods that cannot be bought in a regular store, and they deliver it to you by mail. The blind also begin to use this kind of shops, shops (we have very few of them) are especially popular in specialized goods. In these stores you can buy a lot of different household items, as well as writing accessories and paper (which in my opinion, as a student person, is very important).

Internet trading and its availability

In this part of the article we will not consider specialized goods stores, since everything is clear there, they have relatively high availability, they use a minimum number of graphic elements and a maximum of textual information. Here are people we are interested in (or careless), because they knew for whom they made sites, but they did not use any aria elements. We will quickly go over two interesting, but not without strangeness examples.

There is a very good store operating throughout Russia. Most system administrators and zhelezyachnik know about it - this is NYX. The site of this store is a very high-quality and detailed reference on components and electronics. A huge price list and a detailed study of filters and a search system - all this makes it very easy to find the necessary components. This example is one of the most important, since with such a price list size, headings are simply necessary. On this pageNarrator counted one hundred and seventy-five headlines and nine hundred links. The number of links varies slightly, but never below eight hundred. As you can see, there are a huge number of categories of goods; linear scrolling of this page can take up to ten minutes, if in a hurry, and if not in a hurry, then up to twenty. As you can see, there is a very huge difference in the number of links and headings, and this difference affects the time spent searching for the right category of products when using the quick navigation tools. But the same store has a huge oversight in terms of convenience. Everything is in order with the Moscow price list, but the regional ambush is in full swing! Here, for example, the NYX website in my city. We immediately throws it on the price list with local prices and here the headlines are completely absent! Rather, there are two pieces: "Certified Apple Product Specialists work in this store," because I am neither cold nor hot from this heading, but the second with the address of the store in the city. And on the page there are seven hundred and twelve links. Another problem is the hyphens facing all subcategories of products. Let's roughly round and count. Suppose there are only five hundred links in the price list with these hyphens, but each hyphen also has one keystroke. Thus 500 (links) + 500 (hyphens) = 1000 (keystrokes). Not fun arithmetic. I want to run away from such seemingly very informative and useful sites.

Second example. The DNS store is a fairly new network, for me it became known only in 2012. I must say right away that the price list here is also without headings, but here we look at the page with some product. The product was chosen absolutely by accident, it was on the main page, and I just went to the product description page. We are interested in exactly the product description page, they are all of the same type. I give this page as an example. Very convenient is the heading with the name and a brief description of the product, it is located above the price and the picture, this heading allows you to very quickly pass all the top of the site, which is useless in this case. The next heading (a very good advertising move) “Related Products” allows you to quickly go to covers, flash drives and other rubbish that a person may need when using this equipment. Further, “Reviews”, together with the number of reviews, which gives an idea of ​​the presence thereof immediately, without any gestures. Another useful headline is “Question - Answer.” It’s sad that you can’t quickly go to the specifications, but when you click on the “Features” link, which is located next to the “Description” and “Reviews” links, a page with the specifications opens, and the entire page does not reload. The textual description of the product may increase, and to bypass it directly from that link, you can go to the "Characteristics" heading. These are quite convenient navigation chains on this page.

In conclusion

I really hope that this article will help those of you who are engaged in web design, layout, website development, web interface development, to understand a small part of the principle of interaction of blind users with a variety of pages and pages on the network. Think over interaction scenarios not only for sighted users, but also for blind and others. Thank you for your attention.

Thanks Tseikovetsfor a helpful comment. Indeed, when writing this article, I did not properly mention the presence of a sufficiently large number of other scenarios for interacting with a web page using a screen reader. This inattention of mine allows me to interpret the way of adapting web pages, which is described above, as the only existing one, which is completely untrue. There are other means of quick navigation, by other elements, by areas that can be marked using aria tags, and other ways of interacting with web pages. This article describes only one of the possible page navigation scenarios. This article is not a guide or recommendations, it only reflects my personal opinion on the specific topic “HTML headings and their usefulness for navigating blind users on web pages”.

Note

The term "navigation chain" is taken from the program "Total Commander". This term most accurately describes the interaction between users using Narrator and web pages.