HTML Text Editor and Accessibility

Transcription

1 AgLearn has an HTML text editor and accessibility checking tool. While these tools are helpful and will assist with improving your courses accessibility, you still must validate your course through a certified Section 508 Trusted Tester. This job aid will assist you with creating accessible courses and offers an overview of relevant tools. Use the Show More button to reveal all available tools. Paragraph Styles Tool (Headings) Organize content with helpful headings to create an outline format. All large sections of text should use headings to denote a new topic or section. Do not use headings for typographical effects (to emphasize content) as users of assistive technology rely on headings to navigate through content by jumping from heading to heading without a mouse. Unordered or Ordered List Tools To structure a series of items, use a unordered or ordered list (bulleted or numbered list). This will ensure proper reading order for a learner using a screen reader. * This document is a job aid tool, it is not a Section 508 review tool. 1

2 Link and Unlink Tools Use the Link button to turn plain text into a hyperlink. Use the Unlink button to remove a hyperlink from a selection of text. Assistive technology learners use a link list to navigate content. The meaning of the link needs to be understood without any surrounding text. Each link needs to be unique. Bad Example: Click here for help. Good Example: If you need help, check Ask AgLearn Now for an answer. Refrain from using a URL as the link text as it will lessen the user experience for those using a screen reader. A learner will have to listen to the full URL being read to determine the purpose of the link. Bad Example: is where you would find AgLearn User Courses. Good Example: Find AgLearn User Courses on Ask AgLearn Now. Content internal to AgLearn or a course should open in the same window. Content external to AgLearn or a course should open in a new window. Image Tool Some learners may not be able to see images. An image description is required for all meaningful images, charts, and diagrams. Simple image with simple meaning add alternative text of less than 125 characters that describes the informational purpose of the image. Complex image with extensive meaning if the image cannot be described in less than 125 characters, add a paragraph above or below the image that goes into more detail and refers to the image. * This document is a job aid tool, it is not a Section 508 review tool. 2

3 Decorative image - A description is not needed as these images have no meaning. The alternative text should be left blank. Text in images Some low vision learners will need to magnify the screen contents. When doing so, images with text may become pixelated, blurred, or impossible to read. Other learners may need to change the color of the text on the screen. If the text is in an image, the text color cannot be changed. Refrain from adding text to images, instead insert text content directly on the page. If informational text must be used in an image, then repeat the informational text on the page. Image based text should be primarily used for logos, maps and graphs. Media Tool Videos and Audio files need to be accessible. Video With video files, a synchronized caption is required for accessibility. Captions are a textual representation of the words, sounds, and action that is pertinent to the message being conveyed in the video, timed with what is seen on screen. This allows the learner to read the text and understand the visuals at the same time. * This document is a job aid tool, it is not a Section 508 review tool. 3

4 Audio With audio-only files (speeches, sound-bites, etc.), a descriptive text transcript is required for accessibility. It should include relevant auditory content for those that are not able to hear the audio. Bold, Italic, and Underline Tools To emphasize content use Bold or Italic styles. This can be useful when calling a learner s attention to important text. Users are accustomed to seeing hyperlinks underlined. Do not underline text unless the word is a hyperlink. Table Tool Caution should be used when using and creating a table. Sighted learners can tell what column and row each cell is associated with. Screen reader users need tables to be properly coded which requires a couple additional steps. A caption is a brief description of the tables content that is placed either before or after a data table. While it is not required for a table to have a caption, it is generally helpful. * This document is a job aid tool, it is not a Section 508 review tool. 4

5 When creating a table, add a row or column to be used as a heading, and in the Create table screen identify which will be the header. Clear Formatting Tool When pasting content from another application, often the formatting is carried over. Use this tool to clear the formatting. This is strongly recommended as there may be hidden code that may cause unforeseen issues when viewing the content. Accessibility Checker Tool The Accessibility Checker tool looks for some common errors made in the text. Keep in mind, it does not find all accessibility errors. Here is a list of common errors it looks for: Are there any images with missing or empty alt text? Is there enough contrast between font color and background color? Are the long blocks of text sufficiently broken up with headings? Do all tables have captions? Are there any tables with merged cells? They are difficult to navigate with screen readers. Do all tables contain row or column headers? * This document is a job aid tool, it is not a Section 508 review tool. 5

6 Screenreader Helper Tool The Screenreader Helper tool provides additional information about the currently selected text (e.g. is it bold), as well as a listing of any images or links in the text. All CAPS Refrain from using all CAPS unless the word is an acronym, a heading, or other labels. Capitalizing an entire paragraph is akin to shouting and difficult to read. Color Font Contrast Use font colors that will contrast well with background colors so that those who are color blind or visually impaired will be able to read the material. WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. Text that is part of a logo or brand name has no minimum contrast requirement A web based tool to test with is the WebAIM Color Contrast Checker. * This document is a job aid tool, it is not a Section 508 review tool. 6

7 Color Convey Meaning When color is used to convey information, the same information must also be available in a textual format for those that are not able to perceive color. Bad Example: The red color is used to identify required information. If the red color were to be removed a learner would not be able to identify the required items. Good Example: The asterisk is used to identify required information. If the red color were to be removed a learner would be able to identify the required items. Spatial Positioning Do not use spatial positioning to convey information. Bad Example: Click the button on the left. A screen reader learner would have difficulty understanding where left is. Good Example: Click the Go button. Go matches the label of the button. * This document is a job aid tool, it is not a Section 508 review tool. 7