Accessibility of EPiServer s Sample Templates

Size: px

Start display at page:

Download "Accessibility of EPiServer s Sample Templates"

Erika Johnson
6 years ago
Views:

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

2 Accessibility of EPiServer s Templates 2 Table of Contents INTRODUCTION 3 SCOPE AND LIMITATIONS 4 SAMPLE TEMPLATE RATING 5 SAMPLE TEMPLATE ISSUES 8 The contents of this document are protected by copyright. Changes to the content or partial copying of the content may not be carried out without permission from ElektroPost Stockholm AB. The document may be freely distributed in its entirety, either digitally or in printed format, to all EPiServer users. EPiServer is a registered trademark of ElektroPost Stockholm AB. Other product and company names mentioned in this document may be the trademarks for their respective owners.

3 Accessibility of EPiServer s Templates Introduction 3 Introduction The tables in this document specify the relative level of accessibility of the sample released with EPiServer 4.60 along with the issues related to the. 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 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.

4 Accessibility of EPiServer s Templates Scope and Limitations 4 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. Most of the results are also valid for the ASP.NET 1.1 version of the sample. There may be further issues for the ASP.NET 1.1 version of the, 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 based on Web Parts have been evaluated instead of the old WSRP-based portal framework. TECHNICAL SPECIFICATIONS When evaluating the, the XHTML 1.0 Transitional document type has been used. Style sheets have been evaluated using CSS1. The following validators have been used: XHTML: CSS: PAGE CONTENT The sample content that is packaged with the sample has not been evaluated along with the sample. 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. Modules and extensions have not been included in this evaluation, e.g. EPiStore, EPiBooking and EPiFields.

5 Accessibility of EPiServer s Templates Template Rating 5 Template Rating The sample page 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. The following criteria have affected the ratings negatively: If layout tables are used. If scripting is required for the core 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. 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 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

6 Accessibility of EPiServer s Templates Template Rating 6 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 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 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 Subscription Page for visitors to select subscription information Standard U8-9, U16, U25-27, M2-5, M7-10, T12, S1-3, S5, S7 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 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 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 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 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 Profile search Search page for personnel register Miscellaneous U4, U8-9, U21, U25-27, M2-5, M7-10, T3, T11, 2 4 3/

7 Accessibility of EPiServer s Templates Template Rating 7 S1-3, S5, S7, S13 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 Workroom pages Pages used for workrooms Workroom U7-9, U25-27, M1-5, M9-10, M35-41, T5, S1-3, S7, S17, G3 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 2/3 5 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 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, G Also used for news and calendar event pages. 2 Dependent on whether RSS listing is used. 3 Does not generate XHTML content, and is therefore not evaluated. 4 Dependent on rendering mode. 5 Dependent on whether the Document is used. 6 Does not generate XHTML content, and is therefore not evaluated.

8 Accessibility of EPiServer s Templates Template Issues 8 Template Issues This table provides detailed information on the issues found when evaluating the sample 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. All U2 Index images do not have an empty alt attribute. 1 All U3 Flash template does not contain alternative description. Units/FlashBody.ascx All U4 Profile finder's detailed results list does not contain alternative descriptions for images. Units/ProfileFinder.ascx All U5 Document list template contains images without alt attributes. Util/DocumentList.ascx All U6 Document template does not specify title for iframe. Util/Document.ascx All U7 Workroom pages contain images without alternative texts. /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 U8 Headings and <h> tags are not properly used. All 3.5 2

9 Accessibility of EPiServer s Templates Template Issues 9 U9 U10 U11 U12 U13 U14 U15 U16 U17 U18 U19 U20 Pop-up windows are used for the print, tell-a-friend and cookie information functions without warning the user. Check boxes and radio buttons use a non-associated label instead of <fieldset> and <legend> tags. 2 My settings form does not use associated labels. Absolute widths are used for search field and buttons. Discussion forum post form does not use associated labels. Absolute widths are used for discussion forum post form fields. Search function field does not have a title or label. Subscription form does not use associated labels. Tell-a-friend form does not use associated labels. PDF form does not use associated labels. Pop-up window is used for the ReadSpeaker function without warning the user. Register users form does not use associated labels. Units/QuickBar.ascx, Units/CookieInfo.ascx All All Units/PersonalSettings.ascx All Units/Search.ascx All 3.3, Units/Conference.ascx All All 3.3, Units/Search.ascx All Units/Subscribe.ascx All Units/ Page.aspx All Units/PdfForm.ascx All Units/ReadSpeaker.ascx All Units/Register.ascx All U21 Profile finder form does not use Units/ProfileFinder.ascx All

10 Accessibility of EPiServer s Templates Template Issues 10 associated labels. U22 Personal profile edit view form does not use associated labels. Units/Profile.ascx All U23 Login form does not use associated labels. (/Util/Login.aspx) All U24 Blog forms do not use associated labels. All U25 Content language declaration does not reflect actual language. MasterPages/MasterPage.master All U26 Menu links and link lists are not defined as lists and cannot be bypassed. All menu and listing controls All U27 Top menu links are not separated by printable characters. Units/TopMenu.ascx All U28 Alphabetical index navigation links are not separated by printable characters. Units/AlphanumericListing.ascx All U29 Alphabetical index content link list is not defined as a list and cannot be bypassed. All menu and listing controls All Category: Markup and CSS WCAG 1.0 Issue Cause File Environment Checkpoint Priority M1 M2 Workroom list page contains invalid markup. 3 Extra empty <title> tag is generated. (ASP.NET 2.0) /Workroom/Templates/Units/WorkroomList.ascx All 1.1, 3.2 1, 2 MasterPages/MasterPage.master ASP.NET M3 Quicksearch button uses invalid Units/QuickSearch.ascx All 3.2 2

11 Accessibility of EPiServer s Templates Template Issues 11 attribute value. M4 EPiServer Property Web Control uses <span> tags around content, which may cause validation errors. 4 All M5 EPiServer Property Web Control uses invalid attributes when logged in and when simple editing is enabled, which may cause validation errors. All M6 Listing links may contain empty target attributes, which causes validation errors. Units/Listing.ascx All M7 Non-encoded language parameter used in some links for globalized sites when sitestructure-urls are not used. and core Globalized site without using Web addresses that are based on the site structure M8 Menu generates invalid attribute after postback. 5 Units/Menu.ascx All M9 EditMenuName is not a valid CSS property. 6 (/styles/editor.css) All M10 CSS contains some invalid style definitions. /styles/editor.css, /styles/structure.css, /styles/units.css All M11 Form-field markup contains invalid characters. 7 (ASP.NET 2.0) ASP.NET M12 RSS Reader's table has an invalid border attribute. Units/RssListing.ascx All M13 Search function contains invalid markup. Units/Search.ascx All 3.2 2

12 Accessibility of EPiServer s Templates Template Issues 12 M14 Index uses invalid <nobr> tags. M15 Index uses invalid list markup. 8 M16 M17 M18 M19 M20 M21 M22 M23 M24 M25 M26 M27 File listing contains invalid markup. 9 Discussion forum contains invalid markup. Tell-a-friend function does not have a doctype declaration. Tell-a-friend function contains erroneous css declaration. 10 Flash template contains invalid markup. PDF form script section is not properly declared. ReadSpeaker script section is not properly declared. ReadSpeaker link contains non-encoded characters. ReadSpeaker pop-up window contains invalid markup. Mobile template contains invalid markup. Register users template uses <span> tags around password <div>, which causes validation errors. 11 Personal profile edit view contains invalid markup. Units/SiteMap.ascx All All Units/FileListing.ascx All All Units/ Page.aspx All Units/ Page.aspx All Units/FlashBody.ascx All Units/PdfForm.ascx All Units/ReadSpeaker.ascx All Units/ReadSpeaker.ascx All Units/ReadSpeaker.ascx All Units/Mobile.aspx All All Units/Profile.ascx All 3.2 2

13 Accessibility of EPiServer s Templates Template Issues 13 M28 Print function does not have a doctype declaration and contains invalid markup. Units/PrintFunctions.ascx All M29 Cookie information function does not have a doctype declaration and contains invalid markup. Units/CookieInfo.ascx All M30 Login page does not use the correct doctype and contains invalid markup. (/Util/Login.aspx) All M31 Document list template contains unclosed <img> tags. Util/DocumentList.ascx All M32 Document template contains unclosed <img> tags. Util/Document.ascx All M33 Blog post form uses non- XHTML Editor, which causes validation errors. /Blog/Units/EditorBlog.ascx All M34 Blog table with posts and comments contains validation errors. /Blog/Units/EditListing.ascx All M35 Workroom navigation tab markup contains invalid characters. 12 (ASP.NET 2.0) ASP.NET M36 Workroom page contains <style> block inside the page <body> tag, which causes validation error. /Workroom/Templates/WorkroomPage.aspx All M37 Workroom navigation tabs contain invalid markup. 13 All M38 Workroom content links may contain empty target attributes, /Workroom/Templates/Units/Overview.ascx All 3.2 2

14 Accessibility of EPiServer s Templates Template Issues 14 which causes validation errors. M39 Workroom content links contain invalid characters. 14 and core All M40 Workroom calendar edit view contains invalid markup. 15 All M41 Template is not cross-browser compatible. 16 and core Browsers other than Internet Explorer. N/A N/A Category: Tables WCAG 1.0 Issue Cause File Environment Checkpoint Priority T1 File listing table is not correctly designed. Units/FileListing.ascx All 5.1, 5.5 1, 3 T2 PDF form list table is not correctly designed. Units/PdfForm.ascx All 5.1, 5.5 1, 3 T3 Profile finder results list table is not correctly designed. Units/ProfileFinder.ascx All 5.1, 5.5 1, 3 T4 Blog table with posts and comments is not correctly designed. /Blog/Units/EditListing.ascx All 5.1, 5.5 1, 3 T5 Workroom member tables are not correctly designed. /Workroom/Templates/Units/Members.ascx All 5.1, 5.5 1, 3 T6 Tables are used for form layout. 17 Units/Xform.ascx All T7 Tables are used for formstatistics layout. All T8 RSS Reader uses table for layout. Units/RssListing.ascx All 5.3 2

15 Accessibility of EPiServer s Templates Template Issues 15 T9 Calendar uses nested tables for layout. (ASP.NET) T10 Index uses tables for layout. T11 T12 T13 Profile finder form and detailed results view use tables for layout. Subscription form partly uses table for layout. Tell-a-friend function uses table for layout. (ASP.NET) T14 PDF form uses table for layout. T15 T16 T17 T18 Personal profile uses table for layout. Login page uses table for layout. Portal pages use tables to include portal content. Changed recently does not provide a summary for the results table. Units/Calendar.ascx All All Units/ProfileFinder.ascx All All Units/ Page.aspx All Units/PdfForm.ascx All Units/Profile.ascx All (/Util/Login.aspx) All All Units/ChangedPages.ascx All Category: Scripts WCAG 1.0 Issue Cause File Environment Checkpoint Priority S1 Print function does not work when JavaScript is disabled. Units/QuickBar.ascx JavaScript disabled S2 Tell-a-friend function does not work when JavaScript is Units/QuickBar.ascx JavaScript disabled 6.3 1

16 Accessibility of EPiServer s Templates Template Issues 16 disabled. S3 Quick-search function does not work when JavaScript is disabled. Units/QuickSearch.ascx JavaScript disabled S4 Cookie information function does not work when JavaScript is disabled. Units/CookieInfo.ascx JavaScript disabled S5 Submit buttons do not work when JavaScript is disabled and site-structure-urls are used. JavaScript disabled and Web addresses that are based on the site structure S6 Switching between form and form statistics using link does not work when JavaScript is disabled. (ASP.NET) Units/Xform.ascx JavaScript disabled S7 Login function does not work when JavaScript is disabled. Units/QuickBar.ascx JavaScript disabled S8 Calendar navigation does not work when JavaScript is disabled. (ASP.NET) Units/Calendar.ascx All S9 Alphabetical index does not work when JavaScript is disabled. Units/AlphanumericListing.ascx All S10 File listing folder navigation does not work when JavaScript is disabled. Units/FileListing.ascx All S11 Discussion forum does not work when JavaScript is disabled. Units/Conference.ascx JavaScript disabled S12 Slide show only shows first page if JavaScript is disabled. Units/PageRoller.ascx JavaScript disabled 6.3 1

17 Accessibility of EPiServer s Templates Template Issues 17 S13 Profile finder navigation links do not work when JavaScript is disabled. (ASP.NET) Units/ProfileFinder.ascx JavaScript disabled S14 Personal profile edit links do not work when JavaScript is disabled. (ASP.NET) Units/Profile.ascx JavaScript disabled S15 Login page's detailed cookie information is not available when JavaScript is disabled. (/Util/Login.aspx) JavaScript disabled S16 Blog does not work when JavaScript is disabled. JavaScript disabled S17 Workroom does not work when JavaScript is disabled. JavaScript disabled Category: General WCAG 1.0 Issue Cause File Environment Checkpoint Priority G1 Web Parts framework and do not comply with current recommendations and standards. 18 (ASP.NET 2.0) ASP.NET , 3.2, 5.3 etc. 1, 2, 2 G2 News groups pages do not comply with current recommendations and standards. All 3.2 etc. 2 G3 Workroom document tab uses EPiServer File Manager, which does not comply with current recommendations and standards. All 3.2 2

18 Accessibility of EPiServer s Templates Template Issues 18 1 For render modes Tree1 and Tree2. 2 Fixed in Missing alt attribute, invalid NAME attribute, <div> tag contained inside <a> tag. 4 All elements are not allowed inside <span> element. 5 translate attribute on children indicator <img> tag. 6 Property used for formatting style options in the EPiServer Editor. 7 $ is used in id's. 8 For render mode List. 9 xmlns attribute, xhtml. 10 Contextmenu css is included outside the head section. There should not even be a contextmenu. 11 Block elements are not allowed inside <span> element. 12 $ is used in id's. 13 Invalid OnClick attribute, invalid nesting of <div> tags. 14 "&" characters are not encoded. 15 Invalid OnClick attribute in InputDate Web Control. 16 Layout problems in browsers other than Internet Explorer (e.g. Firefox, Opera). 17 Code sample pre-released for 4.61 workaround (single-column div-based form layout). 18 Microsoft is currently working on improvements according to WAI.

Creating Accessible Web Sites with EPiServer

Creating Accessible Web Sites with EPiServer Abstract This white paper describes how EPiServer promotes the creation of accessible Web sites. Product version: 4.50 Document version: 1.0 2 Creating Accessible