Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Matt Leathes
    @moloko
    well you probably already know more about it than me by the sound of it!!
    Jo-Anne Castillon
    @JoCastillon_twitter
    I've been stuck in a world of learning a whole bunch of functionality I wasn't fully aware existed 2 weeks ago, lol. I am still not sure I am using this as intended, just hoping it all works right now covers face with hands
    Matt Leathes
    @moloko
    sounds like my entire career as a developer lol
    two states of it pros.jpg
    Jo-Anne Castillon
    @JoCastillon_twitter
    yup lmao, haha, very much the definition of developer, just in this single instance, my deadline was Tuesday lol, so leaning very much in the have no legit idea of what I am doing and not too many people I can ask in a crunch.
    107a97ca5bd4a571edcebec54a66fc32.jpg
    Matt Leathes
    @moloko
    :laughing:
    Jo-Anne Castillon
    @JoCastillon_twitter
    I still think you are onto something with that targeting, so I am following that thread atm
    oh btw - there is also a bug in media that I need to log. skipToTranscript throws user focus to the first instance of media rather than current media transcript. There'll either be an issue logged or a solution suggested sometime in the next after I wade through the rest of the bugs.
    Matt Leathes
    @moloko
    hmm
    odd, I'm sure we'd have had that one reported by now
    Jo-Anne Castillon
    @JoCastillon_twitter
    I am sure too, but I didn't find an issue for it. Maybe just lucky!
    Oliver Foster
    @oliverfoster
    Adapt.a11y.focus forces the focus to the element you passed, making it focusable if necessary. Adapt.a11y.focusFirst finds the first forward (children first, then siblings and their descendents, then ancestor siblings and their descendants), and readable element in the dom then it performs Adapt.a11y.focus on it.
    Oliver Foster
    @oliverfoster
    Adapt.a11y.focusFirst will focus on the element passed if it is readable but will also focus on the first readable other element. It's very useful for focusing on the first existing title or body or button text in a notify for example, by just telling Adapt to focusFirst on the notify container
    Adapt.a11y.focus is only really used in instances where you know that what you're focusing on can and must be focused upon and that you definitely don't want to search forward.
    Adapt.a11y.focusNext is effectively Adapt.a11y.focusFirst but it won't check the element passed for readability, it'll just start forward searching.
    Oliver Foster
    @oliverfoster
    These behaviours are obviously really handy for moving next from trickle, or coming down from a feedback notify onto a disabled submit button or moving to the first readable element in a feedback container etc, where we don't know exactly what the next element is at time of coding because the structure will be decided by the course designer, but we do know we want to learner to go forwards.
    Matt Leathes
    @moloko
    ^ aha that's the piece of the puzzle I was missing
    Oliver Foster
    @oliverfoster
    Note that only Adapt.a11y.focus will force an otherwise unfocusable/unreadable element (an empty or container-only div, span, etc) to be focusable. The other functions test for readability in their searchings. Readability includes natively tabbable elements, elements which contain text, have an aria name/label or have certain aria roles, such as heading and excludes elements which are explicitly hidden with css or aria-hidden. The readability conditions are designed to closely mimic the expectations of a screen reader user and the behavior of a screen reader cursor.
    Jo-Anne Castillon
    @JoCastillon_twitter

    @JoCastillon_twitter If you can find time, it would be really helpful if you could write up a brief summary and post it to the technical forum. It might help some of us in the future. TIA

    @moloko @oliverfoster @chucklorenz

    Thanks for your patience! I did a quick writeup of the accessible SVGs and what sort of stuff I am doing with them as requested, been lots of trial and error, but rather enjoyable in the long run seeing the outcomes. I did end up landing on using aria-role groups and buttons! Thanks again for your guidance and help with all the accessibility stuff I was learning in the last few weeks!

    https://community.adaptlearning.org/mod/forum/discuss.php?d=3976

    Kevin Doherty
    @kevindoherty30
    Hi All, just had a query around accessibility with the MCQ, is there a reason that there we do not use a fieldset and legend for screen readers?
    Matt Leathes
    @moloko
    hi @kevindoherty30 yes this was covered in this forum post
    Kevin Doherty
    @kevindoherty30
    @moloko perfect thank you
    rakeshkumar749
    @rakeshkumar749
    Hi All, accessibility is not working on Microsoft Edge browser. How to read content of the page/componenet. While presseing up or down key page scroll bar moves but screen reader does not read anything. on Pressing TAB key only Buttons and links got focus. SO I want to know how to read content in windows screen reader (Narrator). while it is working in Chrome browser.
    rakeshkumar749
    @rakeshkumar749
    image.png
    Matt Leathes
    @moloko
    @rakeshkumar749 just tried it, works fine for me
    Oliver Foster
    @oliverfoster
    @eleanor-heath we have a room here if you want to chat a11y
    Paul Steven
    @paul-mediakitchen
    Hi there. I want to make a scrolling graphic (think medical cardiogram). The graphic is say 2000 pixels wide. I have written some CSS that will display a scroll bar using the normal graphic component which seems to work a treat. I have realised that this won't be accessible via the keyboard. I need this to work in the authoring tool so wondered if there are any suggestions how to allow the user to tab to the graphic component. I don't want to fork the graphic component as that would be a nightmare to maintain. Something as simple as adding tabindex="0" may have sufficed but obviously I can't do this via custom css. Any ideas please? I did raise an issue with more details here: adaptlearning/adapt_framework#3091
    Oliver Foster
    @oliverfoster
    Adding a tab index seems fine. It won't impact the screen reader and should be there only when the container is scrollable.
    Have you done a PR?
    Paul Steven
    @paul-mediakitchen
    Thank you @oliverfoster - are you suggesting I do a PR for the graphic component to add this scrolling option? Happy to do this if there is a chance it will be approved and incorporated :)
    tomgreenfield
    @tomgreenfield
    you can also extend components; don't necessarily need to fork
    Paul Steven
    @paul-mediakitchen
    Oh thanks @tomgreenfield - what does extending a component entail?
    Matt Leathes
    @moloko
    have a look at GMCQ
    that extends MCQ
    similarly
    tomgreenfield
    @tomgreenfield
    Matt Leathes
    @moloko
    so you don't have to fork the graphic component
    Paul Steven
    @paul-mediakitchen
    Thank you @moloko and @tomgreenfield
    Matt Leathes
    @moloko
    but equally you don't need to add this functionality into the graphic component itself
    Paul Steven
    @paul-mediakitchen
    Sounds like a win win
    Paul Steven
    @paul-mediakitchen
    If you extend a component, what elements do you pull in from the component you are extending? For example, for the graphics component I want to add some CSS and the tabindex="0"
    It looks like I need to include an entire properties schema, and template and I would include a less file with my css
    Matt Leathes
    @moloko
    yes you do need to repeat the properties.schema
    bit annoying
    other than that the answer is typically 'as little as you can possibly get away with'!
    Paul Steven
    @paul-mediakitchen
    Thanks @moloko
    Paul Steven
    @paul-mediakitchen
    Can I get away with less than this?
    define([
      'core/js/adapt',  
      'components/adapt-contrib-graphic/js/adapt-contrib-graphic'
    ], function(Adapt, graphic) {    
    
            class ScrollableGraphicView extends graphic.view {        
            }
    
            ScrollableGraphicView.template = 'scrollable-graphic';
    
            return Adapt.register('scrollable-graphic', {
                view: ScrollableGraphicView,
                model: graphic.model.extend({})
            });
    });
    Matt Leathes
    @moloko
    that looks about right
    Paul Steven
    @paul-mediakitchen
    Ah great thank you @moloko