Login

Accessibility of EPiServer CMS Sample Templates

Purpose

An evaluation of the accessibility of EPiServer’s sample templates according to current recommendations and guidelines elaborated by the World Wide Web Consortium’s (W3C) Web Accessibility Initiative (WAI).


Introduction

The tables in this document specify the relative level of accessibility of the sample templates released with EPiServer 4.60 along with the issues related to the templates. References to the corresponding current WCAG 1.0 guidelines elaborated by the World Wide Web Consortium’s (W3C) Web Accessibility Initiative (WAI) are included for the issues.

For more detailed information on the WCAG guidelines, please refer to http://www.w3.org/WAI/intro/wcag.php.

Note For more information about Web accessibility and EPiServer features that enhance the accessibility of the content created, please refer to the white paper “Accessible Web Sites and EPiServer”. For information regarding the WCAG and ATAG compliance of EPiServer, please refer to the white paper “EPiServer’s Compliance to WCAG and ATAG”.

Scope and Limitations

ASP.NET 2.0 Templates Only

This evaluation has been made with the ASP.NET 2.0 version of the EPiServer 4.60 sample templates. Most of the results are also valid for the ASP.NET 1.1 version of the sample templates. There may be further issues for the ASP.NET 1.1 version of the templates, since Microsoft has made improvements in the release of their ASP.NET 2.0 framework.

Since the ASP.NET 2.0 template package was selected for this evaluation, the new portal templates based on Web Parts have been evaluated instead of the old WSRP-based portal framework.

Technical Specifications

When evaluating the templates, the XHTML 1.0 Transitional document type has been used. Style sheets have been evaluated using CSS1. The following validators have been used:

Page Content

The sample content that is packaged with the sample templates has not been evaluated along with the sample templates. However, the creation of content has been taken into account in the evaluation presented in the white paper “EPiServer’s Compliance to WCAG and ATAG”.

Modules Not Evaluated

The evaluation focuses on the sample template package included in EPiServer, since this is the package delivered by default and includes the most commonly used templates. Modules and extensions have not been included in this evaluation, e.g. EPiStore, EPiBooking and EPiFields.

Sample Template Rating

The sample page templates have been rated according to the results of the evaluation, and this is shown in the table below.

A rating, where 5 is the highest and 1 is the lowest, has been given to each template. These ratings are not defined by WCAG, but indicate the overall status of the templates.  The following criteria have affected the ratings negatively:

  • If layout tables are used.
  • If scripting is required for the core functionality of the template.
  • If labels are not correctly used for form fields.
  • If the semantics of the markup used is not applied correctly.
  • The amount of markup validation errors.

Note The rating 5 does not mean that the template is perfect, and the rating 1 does not mean that the template is totally inaccessible. The rating should be seen as our own subjective rating to give an idea of the relative standards compliance of the different templates. This may help when deciding whether to use a certain template for a customer site, or when estimating the time required to adapt the template to a certain level of accessibility and standards compliance according to customer requirements.

References to the issues corresponding to each template can be found in the table, and refer to the Sample Template Issues table of the next section. To help give some idea of the nature of the referenced issues for each template, the issues have been categorized into the following groups: Usability and semantics (U), Markup and CSS (M), Tables (T), Scripts (S) and General (G).

Note Comments are included as endnotes, and are listed at the end of this table.

Template

Description

Category

Issues

Rating

Start page

Start page on the Web site

Standard

U8-9, U25-27, M2-7, M9-10, S1-4, S7

5

Ordinary web page[1]

Ordinary information page

Standard

U8-9, U25-27, M2-7, M9-10, S1-3, S7

5

Form page (XForms)

Page containing a form

Standard

U1, U8-10, U25-27, M2-11, T6-7, S1-3, S5-7

4

News list

Displays internal news within the Web site or external news from an RSS source

Standard

U8-9, U25-27, M2-7, M9-10, M12, T8, S1-3, S7

4/5[2]

RSS source

Page displaying information from EPiServer in RSS format

Standard

N/A

N/A[3]

Calendar

Main page for calendar

Standard

U8-9, U25-27, M2-10, T9, S1-3, S7-8

4

Search

Page for searching for information on the Web site

Standard

U8-9, U12, U15, U25-27, M2-7, M8-10, M13, S1-3, S5, S7

4

Index

Page displaying the content of all or part of the Web site

Standard

U2, U8-9, U25-27, M2-5, M7, M9-10, M14-15, T10, S1-3, S7

3/4[4]

Alphabetical index

Page listing content in alphabetical order

Standard

U8-9, U25-29, M2-5, M7-10, S1-3, S7, S9

4

Changed recently

Page displaying a list of pages that have recently been changed

Standard

U8-9, U25-27, M2-5, M7, M9-10, T18, S1-3, S7

5

File listing

Page listing files from a folder on the Web server

Standard

U8-9, U25-27, M2-5, M7-10, M16, T1, S1-3, S7, S10

3

Subscription

Page for visitors to select subscription information

Standard

U8-9, U16, U25-27, M2-5, M7-10, T12, S1-3, S5, S7

4

Discussion forum

Main page for creating a discussion forum

Standard

U8-9, U13-14, U25-27, M2-5, M7-10, M17, S1-3, S7, S11

3

Tell-a-friend window

Pop-up window opened from the header of a page

Miscellaneous

U17, M9-10, M18-19, T13

2

Print window

Pop-up window opened from the header of a page

Miscellaneous

M9-10, M28

3

Cookie information window

Pop-up window opened from the footer of the start page

Miscellaneous

M9-10, M29

3

Flash page

Page for loading a flash movie

Miscellaneous

U3, U9, U25-27, M2-5, M9-10, M20, S1-3, S7

3

PDF form

Page that generates a PDF file with data from the page

Miscellaneous

U8-9, U18, U25-27, M2-5, M7, M9-10, M21, T2, T14, S1-3, S5, S7

3

Slide show

Page displaying a number of pages as a presentation, each page changing at pre-determined intervals

Miscellaneous

U8-9, U25-27, M2-5, M7, M9-10, S1-3, S7, S12

4

ReadSpeaker

Page where the content can be heard in speakers

Miscellaneous

U8-9, U19, U25-27, M2-5, M7, M9-10, M22-24, S1-3, S7

4

Mobile page

Page for mobile units

Miscellaneous

M9-10, M25

4

Register users

Page where visitors can register themselves on the Web site

Miscellaneous

U8-9, U20, U25-27, M2-5, M7-10, M26, M41, S1-3, S5, S7

3

My settings

A settings page where users can change their password and other personal settings

Miscellaneous

U8-9, U11, U25-27, M2-5, M7-10, M41, S1-3, S5, S7

3

Profile search

Search page for personnel register

Miscellaneous

U4, U8-9, U21, U25-27, M2-5, M7-10, T3, T11, S1-3, S5, S7, S13

2

Personal profile

Personal page for information about an individual. Used for the personnel register.

Miscellaneous

U8-9, U22, U25-27, M2-5, M7-10, M27, T11, T15, S1-3, S5, S7, S14

2

Login page

EPiServer default login page

Miscellaneous

U23, M9-10, M30, T16, S15

1

Document list

Displays a list of documents published from Microsoft Office

Microsoft Office

U5, U8-9, U25-27, M2-5, M7, M9-10, M31, S1-3,  S5, S7

4

Document

Document published from Microsoft Office

Microsoft Office

U6, U8-9, U25-27, M2-5, M7, M9-10, M32, S1-3, S5, S7

3

Workroom pages

Pages used for workrooms

Workroom

U7-9, U25-27, M1-5, M9-10, M35-41, T5, S1-3, S7, S17, G3

2/3[5]

Blog pages

Pages for creating and using blogs

Blog

U9, U24-27, M2-5, M7-10, M33-34, T4, S1-3, S5, S7, S16

3

Blog RSS source

Page displaying information from a blog in RSS format

Blog

N/A[6]

News group pages

Pages for news group (pages used in frameset)

News group

M9-10, G2

1

Portal page

Page containing a Web Part portal

Portal

U8-9, U25-27, M2-5, M7-10, T17, S1-3, S5, S7, G1

2

Mixed content page

Page containing both normal content and Web Part portal parts

Portal

U8-9, U25-27, M2-5, M7-10, T17, S1-3, S5, S7, G1

2

Sample Template Issues

This table provides detailed information on the issues found when evaluating the sample templates listed in the previous chapter. Since the evaluation has been made in accordance to the WCAG 1.0 guidelines, references to the applicable guidelines are included.

Note Comments are included as endnotes, and are listed at the end of this table.

Category: Usability and semantics

WCAG 1.0

Issue

Cause

File

Environment

Checkpoint

Priority

U1

Form-statistics image does not have an empty alt attribute.

Core functionality

All

1.1

1

U2

Index images do not have an empty alt attribute.[7]

Core functionality

All

1.1

1

U3

Flash template does not contain alternative description.

Sample templates

Units/FlashBody.ascx

All

1.1

1

U4

Profile finder's detailed results list does not contain alternative descriptions for images.

Sample templates

Units/ProfileFinder.ascx

All

1.1

1

U5

Document list template contains images without alt attributes.

Sample templates

Util/DocumentList.ascx

All

1.1

1

U6

Document template does not specify title for iframe.

Sample templates

Util/Document.ascx

All

12.1

1

U7

Workroom pages contain images without alternative texts.

Sample templates

/Workroom/Templates/Units/Overview.ascx,

/Workroom/Templates/Units/News.ascx,

/Workroom/Templates/Units/Calendar.ascx,

/Workroom/Templates/Units/BulletinBoard.ascx,

/Workroom/Templates/Units/Members.ascx

All

1.1

1

U8

Headings and <h> tags are not properly used.

Sample templates

All

3.5

2

U9

Pop-up windows are used for the print, tell-a-friend and cookie information functions without warning the user.

Sample templates

Units/QuickBar.ascx, Units/CookieInfo.ascx

All

10.1

2

U10

Check boxes and radio buttons use a non-associated label instead of <fieldset> and <legend> tags.[8]

Core functionality

All

12.4

2

U11

My settings form does not use associated labels.

Sample templates

Units/PersonalSettings.ascx

All

12.4

2

U12

Absolute widths are used for search field and buttons.

Sample templates

Units/Search.ascx

All

3.3, 3.4

2

U13

Discussion forum post form does not use associated labels.

Sample templates

Units/Conference.ascx

All

12.4

2

U14

Absolute widths are used for discussion forum post form fields.

Core functionality

All

3.3, 3.4

2

U15

Search function field does not have a title or label.

Sample templates

Units/Search.ascx

All

12.4

2

U16

Subscription form does not use associated labels.

Sample templates

Units/Subscribe.ascx

All

12.4

2

U17

Tell-a-friend form does not use associated labels.

Sample templates

Units/EmailPage.aspx

All

12.4

2

U18

PDF form does not use associated labels.

Sample templates

Units/PdfForm.ascx

All

12.4

2

U19

Pop-up window is used for the ReadSpeaker function without warning the user.

Sample templates

Units/ReadSpeaker.ascx

All

10.1

2

U20

Register users form does not use associated labels.

Sample templates

Units/Register.ascx

All

12.4

2

U21

Profile finder form does not use associated labels.

Sample templates

Units/ProfileFinder.ascx

All

12.4

2

U22

Personal profile edit view form does not use associated labels.

Sample templates

Units/Profile.ascx

All

12.4

2

U23

Login form does not use associated labels.

Core functionality

(/Util/Login.aspx)

All

12.4

2

U24

Blog forms do not use associated labels.

Sample templates

All

12.4

2

U25

Content language declaration does not reflect actual language.

Sample templates

MasterPages/MasterPage.master

All

4.3

3

U26

Menu links and link lists are not defined as lists and cannot be bypassed.

Sample templates

All menu and listing controls

All

13.6

3

U27

Top menu links are not separated by printable characters.

Sample templates

Units/TopMenu.ascx

All

10.5

3

U28

Alphabetical index navigation links are not separated by printable characters.

Sample templates

Units/AlphanumericListing.ascx

All

10.5

3

U29

Alphabetical index content link list is not defined as a list and cannot be bypassed.

Sample templates

All menu and listing controls

All

13.6

3

Category: Markup and CSS

WCAG 1.0

Issue

Cause

File

Environment

Checkpoint

Priority

M1

Workroom list page contains invalid markup.[9]

Sample templates

/Workroom/Templates/Units/WorkroomList.ascx

All

1.1, 3.2

1, 2

M2

Extra empty <title> tag is generated.

Sample templates (ASP.NET 2.0)

MasterPages/MasterPage.master

ASP.NET 2.0

3.2

2

M3

Quicksearch button uses invalid attribute value.

Sample templates

Units/QuickSearch.ascx

All

3.2

2

M4

EPiServer Property Web Control uses <span> tags around content, which may cause validation errors.[10]

Core functionality

All

3.2

2

M5

EPiServer Property Web Control uses invalid attributes when logged in and when simple editing is enabled, which may cause validation errors.

Core functionality

All

3.2

2

M6

Listing links may contain empty target attributes, which causes validation errors.

Sample templates

Units/Listing.ascx

All

3.2

2

M7

Non-encoded language parameter used in some links for globalized sites when site-structure-URLs are not used.

Sample templates and core functionality

Globalized site without using Web addresses that are based on the site structure.

3.2

2

M8

Menu generates invalid attribute after postback.[11]

Sample templates

Units/Menu.ascx

All

3.2

2

M9

EditMenuName is not a valid CSS property.[12]