In the following article, you will learn how websites can be designed to be barrier-free and accessible to the disabled.
Structure
The new website, which we have created for OWB, serves as a practical example. The OWB is a non-profit organization that provides employment, housing, leisure and education services for people with mental and multiple disabilities in and around Ravensburg. The goal of the workshops is to convey as many employees as possible to the general labor market. The employees go through individually-tailored qualifications, ranging from the simplest hand movements to highly qualified activities. The existing presence of the OWB was a "grown" website, the structure of which was based on internal interrelationships and was difficult for the viewer to see through.
The new language
The design seemed to be overtaking, the language dissociated. Image material was sparse and tiny in use. Our task was to create an Internet presence that reflects everyday life at OWB in order to attract new employees for the offered workshop jobs. The challenge was therefore to make the content especially accessible to this target group.
The texts
We decided to keep the hierarchy of the website as flat as possible to ensure easy navigation. To this end, we have divided all the contents of the existing website as well as the current print brochures into their components and written on colored moderation cards. Four main areas emerged, which were mixed in the initial materials: work, housing, leisure and education. We decided to use this as a new layout of the website and assigned the cards to these four areas.
Pre-reading software
In a meeting with the customer, we reproduced this result, which had the opportunity to contribute further wishes and topics as well as outdated information. This quickly created a structure that met the target group as well as the company's interrelations. In total, we came up with three hierarchical levels, with four core areas of work, housing, leisure and education even with only two levels.
During the subsequent workshop round-trip and a joint meal in the Werkskantine, we gained valuable insights into the daily routine of the employees. The people were in a good mood, the deal was open and friendly, management and staff sat at the same table at lunch. At work, the employees were highly concentrated and professional. This mood, so we decided together with the customer, was to capture the speech.
While on the existing website and in the brochures mainly the people with disabilities were spoken and in many photos the caretaking persons were in the foreground, the new website should put the handicapped people completely in the foreground, as we did in the Ravensburg: open, straightforward and friendly, always with the matter and expert.
For the head of the pages, we preferred to look at photographs where people were smiling at the viewer. We selected the image in each case so that the face occupies a large space. Close-ups of faces give empathy to the viewer. And the identification of the viewer with the person pictured is a first step in winning new workshop staff.
For many people with learning difficulties, reading longer texts is very stressful. Therefore, we decided to work with narrative sections in the content area in order to describe details of individual workshop workplaces or housing possibilities. These pictures are intended to show concrete situations and processes to give an accurate impression, even if you do not want to read or read the associated text.
At this point, the visual language is a different one: a neutral observing perspective from which the activities and the environment are brought to the fore. Users can navigate through the images in three ways: You can click on the arrows as well as the picture numbers on the left margin, but you can also easily navigate with the arrow keys on the keyboard.
As I said at the beginning, the texts on the existing website and in the brochures were very distant. The new lyrics should sound objective but not distant. This was achieved by a direct address from the reader. We worked together with a professional copywriter - an investment that is always worthwhile, but is rarely done. Easily understandable texts are at the heart of every good website.
In addition, a comment: Adult people - whether with or without disabilities - are first welcomed. Unfortunately, because of the supposedly childlike nature of some people with learning difficulties, some people feel tempted to go as soon as you go. This is rude and could get wrong with the reader.
Accessibility also has a lot to do with respect. In addition, we also translated the texts into "light language". Light language is a fixed term for a highly simplified language and grammar. It is defined by short sentences with only one statement per sentence. As short as possible, simple terms are used, difficult words are immediately explained in the text.
Videos and subtitles
Composite words are separated by hyphens, for example, "Bind-stroke". In addition typographic subtleties such as syllable separation and initial are dispensed with in favor of better readability. Light language is thus clearly different from simple language and colloquial language. It is specifically geared to a target group with greater difficulties in reading and capturing texts. A complete web page in plain language, however, would be strange and would be unfamiliar to most.
Light language should therefore be treated as a foreign language. For our web project, we have set up two language versions, using a classic language switch. It was important to us that the pages should be translated completely in light language and not just a few evaporated paragraphs.
Alternative
Accessibility also means making all information accessible to everyone, not just a part. The OWB formed a workgroup "Light Language" from the workshop staff, which tested our texts and provided helpful suggestions for improvement. So we could be sure that the final texts of the main target group could be well understood.
In order to make it easier for the visitors of the site to capture the texts, we installed the reading software ReadSpeaker. It should be noted that the use of a pre-reading software does not release web developers from making their project accessible to people with visual impairments.
A pre-reading software does not cover the entire range of functions of a screen reader, ie, it does not provide the possibility to navigate within the page or between individual browser windows. Screenreaders are used with a wide range of operating systems and with an irrational reading speed. For a blind person, switching to a reading software such as ReadSpeaker would be as if Sebastian Vettel had to dash on the bus.
The launch. And then?
For our target group of people with learning difficulties, ReadSpeaker is a great help in reading the texts. After clicking on a loudspeaker icon, ReadSpeaker reads the page or section. Individual sentences and words can be read separately.
The user selects between three reading speeds. The respective active sentence and the currently read word are highlighted in color so that the reader can orient himself in the text at any time. Our test persons got along well with the ReadSpeaker and found the reading function helpful.
Technically, as a front-end developer, you simply bind a Javascript and place a class on the page you want to read, which is usually the actual content area.
This prevents other side elements such as navigation or advertising from being read. You can use any number of instances on a page, so you can have separate elements, such as teas, read out separately. The current version of the ReadSpeaker is no longer based on Flash and is compatible with iPad, iPhone and newer Android devices. Flash is only used as a fallback.
ReadSpeaker supports a variety of languages, which makes reading sounds pleasant. Feedback on incorrect pronunciation of individual words is welcome by the personal service adviser and the pronunciation is corrected promptly, often already overnight. A clear recommendation!
At the moment, small image films are being produced over individual areas of the OWB, which we integrate into the website. In the question about the platform, our choice fell on YouTube because, unlike Vimeo and other vendors, it was possible to subtitle the videos.
In video subtitling "open captions" and "closed captions" are differentiated. Contrary to the term "open" suspects, open captions are not the means of choice. These are subtitles, which are fixed in the picture information. They are always visible, can not be switched off and are not machine-readable.
Other closed captions: Here is a separate text file, which is only synchronized with the video. Subtitles can be switched on or off as desired, several language versions are possible, and the texts are machine-readable. In addition, you will automatically receive a complete transcript, which will be displayed on YouTube when you watch the video in real-time. Single lines can be clicked to jump to the relevant location in the video. YouTube also provides a feature to automatically subtitle videos - admittedly (still) with different results.
Our videos worked surprisingly well, despite Swabian dialect we had comparatively little to improve. Mostly, these were their own names, abbreviations and colloquial expressions. The subtitling of YouTube on YouTube is extremely convenient: the logged-in user can correct the texts of his video directly when viewing them in real-time and, if necessary, adjust the times. So Videountertitel must not be a question of the budget.
The more the effect of a website is based on the image material, the more important the alternative texts become. Does the person look happy? Is the machine on which the person is working large or small? All this is important information to support the statement of the website. Anyone who has invested in the content up to now should not stop using alternative texts.
The argument that blind people were not part of the target group does not count. First, neither web developers nor contractors decide what a blind person is interested in. Secondly, you could be blind tomorrow, and would still be one of the other target groups.
By the way, ReadSpeaker reads - just like the "real" Screenreader alternative texts. This can also help viewers to better understand the photos.
After months of work, finally, the final release, the launch, the CMS training - and then the transfer of the access data to the future editors. Quickly make some screenshots before!
In fact, it is a great challenge to continue the achievement of the same quality. These are the texts, which must be maintained in parallel in both language versions. There is the elaborate picture language and the one photo you would like to see on the site, but it does not fit. And then quickly a new video must go online - the subtitles can be made later. One focus of each training must therefore be to create a clear understanding of the purpose and purpose of each and every component of the website.
Technical questions regarding the CMS, on the other hand, are not as important as they can be answered by phone or email. A good solution is to close a contract with a customer for an hourly bid, within which you can check the website regularly, give tips to the editors, or even make minor improvements.
Without continuous quality assurance, a once barrier-free web site will not be recognizable again after a while, as "soft" factors such as appropriate picture language or quality of the alternative texts can not be tested automatically.
No comments:
Post a Comment