On the development of a special version of the State Duma website for people with visual impairments

From a series of articles about updates on the State Duma website. Previous: first , second and third .

In early December, a special version of the State Duma website for people with visual impairments was launched. We would like to share information about the features of the development of such sites.

Address of the special version: spec.duma.gov.ru
')
The whole development of a special version can be logically divided into 4 stages:

1. Analysis of current standards and GOSTs;
2. Analysis of existing solutions;
3. Generalization of the analyzed data;
4. Site development.

But first, let us give some figures on the problem of vision in Russia and the world.

Some statistics

According to the World Health Organization, there are about
39 million blind people and 246 million with poor eyesight. [7]

The number of registered blind and visually impaired people in Russia is 218 thousand people, of whom absolutely blind are 103 thousand (data for 2009). Of this amount, 22% are young people of working age, i.e. almost one in five of all blind and visually impaired. [9]

There is another category of people with visual impairment - color blindness. Color blindness or color blindness is a hereditary (less commonly acquired) feature of a person’s vision, consisting in the inability to distinguish one or more of the three main colors (red, green, blue). Such people are from 4 to 8 percent of the total population, and the percentage of the disease in the weak half is no more than 1% [4] .

Analysis of current standards and GOSTs

Actually, there is only one GOST on this topic - GOST R 52872-2007 “Internet resources. Accessibility requirements for the visually impaired. ” His main points are as follows [8] :

• For the full access of visually impaired people to Internet resources, information should be presented in the form of text;
• Images must be accompanied by explanatory text, since access to graphic files for blind users in most cases is impossible or much more difficult;
• Tables should not have a large degree of nesting, because access to the information presented in the tables is carried out sequentially, in accordance with the table cells;
• One table should have no more than 15 cells. The level of nesting of one table into another should be no more than three;
• One table should have no more than 15 cells. The level of nesting of one table into another should be no more than three

The W3 Web Content Accessibility Guidelines (WCAG) 2.0 standard or, in Russian, Web Content Accessibility Guidelines is truly comprehensive and well-developed.

This standard is based on 4 basic principles [6] :

1. Perceptibility . Information and components of the user interface should be presented to the user in such forms that he is able to perceive;
2. Operability . The user should be able to handle all the components of the user interface and navigation;
3. Clarity The operation of the user interface and information should be clear to the user;
4. Reliability Content should be equally well interpreted by a wide range of web browsers, including special browsers for people with disabilities.

We give the main points for each of them.

Perceptibility

• The visual representation of the text (or the text in the figure) must have a contrast level of at least 4.5: 1;
• Text size (with the exception of headings and text as an image) can be increased at least 2 times without using special assistive technologies, while the functionality should not be lost, and the user will not need to resort to horizontal scrolling to read a line of text;
• The user should be able to select the background color and the text color;
• The width of the text block should not exceed 80 characters or characters.
  the typeface used;
• Justified text is not allowed;
• We recommend at least one and a half line spacing and
  the distance between paragraphs of the text is at least one and a half times longer than the line spacing.

Operability

• All the functionality of the website should be accessible using the keyboard;
• The user should be provided with easy navigation, easy content search and simple determination of the current location of the page relative to the main page of the site;
• It should be possible to skip blocks duplicated on each page with
  the ability to go to the main content of the page;
• The current focus, when operated via the keyboard, must be visible;

Clarity

• Content must be readable and understandable;
• The language of the page text must be set programmatically ( <html lang="fr"> );
• In the text or in the glossary after the text, definitions should be given
  rare words, unusual combinations of words, abbreviations, abbreviations, etc.
  ( <acronym> <abbr> );
• Web-stars should be formed and "behave" predictably;
• The user should be provided with assistance in data entry: verification and
  error messages, signatures and instructions for filling in the fields, context-sensitive help;

Reliability

• The website being developed should be compatible with various browsers and platforms, both current and future ones, including special assistive technologies and tools for people with disabilities.

How do visually impaired users use the Internet?

Fully blind users use special programs that perform speech synthesis from the page text, so-called screen readers, which “read” the content of the web page to the user, analyzing the html markup and deselecting what needs to be read and what is not. Another type of such programs are Braille displays (in the figure below), consisting of a reader program and a special device, on the body of which there is a certain number of braille-type cells for submitting and receiving commands from a screen reader on a computer.



Visually impaired users use common browsers in conjunction with programs that increase part of the screen, or use the browser scaling tools or mechanisms that the website developers provided. Also, such users often use the so-called text browsers, which present the content of the website as text.



Users with color blindness (color blindness) use regular browsers, but with certain system color settings that allow them to redefine standard colors with their own to compensate for the missing colors of the spectrum. But, often, users are not aware that such settings can be applied.

Analysis of existing solutions

We have studied the methods and practices, as well as the successful implementation of versions of sites for people with visual impairments both in the global Internet and in the Russian-speaking part of it.

Like politics, in our case Russia has its own way.

Abroad, as a rule, the following scheme operates: the site is initially developed according to
all standards and recommendations, and for people with disabilities, they place a prominent Accessibility link, clicking on which informs the user about compatibility standards, special programs for better interaction, etc.

This scheme has its advantages: the support of the site is simplified, and in general, a site created by standards is always good for both users and search engines.

But, definitely, there are also disadvantages of such a scheme: there are no clear and understandable settings for users; The site structure is not simplified, which makes it difficult for users with visual impairments to work with it.

Another scheme has taken root in Russia - along with the usual version of the site, a “special” version is being developed for people with disabilities. On the main page of the main site is a link to the "special" version.

Advantages of this approach: the user can customize the presentation of the content of the special version of the site directly on the page; in the “special” version of the site navigation is greatly simplified; The main content is displayed in one column, which facilitates access to it for users with various health restrictions.

There are also disadvantages to this approach: the site support becomes more complicated, since you need to accompany two versions of the site, although with the correct architecture of the site, this drawback can be avoided; there are additional development costs; It happens that users have an opinion that the “special” version is supported secondarily, and the content on such a version may not always be relevant.

We chose the second way in the form of creating a specialized version of the site, but at the same time I would like to note that the “main” version of the State Duma site fully complies with the W3C XHTML 1.0 Strict standard.

Further, some technical details of the implementation of the version for users with visual impairments.

Generalization of the analyzed data and website development

The structure of the pages of the “main” site was significantly simplified: the auxiliary information blocks were removed, and the main content was placed in the center of the workspace in one column.

The main menu has also been simplified: the main points are placed in prominent places. Because the menu is repeated on each page; the first link on the website is to “go to the main content” so that screen reader users can go directly to the page content by skipping the navigation block.

For the convenience of users, three font size options have been formed, which can be selected from the settings menu. In addition, the user can scale the text size by means of the browser, all text sizes are indicated in relative units (% or em).



The CSS provides 3 variants of the site color schemes. Two standard color schemes: “black text on a white background” and “white dough on a black background” with maximum contrast levels, and a color scheme for people with color blindness: “light yellow text on a dark blue background”, which also has a large contrast level. Buttons to control this functionality are also on the settings panel.



In the future, you can add other high-contrast color schemes, which are shown in the figure below. The table shows two-color schemes (on the left - how people with normal vision see them, on the right - how people with color blindness see them) [4] .



The settings panel has the ability to enable / disable display of images, as well as functions for selecting the font type (with or without serifs) and the interval between pairs of characters (kerning), which can be significantly affected by the text readability, especially with large font sizes.

To the above, you can add a few general tips:

• It is necessary to avoid unnecessary page reloads, because of which the “voice acting” of the page in screen readers begins anew;
• Simplifying the structure of the site and displaying the content in one column, we thereby simplify access to it from specialized devices;
• Some screen readers read the text from the header to the header (the user can customize this parameter independently), so you need to more actively use the headings and highlight in the text - this will simplify the understanding of the content by the user [3] ;
• Most users of screen readers do not use the mouse and are completely dependent on keyboard controls, so it is very important to ensure full control over site navigation using it [3] [6] .

Used materials

1. Designing for Screen Reader Compatibility webaim.org/techniques/screenreader
2. Joe Clark. Big, Stark & ​​Chunky www.alistapart.com/articles/lowvision
3. Mary Frances Theofano, Janice (Ginny) Redis. Guidelines for Accessible Web Sites: http://www.redish.net/images/stories/PDF/InteractionsPaperAuthorsVer.pdf
4. Pabini Gabriel-Petit. Color-Deficient Vision www.signmatters.com/mt/archives/2007/02/ensuring-accessibility-for-people-with-color- deficient-vision.php
5. Trenton Moss. What is web accessibility? www.alistapart.com/articles/wiwa
6. Web Content Accessibility Guidelines (WCAG) 2.0 www.w3.org/TR/WCAG
7. World Health Organization. Visual impairment and blindness www.who.int mediacentre / factsheets / fs282 / en / index.html
8. GOST R 52872-2007 “Internet resources. Accessibility requirements for the visually impaired. ” www.web-canape.ru/img/file/GOST-52872-2007.pdf
9. HoneyNews. 45,000 Russians annually get disabilities on vision. Medportal.ru/mednovosti/news/2009/10/07/blind