Web Accessibility Checklist

Transcription

1 Web Accessibility Checklist = Web Content Accessibility Guidelines published by the World Wide Web Consortium (W3C) 508 = Section 508 of the Rehabilitation Act = Both CATE and Moodle take care of the rule automatically M = Moodle takes care of the rule automatically C = CATE takes care of the rule automatically Rules Rule Description Explanations and Solutions 508 a 1. Non-Text content, providing Alternate Text (ALT text) All non-text elements such as images, applets or image maps have text equivalents. ALT tags are descriptive of the image, etc. Images that include text should have the text reflected in the ALT text (also see about text in images) Decorative images, redundant images, and images used for spacing have empty ALT text. Charts, graphs, etc. that need long descriptions are described in surrounding text or provide a link to a separate page with description If you write HTML, you may use the "LONG DESC" attribute to link to another page In CATE, alternative text for images can be indicated at the bottom of the page where you choose the image to insert (except for nav bars - access the field for alternative text in the Edit Button configurations). In Moodle, when placing an image using the Editor, put your alternative text in the Image description field. 2. Images consisting of text Where possible, do not use an image of text, use the text placed in the HTML. If the same visual presentation can be made using When creating screen shots or other text alone, an image is not used to present that text. images with text, make sure the text is reflected in the ALT text or in the surrounding text. 508 b 3. Multi-media There is help for faculty to get transcripts and captions for their own multimedia Multi-media files with audio have synchronized files. Contact Media Services. captioning of the audio portion Audio only files have a text equivalent such as a See the Integrating Multimedia into transcript. Online Courses help document for A silent web slide show presentation has text extensive information on how to find, alternatives associated with the graphics. create, and implement multimedia in Moving visual information have text equivalents of your course, including accessibility the auditory description of the movements or ALT policies. text for short animations. A mechanism is provided to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds. 4. Embedded multimedia is identified via This rule is satisfied if you have accessible text descriptive text placed before the embedded video. Embedded multimedia refers to the use of code to place multimedia on an HTML page rather than linking to it. This rule includes the use of embed code from YouTube or Vimeo, or using the HTML embed or object tags.

2 508 e, f 5. Image Maps Image maps are client-side. CATE and Moodle users will not likely have an image map unless they link to a If a server-side image map is used, redundant text 3rd party site links for each hotspot are used. Those creating their own HTML pages and including an image map, need to provide the extra code of redundant text links. 508 i 6. Frames CATE and Moodle users will not likely Each frame has sufficient information to determine the purpose and relationship to the other frames (e.g. appropriately titled) The source of each frame is an HTML file. have frames unless they link to a 3rd party site. Inline frames that use the iframe tag (used in YouTube s and Vimeo s embed code) do not need the title attribute as frames do. 7. Semantic Markup, Headings Both CATE and Moodle do much to 1.3.1, , Semantic markup is used to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used appropriately. Page headings and labels for form and interactive controls are informative. Avoid duplicating heading text (e.g., "More Details") or label text (e.g., "First Name") unless the structure provides adequate differentiation between them. satisfy this rule. Whenever possible, use the headings and list features where appropriate, rather than simulate a heading or list. In CATE when creating a long page of content, place headings in the page by using blocks with heading text put in the "Heading for this block" field. In Moodle when creating a long page of content, place headings in the page, by selecting the heading text and from the first drop down menu (says Paragraph by default) in the Editing Box, select a heading level. When adding a Label in Moodle, be sure to set it to be a heading. 508 c 8. Color In CATE, if you choose one of the preset color schemes in Layout and Colors, the Color is not solely used to convey information or colors have been set to be accessibility indicate an action. compliant Foreground text and background colors have sufficient contrast of at least 4.5:1. Text that is over 18 point or 14 point and bold needs a contrast of at least 3:1. Color alone is not used to distinguish links from surrounding text UNLESS the contrast is at least 3:1, AND additional differentiation is provided (such as underline) when the link is hovered over or receives focus. In Moodle, the default SRJC theme has been vetted for accessible colors. Forcing a different theme will not allow the student to choose their own theme, and although the other themes available were vetted at one time, there have been changes and they may not necessarily be compliant anymore. Be especially mindful of light gray text. When choosing colors for text in the editing routines in CATE or Moodle, be careful to select colors that will provide a strong contrast. The last item on the list about link colors applies only to those choosing their own link colors in CATE, or those creating their own HTML sites.

3 Text Resize The page is readable and functional when the text size is doubled. Both CATE and Moodle work well when text size is doubled. 508 d 10. Style Sheets Correct order and structure of pages are intact when the style sheet is turned off. Both CATE and Moodle read in the correct order when turning style sheets off Meaningful Sequence The reading and navigation order (determined by code order) is logical and intuitive. 12. Sensory Characteristics Instructions do not rely upon shape, size, visual location, or sound (e.g. "Click on the square icon" or "Follow the instructions in the right-hand column" or "Listen for the tone to continue". CATE and Moodle users need not worry about this rule. Those creating their own HTML pages should make sure that if they use a CSS scheme that ends up putting the code for columns or navigation in a different order than the desired reading order, that the reading order is maintained when accessed by screen readers. Be mindful of creating instructions with visual cues that refer to shapes, colors, and location that will not be perceived by disabled users. Consider using a heading when referring to an area of the page. 13. Tables used for data In the CATE Schedule and Table Maker 1.3.1, TH tags are used for row and column headers ID and TH tags are used for data tables that have two or more levels of row or column headers. Where necessary, data cells are associated with their headers by using the scope attribute. Data table captions and summaries are used where appropriate. modules, there is an option in configurations to turn on the "Use TH tag in cells of first row". Turn this option on if creating a table or schedule that has a header row. In the Table Maker module, you can set the scope of a header cell in the cell configurations to either column or row. In the Moodle Editing box, right-click or control-click on the table and go to the Advanced tab to put in a table summary if you have a lengthy table. Right-click on a cell and choose Cell > Table cell properties. Set the Cell type to Header, and the Scope to Column or Row depending on the type of cell. 508 j 14. Moving, blinking, scrolling and autoupdating Moving or auto-updating objects have a mechanism 2.2.2, to freeze motion Automatically updating content can be paused, stopped, or hidden by the user or the user can manually control the timing of the updates. Alternatively, a second copy of the page is linked to where refresh happens only after a link is selected. No elements on the page flicker at a rate of 3 times per second or more unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red. Automatically moving, blinking or scrolling content that lasts longer than 3 seconds can be paused, stopped, or hidden by Do not use blinking animations unless the flash is less than 3 times per second, or is sufficiently small and of low contrast. Flashing content that has the color red should especially be avoided.

4 the user. Moving, blinking or scrolling can be used to draw attention to or highlight content as long as it lasts less than 3 seconds. 508 k 15. Text-only pages If compliance cannot be accomplished in any other way, a text-only page, with equivalent information or functionality is provided to make the page accessibility compliant. The text-only page contains equivalent information or functionality as the primary page. The text-only page has been updated with any changes made to the primary page. 508 l 16. Scripts Any scripts that present critical information or functions, are readable by assistive technology or provide an alternative, equivalent presentation or mechanism. 508 m 17. Applets, plug-ins and other applications (PDFs, QuickTime videos, etc.) A link is provided to download any applet, plug-in or other application needed to play or display the required content. Both CATE and Moodle users do not need to be concerned with this rule. Offer a text-only page (in addition) if you cannot satisfy the accessibility rules. Only of concern to those creating their own sites that use scripts, not CATE or Moodle users. Most often used plug-ins: Adobe Reader: QuickTime Player: Flash Player: Open Office: n 18. Electronic forms Those working in CATE and Moodle 1.1.1, 1.3.1, 3.3.1, All form elements except for buttons use the <LABEL> tag and associated "FOR" attribute to indicate the type of form item it is. Wherever possible, place labels adjacent to input fields, not in separate cells of a table. To better tie the form element to its associated label, use the "ID" attribute in the associated form element. Set this attribute to the identifier used in the "FOR" attribute of the associated <LABEL> tag. Dynamic HTML scripting of the form does not interfere with assistive technologies and is keyboard accessible. Related form elements are grouped with fieldset/legend. Required form elements or form elements that require a specific format, value, or length provide this information within the element's label. If utilized, form validation cues and errors (client - side or server - side) alert users to errors in an efficient, intuitive, and accessible manner. The error is clearly identified, quick access to the problematic element is provided, and user is allowed to easily fix the error and resubmit the form. will have their forms within those learning management systems set to be accessible. Instructors creating their own HTML forms should adhere to these guidelines. See the WebAim page on Creating Accessible Forms. When choosing to require third-party sites, be careful of sites that require a log-in, yet the log-in form fields do not pass for accessibility compliance. Contact the DE Assistive Technology Specialist to test sites you want to require students to access, or use the WAVE tool to test on your own. 508 o 19. Skip repetitive navigation M Moodle has a skip repetitive

5 2.4.1 If there is a long list of navigation links, a link is provided to skip the navigation and jump to the beginning of the main content of the page. If a page has a proper heading structure, this may be considered a sufficient technique instead of a "Skip to main content" link. Note that navigating by headings is not yet supported in all browsers. navigation feature implemented without any action needed by the instructor. CATE has a skip repetitive navigation feature implemented by default in the Section and Schedule modules. In the Presentation module, turn on the Enable invisible "Skip to content" feature in Page configurations. Those creating their own HTML sites see these instructions on the WebAim site on implementing skip repetitive navigation. 20. Navigation M Moodle sets the navigation for you , 2.4.5, The navigation order of links, form elements, etc. is logical and intuitive. Navigation links that are repeated on web pages do not change order when navigating through the site. Multiple ways are available to find other web pages on the site - at least two of: a list of related pages, table of contents, site map, site search, or list of all available web pages. CATE is set up to mostly satisfy this rule. Be consistent when turning on the left hand navigation. For instructors creating their own HTML sites, place navigation in the same place on each page with the same amount of links in the same order. 21. Links When creating links, be sure to make the active hyperlink text be descriptive of where the link goes. The purpose of each link (or form image button or image map hotspot) can be determined from the link Do not use the same hyperlink text on a text alone, or from the link text and it's context page that links to different locations. (e.g., surrounding paragraph, list item, table cell, or table headers). Do not use long URLs as hyperlink text Links (or form image buttons) with the same text that go to different locations are readily See this article on hyperlink text distinguishable , Page Titles The web page has a descriptive and informative page title. 23. Language The language of the page is identified using the HTML lang attribute (<html lang="en">). When appropriate, the language of sections of content that are a different language are identified, for example, by using the lang attribute <blockquote lang="es"> M Moodle handles this for you. In CATE in the Page Configurations, be sure to leave the Show Page title atop this page checkbox on. CATE or Moodle users, if using languages different than English, contact DE to get help putting in the necessary code shown here. Instructors creating their own HTML sites need to put in the lang= en attribute on the html tag , 2.1.2, 2.1.3, Keyboard Accessible All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing). CATE and Moodle users do not need to do anything. Keyboard traps most commonly happen with plug-ins, such as Flash, or in some

6 Page-specified shortcut keys and accesskeys (accesskey should typically be avoided) do not conflict with existing browser and screen reader shortcuts. No Keyboard Trap - Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard. Keyboard focus - It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are). JavaScript slideshows. Placing a heading tag before and after can be helpful (links or form controls will also work). Those creating their own sites, search your stylesheet for instances of a:hover and replace with a:hover, a:focus. 508 p 25. Timed responses C In CATE, timed tests don't disappear, If a timed response is required, the user can be alerted and given options to turn off, adjust or extend the time limit. so no action needed to satisfy rule. In Moodle, you should put language in the page where you link to the timed test and alert the user what the experience will be. 26. Linked documents are accessible All linked documents that are required need to be reviewed by the DE Assistive Technology Specialist. In most cases, Word documents are accessible DE staff will help make them PDFs are accessible accessible. PowerPoint files have HTML or PDF alternative See tutorials on creating accessible Word docs and PDFs, and accessible PowerPoint alternatives.