The purpose of this guide is to help online course authors in creating accessible content using the Blackboard page editor. The advice is based primarily on W3C s Web Content Accessibility Guidelines 1.0 (WCAG 1.0). Topics Menu Banner Language and structure Editor interface Text formatting Equations Adding links and attaching files Images and animation Tables Multimedia (embedded or stand-alone) Menu Use text menu rather than buttons. Note: Text menu can be resized using browser controls, but text on buttons is fixed and cannot be enlarged. Chose text and background colours that provide adequate contrast. Use short and descriptive headings for menu items. Figure 1. Course Menu Design options. Copyright 2008 RMIT University Blackboard 7 staff how to guide (Iza Bartosiewicz) Page 1 of 7
Banner When creating the banner image, choose colours that provide adequate contrast. Refer: http://www.blackwidows.co.uk/resources/color-contrast-analyser.php to test specific colours Make sure that colours you use meet accessibility requirements for colour blindness. Refer: http://www.iamcal.com/toys/colors/whatis.php to test specific colours or print your page in black and white to see if the image can be interpreted correctly. Course name is inserted automatically as a text alternative for the banner image. Do not add any additional information to the course banner image unless it is also available in text on the Announcements page. Note: Since the text alternative cannot be modified, any additional information included in the image will be hidden from screen readers. Resize the banner image before uploading and make sure it fits within the browser window that is 800 pixels wide (as a minimum) without making the page scroll horizontally. Note: The banner image should be no more than 585 pixels wide to account for the width of the frame containing the course menu. Figure 2. Course banner example. Language and structure Write meaningful and concise headings when adding items, folders, etc. Group content into logical sections using headings, paragraphs and lists. Write clearly and concisely using short sentences and direct language. Expand acronyms and abbreviations (if not common) when they first occur on each page (add them to the Glossary section if used) Spell check and grammar check your content before publishing it. Copyright 2008 RMIT University Blackboard 7 staff how to guide (Iza Bartosiewicz) Page 2 of 7
Editor interface Figure 3. Editor interface Text formatting While typing or copying text into the Editor, do not change its default Times New Roman font into Arial or any other font face. Once the published page is viewed in the browser the text will be displayed as Arial. Note: Arial font type is recommended for all online content and our global style sheet (CSS) instructs the browser to display this font as a default. You will save time and bandwidth by not changing the font manually in the Editor. When changing the default colours, ensure that the background and foreground colours provide adequate contrast. (E.g. avoid using light text on a light background or dark text on a dark background). Refer: http://www.blackwidows.co.uk/resources/color-contrast-analyser.php to test colours. Do not use colour alone for highlighting or conveying a meaning. Use colour in combination with bold, text or icons to ensure that if colour is not visible, the information can be correctly interpreted. Note: Check if the colours you use meet accessibility requirements for colour blindness. Refer: http://www.iamcal.com/toys/colors/whatis.php to test specific colours or print your page in black and white to see if information can still be read correctly without colours. When adding a page (item) to your course, use the appropriate headings styles and use them in a correct order. E.g. heading 1 for the document title, heading 2 for main headings, heading 3 for sub-headings under each heading 2, etc. Note: In the context of the entire web page as created by Blackboard, this advice will in fact produce a semantically incorrect structure. However, the alternative would be to avoid using heading styles, which may be worse. This way at least a portion of the page will be properly structured. Do not indicate headings within the document by adjusting font sizes and do not use heading styles for visual effect, or to make text larger or smaller. Align your content to the left. Do not use right, full or left justify because they create readability problems. When changing default styles in the editor, ensure that you use them consistently across your course. E.g. if you are using bold text with yellow background for highlighting important information, use this style in each course document you create. Avoid pasting content directly from Word. If this is unavoidable, use the Clear Formatting button to remove Word s formatting styles and reformat the document using the styles available in the editor. Note: Content pasted from Word will also include Word s style information which overrides the global styles of the editor. This results in a bloated source code, affects the download time and can make the content difficult to edit. Equations If adding mathematical equations using either MathML or WebEQ (Java) plug-ins available in Blackboard, make them also available in an alternative format. E.g. add equations as images with an appropriate text alternative or add text descriptions for equations used. Copyright 2008 RMIT University Blackboard 7 staff how to guide (Iza Bartosiewicz) Page 3 of 7
Adding links and attaching files Always create meaningful and descriptive link text that clearly indicates where the link is pointing. Do not use click here, here, more and do not turn URLs into links if possible (Blackboard editor turns some URLs automatically into links, this cannot be avoided). If you are creating links to non-html files, always include document format, file size and number of pages (or the length of a multimedia file) as part of the link text, e.g. Enrolment form, (PDF, 30 KB, 1 page) Avoid opening links in a new browser window. Where it is necessary to open a new window, provide a warning as part of the link text, e.g. Assignment (opens new window) If using Title (tooltip) option when inserting links, do not rely on this feature if you want to provide important information. Tooltips appear only when the mouse is positioned over the link and will not be visible if keyboard is used for navigation. Note: Tooltip content displays in the <title> attribute in HTML. Figure 4. Insert Link options appear when link text is highlighted and the Hyperlink icon is selected. Figure 5. Insert Content Link options appear when the Attach File icon is selected. Copyright 2008 RMIT University Blackboard 7 staff how to guide (Iza Bartosiewicz) Page 4 of 7
Images and animations Resize images to a desirable size before embedding them in the page to avoid image distortion and keep the file size small. Always add alt text for images (Blackboard editor automatically adds alt text to course banners and photographs under Staff Information). Ensure that: o Decorative images have a blank text alternative (insert space into the field using the spacebar) o Content images have a text alternative that is equivalent to the information contained in the images o Images with text (e.g. buttons, logos), have a text alternative that is the same as the text in each of the images o Graphs, charts, maps or animations have a meaningful description of their content o Image maps have an appropriate text alternative and each clickable map area has an appropriate text alternative When adding a link to the embedded image, avoid using the Launch in new window option. If the image has to be launched in a separate window, provide a warning that this will happen (e.g. add This link will open in a new window just before the image). Figure 6. Insert Image options provided by the Editor. Copyright 2008 RMIT University Blackboard 7 staff how to guide (Iza Bartosiewicz) Page 5 of 7
Tables Avoid using tables for layout. If layout tables are used, ensure that the content in them appears in the correct order when the table is linearised and do not add <caption> and <th> tags to the layout tables. Keep data tables simple and avoid merging cells or nesting tables (creating a table within another table). Add descriptive caption using <caption> tag to data tables where appropriate. Use the HTML Source Mode option to add <th> tag to each cell containing row or column headers. If complex tables are used, consider designing them in another application (e.g. Dreamweaver) using the appropriate markup for complex tables and paste the HTML code into the Blackboard editor. Make sure the Editor is in the HTML Source Mode. Use percentages not pixels for table width so that the entire table will resize when the size of the browser window is changed. Avoid designing tables that will make the horizontal scrollbar appear if browser window or screen resolution is more than 800 pixels wide. Figure 7. Format Table Information available in the Editor. Copyright 2008 RMIT University Blackboard 7 staff how to guide (Iza Bartosiewicz) Page 6 of 7
Multimedia (embedded or stand-alone) Add descriptive alt text for all multimedia elements Ensure that videos you are adding to your course have captions and audio descriptions where appropriate. They must be synchronised with the presentation. If using audio files, provide transcript on the same page where the audio file is available for downloading or playing. When embedding multimedia files, leave users in control of the player: o Always add controls o Do not select the Loop option o Do not select the AutoStart option When creating links to multimedia presentations, include information about the file type, size and length as part of the link text (e.g. Tour of RMIT city campus, MPG, 5 MB, 12 minutes) Insert MPEG/AVI File options. Separate options are available for Flash, Audio and QuickTime. Figure 8. Insert MPEG/AVI File options. Further Information Web Accessibility Initiative, World Wide Web Consortium http://www.w3.org/wai/ WebAim.2007.Keeping Web Accessibility in Mind Video http://www.webaim.org/intro/video.php Test specific colours that provide adequate contrast. http://www.blackwidows.co.uk/resources/color-contrast-analyser.php Check colours you use meet accessibility requirements for colour blindness. http://www.iamcal.com/toys/colors/whatis.php Menu and Banner Blackboard (Minimum Online Presence) training http://www.rmit.edu.au/browse;id=6sgd2h0t970p Copyright 2008 RMIT University Blackboard 7 staff how to guide (Iza Bartosiewicz) Page 7 of 7