Creating Web-based, Accessible Content (Section 508/WCAG)
      Back to home
      1. ELB Learning Knowledge Base
      2. Lectora®
      3. Creating Web-based, Accessible Content (Section 508/WCAG)

      Lectora Accessibility Support

      Lectora® VPAT Document

      View the Lectora VPAT Document

      Guide to Accessibility

      Section 508 Standards: 1194.22 Web-based intranet and internet information and applications Equivalent WCAG 2.2 Guidelines Lectora Application
      (a) A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content). 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language. You can provide text equivalents in Lectora by using ALT tags for images and multimedia, and by providing textual descriptions for any complex charts and graphics. ALT tags in Lectora are created from the object's name as it is listed in the Title Explorer. The name used in the Title Explorer is the same name that appears in the Name field of the object's properties. Use short, descriptive object names to create ALT tags for images, buttons, animations, and media.
      (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. 1.2 Provide alternatives for time-based media. Lectora enables you to add closed captioning to video (MP4) and audio files (MP3 and M4A) within your title.
      (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. 1.4 Make it easier for users to see and hear content including separating foreground from background. Course developers should take color into account when adding and designing content on the pages of a course so that color is not the only means of conveying information.
      (d) Documents shall be organized so they are readable without requiring an associated style sheet. 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure. 1.4 Make it easier for users to see and hear content including separating foreground from background 2.1 Make all functionality available from a keyboard. Course developers have the ability to design and develop courses that do not rely on a style sheet to convey the relevant course information.
      (e) Redundant text links shall be provided for each active region of a server-side image map. 2.1 Make all functionality available from a keyboard. Not applicable. Lectora does not support server-side image maps.
      (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language. Not applicable. Lectora does not support server-side image maps.
      (g) Row and column headers shall be identified for data tables. 1.3 Create content that can be presented in different ways (for example, simpler layout) without losing information or structure. Lectora supports the use of a single row header within data tables. Course developers can then identify the header row in the Table properties.
      (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. 1.3 Create content that can be presented in different ways (for example, simpler layout) without losing information or structure. Course developers can use the HTML Extension object for the addition of HTML code to embed appropriately labeled complex tables. The associated code can be added directly to the course or as an attached text file.
      (i) Frames shall be titled with text that facilitates frame identification and navigation. 2.4 Provide ways to help users navigate, find content, and determine where they are. When frames are enabled, they are automatically identified with appropriate labels.
      (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. 2.3 Do not design content in a way that is known to cause seizures. The course developer should not add any animations or object that use actions to cause the page to flicker or flash. This is up to the course developer to keep in mind during the design and development of the course.
      (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. 1.3 Create content that can be presented in different ways (for example, simpler layout) without losing information or structure. If necessary, the course developer can export a title to Word or manually provide a text file to use as an alternate means of accessing the course.
      (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. 2.1 Make all functionality available from a keyboard. 4.1 Maximize compatibility with current and future user agents, including assistive technologies. Published content relies on JavaScript and HTML code that can comply with this requirement when the features of the program are properly used to develop and support accessible content.
      (m) When a web page requires that an applet, plug-in, or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). 2.4 Provide ways to help users navigate, find content, and determine where they are. The course developer has the ability to embed or attach Java applets, PDF files, EXE programs, external scripts, and more. The learner/end user must have the appropriate client for these external programs to function. It is up to the course developer to test any external programs for accessibility, as these fall outside the control of the Lectora program.
      (n) When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure. 2.1 Make all functionality available from a keyboard. 3.2 Make Web pages appear and operate in predictable ways. 3.3 Help users avoid and correct mistakes. The course developer has the ability to add form objects and controls to create forms as well as questions used in tests and surveys. Directions and cues should be added by the course developer to the page. Field elements and functionality are published using necessary HTML tags to identify the object clearly for assistive technology.
      (o) A method shall be provided that permits users to skip repetitive navigation links. 2.4 Provide ways to help users navigate, find content, and determine where they are. Course developers have the ability to place a hyperlink on the page that, when triggered, will place focus on (or “scroll to”) a different object such as a placeholder object, effectively skipping over any repetitive navigation.
      (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. 2.2 Provide users enough time to read and use content.

      Course developers should not use timed tests or games unless absolutely required. Other options are available. If absolutely necessary, developers can use a timed action to provide a warning to the learner/end user. Functionality can be added to extend the time.

       

      FAQs

      What is Section 508?

      Section 508 is an amendment passed in the Rehabilitation Act of 1973. The amendment states that technology, including computer software, websites, phone systems, and copiers, should be available to people with disabilities. This includes any person with a physical, sensory, or cognitive disability.

      Standards have been established for:

      • Software applications and operating systems
      • Web-based intranet and Internet information and applications
      • Telecommunications products
      • Video and multimedia products
      • Self-contained, closed products
      • Desktop and portable computers

      For more information, visit: https://www.section508.gov/.

      Is Lectora and Lectora Online (the program themselves) 508 Compliant?

      Both Lectora and Lectora Online do support some keyboard control. However, we do not claim that either interface is fully keyboard accessible or ATAG (Authoring Tool Accessibility Guidelines) compliant.

      Is Lectora and Lectora Online published content Section 508 Compliant?

      Yes, Lectora and Lectora Online support the ability to publish content that meets Section 508 requirements.

      What is WCAG?

      WCAG or Web Content Accessibility Guidelines are the international guidelines set for accessibility on the Internet. WCAG has gone through two versions: WCAG 1.0 and WCAG 2.0.

      For more information, visit: https://www.w3.org/WAI/intro/wcag.

      Is Lectora WCAG compliant?

      Yes, Lectora supports the ability to publish content that meets the WCAG 2.2 AAA requirements.

      Is Lectora compatible with screen readers like JAWS and Dragon Naturally Speaking?

      Yes, Lectora publishes to HTML, so any assistive technology that works with web pages is compatible.

      Where do I turn on “Use Web Accessibility Settings?”

      To designate your title to use Web Accessibility settings, select Title Options from the Design Ribbon, and enable the “Use Web Accessibility Settings” check box.

      Learn more about preparing a title for accessibility.

      What does “Use Web Accessibility Settings” do?

      Selecting the “Use Web Accessibility Settings” option modifies the following options in Lectora:

      • Custom radio buttons and checkboxes are disabled.
      • ALT tags are always published for images and buttons.
      • Video and audio skins are disabled.
      • Rollover video controllers are disabled.
      • Visual indicators are displayed when an object receives focus.
      • Always on Top property for objects is not selected by default.
      • Language declaration for text blocks is enabled.
      • The “Set Reading Order to Last” property is enabled for groups.

      Learn more about preparing a title for accessibility.

      Where do you place a skip navigation feature?

      Skip navigation should be placed at the title level of your course to allow your learner to skip over any repetitive navigation that appears on every page (such as your Home, Help, and Exit buttons). Start by creating a placeholder (such as an empty text block) that is layered in your Title Explorer after your repetitive navigation. Then create a hyperlink that is layered before the repetitive navigation and set the action to Go To Current Page and to Scroll To the placeholder.

      How can I make my navigation accessible by keyboard actions?

      Add an action at the title level, which states that on Keystroke, for example, the right arrow → , navigate to a certain page, such as Go To Next Page. However, keep in mind that screen readers often use their own keyboard shortcuts, so be careful not to override them. Also remember to disinherit the action on pages where you’d normally disinherit the associated button or link.

      How do I control reading and tabbing order?

      The Title Explorer controls the layering of objects on a page, and therefore the reading order that screen readers use to identify objects. An object at the top of the list in the Title Explorer is actually on the bottom-most layer of the page. A screen reader would identify this object first. Alternatively, an object at the bottom of the list of objects in the Title Explorer would be identified last.

      Learn more about using the Title Explorer to configure object layering and reading order.

      Learn more about keyboard tabbing order and visual focus.

      How do I enable ALT text?

      ALT tags in Lectora are created from the object’s name as it’s listed in the Title Explorer. This is the same name that appears in the Name field of the object’s properties. Be sure to select “Create Alt text for images and buttons” when publishing. This option is automatically selected when the “Use Web Accessibility Settings” Title Option is turned on.

      How do I add a long description?

      Complex graphics, charts, and images will require that you provide a detailed description. Rather than using an ALT tag, you will need to provide access to a textual description. There are many ways to do this in Lectora. You can layer the description behind the graphic using a text block, or you can describe the image within your page's text as part of the body of the page. Alternatively, you may choose to place a hyperlink below the image that uses a Display Message action to provide textual explanation of the image.

      Learn more about providing alternative text when ALT tags cannot be used.

      How do I get assistive technology to skip over an image?

      If any of the objects in your title are of no informational value or are used merely for decoration, they should have empty ALT tags. You can do this by checking the “Empty ALT Tag” option in the object's properties.

      Learn more about using an empty ALT tag for an object.

      How can I allow users to enlarge the text?

      When you publish your title to a web-based format, such as HTML, SCORM, and AICC, any browser that supports Zoom functionality can be used to resize text.

      All modern browsers will support zooming, including Mozilla Firefox, Internet Explorer, Chrome, and Safari.

      Learn more about browsers that support zooming on Lectora published content.

      Should I number the images if there are multiple on a page?

      You don’t have to. The reader will read your content from back to front without the labeling. However, you can include something like “Image 1 of x”.  Just keep in mind that this will be read with each and every image on the page.

      How do I add closed captions to audio and video?
      Lectora enables you to add closed captioning to video (FLV and MP4) and audio files (MP3, FLV, and M4A) within your title. To add closed captioning:

      • Select the “Add Captions” button on the Video or Audio properties ribbon.
      • You can import an existing Web VTT, SRT, or XML file, or open a sample of each file type to get started. The sample file can then be modified with the correct details for your media.
      • Save and import the modified file to use with the video or audio.

      When you preview and publish your title, the captioning text is displayed above the controller according to the details specified within an XML file. Remember to select a Controller and to clear the “Auto Start” and “Rollover” options.

      Learn more about working with closed-captioning audio.

      Learn more about working with closed-captioning video.

      How do you setup data tables with accessible column and row headers?

      If you use tables within your titles, accessibility guidelines require you to identify row and column headers so that a screen reader can properly identify the information within the table.

      In Lectora, you can select the “Include Header” option within the Table Properties. This will identify the first row as the header. Items within the table are then automatically associated with the left-most column of the table and the identified header row

      Learn more about Including a header with a table.

      How do you identify various levels of text headings and sub-headings?

      When you label the text block as a heading, it is recognized by screen readers and even search engines as containing important information. This selection will not affect the formatting of the text block, but will define the importance of the text relative to the content. In order of importance, H1 comes first, then H2, and so on.

      You can do this in Lectora by maintaining standard HTML paragraph formatting. Create page titles with the use of text blocks, and set the “HTML Text Type” to Heading 1 through Heading 6.

      Learn more about changing the HTML text type of a text block.

      Does Lectora test for color blindness?

      No, not at this time. However, you can test your published web content at websites such as http://colorfilter.wickline.org/.

      What alternative highlighting methods are appropriate substitutes for color?

      You need to ensure that color is only used a secondary indicator of meaning. For example, you cannot indicate required fields in a form only by highlighting in red. Alternatively, you might use a red asterisk, so that the color is not the only indicator. For text sections, do not use only color or formatting as identifiers, but instead/additionally use heading tags to identify breaks in content. Also, if printing is an option, print each page of your content in black and white and test that you can still understand the material.

      Is there a way to modify the exported html directly in order to include browser inclusions or any other code?

      Yes, you can add HTML Extension objects to add Custom DIVs, CSS, scripting, and more.

      Which question types are accessible?

      The following question types in Lectora are accessible, as they do not require the use of a mouse:

      Gradable

      • True/False
      • Multiple Choice
      • Multiple Response
      • Fill in the Blank
      • Number Entry

      Non Gradable

      • Short Answer
      • Essay
      • Likert
      • Rank/Sequence

      Learn more about objects and actions that do not work with the keyboard.

      Will objects Initially Hidden and later shown be recognized?

      Screen readers can only interpret the content that is visible on the page when it is initially displayed to the user. That is, interactive rollovers, or objects that display additional information on the page when clicked, cannot be included. The new information that is displayed to the user as a result of the event is not recognized by the screen reader.

      An alternative approach to displaying additional information to the user after a user has clicked on an object is to launch a popup window containing the additional information. When a new window is displayed to the user, the screen reader will automatically switch focus and begin reading the content within the new window. When using this approach, be sure to include a means for the user to then close the popup window.

      Learn more about using actions and integrating accessible interactivity.

      Timed elements are not WCAG compliant. What alternatives are available for timed tests?

      In general, timed activities are used to apply pressure on a learner to demonstrate ready recall of material. However, from an accessibility perspective, timed responses pose an additional challenge. In cases where timing is required, additional time should be allowed for learners using assistive technology. If timing is not critical, consider applying pressure by limiting the number of attempts a learner can submit instead of timed responses.

      External Resources