Accessible Web Sites and EPiServer

Transcription

1 Accessible Web Sites and EPiServer How implementation of accessible Web sites can increase equal access and opportunities for everyone using the Web. WHITE PAPER

2 WHAT IS ACCESSIBILITY? Accessibility affects how people with disabilities interact, navigate and understand the Web. Accessibility is all about technology for everyone. In today's society it is important that people of all abilities including those with disabilities and impairments have equal opportunities. Accessibility also affects the Internet and how people with disabilities interact, navigate and understand the Web. Internet plays an increasingly important part in communication in the world today, and the Web is used for example for travel, education, recreation, employment, and more. Accessible Web sites not only include people with disabilities into society, but also create equal access and equal opportunities for all. Although the main focus of Web accessibility is on people with disabilities, people without disabilities can also benefit from accessibility. For example: people with temporary disabilities, for example due to illness or accidents; older people, who often have difficulty with, for example, text size on screens; people with low literacy or who are not fluent in the language; new and infrequent Web users. ACCESSIBILITY GUIDELINES The World Wide Web Consortium s (W3C) Web Accessibility Initiative (WAI) has elaborated recommendations and guidelines for how to build an accessible site as well as for how to make the content accessible. These recommendations can be found at These guidelines are the main accessibility guidelines when it comes to Web accessibility and are, therefore, the main guidelines used in the EPiServer development process. DESIGNING ACCESSIBLE WEB SITES It is often easier to design accessible Web sites following the W3C guidelines, which ensure that all components work well togther. Designing new Web sites and making existing Web sites accessible can be both a simple and complex job depending on many factors, for example, the type of content, the dimensions of the site and the development tools and environment. It is often easier to design an accessible Web site "from scratch" if the following components are considered and work well together from the project start: content is the information on a Web page, including text, images, code defining presentation, etc. Web browsers, media players and other "user agents". assistive technologies, e.g. screen readers, alternative keyboards. authoring tools software used to create Web sites. evaluation tools Web accessibility evaluation tools. 2

3 (Source: W3C) Developers usually use authoring tools and evaluation tools in order for content to be created. Users use Web browsers and assistive technologies to interact with the content. W3C's Web Accessibility Initiative provides Web accessibility guidelines for the different components: Authoring Tool Accessibility Guidelines (ATAG) addresses authoring tools ( Web Content Accessibility Guidelines (WCAG) addresses Web content, and is used by developers, authoring tools, and accessibility evaluation tools ( User Agent Accessibility Guidelines (UAAG) addresses Web browsers and media players, including some aspects of assistive technologies ( WAI guidelines are based on the fundamental technical specifications of the Web, and are developed in coordination with: W3C technical specifications (XHTML/HTML, XML, CSS, SVG, SMIL, etc.) ACCESSIBILITY EXAMPLES Inaccessible Web sites make it difficult for people with disabilities to interact, navigate and understand the Web, but what does this mean in practice? The following examples can be avoided by following the quick tips outlined by W3C in the following chapter. Images and Animations It is quick and easy to add alternative texts to images and animations using the alt attribute. The alternative text should let the user know what an image is and its purpose. The following example is taken from the EPiServer Web site and means that users with screen readers will receive information that the page contains an image of a boy on a swing. <img alt="boy on a swing" src="/layout/images/tema/usability/boy_on_a_swing.jpg" /> Images without an alternative text will be read "Image" by screen readers, but will receive no additional information. 3

4 Tables for Layout Using tables purely for layout purposes can cause text to form columns which are confusing to blind readers. A blind reader would perceive the following information; Tables are used for Frames are used for dividing positioning text and graphics the window into regions that in rows and columns. are scrolled individually. when you are trying to convey the following information; Tables are used for positioning text and graphics in rows and columns. Frames are used for dividing the window into regions that are scrolled individually. WEB SITE EVALUATION W3C provides a validation service to check XHTML/HTML documents for compliance with W3C recommendations. It is always easier to address and influence accessibility when developing a Web site rather than after the Web site has been implemented. Some simple techniques can however be used to evaluate the accessibility of existing Web pages, for example, by changing the settings in a browser. Other more advanced evaluation tools are on the other hand more complex. W3C provides an easy-to-use validation service ( which allows you to check XHTML/HTML documents for compliance with W3C HTML recommendations and other XHTML/HTML standards. Other evaluation tools are also available at QUICK TIPS FOR MAKING ACCESSIBLE WEB SITES The W3C has published 10 "Quick Tips" for increasing accessibility in Web sites: 1. Images and animations. Use the alt attribute to describe the function of each visual. 2. Image maps. Use the client-side map and text for hotspots. 3. Multimedia. Provide captioning and transcripts of audio, and descriptions of video. 4. Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here." 5. Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible. 6. Graphs and charts. Summarize or use the longdesc attribute. 7. Scripts, applets, and plug-ins. Provide alternative content in case active features are inaccessible or unsupported. 8. Frames. Use the noframes element and meaningful titles. 9. Tables. Make line-by-line reading sensible. Summarize. 10. Check your work. Validate. Use tools, check lists and guidelines at ACCESSIBILITY AND EPISERVER Accessibility should be taken in account both during the development phase and on an everyday basis. The overall level of accessibility of an EPiServer Web site is influenced on one hand by the frameworks and template pages used for the site and on the other hand by the content entered by editors. Accessibility issues should, therefore, be taken into account both during the 4

5 development phase of the site, and on an everyday basis by the Web editors updating the content. EPiServer standard installation includes a sample template set an example Web site. The sample templates can be used as a starting point for the actual Web site, modifying their design and functionality to suit the actual site. In doing this, accessibility guidelines should be applied to ensure that the resulting site is accessible. From this point it is up to the editors to create accessible content using the built-in features of EPiServer. NOTE: EPiServer could have two sample template sets; one set with full accessibility and another set that includes functionality that is requested by partners and customers even though it is not fully accessible, but this is not currently the case. EPiServer only has one sample template set, which results in a varying degree of accessibility. ACCESSIBILITY FEATURES OF THE CURRENT EXAMPLE WEB SITE The example Web site that is delivered with EPiServer, and includes the sample templates, has been developed with accessibility in mind, especially since it is often used as a starting point when developing a customer site. The accessibility features of the sample templates are: Resizable Increasing or decreasing the Web browser s text size makes the whole page larger or smaller. Separation of content and presentation Cascading style sheets (CSS) are used to avoid formatting directly in the code. This makes the site easier to browse when using an alternative browser or when the visitor has disabled styles in order to browse the page using the browser s default styles. Div structure instead of tables for page layout Tables are not used for pure layout reasons. This makes the site easier to browse when using an alternative browser or assistive technologies, such as screen readers. Keyboard shortcuts Fundamental functions of the site can be easily accessed by using keyboard shortcuts, which are important for users that rely on a keyboard or devices other than a pointing device. A keyboard shortcut is used by pressing the ALT key together with the access key. Built-in support for Phoneticom s ReadSpeaker A page s content can be listened to using the ReadSpeaker software. NOTE: As previously explained, the sample templates are only used as a basis for developing a customer site. We cannot, therefore, guarantee that a customer site contains all of the accessibility features mentioned above. Please contact the partner that developed the specific site for information about the accessibility features of the site s templates. TECHNICAL NOTE: The example Web site has been developed considering the WAI guidelines, which recommend following the current Web standards. The example site has, therefore, been developed considering the XHTML 1.0/1.1 and CSS 2.1 standards. Code samples, which can be used to facilitate evaluation by improving code quality, are available to EPiServer's implementation partners. For further information, refer to 5

6 ACCESSIBILITY FEATURES WHEN CREATING WEB CONTENT The intention of EPiServer is to help editors create accessible content. EPiServer's many built-in features will get editors a long way towards creating an accessible Web site. Features in the DHTML Editor There are many features for enhancing accessibility included in EPiServer s DHTML Editor and the tools used by the editor. The current features are listed below. Alternative Texts for Images When inserting an image, the editor can enter an alternative text describing the image for visitors that can't see the image. The editor can also choose not to enter a text, in case the image is purely used for decoration and does not have any meaning (e.g. dots or lines). Link Titles TECHNICAL NOTE: The entered text is used to set the alt attribute of the img element. If no text is entered, alt= is rendered. When inserting a hyperlink, the editor can enter a link title describing the link. This might be important in case the link text itself isn t clear enough when read out of context, which might be the case in some non-visual browsers or assistive technologies, such as screen readers. TECHNICAL NOTE: The entered text is included in the title attribute of the a element. Separation of Content and Presentation When formatting content, the editor can choose between a set of predefined styles instead of setting fonts, colors, etc. directly for a paragraph, heading or text. A predefined style can also be set for an image to avoid directly applying borders, alignment, etc. This makes the content easier to browse when using an alternative browser or when the visitor has disabled styles in order to browse the page using the browser s default styles. The possibility to set direct styles is also available in EPiServer for cases when the predefined styles are not enough. This can be disabled by the site administrator. TECHNICAL NOTE: The selected style is used to set the class attribute of the corresponding element, avoiding the use of font elements, border attributes, etc. Table Caption and Summary The editor can choose to enter a caption text and a summary text for a table. The caption text should describe the nature of the table and is displayed as a title on top of the table. The summary text should describe the purpose and structure of the table for visitors using non-visual browsers (or assistive technologies, such as screen readers) and is not displayed in a visual browser. TECHNICAL NOTE: The caption text is used inside the caption element. The summary text is used to set the summary attribute of the table element. Table Header and Data Cells The editor can choose to classify a table cell as a header cell. Otherwise it is considered to be a data cell by default. This makes it possible for browsers to distinguish between the two types and render them accordingly, for instance when styles are disabled in a visual browser or when using a non-visual browser or assistive technologies, such as screen readers. TECHNICAL NOTE: A data cell is rendered as a td element and a header cell is rendered as a th element. 6

7 Categorizing Table Cells The editor can choose to categorize a table cell in several ways so that a non-visual browser (or assistive technologies, such as screen readers) can present the contents of the table in an understandable way. The scope of a table header cell can be set in order to indicate if the header applies to a row or to a column. The axis of a cell can be set to indicate that the cell is part of a certain category. The headers of a cell can be set to indicate which cells are the headers for the cell. This is done by specifying the ID of the header cells, which requires that an ID has been set for the header cells. TECHNICAL NOTE: The selected scope value, row or col, is used to set the scope attribute of the th element. The entered axis value is used to set the axis attribute of a th or td element. The entered headers value is used to set the headers attribute of a td element. The entered ID is used to set the id attribute of a th or td element. Relative Size for Images, Tables and Table Cells The editor can choose to set a relative width and/or height, in percent, for an image, a table or a table cell instead of pixel dimensions. This makes resizing easier, changing the text size of the browser, since the image, table or table cell is then adapted to the surrounding element that might be resized if the page template has been designed accordingly. TECHNICAL NOTE: A relative width or height for a table is used to set the width or height attribute of the table, td or th element. A relative width or height for an image is used to set the width or height property of the style attribute of the img element. Features in the Edit Form Dialog There are specific accessibility issues that are important when creating a form. With this in mind, the Edit Form dialog of EPiServer has the following accessibility features. Labeling Form Elements The editor can choose to specify a header text that will be used as a label for a form field, both displaying it as a text next to the field and permitting non-visual browsers (or assistive technologies, such as screen readers) to associate the label with its field. TECHNICAL NOTE: The entered text is used inside the label element. The for attribute of the label element is set to the value of the id attribute of the corresponding form field element. Form Element Titles The editor can choose to specify a ToolTip text that will be used as a title for a form field. This ToolTip is often displayed in visual browsers (depending on the type of field and the browser), and provides non-visual browsers (or assistive technologies, such as screen readers) with a description of the field. TECHNICAL NOTE: The entered text is included in the title attribute of the form field element. Features in the Microsoft Office Add-In The Office add-in permits the editor to publish Microsoft Office documents to EPiServer directly from Word, Excel or PowerPoint. The content and formatting of the Office documents cannot be controlled by EPiServer while still in the Office program, but the editor has several ways of ensuring accessibility in the final EPiServer content. 7

8 Alternative Texts for Images When inserting an image in an Office document, the editor can enter an alternative text describing the image for visitors that can't see the image. This is made by right-clicking the image and selecting Format Picture, and then filling in the text box on the Web tab. Link Titles TECHNICAL NOTE: The entered text is used to set the alt attribute of the img element, and this information is preserved when transferred to EPiServer. When inserting a hyperlink, the editor can enter a link title describing the link. This might be important in case the link text itself isn t clear enough when read out of context, which might be the case in some non-visual browsers. TECHNICAL NOTE: The entered text is included in the title attribute of the a element, and this information is preserved when transferred to EPiServer. Separation of Content and Presentation When formatting content in an Office document, the editor can choose to use the predefined formatting styles instead of setting fonts, colors, etc. directly for headings and body text. An Office document using the formatting styles Normal, Heading 1, Heading 2 and Heading 3 will transfer into an EPiServer page with the corresponding styles for the Web site. This ensures accessibility for the content as well as applying the Web look for all pages, regardless of whether they are created in EPiServer or in Office. TECHNICAL NOTE: The selected Office heading styles Heading 1, Heading 2 and Heading 3 are transformed into h1, h2 and h3 elements when transferred to EPiServer. Adjustable Level of Filtering In order to ensure a higher level of accessibility, Web site administrators can choose to use a strict filter for the conversion of documents from Office to EPiServer. This will remove code that does not apply to current Web standards and that might cause accessibility problems. However, using a strict filter will also mean that a great part of the original formatting is lost, possibly making the EPiServer page rather different from the original. It is also possible to use a more tolerant filter for the conversion. More of the original formatting is preserved in this way, but it may cause accessibility problems. TECHNICAL NOTE: The level of the filter determines the elements and attributes that are permitted / prohibited, and will affect the content of the EPiServer version of the Office document. EPiServer's strict and tolerant filters can be modified or replaced by custom filters. HELPING EDITORS IMPROVE ACCESSIBILITY EPiServer's built-in Usability Guide is available from EPiServer The Usability Guide contains information for editors on how to create usable and accessible content for the Web. The guide contains information on, for example, alternative texts for images, link descriptions, and tables. The Usability Guide is accessed from EPiServer 4.51 from the Action Window in Edit mode. It is also available at The EPiServer Web site also contains other information on how to create Web sites that are both usable and accessible. See and 8

9 FUTURE ACCESSIBILITY IN EPISERVER EPiServer AB aspires to follow applicable standards in new product development. EPiServer's sample template set is just that, a sample template set, and cannot currently be seen as "best practice" for accessibility. EPiServer AB aspires to follow applicable standards in new product development and also gradually attend to other existing faults and weaknesses. EPiServer templates are based on ASP.NET, which means that it is often difficult to totally avoid JavaScript and other things that can cause accessibility problems, e.g. layout tables, as these form the basis of ASP.NET controls. EPiServer AB will however continue to work with accessibility and hopefully the.net platform will also be improved in the future in this respect. QUICK REFERENCE Further information about accessibility can be found at: Some of the EPiServer Web Sites that are accessible from a technical point of view are listed below, along with their appropriate implementation partner. Other references: IFAU Institutet för arbetsmaknadspolitisk utvärdering, Margareta Wicklander, Margareta.Wicklander@ifau.uu.se Allmänna reklamationsnämnden, Torsten Palm, torsten.palm@arn.se EPiServer partner: Funka Nu AB, Susanna Laurin, susanna.laurin@funkanu.se Kungälvs kommun, Lena Johansson, Lena.Johansson@kungalv.se Renova, Christian Holmgren, christian.holmgren@renova.se EPiServer partner: NetRelations, Jan Kjellberg, jan.kjellberg@netrelations.se Statskontoret, Peter Krantz, peter.krantz@valtech.se EPiServer partner: Valtech AB, Mikael Cato, mikael.cato@valtech.se Sveriges riksdagen, Pierre Vindemyr, pierre.vindemyr@wmdata.se EPiServer partner: WM-data, Pierre Vindemyr, pierre.vindemyr@wmdata.se W3C Web Accessibility Initiative - W3C's evaluation service - 9

10 EPISERVER AB EPiServer AB is a privately owned Swedish product company, founded in 1994, and is the leading company in Content Management and portal solutions through the platform EPiServer. The company is a Microsoft Gold Certified Partner and has held AAA ranking by Dun & Bradstreet since Copyright EPiServer AB. EPiServer is a registered trademark of EPiServer AB. Other product and company names mentioned in this document may be the trademarks of their respective owners. The document may be freely distributed in its entirety, either digitally or in printed format, to all EPiServer users. Changes to the content or partial copying of the content may not be carried out without permission from EPiServer AB: EPiServer AB Finlandsgatan 38 SE Kista Sweden Changes are periodically made to the document and these will be published in new editions of the document. EPiServer AB reserves the right to improve or change the products or programs included in this document at any time.