Features parsing block HTML-code screen access programs
The Internet unites many completely different people, including those whose presence among the users of their sites, many developers do not even suspect or simply do not think about. In particular, we are talking about people with missing or significantly impaired vision.
Since the site in its standard presentation is a collection of graphic materials, then its development, as a rule, is carried out with due regard for the visual perception of the presented data and visual control of the development results. However, for a blind user, two pages that are completely identical from a visual point of view may look different, which is largely determined by the order of the blocks in the source code.
More information about the principles of visually impaired users can be found in another material , here only the concept of presenting hypertext documents will be briefly described.
For significant visual impairments that do not allow to perceive information from the display directly, auxiliary software is used, which either reads the information aloud through speech synthesis, or displays it on a special tactile display in the form of a relief-point Braille font. Such software is called "screenreader" (in Russian, most often - "screen access program").
')
To present the content of a hypertext document, the screen reader independently (separately from the browser window) analyzes the source code of the page and displays it in a form that is accessible for perception using speech synthesis or a tactile display, while providing a number of additional features for non-visual hypertext navigation.
In fact, we are talking about the fact that the user has the opportunity to consistently read the contents of the page.
The problem lies precisely in the "sequence", as it is subjective. Modern web-design has moved away from structuring information like ordinary text. Structuring is used in two columns, three columns and so on.
To understand the problem, it is enough to open any page with a multi-column design and start reading the text presented on it, setting yourself the task to read absolutely all the content. Already after the header, the question arises: “In what order do you read the contents of the columns?” In essence, the developers of screen access programs encounter the same problems when they program the algorithms for building a stream of sequential reads. Of course, users of such programs have the ability to navigate through the elements of the page, but there is no way to quickly look at all the content, so the correctness of the block representation sequence in the reading stream remains relevant.
For example, consider the following page:
In this example, the page has a header and footer, and between them are two columns. The left column is a sidebar with sections of the site and has a certain size, and the right column contains the main content and its width is set automatically based on the width of the browser window. Plus, since this is a “rubber” layout, certain limits are set on compressing and stretching the common block of both columns, when reached, scroll bars will simply appear. In general, this is a fairly traditional layout model.
Next, you can do a little experiment by swapping the sidebar and main content blocks:
Despite the change of the code, visually the page remained absolutely the same, and the sighted user would not notice this at all.
However, as mentioned above, the screen access program parses the source code of the page and processes it into a stream view form, therefore, for it, these changes will be significant.
In the first case, the program will first read the header, then the sidebar, then the main content, and at the end the footer. In the second case, first there will be a header, then immediately the main content, only then a sidebar and at the end a footer.
Thus, screen-access programs traditionally use the order of presenting information in the form in which it is obtained by sequentially parsing the source code of a page. This means that with the layout of a multi-column layout, or any other content presentation scheme that leaves room for ambiguous interpretation of the reading order, the webmaster who wants to develop competently in all respects, including should take into account the order of blocks in the source code, building them accordingly the general intent of the page reading order. That is, for example, to transfer the sidebar code below the main content block, for reasons of simpler reading of the source code (the sidebar is alone everywhere and you do not need to scroll through it to view different main contents, etc.), it’s wrong, as this will cause a violation of the logic of presenting information for screen reader users.
Since the site in its standard presentation is a collection of graphic materials, then its development, as a rule, is carried out with due regard for the visual perception of the presented data and visual control of the development results. However, for a blind user, two pages that are completely identical from a visual point of view may look different, which is largely determined by the order of the blocks in the source code.
More information about the principles of visually impaired users can be found in another material , here only the concept of presenting hypertext documents will be briefly described.
For significant visual impairments that do not allow to perceive information from the display directly, auxiliary software is used, which either reads the information aloud through speech synthesis, or displays it on a special tactile display in the form of a relief-point Braille font. Such software is called "screenreader" (in Russian, most often - "screen access program").
')
To present the content of a hypertext document, the screen reader independently (separately from the browser window) analyzes the source code of the page and displays it in a form that is accessible for perception using speech synthesis or a tactile display, while providing a number of additional features for non-visual hypertext navigation.
In fact, we are talking about the fact that the user has the opportunity to consistently read the contents of the page.
The problem lies precisely in the "sequence", as it is subjective. Modern web-design has moved away from structuring information like ordinary text. Structuring is used in two columns, three columns and so on.
To understand the problem, it is enough to open any page with a multi-column design and start reading the text presented on it, setting yourself the task to read absolutely all the content. Already after the header, the question arises: “In what order do you read the contents of the columns?” In essence, the developers of screen access programs encounter the same problems when they program the algorithms for building a stream of sequential reads. Of course, users of such programs have the ability to navigate through the elements of the page, but there is no way to quickly look at all the content, so the correctness of the block representation sequence in the reading stream remains relevant.
For example, consider the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> </title> <style type="text/css"> .header, .sidebar, .content, .footer { padding: 10px; border: solid 1px #000000; background: #FFFFFF; } .header, .footer { font-size: 24px; } .layout { margin: 15px 0; overflow: hidden; min-width: 800px; max-width: 1200px; } .sidebar { width: 100px; float: left; } .content { margin-left: 135px; } </style> </head> <body> <div class="header"> </div> <div class="layout"> <div class="sidebar"> <h2></h2> <ul> <li><a href="link1.htm"> 1</a></li> <li><a href="link2.htm"> 2</a></li> <li><a href="link3.htm"> 3</a></li> </ul> </div> <div class="content"> <h1> </h1> <p> 1.</p> <p> 2.</p> <p> 3</p> </div> </div> <div class="footer"> </div> </body> </html> In this example, the page has a header and footer, and between them are two columns. The left column is a sidebar with sections of the site and has a certain size, and the right column contains the main content and its width is set automatically based on the width of the browser window. Plus, since this is a “rubber” layout, certain limits are set on compressing and stretching the common block of both columns, when reached, scroll bars will simply appear. In general, this is a fairly traditional layout model.
Next, you can do a little experiment by swapping the sidebar and main content blocks:
<div class="layout"> <div class="content"> <h1> </h1> <p> 1.</p> <p> 2.</p> <p> 3</p> </div> <div class="sidebar"> <h2></h2> <ul> <li><a href="link1.htm"> 1</a></li> <li><a href="link2.htm"> 2</a></li> <li><a href="link3.htm"> 3</a></li> </ul> </div> </div> Despite the change of the code, visually the page remained absolutely the same, and the sighted user would not notice this at all.
However, as mentioned above, the screen access program parses the source code of the page and processes it into a stream view form, therefore, for it, these changes will be significant.
In the first case, the program will first read the header, then the sidebar, then the main content, and at the end the footer. In the second case, first there will be a header, then immediately the main content, only then a sidebar and at the end a footer.
Thus, screen-access programs traditionally use the order of presenting information in the form in which it is obtained by sequentially parsing the source code of a page. This means that with the layout of a multi-column layout, or any other content presentation scheme that leaves room for ambiguous interpretation of the reading order, the webmaster who wants to develop competently in all respects, including should take into account the order of blocks in the source code, building them accordingly the general intent of the page reading order. That is, for example, to transfer the sidebar code below the main content block, for reasons of simpler reading of the source code (the sidebar is alone everywhere and you do not need to scroll through it to view different main contents, etc.), it’s wrong, as this will cause a violation of the logic of presenting information for screen reader users.
Source: https://habr.com/ru/post/191256/
All Articles