I'm working on an application that displays a list of chats and need to get the chats into the virtual buffer. The chat content can be as simple as a line of text or as complicated as text plus a link plus an image. Without role=document, it's not in the buffer but with role=document JAWS reads "clickable" when it reads the content (after pressing down arrow). The content is not clickable and I can't figure out how to stop that from being read.
Here's an example of the layout:
<div role="application" class="mainViewContainer">
<ul class="mainViewContent">
<li tabindex="0" class="chatViewContainer">
<div tabindex="-1" class="chatHeaderContainer">
<span class="offscreen" id="chat1">Chat content</span>
<div role="document" tabindex="0" class="chatContent" aria-labelledby="chat1">
Here's a message, huzzah!
</div>
</div>
</li>
<li tabindex="0" class="chatViewContainer">
<div tabindex="-1" class="chatHeaderContainer">
<span class="offscreen" id="chat2">Chat content</span>
<div role="document" tabindex="0" class="chatContent" aria-labelledby="chat2">
<div class="chatText>Document documentName.jpg created </div>
<div class="documentView">
<img title="documentName.jpg" src="imgsrc">
<div class="documentItemDetails">
documentName.jpg
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Any ideas on how to make the chatContent div not have "clickable" read by JAWS?
I'm seeing this with JAWS Version 15.0.6025 (I believe it's the most recent version) and FF 26 on Windows 7.
I had this same issue. Apparently, this is an expected behavior, as explained in this URL.
Clickable Text : When you navigate to a grid cell that has its display style set to clickable text, JAWS reads the corresponding column header text and then the data content of the current cell.
I hope this helps.
Related
Im having a weird issue in a slider I have. The basic markup is this:
<ol class="slider-list" aria-live="polite">
<li class="slider-page" aria-hidden="false" aria-roledescription="slide" aria-label=" | 1 of 5">
<ul class="col-container cols-4 rows-1">
<li class="col item">
<div class="entity-container">
<div class="entity-mask">
<a class="entity-link" aria-label="My Aria Label" tabindex="0">
<div class="entity-box">
<div class="aspect">
<img class="thumb" src="https://someurl.com/picture.jpg">
</div>
</div>
</a>
<div class="entity-details">
<a class="entity-link" tabindex="-1">
<h3 class="title no_focus">
<span>My Title</span>
</h3>
</a>
<div class="movie-release-date">My Release Date</div>
</div>
</div>
</div>
</li>
...
</ul>
</li>
<li class="slider-page" aria-hidden="true" aria-roledescription="slide" aria-label=" | 2 of 5">
...
</li>
...
</ol>
Now let me get some things out of the way - functionally and visually everything is working. As you tab through the different column items the aria-label is read, in this case My Aria Label is being read.
The problem is, after that aria-label is read, then all the nested text is read too, including My Title and My Release Date. Even weirder is its ALSO going up the tree and reading the siblings aria-labels all at once without any additional tabbing - its just all read but there is a pause between the proper aria-label being read and the rest of the content being read.
This is only happening in Safari and Chrome (recent versions).
Any idea what is going on here?
Per brennanyoung's comment and my own findings before seeing their comment, aria-live was the problem. As the slide changed all the content was being read. By disabling this/setting this to off at certain times depending on the product requirements, the problem was resolved.
I have an issue with using tab navigation or screen reader.
I have a bunch of divs with list inside of it, where each list item has a link, as shown in example below. This html represents vertical "carousel", where user can vertically scroll across the items.
The entire carousel is shown inside of popover (if it matters at all). And it has a lot of CSS to keep carousel scrollable(overflow:hidden, not sure if it matters).
While testing the widget for Accessibility, I found an issue:
Carousel container is not focusable when using tab navigation or screen reader. So, the entire container is just skipped by ScreenReader (Voice Over) and it never goes inside container to read the links.
I tried to add tabindex="-1" for the top most div element, and now it receives the focus, however, it doesn't go inside the div to go through the links.
What can be the reasons for that? How can I make VoiceOver not skip the content and go through all the links
<div class="a-carousel-viewport" id="carousel">
<ol class="carousel" role="list" aria-busy="false">
<li class="carousel-card" role="listitem" aria-setsize="12" aria-posinset="11" aria-hidden="true">
<div class="item">
<h4>Title 1</h4>
<a aria-hidden="true" class="a-link-normal vse-carousel-item" tabindex="-1" href="/someurl">
<div class="content">
</div>
</a>
</div>
</li>
<li class="carousel-card" role="listitem" aria-setsize="12" aria-posinset="11" aria-hidden="true">
<div class="item">
<h4>Title 2</h4>
<a aria-hidden="true" class="a-link-normal vse-carousel-item" tabindex="-1" href="/someurl">
<div class="content">
</div>
</a>
</div>
</li>
</ol>
</div>
It's hard to check the behaviour just from the HTML, a JSfiddle or CodePen to include the JavaScript would help a lot. However, you've got a lot of ARIA attributes that aren't necessary and might be confusing VoiceOver.
The first thing I'd try if you can't provide a demo of the problem behaviour is to remove all of the role and aria-attributes from your code sample and see if that fixes the problem. The roles for list and listitem are redundant on list (ol) and list item (li) elements. aria-setsize and aria-posinset are also not needed on lists. Tabindex and aria-hidden might be needed depending on how the carousel hides slides which aren't visible, but if removing the roles and aria-attributes doesn't help, it might be useful to remove them and see if VoiceOver can find the links when you do.
Following is html code. The final div is a hyperlink that calls javascript. This is the bottom of a longer page, but everything works until the final hyperlink, which appears on the page but not as a clickable link.
<div style="padding-left:15%;">
<span class="blank">Action Hyperlink</span>
</div><br>
<div class="sp_01 bordered">
<ul class="sp_03 bordered">
<li class="sp_03 bordered" style="text-align:justify;">Text 1</li><br>
<li class="sp_03 bordered" style="text-align:justify;">Text 2</li><br>
<li class="sponsor_03 bordered" style="text-align:justify;">Text 3</li>
</ul>
</div><br><br>
<div style="padding-left:15%;">
<span class="blank">Action Hyperlink</span>
</div><br>
The first instance of the hyperlink works. After the -div class="sp_01 bordered"- section, the final instance of the hyperlink appears as a line but not a click link.
This sort of problem is usually related to how the preceding tags are open and closed. I’ve studied the open and close tags and I don’t see anything wrong. The color coding in my editor (Atom) is correct for all tags.
What’s wrong?
Just wrap your DIV inside a like
<a href="#" onclick="ShowPages(18);" class="tfl" style="text-decoration: none; color:rgb(255,255,255)"><span class="blank">Action Hyperlink</span>
<div style="padding-left:15%;">
</div>
</a>
<br>
Edit
For future references this answer don't include sufficient information . So that I was trying to delete this. But after answer beign accepted it cant be deleted.
I've built a widget in ServiceNow that displays a user's onboarding steps and when a step is clicked upon, a div appears below that lists out all of the tasks that they need to complete. While this works fine, I think it would look slicker if instead of having a div appear below the onboarding steps with a line divider, that the list of tasks would take the place of the entire onboarding steps div. Then maybe have a back button that takes them back to the onboarding steps with some fade in/fade out animation. If possible, I would like this to be done without jquery. Can someone provide some guidance or direct me towards an example?
My HTML so far looks like this:
<div class="container" ng-if="!c.data.loading && c.stage.length>0">
<div class="parent">
<div class="child" ng-repeat="item in c.stage track by $index">
<div class="at-work-process position-relative overflow-hidden text-center">
<div class="at-work-process-text">
<span class="at-work-process-step" ng-class="{inactive: item.workflow_order>c.currentOrder}">Step</span>
<span class="at-work-process-number" ng-class="{inactive: item.workflow_order>c.currentOrder}">{{$index+1}}</span>
<span class="at-work-process-number-text" ng-class="{inactive: item.workflow_order>c.currentOrder}">{{item.workflow_stage}}</span>
<div class="at-separator-thick" ng-class="{active_stage: item.currentStage, completed_stage: item.incompleteTotal==0 && item.workflow_order<c.currentOrder}"></div>
</div>
<div ng-click="showDetails(item);" class="at-work-process-details" ng-class="{inactive: item.workflow_order>c.currentOrder}">
<div ng-if="item.incompleteTotal>0 && item.workflow_order<=c.currentOrder" class="full-height">
<i class="material-icons" style="color:#e53935;">assignment_late</i>
<span ng-if="item.incompleteTotal>1">Incomplete <br/> {{item.incompleteTotal}} Tasks Require Your Attention</span>
<span ng-if="item.incompleteTotal==1">Incomplete <br/> {{item.incompleteTotal}} Task Require Your Attention</span>
</div>
<div ng-if="item.incompleteTotal==0 && item.workflow_order>c.currentOrder" class="full-height">
<i class="material-icons" style="color:#78B4F3;">assignment</i>
<span>Not Started</span>
</div>
<div ng-if="item.incompleteTotal==0 && item.workflow_order<c.currentOrder" class="full-height">
<i class="material-icons" style="color:#43A047;">assignment_turned_in</i>
<span>Complete</span>
</div>
</div>
</div>
</div>
</div>
//am hoping the below div would take the place of the above div instead of showing up underneath it//
<div ng-if="active_tasks.length>0" ng-class="taskClass" class="text-center tasksDiv">
<md-divider></md-divider>
<h3>{{active_workflow}} Tasks:</h3>
<ul style="list-style:none; padding-left:0; display:inline-block">
<li ng-repeat="tasks in active_tasks track by $index" style="display:flex; align-items:center; padding-bottom:0.5rem;">
<i class="material-icons" style={{tasks.style}}>{{tasks.icon}}</i>
<a ng-if="tasks.url.indexOf('table2')!=-1" ng-click="c.enroll(tasks)" href="javascript: void(0)" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
<a ng-if="tasks.url.indexOf('table1')!=-1" ng-click="c.tableNew()" href="javascript: void(0)"ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
<a ng-if="tasks.hr_task_type=='url' && tasks.url.indexOf('c.')==-1" href="{{tasks.url}}" target="_blank" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
<a ng-if="tasks.url.indexOf('launchWith')!=-1" ng-click="c.launchWith()" href="javascript: void(0)" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
<a ng-if="tasks.hr_task_type!='url'" ng-click="review(tasks)" href="javascript: void(0)" target="_blank" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
</li>
</ul>
</div>
</div>
I would attach an ng-if to the first div that works on the opposite condition of the second div.
So in this case, your second div has ng-if="active_tasks.length>0" as its condition for display. So you could set an ng-if="active_tasks.length<=0" on the first div so that any time the second div is displayed, the condition will be false for the first div. Then just remove the divider in the second div (since you don't want that anymore). Now when you perform an action on the first div and active_tasks gets populated, the first one will be destroyed and the second one will be created.
Note that in this case, you're using ng-if which will create/destroy DOM elements. You can also use ng-show to show/hide the DOM elements if you anticipate the user going back and for a lot (so that they're created up front and just hidden instead of being recreated each time the user changes the state)
Your html is slightly hard to follow, so I'm not sure which blocks you would like to hide/show, but you can do this very simply. Just create a variable, showTaskList on your scope and set it to true/false. Then on the parent div for the onboarding list do, ng-if="!showTaskList" and on the parent div for the task list, ng-if="showTaskList".
When the person clicks the button to switch between the task list or the onboarding steps, just switch this bool to the opposite, showTaskList = !showTaskList.
I'm not sure if this is really the best method, but I've only been working with joomla for two days so am very inexperienced.
Basically I have an html container in my template that holds a carousel extension and a set of images. The container has a blue background in contract to the white of the rest of the website.
I basically want to toggle that container with the extension on different pages. Here's my code:
<div id="top">
<div id="photos">
<jdoc:include type="modules" name="carousel" />
</div>
<div id="social_media">
<a id="success" href="#">Read about our success stories</a>
<a id="partner" href="#">Be a partner</a>
<a id="facebook" href="#">Join us on Facebook</a>
</div>
</div>
What I want to do is make this entire chunk of code into a Custom HTML module that only display on certain pages.
I've attempted to do this but the extension for the carousel doesn't show up, nor the jdoc:include part. I'm guessing this is because Joomlas text editor doesn't interpret jdoc:includes the same way the joomla engine does.
Is there any way around this?
In order to load a module within an article (or a Custom HTML module) you want to use the loadposition command. Here is what it would look like in your case:
<div id="top">
<div id="photos">
{loadposition carousel}
</div>
<div id="social_media">
<a id="success" href="#">Read about our success stories</a>
<a id="partner" href="#">Be a partner</a>
<a id="facebook" href="#">Join us on Facebook</a>
</div>
</div>