Before i start i want to to say many thanks in advance for your help. So, in my case i would like to open ui-sref link inside a bootstrap modal, meaning display the ui-sref in the modal. Below my code:
<ul class="friend-list">
<li class="bounceInDown" style="margin-left:5px;" ng-repeat="conversation in ctrl.conversations" ui-sref-active="active" ui-sref="user-app.inbox.messages({ convID: conversation.id })">
<a class="clearfix" style="cursor: pointer;">
<img ng-src="{{conversation.author.image}}" alt="user and company profil image for messages" class="img-circle" style="margin-right: 15px;"></img>
<div class="friend-name">
<strong>{{conversation.author.name}}</strong>
</div>
</div>
</ul>
This ui-sref link will open the column that contain the messages.
Related
A website I administrate through a CMS provider has two header elements and two nav elements on most pages. The headers are the top banner with our logo and page title for the main page content. The nav elements are a top navigation and a left side navigation. The tool I use to flag accessibility issues is flagging these as "Non-distinguishable landmarks" as they have neither 'aria-label' nor 'aria-labelledby'.
Contacting my CMS provider they stated that the structure of the html fully achieves distinguishing landmarks. That multiple instances of the same class of element is fine if there is other HTML that differentiates them. That ARIA labels are not needed, though some encourage their use or find them preferable.
Reaching out to support with the accessibility tool, they reiterate basically what the tool explained, that aria-labels are needed to distinguish repeated landmarks.
Working through both support staffs, each made it clear they were passing along information from another member of their organization for clarification so it is possible some information is getting dropped.
The following is redacted for readability, but I can provide further if relevant.
<div class="sitewrapper site_template mainSpan_wrapper">
<div class="mainSpan" id="mainSpan_wrapper_Screen">
<!--stopindex-->
<div id="skipnav" tabindex="-1">
<a href="#sitebody" tabindex="-1">
<img alt="Skip to page body" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
<a title="Home" href="/home" tabindex="-1">
<img alt="Home" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
<a title="Services" href="/services" tabindex="-1">
<img alt="Services" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
<a title="Departments" href="/departments" tabindex="-1">
<img alt="Departments" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
<a title="About Us" href="/about-us" tabindex="-1">
<img alt="About Us" src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
<a title="I Want To..." href="/i-want-to-" tabindex="-1">
<img alt="I Want To..." src="/DefaultContent/Default/_gfx/spacer.gif" /></a>
</div>
<!--startindex-->
<header id="siteheader" class="">
<!--stopindex-->
<h1 class="wcag_only">My organization</h1>
<a id="home_link" href="/home">Home</a>
<a class="menu_trigger mobile_only" href="javascript:void(0);">Menu</a>
.
.
.
</header>
<div class="standardthreecolumnlayout clearfix" id="sitebody">
<div id="ColumnUserControl1" class="column top_col clearfix " >
<div class=" main_menu_widget">
<nav class="regularmegamenu mainnav" id="menuContainer_617_0_403">
<ul class="dropdownmenu clearfix">
<li class="megamenu_first" id="dropdownrootitem1"><a class="dropdownrootitem1" href="/home" title="Home" data-navid="1" target="_self">Home</a></li>
.
.
.
</ul>
</nav>
</div>
</div>
<div id="ColumnUserControl2" class="column left_col " >
<nav id='leftNav_618_0_403' class='nocontent sidenav mobile_list vi-sidenav-desktop '>
<h2 class="mobile_only mobile_header">Navigation Menu</h2>
.
.
.
</nav>
</div>
<div class="column right_col">
<div class="column right_col">
<div id="ColumnUserControl3" class="column banner_col clearfix " >
<a id="pagebody"></a>
<header id="widget_621_571_403" class="title_widget clearfix on_page " >
<p class="breadcrumb">
Departments ยป Human Resources
.
.
.
I expect that the aria-labels will be needed, but could use some expertise to determine the right direction.
I've never tested this myself, but going by the WCAG documentation, I'm going to say it needs the aria related attributes to be properly accessible.
When the nav element is employed more than once on a page, distinguish the navigation groups by using an aria-label or aria-labelledby attribute.
Source: Technique H97: Grouping related links using the nav element
As mentioned on the H97 page, this is related to fulfilling WCAG Success Criterion 1.3.1: Info and Relationships,
I'm creating a hybrid app for iOS and Android and I'm using framework7 to create it. The thing is I have a media list view that onclick should redirect to a page.html, and it doesn't. I've triple-checked every-name to see if it was a capital letter thing but every name was written correctly. This is the media list view code:
<li>
<a href="Page.html" class="item-link item-content">
<div class="item-media"><img src="abc.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Hey!</div>
</div>
<div class="item-subtitle">Hi</div>
</div>
</a>
</li>
Does someone know what might be the problem?
Framework7 uses ajax pages by default, so your target page should be formatted for this, or you can add the class name external to the href tag to open directly.
<li>
<a href="Page.html" class="item-link item-content external">
<div class="item-media"><img src="abc.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Hey!</div>
</div>
<div class="item-subtitle">Hi</div>
</div>
</a>
</li>
Check the documentation note: http://framework7.io/docs/pages-ajax.html
Hi I have created a basic jquery carousal. I need to make it accessible using tab, so that it follows sequence like Prev tab, casousal dots, next tab.
<div id="mainDiv">
<div id="buttons">
<
>
</div>
<div onclick ="changeContent()" id="sliderDiv">
<ul tabindex="1" class="slider">
<li>
<h3>Image 1</h3>
<img src="images/1.jpg" alt="Image not found">
</li>
<li>
<h3>Image 2</h3>
<img src="images/2.jpg" alt="Image not found">
</li>
<li>
<h3>Image 3</h3>
<img src="images/3.jpg" alt="Image not found">
</li>
<li>
<h3>Image 4</h3>
<img src="images/4.jpg" alt="Image not found">
</li>
<li>
<h3>Iframe</h3>
<iframe src="testIframe.html"></iframe>
</li>
</ul>
</div>
<br>
<br>
<br>
<div class="carousalDots">
<span class="slickdot" onclick ="changeContent()"></span>
<span class="slickdot" onclick ="changeContent()"></span>
<span class="slickdot" onclick ="changeContent()"></span>
<span class="slickdot" onclick ="changeContent()"></span>
<span class="slickdot" onclick ="changeContent()"></span>
</div>
I tried using tabindex property but it didn't work. Any help will be appreciated :)
There are a few issues with your code. First, the only items that are 'tab'-able are the two tags and the which has a tabindex set. If you want the carousel dots to be focusable, you should try to make them into a more appropriate focusable element. something like:
This will allow the dots to be accessed via the tab key, as well as provide the expected hover cursor state.
For your next comment about the sequence being "Prev tab, casousal dots, next tab", I'd suggest reworking your markup to allow for that flow to happen naturally. It's generally bad practice to hijack the focus order away from the user. If you could move the carousel dots into the same div as the prev/next buttons it'd be ideal. This way it's easier for users to navigate to the controls and it's easier to maintain.
I'm wondering what the best way is to navigate the user to a users profile page when he clicks a <li> item on the members page.
<li>
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="profile-pic">
<div class="name">John Smith</div>
<div class="skills">PHP, ASP, MySQL, SQL Server, Javascript</div>
</li>
That's the sort of markup for each list item, and it comes out at about 640x50 block width/height. I want the user to go to their profile page when they click on any part of the <li> element.
I tried wrapping the entire list item in a link element (<a>), but that just results in a 0x0 sized link element. I'd also prefer not to use Javascript.
Thanks.
You could do this:
HTML:
<li>
<a href="#" title="Link text" class="list-link">
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="profile-pic">
<span class="name">John Smith</span>
<span class="skills">PHP, ASP, MySQL, SQL Server, Javascript</span>
</a>
</li>
css:
.list-link{
display:block;
}
Wrapping A around LI is invalid HTML. Why not just wrap the entire content of the innerHTML of the LI in an A-tag instead?
<li>
<a href="...">
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="profile-pic">
<div class="name">John Smith</div>
<div class="skills">PHP, ASP, MySQL, SQL Server, Javascript</div>
</a>
</li>
I'm trying to create a simple thumbnail list, the code is pretty much copied off jqm docs pages. However, when I use the code below the button element of the list isn't anchored to the left of the list item and instead appears centered...Can anyone help me? It's driving me crazy!
I haven't got any styles in other than what is in the jquerymobile default page template
<div id="listDiv" class="ui-content" data-role="main">
<div id="listInformation" data-role="content-primary">
<ul id="swipeMeChildrenList" data-role="listview" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="index.html" class="ui-link-inherit">
<img src="images/album-p.jpg" class="ui-li-thumb">
<p>Ha</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
</div>
</div>
What code do you use to generate your list from? A simple list will be specified like this:
<ul data-role="listview">
<li>
<a href="index.html">
<img src="images/album-p.jpg" />Ha
</a>
</li>
</ul>
jQuery Mobile will take care of adding all the necessary classes depending on the platform.
I suggest opening a new document and using the defaults from that page, ie
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
</ul>
Then if that works, piece by piece replace the code with yours until it breaks, that should isolate the issue.