Modern Internet with the eyes of the blind - Headers (addition)

Foreword

In this article, I talked about making the site more accessible to people with visual limitations 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 subjects and to slightly deepen the topic of “Headers”. In this article, I suggest the reader become familiar with some successful and not-so-great examples of using headings on web pages.

A little about software

One person in the comments to 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 visit or visit. These links are not advertising services and products that are posted on the pages of these resources. I need them as a good or bad example.
Also, the opinions expressed by me in this article about these resources are my personal opinion and no more.
')

Some of the most popular web pages

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

I have a box on Yandex, and I have been using it for a long time, but we will consider the page of an unauthorized user. Unauthorized page is very simple and quite convenient from the point of view of the blind. All sections of it are placed under the headings of the second level, which is very convenient and allows one of the fastest ways to get to the right part of the page. I will cite the headlines from the beginning to the end of the page: News -> Central Bank Courses -> here is the advertisement of the Yandex Music service -> Map of my city -> Weather (Apparently also in my city) -> Poster -> Services -> TV program -> Mail. Only 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 the main part of the page where it is impossible to quickly get through the headings is the search field. On the page of the authorized user there are no differences in navigation.

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

On the main page of Google, everything is much more modest, if you are not an authorized user, then you will not be difficult to get to the search. And if authorized, this task will become more difficult for several links. There are no titles on this page. On the search results page, things are not as good as those of Yandex. In addition to the ten links in the results, which is again convenient, for some reason, made the title of the chart "Google". There is also a completely meaningless heading "Search Results" and a more useful heading "Searching 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 few of them on the page, so this is not a quick navigation.

Navigating the pages of the two most popular search engines in this article is a little one-sided, because we do not consider other elements that are found on web pages, we only consider the correct and not very use of headlines and ease of 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 comfortable built. On the main page (I am an authorized user) we are met by a second-level headline “Home”, followed by “Subscriptions”, the third level. It is noteworthy that if you click on the subscriptions, then we will go there, but we will not be able to return via the “Home” heading, since the second-level heading “Home” has ceased to exist, and just the link has remained in its place. You can not be so careless, comrades! Follow on. 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 headers and use the arrows to get to this menu, there are faster ways to get to it, but this is covered in another article ... On Home page are new from subscriptions and popular videos. Each channel name from subscriptions and each category name of popular videos are all second level titles. I forgot, there are still recommended channels, but their names are also headlines of the same level, and with the phrase “recommended channel”. Under each of these second-level headlines there is a thumbnail of the video, its title and the date it was added. Each video title in turn is a third level heading.

Here it is necessary to clarify that Jaws allows you to go through not only all the headings on the page, but also the headings of the desired level, from the first to the sixth level (I did not check for this possibility in NVDA). Thus, the possibility of lightning-fast navigation through all the videos on the page! Quickly step through the headers of the second level, select the channel, then immediately from the name of the channel step along the third level, review the video title. Unfortunately, flipping through the headers of the third level, it is impossible to understand what channel they belong to. I think about YouTube is enough.

Lyrical digression

Today, increasing commercial activity in the world wide web. Thousands of sites online stores sell services and products. In these electronic stores you can find things that are sold in a shop in a nearby street, or you can find things that are not in the whole city. It is very convenient when you order a product that cannot be bought in a regular store, and it is delivered to you by mail. Blind people, too, are beginning to use this kind of stores, stores that are of particular popularity (we don’t have a lot of them) specialized products. 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 person’s student, is very important).

Online trading and its availability

In this part of the article, we will not consider stores of specialized goods, because everything is clear there, they have relatively high availability, they use the minimum number of graphic elements and maximum textual information. Here we have interesting people (or careless), they knew for whom they made websites, but they didn’t use a single element of aria. We will quickly go over two interesting, but not without odd examples.

There is a very good store working throughout Russia. Most system administrators and hardware managers know about it - this is NIX. The site of this store is a very high quality and detailed reference for components and electronics. A huge price list and a detailed study of filters and search systems - all this greatly facilitates the search for the necessary components. This example is one of the most important, since with this size of the price list, headlines are simply necessary. On this page, the screen announcer counted one hundred and seventy-five headlines and nine hundred references. The number of links varies slightly, but is never below eight hundred. As you can see, there are a huge number of product categories; on a linear scrolling through this page it can take up to ten minutes, if in a hurry, and if not in a hurry, then to twenty. As you can see, there is a very huge difference in the number of links and headers, and this difference greatly affects the search time for the desired product category when using fast navigation tools. But this store also has a huge oversight in terms of convenience. With the Moscow price list, everything is in order, but with the regional full ambush! Here, for example, the site NIKS in my city . We are immediately thrown on the price list with local prices and then the headlines are completely missing! Rather, there are two things “Certified Apple product specialists work in this store,” because I am neither cold nor hot from this heading, and the second with the address of the store in the city. And on page seven hundred and twelve links. Another problem is the hyphens facing all subcategories of goods. Let's roughly round and count. Suppose there are only five hundred references in the price list with these hyphens, but for each hyphen there is also one keystroke. Thus 500 (links) + 500 (hyphens) = 1000 (keystrokes). Not fun arithmetic. I want to run from such seemingly very informative and useful sites.

The second example. DNS Store is a fairly new network, for me it became known only in 2012. I must say that the price list here is also without headlines, but here we will look at the page with some product. The product was chosen absolutely by chance, it was on the main page, and I just went to the product description page. We are interested in the product description page, they are all of the same type. For example, cite this page . A title with a name and a brief description of the product is very convenient, it is above the price and picture, this title allows you to very quickly bypass the top of the site, which is useless in this case. The following heading (a very good advertising move) "Related Products" allows you to quickly go to the covers, flash drives and other rubbish that a person might need when using this technique. Further, "Reviews", along with the number of reviews, which gives an idea of ​​the presence of these immediately, without any gestures. Another useful title is “Question - Answer”. It is sad that you can not quickly go to the characteristics, but when you click on the link "Characteristics", which is located next to the links "Description" and "Reviews", a page with characteristics opens, and the whole page does not reload. The text description of the product may increase, and in order to pass it directly from that link, you can go to the heading "Characteristics". These are quite convenient navigation chains on this page.

As a 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 various pages and pages on the web. Think over interaction scenarios not only for sighted users, but also for blind and others. Thank you for your attention.

Thanks to Tseikovets for the helpful comment. Indeed, when writing an article, I did not properly mention the presence of a sufficiently large number of other scenarios of interaction with a web page using a screen reader. This inattention of mine allows me to interpret the method of adapting web pages, which is described above, as the only existing one, which is completely untrue. There are other quick navigation tools, other elements, areas that can be tagged with aria tags, and other ways to interact with web pages. This article describes only one possible page navigation scenario. This article is not a guide or recommendation, it only reflects my personal opinion on a specific topic “HTML-headings and their usefulness when navigating blind users on web pages”. Each person who has read the article decides whether the article was useful for him or not, whether he will apply the knowledge that he has learned from this article or not.

Note

The term “navigation chains” is taken from the Total Commander program. This term most accurately describes the pattern of interaction between users using Narrator and web pages.