Room dedicated to all things accessibility: screen readers, keyboard tabbing and all that jazz, useful reading: (browser+screenreader) http://hollier.info/browserpairing/ http://www.maxability.co.in/2017/02/screen-reader-and-browser-combination-for-accessibility/
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.
odd, I'm sure we'd have had that one reported by now
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.
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.
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.
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.
@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
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.
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
Have you done a PR?
that extends MCQ
similarly
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
It looks like I need to include an entire properties schema, and template and I would include a less file with my css
bit annoying
other than that the answer is typically 'as little as you can possibly get away with'!
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({})
});
});