LUC16 Lectora Online 508 Template DRAFT v2

This is an updated version of the DRAFT template for Lectora Online designed to be 508-compliant (fully accessible). There are still missing elements (e.g., form fields, additional potentially accessible interactions, etc.) and likely some elements I’ve tried to make accessible, but still need some tweaking. Speaking of tweaking, I have done my best to make this template in responsive design. IMHO, there is nothing inherently “508” about responsive design – the same rules of accessibility apply to every device layout. Have a look, poke around under the hood, reply with any suggestions, error discoveries, and even your updated versions. The goal is to have a 508 template that we can use in Lectora Online…at least until they add the selection of “508” that disables the worst offenders within Online 😉 Thank you! Karen Kanne Ngowe (kngowe@cdc.gov)

Update: Draft updated on August 17th and also includes an AWT for Lectora Publisher and Inspire Users as an associated file.

Preview image
Additional files: 508

Tags: , , , ,

Comments

    1. Profile photo of Karen Ngowe
      Karen Ngowe Post author

      .pkg is a Lectora file extension. The HTML files are also here in a .zip 🙂 Karen

  1. Profile photo of tracy snar
    tracy snar

    Karen,

    I’m so excited to use the new template. However I’m not a MAC user and am on Windows.

    When I looked up what the pkg extension is I saw this:

    pkg is basically a file which is designed for Apple’s MAC. And iPhone also uses this file extension.

    These extension files are built on a Xar format. All the contents of .pkg are designed for the applications installed in MAC.

    However you can not run this type of file on any Windows (Windows XP, Windows 7, Windows8, etc)

    1. Profile photo of Karen Ngowe
      Karen Ngowe Post author

      .pkg is a Lectora file extension. The HTML files are also here in a .zip 🙂 Karen

  2. Profile photo of Jennifer Valley
    Jennifer Valley

    The PKG file is referring to a Lectora Online Package. You can import it into Lectora Desktop (inspire or Publisher) by going to file and then import. This feature was added in version 16 so if you’re still running 12 the option will not show up. If so, please let me know and I’ll work with Karen to get an AWT in the download folder.

    1. Profile photo of tracy snar
      tracy snar

      Hi Jennifer, I have Lectora 11. Is it possible to get an .awt? I am currently creating a course that has accessibility capabilities so the new template would be very helpful.

      Thank you,

      Tracy

      1. Profile photo of Karen Ngowe
        Karen Ngowe Post author

        Just a reminder that this draft template was created in Lectora Online for Lectora Online. I have not tested it in previous versions of Lectora.

  3. Profile photo of Karen Ngowe
    Karen Ngowe Post author

    Hi Y’all! Thanks to all those who joined in today’s webinar. I’m already making updates to the template. Please add your suggestions & observations here, or PM me, or email me.

    1. Profile photo of tracy snar
      tracy snar

      Karen,

      Thank you so much for holding that session on the template and for creating it too! Like Christine, I’m trying to create a web based course without stripping away interactivity in order to satisfy assistive technology. Will you have future sessions that focus on adding interactivity? For now I’m using popups and text boxes to hide things, but they may not be the best approach for both audiences. Also if anyone could point me to the session that is available on adding interactivity into web when also using accessibility elements I would appreciate it.

      Thanks for all you do!

      Tracy

  4. Profile photo of Christine O'Malley
    Christine O'Malley

    Thank you for the presentation yesterday Karen – I have some additional questions please…

    Question 1 – Regarding a screen reader’s access to object names (in left pane) for images vs text blocks:

    I understand the name of an image in the left-pane (i.e., title explorer) becomes the alt-tag for that image. To clarify what I read in the webinar chat – it sounds like the name of a text block in the left-pane; is not read by the screen reader and that it strictly reads the on-screen text for that text object (providing of course the text block is initially visible). Is that correct?

    Question 2 – About buttons vs keystroke actions:

    Are buttons fully accessible? I’m getting mixed messages on the use of keystroke actions. I heard your concerns of (keyboard shortcuts conflicting with client settings). I too was concerned that I may be setting up actions that would cause a conflict. However, I’m receiving requests to add keystroke options to aid accessibility. I’ve used them on Branch launch pages where buttons exist (to provide an alternative) and I’ve used them for custom question pages that don’t use the Question object (i.e., no radio buttons because I’m using images so I can do a state change upon click – which isn’t possible with radio buttons, etc.). For my question page, the learner can type T for True or F for False. On pages where I’ve used keystroke actions, I am including accessible screen reader text entitled “Keyboard Navigation Options” followed by a brief list of keys/actions available on that page.

    Question 3 – About H1, H2 tags:

    I would like to better understand how necessary it is to use these tags. So far, I have only used them for titles (i.e., course title, page title) and I understand they are used for text that is important to communicate. I’ve noticed when I do apply these tags, it messes up the spacing of the text block. Do you use them and what is your strategy?

    I’m still struggling a bit with how possible it is to make accessible e-learning ‘truly interactive’. For example, I too have used Rhonda Willis’ technique of covering visible text until it is time for it to appear. If I don’t do that, wouldn’t I just be adding an ‘accessible’ text block to the page (for screen reader)? This way, I have (visible to screen reader) text blocks in their proper Read Order which satisfies the screen reader – and the synchronization of text to audio which is geared toward learners who don’t require accessibility. But to me, there is no difference (from the screen readers perspective); it really isn’t adding interactivity for learners who use assistive technology – it just seems that way because we’re seeing text synced to audio, etc., Isn’t this really about NOT stripping an e-Learning module of interactivity in order to satisfy assistive technology?

    A Related tip: I learned from Leslie Fisher’s sample title to use a keystroke action, prompting learners who are using assistive technology. When the variable is triggered it pauses any audio on the page, and avoids a conflict of the screen reader ‘talking’ at the same time as the page audio is playing. I like that.

    I picked up a couple of really good tips – thank you very much for sharing. This subject is of great interest to me and so I will continue to look for ways to make e-Learning interactive AND accessible.

    1. Profile photo of tracy snar
      tracy snar

      Christine,

      You brought up some great points. Like you I’m really excited about creating a course with accessibility that appeals to all audiences so everyone is engaged and has the best learning experience.

    2. Profile photo of Karen Ngowe
      Karen Ngowe Post author

      OK – wow. Let me see if I can respond to these questions, and of course I hope that others here will too!

      Q1 – alt tags from object names: Be sure that this option is selected at publish! This will only apply to image names, not text boxes or buttons. I believe that form field labels are also read by a screen reader, but it would be great if a Trivantis expert would chime in to confirm this and any other named objects to which this applies. If you select “Empty Alt Tag” in the image object properties, then the image name will NOT be read, even if “use image names as alt text” is selected. Be sure you create alt text or a long description, if needed, and keep empty alt tag for decorative images.

    3. Profile photo of Karen Ngowe
      Karen Ngowe Post author

      Q2 – As a rule, we do not create independent keyboard shortcuts or actions. There are a number of assistive technologies out there, each with their own native keyboard actions. We do not want to risk interfering with these. You don’t need to make T and F into actions, a learner can use the tab and enter keys to move between True and False radio buttons and select their choice. I suppose you could try and determine the more commonly used keyboard shortcuts for the main screen readers like JAWS and ZoomText, then use shortcuts outside of these…but I honestly have no idea if the Lectora course would then overwrite ALL pre-existing keyboard actions. If someone here is really good with their assistive technology and can text one of your courses, that would be a good thing to report back to the group. Maybe Trivantis has experimented with this to test for any conflicts?

      1. Profile photo of Karen Ngowe
        Karen Ngowe Post author

        oops! “text” = “test” as in, “test one of your courses” 😮 Hey, an edit feature would be cool 😉

    4. Profile photo of Karen Ngowe
      Karen Ngowe Post author

      Q3 – H1, H2 text style tags: I know that if you tag things like titles as H1 or H2 that a screen reader will read these as titles. I don’t use these tags, because I like to rely on the screen reading order of the Title Explorer so I can better predict the reading order of the objects on the page. There are probably tutorials or webinars here in the Community somewhere on tagging text. I don’t use this, so can’t offer very meaningful advice.

      Q3 – using variables, etc.: We have also created courses that start with a “Are you using assistive technology to navigate this course?” choice. The “508 variable” will then set all audio or video to auto play or NOT, replace drag-drop with multiple choice, etc. Yes, you can do this, but really we are aiming for as “same” an experience for learners as possible. Don’t offer 508 learners the ultra-lame version of something consisting of a big fat text file, etc. To me, the constraints of accessibility force us to become more creative in our design. I think as technologies improve, we will have even more design options to use that will be fully accessible.

  5. Profile photo of tracy snar
    tracy snar

    Karen, Is your 508 template also for those with Little or no color perception and low vision?

    1. Profile photo of Karen Ngowe
      Karen Ngowe Post author

      That’s the trick with “accessible” – it is supposed to cover ALL disabilities. :/ Color high contrast is critical, but is also a good thing to keep in mind for general usability too. I believe almost all of my text is black on a white background. I should check the white text on the blue buttons to see if I need to make the blue a darker shade. Thanks for this reminder.

      As far as colors and 508, the thing to keep in mind is that color cannot be the ONLY element of differentiation. Yes, you can use red and green for no and yes, stop and go, etc. However, you must also have these words in text so that the learner is not expected to rely on color alone for their choices. Does that make sense?

Your email address will not be published. Required fields are marked *