Blackboard Staff How To Guide Accessible Course Design

Blackboard staff how to guide
Accessible Course Design

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
I:\LH Support\Blackboard\BB7 How to Guides Staff\BB7 How to Guides Oct 2008\BB7 Accessibility 100519.doc
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.
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.
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.
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.
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.
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
• Blackboard staff how to guide – Menu and Banner
• Blackboard (Minimum Online Presence) training http://www.rmit.edu.au/browse;ID=6sgd2h0t970p

Blackboard Staff How To Guide Accessible Course Design

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Blackboard Staff How To Guide Accessible Course Design

Enviado por

Direitos autorais:

Formatos disponíveis

Blackboard staff how to guide

Accessible Course Design

Figure 1. Course Menu Design options.

Figure 2. Course banner example.

Language and structure

Figure 3. Editor interface

Adding links and attaching files

Figure 6. Insert Image options provided by the Editor.

Figure 7. Format Table Information available in the Editor.

Figure 8. Insert MPEG/AVI File options.

Você também pode gostar