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 http://www.w3.org/WAI/

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.

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.

(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 (http://www.w3.org/WAI/intro/atag.php).
• Web Content Accessibility Guidelines (WCAG) addresses Web content, and is used by developers, authoring tools, and accessibility evaluation tools (http://www.w3.org/WAI/intro/wcag.php).
• User Agent Accessibility Guidelines (UAAG) addresses Web browsers and media players, including some aspects of assistive technologies (http://www.w3.org/WAI/intro/uaag.php).

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.) http://www.w3.org/TR/

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.

Images without an alternative text will be read "Image" by screen readers, but will receive no additional information.

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;

W3C provides an easy-to-use validation service (http://validator.w3.org/), 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 http://www.w3.org/WAI/ER/existingtools.html.

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 http://www.w3.org/TR/WCAG.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

Helping Editors Improve Accessibility

EPiServer's built-in Usability Guide is available from EPiServer 4.51. 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 http://www.episerver.com/usability_guide.

The EPiServer Web site also contains other information on how to create Web sites that are both usable and accessible. See http://www.episerver.com/usability and http://www.episerver.com/writing_for_the_web.

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.

Further information about accessibility can be found at:

• http://www.episerver.com/usability
• http://www.episerver.com/usability_guide
• http://www.episerver.com/writing_for_the_web

Some of the EPiServer Web Sites that are accessible from a technical point of view are listed below, along with their appropriate implementation partner.

• IFAU – Institutet för arbetsmaknadspolitisk utvärdering, http://ifau.se
  Margareta Wicklander, Margareta.Wicklander@ifau.uu.se

Allmänna reklamationsnämnden, http://www.arn.se
Torsten Palm, torsten.palm@arn.se

EPiServer partner: Funka Nu AB, http://www.funkanu.se
Susanna Laurin, susanna.laurin@funkanu.se

• Kungälvs kommun, http://www.kungalv.se
  Lena Johansson, Lena.Johansson@kungalv.se

Renova, http://www.renova.se
Christian Holmgren, christian.holmgren@renova.se

EPiServer partner: NetRelations, http://www.netrelations.se
Jan Kjellberg, jan.kjellberg@netrelations.se

• Statskontoret, http://www.statskontoret.se
  Peter Krantz, peter.krantz@valtech.se
  
  EPiServer partner: Valtech AB, http://www.valtech.se
  Mikael Cato, mikael.cato@valtech.se


• Sveriges riksdag, http://www.riksdagen.se
  Pierre Vindemyr, pierre.vindemyr@wmdata.se
  
  EPiServer partner: WM-data, http://www.wmdata.se
  Pierre Vindemyr, pierre.vindemyr@wmdata.se

Other references:

• W3C Web Accessibility Initiative - http://www.w3.org/WAI/
• W3C's evaluation service - http://validator.w3.org/