Applying the Web Content Accessibility Guidelines

Transcription

1 Applying the Web Content Accessibility Guidelines Gauderon Frédéric cand. MA in Information Systems Course Electronic Business University of Fribourg, Switzerland Gauderon Frédéric Windhalta Tafers Tafers,

2 Contents Contents 1 Preface WCAG The document The Guidelines Provide equivalent alternatives to auditory and visual content Don't rely on color alone Use markup and style sheets and do so properly Clarify natural language usage Create tables that transform gracefully Ensure that pages featuring new technologies transform gracefully Ensure user control of time-sensitive content changes Ensure direct accessibility of embedded user interfaces Design for device-independence Use interim solutions Use W3C technologies and guidelines Provide context and orientation information Provide clear navigation mechanisms Ensure that documents are clear and simple General about Barrier-free website Assistive technologies for disabled person Screen Reader Braille terminal Legal terms in Switzerland Case Study (Main Website of University Fribourg) (Faculty of economy and social) diuf.unifr.ch/is (Information Systems Research Group) (Swiss Federal Authority) (Swiss Television) (Newspaper)...9

3 Contents (Newspaper) Best practices Separation of design and content Cascading Style Sheets Understandable link text Headers and structure of a page Good alternative text WCAG The Guidelines Critic about WCAG Conclusion...18 Bibliography...19

4 1 Preface 1 Preface The Web Content Accessibility Guidelines (WCAG) are recommendations of the World Wide Web Consortium (W3C) to make the content of web documents accessible, particularly to disabled users but also for other user agents like mobile phones. The current version of the recommendations was published on May 5, These guidelines were required because the Internet became more and more important and the pages more complex and graphical. For users who need assistive technologies to access web, it is difficult to understand and to orient on documents that do not follow some conventions. The guidelines are only recommendations and nobody can be engaged to accept and fulfill them. But many governments accepted the WCA-Guidelines and often apply them for the web pages of the state and their public organizations (ex. Germany, Switzerland). In Switzerland the law regulates that all websites of the government and public organizations must be accessible for all users. This directive is based on article 8.2 of the federal constitution, which says that it is not allowed to discriminate people because of a physical or psychical disability. The successor of the guidelines, the WCAG 2.0, has at the moment only the status of a working draft, which was published on December 11, The version 2.0 is in fact necessary since years, because some of the guidelines of version 1.0 were quickly outdated. This paper describe first of all in chapter two the WCA-Guidelines of version 1.0 and gives some general informations about barrier-free websites in chapter three. In the fourth chapter a small case study analyzes seven websites on how they are applying the guidelines. In chapter five some easy to implement basic rules about making web documents more accessible were given. Chapter six deals with the version 2.0 of the guidelines. 1

5 2 WCAG The document 2 WCAG The document The purpose of the WCAG document is to give guidelines on how to design and implement a website that is accessible for blind and disabled users. The documents contain 14 guidelines. Each of these guidelines has a list of checkpoints. A checkpoint is a specific instruction how to build up a web document to make it more accessible. Someone who review a page, should verify if a checkpoint is satisfied or not. They are grouped into three priority levels: Priority 1: This checkpoint must be satisfied in order to make sure that all groups have the possibility to access the information of the document. Conformance Level A is reached, if all points of priority 1 were fulfilled. Priority 2: A web document should satisfy this checkpoint, else one or more groups will find it difficult to access the information. The conformance Level AA is attained if all points of priority 1 and 2 were reached. Priority 3: This checkpoint makes it easier for people to access the information. A document reach conformance Level AAA if all checkpoints were satisfied. 2.1 The Guidelines Provide equivalent alternatives to auditory and visual content. For each image, sound, animation and video provide a text with the equivalent information and the same purpose as the media element. In a textual format that can be rendered, so that the information is accessible for people from various disability groups, who are using different technologies like text readers or braille displays Don't rely on color alone. If color is used to express information, it is not possible to understand it for people who cannot differentiate between certain colors or users with devices that have no color output. Furthermore the foreground and background color must have sufficient contrast. This is important for people who use monochrome displays or have different types of color deficits. 2

6 2 WCAG The document Use markup and style sheets and do so properly. Use the appropriate structure elements in documents. For presentation, use style sheets rather than abuse elements like graphics, tables or attributes for presentation. Misusing the markup for presentation makes it difficult for users with specialized software to understand the structure of the page. On the other side, developers should use appropriate markup also when certain devices or technology do not present it correctly Clarify natural language usage. Use markup elements for labeling the natural language of the document. This makes it possible for speech synthesizers and braille devices to automatically switch to the new language and is so more accessible for multilingual users Create tables that transform gracefully. Make sure that the tables have the necessary markup to be transformed by accessible browsers and other user agents. Tables should only be used to present tabular information and not to lay out pages Ensure that pages featuring new technologies transform gracefully. Make sure that the pages are also accessible when new technologies like Java or Flash switched off, in order that is possible to access the pages with older devices or browsers Ensure user control of time-sensitive content changes. Ensure that moving, blinking or auto-updating objects can be stopped or freezed. Some people with cognitive and visual disabilities have problems to read a moving text or object and need more time to understand it Ensure direct accessibility of embedded user interfaces. If an embedded object has an own user interface, it must be also accessible with assistive technology. When this is not possible, an alternative solution must be provided Design for device-independence. Device independent access means, that the user can interact with his preferred input or output device (mouse, keyboard, voice, braille display, etc). If for example an element can only be used by a mouse or pointing device, someone who cannot uses them will not be able to do it Use interim solutions. Use interim solutions, so that assistive technologies and older browsers will operate correctly until all user-agents operate correctly. 3

7 2 WCAG The document Use W3C technologies and guidelines. Use if possible the W3C technologies which are described in the specifications and follow the other guidelines. When it is not possible to use a W3C technology provide an alternative version of the content that is accessible. Many non-w3c formats like PDF or Flash need plug-ins or proprietary applications to show it. With W3C technologies the pages are accessible to more people with a wider variety of hard- and software. Today most of the screen readers can transform PDF or Flash when they are correctly designed Provide context and orientation information. Context and orientation information can help users to understand complex pages or elements. This could be reached by grouping elements or adding orientation information about elements Provide clear navigation mechanisms. A clear and consistence navigation mechanism is important for people with disabilities and makes it easier for everyone to understand the page faster. Important elements are consistent navigation bars and site maps Ensure that documents are clear and simple. A consistent layout, recognizable graphics and a clear and simple text is a benefit for all users, especially for users with cognitive disabilities. 4

8 3 General about barrier-free website 3 General about barrier-free website 3.1 Assistive technologies for disabled person Screen Reader A screen reader is a software that converts the information displayed on the monitor to text and reads it to the user. The output is not only limited to text, but it gives out also the alternative description and position of pictures and symbols. The speed of the speech and other settings of the screen reader can be controlled by keyboard. The synthetic speech of the screen reader is produced by the machine and often enhanced with a dictionary function that contains words with natural pronunciation Braille terminal Braille terminals or braille displays present the information of a computer in the braille system. It consists of spikes which are adjustable for height and can be fumbled by hand. The braille terminal is often used with a screen reader. The advantage of the braille terminals is the higher accuracy which is especially useful for letter-numbercombinations. Braille terminal are only responsible for the output of information. The input is done with a normal keyboard. Figure 1: Picture of a refreshable braille display 5

9 3 General about barrier-free website 3.2 Legal terms in Switzerland The 8 th article of the federal constitution says, that nobody may be discriminated because of a physical or psychological disability. Based on this article, the handicapped equality law (Behindertengleichstellungsgesetz BehiG) says that the websites of the state and the public organizations must be accessible for people with disabilities without restrictions. A study of the foundation access-for-all (AcccessForAll) tested some websites of the state in Switzerland with the result that many of them do not fulfill the requirements of a barrier-free website. 6

10 4 Case Study 4 Case Study Generally it is difficult to say, whether a website is barrier-free or not. In fact there are some tools that can help to check the accessibility and try to find some problems on the page. Although a big part of the WCA-Guidelines can only be tested by human beings. In this case study seven websites were tested were tested about the way how they are applying the WCAG. Only the checkpoints of priority 1 and 2 were checked. The checkpoints of priority 3 were not considered. The tested websites consists of many subpages which could not all be proved. Mainly the homepage and some of the first subpages were tested. First was proved which of the checkpoints the website achieves. There are four possible characteristics on each point. The website can fulfill the point (Yes), only partly fulfill (Partly), violate the point (No) or it is not possible to evaluate it (Not available). This could for example happen when a page has no tables and the checkpoint want that table columns must be labeled. The second step was to check the website with the tool adesigner from IBM (adesigner). This software is a disability simulator that should help web designers to test the accessibility and usability of web pages for low-vision and blind people. The tool gives out some specific proposals for improvements and three numbers from 0 to 100 on the three characteristics: The compliance describes the compliance with the WCAG and the IBM Web Accessibility Checklist. The listenability evaluates how the document is readable for screen readers, especially how long it will take to read it. The navigability evaluates how the links were set and if the navigation is clear and consistent. When there were manifestations from adesigner that there are problems with the contrast or color of the background and foreground, this was checked additionally with the Colour Contrast Analyser (CCA) that analyzes the combinations of colors of fore- and background for good visibility. 7

11 4 Case Study (Main Website of University Fribourg) WCAG Yes Partly No Not available Level adesigner Compliance Listenability Navigability Images have no alternative text Language of the text is not specified Layout with tables Footer: Text color has not enough contrast to the background Map of the university buildings only with Javascript accessible No general sitemap Well structured (attributes and navigation) The main pages of the university of Fribourg does not respect all of the important accessibility principles. Although the page is well structured and labeled with headingattributes, it has some bigger mistakes. Images have often no alternative text-description and there is no general sitemap available that helps disabled users to orient themselves. Furthermore the map of the university buildings is only accessible with activated Javascript (Faculty of social and economy sciences) WCAG Yes Partly No Not available Level adesigner Compliance Listenability Navigability Bad structure, attributes (<h2>, <h3>) not used Exam inscription only with Javascript possible 8

12 4 Case Study False language description Menu: Contrast between text and background color not enough Sitemap available Navigation with hierarchical list elements Separation of design and content (CSS ) The website of the faculty of social and economy sciences has a good navigation concept with the use of list elements that are hierarchical arranged. On the other side, the structure of the page is not very well, cause header attributes were missing. The contrast between background and text color is not sufficient for the menu. Furthermore some important parts like the exam inscription for students were only accessible with Javascript, which makes it impossible to access for blind people. 4.3 diuf.unifr.ch/is (Information Systems Research Group) WCAG Yes Partly No Not available Level adesigner Compliance Listenability Navigability Contrast between background and text color not sufficient (Checkpoint 2.2) No sitemap available (Checkpoint 13.3) Some graphics have no alternative text (Checkpoint 1.1) Good structure Usage of header attributes The website of the information system research group uses the header elements for a clear structure and fulfill most of the checkpoints of the WCAG. It violates only four checkpoints: First, the color contrast between background and the text color is according to the Colour Contrast Analyser not sufficient. Second, there is no sitemap available. Third, there are some graphics that have no alternative text. The fourth violation is against the checkpoint 3.2 who demand a validation of the W3C-Validator. Generally the website has a good accessibility for disabled users, especially if these three mistakes would be corrected. 9

13 4 Case Study (Swiss Federal Authority) WCAG Yes Partly No Not available Level A adesigner Compliance Listenability Navigability Some wrong headers Tables have no column header Very good structure Separation of content and design (CSS) Good alternative text-description for visual elements Good contrast, good colors The website of the swiss federal authority fulfill 25 of the checkpoints complete and breach only two of them: The W3C validation and the use of column header in tables. The graphics are clear labeled with alternative text. The page is well structured and the content is consequently separated from the design. Some problems were found on the titles which have no logic order on the attributes (<h1>, <h2>, <h3>). According the adesigner this is the best of all websites. The website is accessible by most people and follows most of the standards (Swiss Television) WCAG Yes Partly No Not available Level adesigner Compliance Listenability Navigability Link description not clear, more is often used 10

14 4 Case Study Very good alternative text descriptions for images Manual (how to handle the site) for disabled users on the start page Special barrier-free version of the TV-program The website of the swiss television is a very good example how accessibility must be implemented. They provide a manual in which the structure and functions of the page were explained. Furthermore it exists a special version of the TV-program and the alternative text-description of images are really useful. (For example the weather descriptions on the start page.) They really thought about accessibility for disabled users and it is a outstanding site in terms of accessibility. The only they should do better is to clearer describe the link destinations (Newspaper) WCAG Yes Partly No Not available Level adesigner Compliance Listenability Navigability Bad or no alt-description Often only bad link description ( Weiter ) Tables used for design No definition of the text language Frames are used and have no title Usage of header attributes for the structural part of the navigation The Website of the Tagesanzeiger is not very friendly to people with accessibility disabilities. Although the general structure of the page is good, it is not easy to go through the content of the page because tables were used for the design. This makes it difficult for screen readers to present it. For images there are often no alternative description and there is no definition of the text language. 11

15 4 Case Study (Newspaper) WCAG Yes Partly No Not available Level adesigner Compliance Listenability Navigability Some text are to small, the size is fixed Link text is often bad described Not all functions usable with deactivated Javascript No definition of the text language Good Navigation with the use of list elements The website of the Blick is not very accessible for disabled people. A lot of pictures were used and the text is sometimes embedded in graphics. A part of the text has a fixed font size and therefore cannot be enlarged. Furthermore the link texts are often badly described and the documents have no definition of the used text language. When Javascript is deactivated there are some functions that would not be executable. 12

16 5 Best practices 5 Best practices The foundation access-for-all present in the Swiss accessibility study 2007 some easy to implement points, that helps to improve the website for accessibility. (Accessibility study 2007, S. 65ff) 5.1 Separation of design and content A consistent separation of design and content is one of the most important aspects in designing a barrier-free website. Alternative output devices evaluate and display websites in different ways. This is very difficult if a website is designed with tables or frames. For example screen readers have problems to serialize and present such sites Cascading Style Sheets The foundation access-for-all and also the WCA-Guidelines suggest the application of Cascading Style Sheets (CSS). With CSS, the same content can be presented in different ways so that it can be optimized to be displayed on different output devices. This technique is the standard stylesheet-language for websites and was also defined by the W3C. (W3C CSS) Beside the definition of size and color of the font it is possible to place elements free on the page or to configure the background. 5.2 Understandable link text A clear and precise link text helps disabled users to understand the destination of a link. Often web sites name their links more or next to link to the whole text. For blind people such a description is absolutely meaningless. Better is a description what is found on the linked page. If a non-html document is linked, the type and size of this document should be described in the link text beside a good description of the document. 13

17 5 Best practices 5.3 Headers and structure of a page A good structure of a website with headers (<h1>, <h2>) helps disabled users to navigate. When they use a screen reader they can jump easily between the titles and quickly find the desired information. A good structure is not only useful for disabled people, it helps all visitors to understand a document quicker. A navigation is in principle a list of links. Therefore it would be natural to arrange a navigation menu as a nested list. Assistive technologies like a screen reader recognize such a structure and present it to the user. The web page has an exemplary navigation which is mapped in Figure 2. Figure 3: Good alternative text on Figure 2: Good navigation with list elements on Good alternative text As a screen reader cannot read what is on a picture or figure, a good alternative text should explain what is shown on it. The text equivalent must have the same purpose as the graphics. A good example is the website of the Swiss Television. The alternative text of the Figure 3 display explains the weather outlook on the next days in details. 14

18 6 WCAG WCAG 2.0 As the WCAG 1.0 Guidelines were published in 1999, they were quickly outdated because new technologies developed and the web was changing very fast. In version 2.0, the goal is like in version 1.0 to define, how to make the Web content more accessible to people with disabilities. In difference to the WCAG 1.0, the version 2.0 only gives general guidelines that can be used with all different web technologies now and in the future. The WCAG 2.0 are structured as follows: At the top are four principles that contain the foundation for Web Accessibility. Each of these principles has a number of guidelines which include the basic goals that an author should follow to make the content accessible to all users. Every guideline provide some criterias, that are specific testable instructions how to build a website. The success criterias were grouped in three levels of conformance: A is the lowest, AA middle and AAA the highest. 6.1 The Guidelines 1 Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive. 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. (The intent of this guideline is to advise, that all non-text content should also be available in text form. This fact has the big advantage that such a text can be presented in different ways, so that it best meets the needs of a user. Electronic text can be rendered visually in any size, auditory, tactilely or by any combination.) 1.2 Time-based Media: Provide alternatives for time-based media. (The purpose of this guideline is to make sure the access to synchronized media (audio or video). For all these media an text alternative with the same purpose must be provided.) 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. (This guideline should achieve that all the information is available in a form that can be understood by all users. The content and structure of the document should be in such a form that it can be determined by software. If this is the 15

19 6 WCAG 2.0 case, it can be presented to users in different ways. Example: Use Stylesheet rather than other techniques like tables to format a page.) 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background. (The objective of this guideline is to make the default presentation as easy as possible. For visual content this means that the contrast between foreground and background color must be enough. In audio presentations, the foreground should be clearly louder than the background.) 2 Principle 2: Operable - User interface components and navigation must be operable. 2.1 Keyboard Accessible: Make all functionality available from a keyboard. (If all functions are accessible by keyboard, then they can be controlled by all technologies. Keyboard strokes can be simulated with speech input, mouse on virtual keyboard and a wide variety of assistive-technology.) 2.2 Enough Time: Provide users enough time to read and use content. (Many users who have disabilities need more time to read, respond or find something. Provide them enough time to do this. ) 2.3 Seizures: Do not design content in a way that is known to cause seizures. (The purpose of this guideline is to ensure that content avoids the types of flash that are most likely to cause seizure when viewed.) 2.4 Navigable: Provide ways to help users navigate, find content and determine where they are. (To find, navigate and orientate on a page it is important that the users know what the current location of the objects are. A Screen reader can convert this information in a way which is understandable for users.) 3 Principle 3: Understandable - Information and the operation of user interface must be understandable. 3.1 Readable: Make text content readable and understandable. (Because users with disabilities can have problems in understanding, the text of a document should be as easy and clear as possible. The language and direction of the text should be described. If not some screen readers have problems in reading them.) 3.2 Predictable: Make Web pages appear and operate in predictable ways. (For people who use assistive technologies it is difficult to form an overview of 16

20 6 WCAG 2.0 a page. A consistent layout helps to find navigation bars and other contents faster.) 3.3 Input Assistance: Help users avoid and correct mistakes. (Everybody makes mistakes, but especially for people with disabilities it is difficult to find and perceive their mistakes. The aim of this guideline is to reduce the number of serious or irreversible errors that are made, increase the likelihood that all errors will be noticed by the user, and help users understand what they should do to correct an error.) 4 Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies. (The technology is changing very quickly and so it is important that the content follow conventions and is compatible with APIs so that user agents with assistive technology can work with new technologies.) 6.2 Critic about WCAG 2.0 Although the WCAG 2.0 guidelines are not already published yet, there are some critical votes about them on the Web. (comp. Webcredible.co.uk and ToHellWithWCAG2) First the positive aspects about the changes. Some of the WCAG 1.0 Guidelines were quickly outdated, because new technologies were used in the web and the accessibility tools advanced. The WCAG 2.0 Guidelines removed most of them and introduced some new useful ideas. But one of the main critics about WCAG 1.0 has not changed in version 2.0: the used language and the awful usability of the document. The used language is very complex and has a lot of links which explains the used terms in the document. This makes it very difficult to read the document. The two additional documents Understanding WCAG 2.0 and Techniques for WCAG 2.0 are 164 and 363 pages long. All this makes it very complicated to use the document, understand and convert the guidelines into a document. The version 2.0 has also some problems on the content side. The first version of the guidelines was very quickly out of date, because it was very specific in defining how and which technologies to use. To prevent this, version 2.0 is very technology-neutral. This sounds evident, but the guidelines are now extremely vague, so that they almost unusable as they are expressed in a too generic term. 17

21 7 Conclusion 7 Conclusion The WCAG 1.0 guidelines are today out of date, because they were published in 1999 and the Internet technology made a huge progress the last years. But today it is no longer necessary and practical impossible to fulfill all the checkpoints of the WCAG to obtain a barrier-free website. The guidelines of the version 2.0 will be an enhancement, but the language of the document is still awful to read and very difficult to understand. Some of the tested websites were really good examples for barrier-free websites. Especially the website of the federal authority and the Swiss Television have a good accessibility. Others like the main page of the university of Fribourg must be improved, because public organizations should offer a good accessibility for all users. The websites of the newspapers have also many accessibility problems. Making a document accessible for all people is not a very difficult and costly task, if you follow some rules. But I think that web designers are often not sensitive to this issue and simply do not think about it. According to the foundation access-for-all barrier-free website has also economic advantages, because the websites were accessible also for mobile devices and PDA's. 18

22 Bibliography Bibliography AcccessForAll: Accessibility study 2007: adesigner: CCA: Incobs.de-Braille: ToHellWithWCA G2: W3C CSS: W3C Validator: WCAG 2.0: WCAG: Webcredible.co.uk 19