Accessibility Guidelines Bell.ca Special Needs. Cesart April 2006

Transcription

1 Cesart April 2006

2 Created by: Dominic Ricard & Loïc Nunes Effective Date: April 2006

3 TABLE OF CONTENTS 1 Introduction Target Audience Copy Decks Document structure Headings/titles Language identification Images - ALT texts and longdesc Links - understandable out of context Images / Visual Content Colour and contrast Size / spacing XHTML Code Basic HTML tags Meta tags Cascading style sheets Alternate style sheet (High Contrast) Alternate style sheet (Large Font) New/modified elements JavaScript Province selection menu Expandable boxes Menus and navigation - hidden and visible Tab order Access keys Tables Table structure (THEAD, TBODY, Caption, etc.) Scope and header attributes Legal notes (footnotes) Cross-browser code Tools XHTML validators WAI validators Firefox extensions Screen readers Appendices References WCAG 1.0 checklist Glossary

4 1 Introduction The situation? Customers with visual, hearing, physical or mental disabilities are not always able to navigate bell.ca to find the information they are looking for. The solution? Build an accessible section that will help disabled customers to access information on products and allow them to purchase them through the call centre. This section will be built using the WAI Double-A accessibility standards as defined by the W3C. The WCAG 1.0 Priority 1 and 2 checklists will be used to define the accessibility level of the section. ( This document presents the different elements that are used in the Bell.ca Special Needs section and how to properly apply accessibility requirements to them. Four good reasons for making a Web site accessible: Accessibility: a general choice An accessible Web site is one that offers equivalent access regardless of the technical equipment used, the read software and its customization options. The content and functionalities of the service are designed in a way that is independent of how they will ultimately be presented on the screen (or other device). This is accomplished by the use of Cascading Style Sheets (CSS), ALT attributes for images, text dubbing for audio webcasts, etc. Accessibility: a public-spirited choice An accessible site provides handicapped individuals with access via specific technical devices. Having Web access affords these individuals greater autonomy. Web access plays a role in social, cultural and career integration. In Canada, over 2 million people are impacted. Accessibility: an economical choice Site longevity in a context of constant technological change. Lower maintenance costs. Higher quality of service for everyone. Better image for the BCE.ca site. 4

5 Accessibility: an international choice WAI/W3C. Widely distributed directives. A principle adopted by the Canadian government. 2 Target Audience This document is written with the assumption that the reader has a good understanding of HTML standards, i.e., XHTML 1.0 Transitional, CSS 2.1 and JavaScript. For the sections that deal with graphical elements, we also assume the user is familiar with the tools required to manipulate these elements (e.g., Flash, Photoshop, etc.). We also assume that the reader has a good understanding of the Bell.ca Style Guide and the tools used by Bell.ca to integrate content. The target audiences for this document are the content writers, designers and content integrators of Bell.ca. 3 Copy Decks In this section, we present the different elements that need to be identified by content writers in producing a copy deck. These elements are essential in order for screen readers to read and interpret the text properly. 3.1 Document structure People with handicaps use peripherals that give sequential access to information. This makes it important to provide a logical navigation structure to make it easier to navigate pages and understand their content. The content structure must be kept simple and clear, respecting target users needs and use capacities. In terms of page content navigation, the title, taborder, tabindex and accesskey elements are the ones primarily used to provide rapid access to different types of content Headings/titles Establish a hierarchy for page content by using H1, H2, H3, H4 titles. For instance, a user employing a screen reader will be able to read the H1 title first, followed by the others, to get a rapid overview of the page s contents, exactly as one would use an index in a Word document. This means the reader doesn t have to look at the entire page to decide what is interesting and what is less so. 5

6 The use of titles in combination with the tabindex and accesskey elements also gives the user better control of the navigation from the keyboard. 3.2 Language identification Definition of language is essential in order for screen readers and other tools to properly output the content to the user. For example: Top Navigation: Need to identify language change lang="fr" 3.3 Images - ALT texts and longdesc As the copy decks are written, design elements are defined with their content. In an accessible site context, the content writer must bear in mind that the document needs to be understandable even without the presence of visual content. To allow users to understand the content of images, we need to describe it as clearly as possible, through the use of ALT texts and longdesc. The description sometimes needs to be more detailed than the text found in the image, since blind users won t have the visual assistance given by the image itself. Every single image on every single page of the section should have a text equivalent, or so-called "ALT text", specified in the alt attribute of the <img> tag. Screen readers read it, text only browsers display it, Google indexes it, and visual browsers can display it as a tooltip or on the status line (although you as the designer can override this). Example of bad ALT text: alt="click here!" Serves no useful purpose (unless of course it's on a graphic that says "Click here!"). Example of good alt text: alt="new Philips mobile phone with flip, camera and Bluetooth". This is useful and easy to understand without the context. 3.4 Links - understandable out of context Adding titles to links 6

7 For example, adding a title attribute is really important when the link text itself might not be sufficient for the reader to decide whether to click the link. Examples: On the Special Needs Centre landing page, we have a link to the discount page. The link text is simply Discounts, but the title attribute gives some further information: <a title=" Discounts on equipment and services are available " href="/stats/">discounts</a> 4 Images / Visual Content This section covers some elements that need to be taken into consideration when creating mockups and content fo rthe Special Needs section. 4.1 Colour and contrast A specific example that is common on Web sites: link text There are two potential problems related to colour. First, your link text may not contrast sufficiently with your background colour. Any very light colour on a white background is trouble; the link text may simply disappear into the background. Similarly, a dark colour on a black background is trouble. This actually applies to all text, not just links, but it's fairly common on Web sites for text to be readable and links to be made unintentionally unreadable, which is why I mention links in particular. The second potential problem concerns link decoration. The CSS redefines a rule to make links a different colour, so you need to make sure that the links are also distinguishable in some other way, like bold font. Otherwise, the link text might be perfectly readable, but colour-blind people won't be able to tell that it's a link. To check for link decoration problems, look at the CSS rules for "a" tags. For example, if you have a rule like this in your CSS, then your links are only distinguished by their redness, which is not sufficient: a { text decoration: none; color: red; } You can keep your links red, but you need to make sure that the links are also bold, or underlined, or italicized. To make them bold as well as red, add one line: a { text decoration: none; color: red; font weight: bold; /* add this line */ 7

8 Hints Don t use red on black or black on red. Don t use red next to green or green next to red. Use colour names that don t create confusion. Black, grey and white are well perceived by almost everyone. WCAG guideline: don t rely on colour exclusively; use another mode (text and graphics must be understandable without the colour). Make sure there is good contrast to ensure good readability. Color should be reinforced by other methods such as bold or underlining. Avoid colour references in the text (e.g., don t say: as shown in the yellow box ). Add examples (Requires final Mockups) 4.2 Size / spacing To be defined by Graphic Designer (Requires final Mockups) 5 XHTML Code Code is very important when it comes to accessibility. It is used to describe in a logical manner how the content should be presented to the user. Accessible code means that absence of JavaScript or CSS will not affect the content structure and actual content of the document. It might affect the presentation or the "cool" features but the site must remain browsable even if these features are disabled (intentionally or because they are unavailable on the browser/device used). As you are writing code, you need to ask yourself these questions: - How will someone access this without a mouse? - How will this display without CSS? - What should I do if the user does not have "Plugin XYZ"? - What will happen to my page if the font size is increased On top of that, it is important to use the right HTML markup in the right place. Common accessibility mistakes include: - Do not use <Hx> tags to set "size" of text: Heading tags should only be used to define the structure of a document. H1 8

9 would be the page title, H2 would be a chapter title, H3 a section title, and so on. - Do not use tables to align presentation elements: Tables should only be used to format "DATA". A list of products, a calendar and a channel guide are all good examples of places where tables should be used. The approach proposed by the W3C consists of separating the structure of a document from its presentation. This solution, implemented in xhtml, makes it possible to structure the document in a way that is independent of the output peripheral, while CSS style sheets are used for layout purposes. This latter technology supports browser screens as well as voice synthesizers, printing, Braille printers, and so on. Example: CSS syntax will be used to describe the layout of H1-type titles, and H2 must be used to indicate a subsection of H Basic HTML tags The HTML structure of an accessible document does not differ much from what we are used to. Good structure and properly defined elements are basically the keys to a good accessible site. Define DOCTYPE: (Current DOCTYPE used on NBCA) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " HTML tag: (Need to define document language): <html lang="en" xml:lang="en xmlns=" 5.2 Meta tags In addition to the standard Description and Keywords tags, Dublin Core Metadata tags can be used to convey more information. For the Special Needs section, the following tags were added to the documents: DC.Title DC.Language DC.Subject DC.Description These meta tags help identify the content of the document and the language used in it. 9

10 Provide example of content for each tag. To be defined by Bell. 5.3 Cascading style sheets The style sheets defined in the course of the New Bell.ca project already adhere to accessibility standards and do not need to be altered. New style sheets were nonetheless created to provide two additional looks to help users access the content: High Contrast and Larger Font Alternate style sheet (High Contrast) To be defined by HTML Integrator Alternate style sheet (Large Font) To be defined by HTML Integrator New/modified elements To be defined by HTML Integrator. accessibility.css (new) #Accessibility-Nav { margin-left:-10000px; } #Accessibility-Nav ul li { display: inline; } #content.togglelist.togglelistelement { cursor: pointer; margin: ; } #content.togglelist li.fold.togglelistelement, #content.togglelist li.unfold ul li.fold.togglelistelement { background: url("/web/common/all_languages/all_regions/images/arrows/gen_gr_arrow_gray_dn.gif") no-repeat right center; } #content.togglelist li.unfold.togglelistelement, #content.togglelist li.unfold ul li.unfold.togglelistelement { background: url("/web/common/all_languages/all_regions/images/arrows/gen_gr_arrow_gray_up.gif") no-repeat right center; } #content.togglelist li.unfold ul li.fold ul, #content.togglelist li.unfold ul li.fold ol, #content.togglelist li.unfold ul li.fold a.close, #content.togglelist li.unfold ul li.fold div { display: none; } #content.togglelist li.unfold ul li.fold ul { display: none; } #content.togglelist li.unfold ul li.unfold { margin: ; display: block; } 10

11 5.4 JavaScript JavaScript is part of any good Web site. It allows developers to create dynamic effects and control some elements of the document. In order to make JavaScript accessible, it s important to be aware of several things: The user might not have a mouse to activate the element code ( onmouseover, "onmouseout"); Users employing screen readers will not see dynamic menus if they are not part of the document structure (menus driven by JavaScript arrays and manipulation of DOM). Using Anchors links will position the reader where the change occured; The user agent might not support JavaScript at all. In that case, the user must still be able to navigate through the site Province selection menu <!--province selector--> <li><a href="#regionselection" onclick="ymove('provinceselectorbox');">current Province:ON</a> <div id="provinceselectorbox" style="top: -108px;"> <a name="provinceselectoranchor" id="provinceselectoranchor" /> <label for="provinces">select your province:</label> <select id="provinces"> <option value="ab">alberta</option> <option value="bc">british Columbia</option> <option value="mb">manitoba</option> <option value="nb">new Brunswick</option> <option value="nl">newfoundland</option> <option value="nt">northwest Territory</option> <option value="ns">nova Scotia</option> <option value="nu">nunavut</option> <option selected="selected" value="on">ontario</option> <option value="pe">prince Edward Island</option> <option value="sk">saskatchewan</option> <option value="yt">yukon</option> <option value="qc">quebec</option> </select> <button class="orangerightarrow" type="button" onclick="gotoprovince(document.getelementbyid('provinces').value);"><img src="bell.ca_files/btn_arrow_rt.gif" alt=""></button> </div><!-- end provinceselectorbox --> </li> <!--end province selector--> To be improved. Still rely on JavaScript Expandable boxes Use background images to display the "show"/"hide" icon, as it should not be part of the menu structure. Also, if JavaScript is disabled, content should still be accessible (all menus should be expanded if JavaScript is disabled). Expandable Boxes Code Example. (JavaScript Code). To be defined by HTML Integrators. Expandable Boxes Code Example. (HTML Code). To be defined by HTML Integrators. 11

12 5.5 Menus and navigation - hidden and visible In order to make the site easier to navigate for disabled people (especially people using screen readers), a list of hidden links is added at the top of the site navigation in order to allow users to skip the navigation elements and go directly to the content they are looking for. This DIV should be placed right after Bell's logo. <div id="accessibility-nav"> <ul> <li><a href="#content">skip to content</a></li> <li><a href="#mainnav">skip to navigation</a></li> </ul> </div> Since NBCA does not use dynamic menus and the current NBCA menus are already presented in list form, no modification needs to be made to the current menu output code Tab order To ease access to content and navigation elements, taborder attributes have been added. Each section of content will have its own taborder group and each group will be a range of 1000 increments. Content links: Top navigation, logo and breadcrumb: Left navigation: Search: Footer:

13 Ensure a logical tab order through links, form controls, and objects. The order of links on HTML pages is positioned to provide the best response to the specific use characteristics of adapted peripherals such as screen readers, Braille displays, etc Access keys Most browsers support jumping to specific links by typing keys defined on the website. On Windows, this is done by pressing ALT + an access key; on Macintosh, by pressing Control + an access key. While there are no standards for which keys should be assigned to which features, here are keyboard shortcuts for all pages. They define the following: Access key 1 Home page Access key 2 Skip navigation link Access key 3 Contact us Access key 4 Site map Access key 5 Legal Access key 6 Accessibility statement 13

14 Example: to skip navigation links, create a link to skip over the navigation bar, and assign it accesskey="2". <a class="skiplink" href="#startcontent" accesskey="2">skip over navigation</a> 5.6 Tables Until recently, tables were used on bell.ca to render graphical elements of content pages. It was the best way to format pages so that they would be properly displayed in Netscape 4.75, which was a Bell.ca-supported browser. Now that Bell no longer supports this browser, tables have been replaced by DIVs to align and position the content properly. This does not mean that tables should never be used. Tables are the way to go when presenting tabular information (data tables). In the Special Needs section, we use tables to display every list of products for all lines of business. Example of a 3-column products table (icon, product description, price) The most important thing in creating a data table is marking up the headers properly. In the case of a catalogue with prices, this means placing the prices of equipment along the top. You should definitely include headers for the price and equipment; if you don't want them actually visible, you can make them invisible with CSS. But the headers need to be there nonetheless, because screen readers rely on them to help blind users 14

15 navigate through the table without getting lost. If we don t put them in, we get a bunch of prices, but no context to keep track of them. Adding proper headers to the catalogue allows screen reader software to associate the table header (prices) with the table data (equipment), and it reads them together: e.g. "Sony mobile $55, Ericsson mobile $35, Panasonic mobile $85" Another important issue: the <caption> tag must be the first thing after the <table> tag, and the row of <th> tags should be the first thing after that Table structure (THEAD, TBODY, CAPTION) Example of table code for Wireless Phones. To be defined by HTML Content integrators Tags attributes (SCOPE & HEADERS) Example of table code for Wireline Care Plans. To be defined by HTML Content integrators 5.7 Legal notes (footnotes) To be defined by HTML Content integrators 5.8 Cross-browser code To be defined by HTML Content integrators 6 Tools Here's a list of tools to help us identify accessibility issues: 6.1 XHTML validators WAI validators WebXACT (Bobby); Cynthia says; Ocawa; Wave. 6.3 Firefox extensions The Mozilla/Firefox Accessibility Extension makes it easier for people with disabilities to view and navigate Web content. Developers can use the toolbar to check their structural markup to make sure it matches the page content. 15

16 Mozilla Accessibility Extension , by Illinois Center for Instructional Technology Accessibility, released on Jan 20, 2006 Firefox screen shot 6.4 Screen readers Jaws: 16

17 7 Appendices 7.1 References W3C 7.2 WCAG 1.0 checklist D:\_Data\ Accessibility\WCAG_C 7.3 Glossary Term NBCA WCAG Definition New Bell.ca Web Content Accessibility Guidelines 17