Intelledox Designer WCA G 2.0

Transcription

1 Intelledox Designer WCA G 2.0 Best Practice Guide

2 Intelledox Designer WCAG 2.0 Best Practice Guide Version 1.0 Copyright 2011 Intelledox Pty Ltd All rights reserved. Intelledox Pty Ltd owns the Intelledox software and all of its inclusions. No part of the Intelledox system, databases or documentation may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Intelledox Pty Ltd. Microsoft and Windows are registered trademarks of the Microsoft Corporation. Intelledox Pty Ltd Tel: Fax: [email protected]

3 Table of Contents 1 Introduction 5 Overview 5 About Document Creation 5 About Intelledox 6 Principles of WCAG Benefits 6 Intelledox Designer 6 2 Perceivable 7 Overview 7 Text Alternatives 7 Adaptable 8 Distinguishable 9 3 Operable 10 Overview 10 Navigable 10 4 Understandable 11 Overview 11 Readable 11 Predictable 11 Input Assistance 12 Intelledox Designer WCAG 2.0 Best Practice Guide 3

4 5 Robust 14 Overview 14 Implement correct mark-up language 14 Avoid obsolete techniques and tags 14 4 Intelledox Designer WCAG 2.0 Best Practice Guide

5 1 Introduction Overview This document is for Intelledox designers who need to follow the Web Content Accessibility Guidelines (WCAG) for the forms built in Intelledox. It shows how you can make web content more accessible to people with disabilities using best practice methods and sufficient techniques to meet the success criteria of WCAG 2.0 level A compliance. Web content generally refers to the information in a web page or web application, including text, images, forms, sounds, etc. Built on Microsoft technology, Intelledox is a user-friendly document creation solution that enables the fast, accurate and compliant production of documents tailored to individual business requirements and delivery methods. Therefore, part of the web content accessibility responsibilities will fall upon the designer to ensure they are meeting WCAG 2.0 guidelines. About Document Creation Intelledox is not a Document Management System. DMSs are essentially computer systems (or a set of programs) used to track and store electronic documents and/or images of paper documents; the term somewhat overlaps the similar concept of Content Management Systems (CMS). Intelledox is best described as a Document Creation or Document Assembly solution. Document Assembly is the first, vital step in the document lifecycle; if documents are created accurately, the main functions of Document Management: indexing, storing, structuring and versioning, become considerably easier and more efficient. As the management problem is addressed at document conception, common Document Management issues are solved before they eventuate. This information is then easily retrieved and combined with templates, specified business rules and other data, to rapidly create documents that are legally compliant and highly personalised; all the while, eliminating the risk of human error in document creation. Put simply: Intelledox enables organisations the ability to produce high-quality documentation that is fast, individually tailored, consistent and 100% accurate. Intelledox Designer WCAG 2.0 Best Practice Guide 5

6 About Intelledox At Intelledox, we create software applications that are simple to use, elegant in construction and provide an excellent value proposition for clients. Intelledox is an Australian company, based in Canberra, with offices around Australia. We also have partners in North America, the UK and South-East Asia. Principles of WCAG 2.0 This guide has been organised into a number of chapters which represent each of the key principals of WCAG 2.0. Below is a description of each of the principals, while the remainder of this guide focusses on each and how you can apply them in your Intelledox projects. Perception Ensure techniques and methods are in place that will allow users to perceive information contained in web content regardless of limitations of the environment or user. Understandable Provide clues and hints that create an intuitive experience, allowing the user to complete web forms smoothly without encountering any complications or roadblocks. Operable Give users the ability to navigate forms easily with assistive peripherals of their choice while still having access to the full functionality of web form technologies. Robust Prevent common user errors and improve compatibility with a number of assistive technologies. Benefits Implementing WCAG compliance in your Intelledox forms provides a number of benefits, including: Ability to interact with a wider audience Meet government requirements of WCAG 2.0 Improve comprehension of web content Creation of intuitive web forms and increase usability Increase robustness of web forms Increased consistency, accuracy and compliance Less opportunity for human error Intelledox Designer Designer is the tool that facilitates the creation and modification of Intelledox projects, including forms for collecting data and output documents. Designer provides a simple, intuitive interface to define document rules, data linkages, document properties, and other elements such as images and logos. Within Designer, projects are easily created using drag-and-drop functionality and require no IT or programming skills. 6 Intelledox Designer WCAG 2.0 Best Practice Guide

7 2 Perceivable Overview The goal of this principle is to ensure that information and user interface components are presentable to users in ways they can perceive, considering that some users may be vision impaired and using a screen reading device. The designer must ask themselves if the content is relying on certain aspects of the content to convey a message or if the arrangement of content is crucial to understanding the content message. The designer will need to consider the following as they create their Intelledox project: Text Alternatives Adaptable Content Distinguishable Elements Text Alternatives Designer allows the user to insert images in web forms which may play an important role in the overall purpose and feel of the wizard. To fulfil the accessible guideline, the designer is required to the use the alt attribute which will display a description of the content if the user is unable to view images. Images are usually used in the case of Label and Group Logic answers but can be inserted into all question text. For example, consider examples below with and without the images enabled. Images Enabled: Image by Kittikun Atsawintarangkul Intelledox Designer WCAG 2.0 Best Practice Guide 7

8 Images Disabled: Adaptable The wizard designer will need to consider that the user may be viewing the content on a variety of devices which may alter the layout of the wizard due to screen size or may be relying on an assistive technology that will interpret content. Therefore the content will need to be ordered in a logical linear order so that information may be easily rearranged and understood regardless of viewing device. Information and Relationships Information, structure, and relationships conveyed through presentation need to be programmatically determined or are available in text. Therefore a designer should not rely on symbolism to convey a message and any instructions should be deviceindependent. Example: Instead of instructing the user to click the link which is related to the use of a mouse, the designer should use a broader term such as select. Mandatory fields will automatically have the standard red asterisk to indicate a required question but the designer should also provide the definition of the asterisk at the beginning of the form Meaningful Sequence When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. The designer should layout their web form in such a way that the information and collection of information flows without the need of structural elements to rearrange content. Example: Designers should arrange all content in a linear fashion to prevent users from getting lost in the web form and avoid using white spaces to align content. Sensory Characteristics Instructions provided for understanding and operating content should not rely solely on sensory characteristics of components such as shape, size, visual location, or orientation. The layout of a wizard may change or the user may be unable to interpret certain aspects of a wizard leaving instructions redundant. 8 Intelledox Designer WCAG 2.0 Best Practice Guide

9 Example of what to do: Using an image with a text alternative for graphical symbols instead of a Unicode font glyph with the desired graphical appearance but different meaning Example of what not to do: Instructing the user to refer to the image on the right and answer the question Distinguishable Make it easier for users to see content including separating foreground from background. The designer should use multiple visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Use of Color The designer will need to make sure that: colors are not the only means of conveying information colors do not clash with the background color scheme colors have been considered against the limitations of color blindness colors are not too bright or jarring for the user to read colors are not referred to within the wizard when providing instructions Use of Style The designer will need to make sure that: styles are not the only means of conveying information such as relying on bolding text to bring content to the user s attention styles or symbols are not referred to within the wizard when providing instructions links should be underlined where appropriate Intelledox Designer WCAG 2.0 Best Practice Guide 9

10 3 Operable Overview Navigable Though Intelledox does its best to ensure the user is given an intuitive web form experience, there are certain elements that the Designer has control of which may disrupt the logical flow of a wizard if misused. The designer will have to consider the flow of the web form Provide ways to help users navigate, find content, and determine where they are. Appropriate naming Naming of project elements should be logical and appropriate for the purpose of the web form. The naming conventions will be used by the user to guide their experience through the web form and is therefore vital to improve accessibility. Therefore page names should be succinct and content will need to be categorised in an intuitive manner. Placement of Conditional Content As content and questions show or hide themselves depending on their conditions, the designer should not place questions out of the current context as this forces the user to navigate to different parts of the page and can be disorientating. 10 Intelledox Designer WCAG 2.0 Best Practice Guide

11 4 Understandable Overview Readable Predictable Layout Types control how questions are organised and displayed to the end user in Producer. Good question sets make it easy for end users to answer all of the questions quickly and accurately, and how the question set is organised impacts this significantly. The designer will have to consider the following as they create their Intelledox project: Readability Predictability Providing assisting when appropriate Make text content readable and understandable. Use of Language Depending on the user, the clearest and simplest language appropriate for the content should be used to convey the message. Meanings to abbreviations should also be available to users. Use of Text formatting It is recommended that designers should avoid using large chunks of formatted text as it tends to lose its influence on the user and makes it difficult to read such as italicising large amount of text. Ensure the layout and usage of the wizard is predictable to the user. Inform the user The user s interactions with the web form may suddenly cause text and questions to appear or a new window to pop up. Therefore the user should be warned in advanced of what to expect as they go through a wizard, as well as after. Additionally, the publishing section of Director provides an area to add project help text, a wizard finish and complete message. Example: Intelledox Designer WCAG 2.0 Best Practice Guide 11

12 Input Assistance Provide an example of what input is expected The designer should provide practical examples to clarify content whenever possible. A simple example can be used to guide the user to input the correct data. This is especially vital when a question such as a date or time can take on multiple formats. Example: Use proper labelling All layout elements, questions and answers within Designer should be labelled appropriately as these labels will improve comprehension and will be found by assistive technologies to identify and describe the purpose of question fields. Without the labels, certain users will be unable to understand or complete a web form independently. Question Text will be used as the label text but when using images, additional text will need to be included. Example of Group Logic Answer that uses an image and label: <img src=" alt="image of Scissor"/><br>Scissor This will result in an image using the label Scissor. 12 Intelledox Designer WCAG 2.0 Best Practice Guide

13 Impose restrictions & warnings There are a number of settings available within Designer that can limit what input is acceptable or allowable. The designer of a web form can set: the question data type the maximum field length validations In the following example, the user has failed to input their correctly, forgetting the period which has caused a warning message to be displayed: Structure questions The designer may want to take greater lengths to improve readability and avoid human error by enforcing correct input format by creating separate fields for each segment of input which can then be concatenated later. Example with restriction to field length: Intelledox Designer WCAG 2.0 Best Practice Guide 13

14 5 Robust Overview When using HTML the designer will need to maximize compatibility with current and future user agents, including assistive technologies and will therefore need to consider the following when creating an Intelledox project: Implement correct mark-up language Avoid obsolete techniques and tags Implement correct mark-up language The designer will need to check that any HTML used in the project is valid and has been used appropriately according to the HTML specification. The designer will be responsible to watch for common errors such as missing brackets, duplicate tags and elements without their end tags. The designer is advised to go through their web form to ensure all form elements and HTML is presented and working as expected. Avoid obsolete techniques and tags As web technologies evolved, certain tags and techniques have been deemed obsolete and should be avoided to provide a better user experience. Blinking or moving text has been disabled in Intelledox. 14 Intelledox Designer WCAG 2.0 Best Practice Guide