From: Michael Vogel <icarus@dabo.de>
Date: Thu, 6 Aug 2015 06:13:15 +0000 (+0200)
Subject: Some steps for a better screen reader compatibility
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=a8a21da6f5e8b6dda6e7ce7132343609dd686dde;p=friendica.git

Some steps for a better screen reader compatibility
---

diff --git a/include/bbcode.php b/include/bbcode.php
index e872d859c5..8102fc3f71 100644
--- a/include/bbcode.php
+++ b/include/bbcode.php
@@ -1207,7 +1207,7 @@ function bbcode($Text,$preserve_nl = false, $tryoembed = true, $simplehtml = fal
 
 	// fix any escaped ampersands that may have been converted into links
 	$Text = preg_replace("/\<([^>]*?)(src|href)=(.*?)\&amp\;(.*?)\>/ism",'<$1$2=$3&$4>',$Text);
-	$Text = preg_replace("/\<([^>]*?)(src|href)=\"(?!http|ftp|mailto|cid)(.*?)\>/ism",'<$1$2="">',$Text);
+	$Text = preg_replace("/\<([^>]*?)(src|href)=\"(?!http|ftp|mailto|gopher|cid)(.*?)\>/ism",'<$1$2="">',$Text);
 
 	if($saved_image)
 		$Text = bb_replace_images($Text, $saved_image);
diff --git a/view/templates/common_tabs.tpl b/view/templates/common_tabs.tpl
index 9f12709042..b5eb9b48e2 100644
--- a/view/templates/common_tabs.tpl
+++ b/view/templates/common_tabs.tpl
@@ -1,6 +1,6 @@
 
-<ul class="tabs">
+<ul role="menubar" class="tabs">
 	{{foreach $tabs as $tab}}
-		<li id="{{$tab.id}}"><a href="{{$tab.url}}" class="tab button {{$tab.sel}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
+		<li role="menuitem" id="{{$tab.id}}"><a href="{{$tab.url}}" class="tab button {{$tab.sel}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
 	{{/foreach}}
 </ul>
diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index 848a2a4190..f2830aae90 100644
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -548,6 +548,7 @@ nav a {
   color: #ccc;
   padding-bottom: 8px;
   padding-top: 8px;
+  cursor: pointer;
 }
 
 nav a:hover .icon {
@@ -1331,6 +1332,7 @@ section.minimal {
 .wall-item-container .wall-item-actions-social a {
   float: left;
   margin-right: 1em;
+  cursor: pointer;
 }
 .wall-item-container .wall-item-actions-tools {
   float: right;
@@ -1339,6 +1341,7 @@ section.minimal {
 .wall-item-container .wall-item-actions-tools a {
   float: right;
   margin-left: 10px;
+  cursor: pointer;
 }
 .wall-item-container .wall-item-actions-tools input {
   float: right;
@@ -2935,3 +2938,14 @@ a.mail-list-link {
 
 /* upload/select popup */
 .fbrowser.image .photo-album-image-wrapper { margin-left: 10px; }
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+}
diff --git a/view/theme/vier/templates/nav.tpl b/view/theme/vier/templates/nav.tpl
index 26b34073a6..1800e3fc48 100644
--- a/view/theme/vier/templates/nav.tpl
+++ b/view/theme/vier/templates/nav.tpl
@@ -5,71 +5,71 @@
 	<div id="site-location">{{$sitelocation}}</div>
 	<div id="banner">{{$banner}}</div>
 </header>
-<nav>
+<nav role="menubar">
 	<ul>
 		{{if $nav.home}}
-			<li id="nav-home-link" class="nav-menu {{$sel.home}}">
+			<li role="menuitem" id="nav-home-link" class="nav-menu {{$sel.home}}">
 				<a class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" >{{$nav.home.1}}</a>
 				<span id="home-update" class="nav-notify"></span>
 			</li>
 		{{/if}}
 		{{if $nav.network}}
-			<li id="nav-network-link" class="nav-menu {{$sel.network}}">
+			<li role="menuitem" id="nav-network-link" class="nav-menu {{$sel.network}}">
 				<a class="{{$nav.network.2}}" href="{{$nav.network.0}}" title="{{$nav.network.3}}" >{{$nav.network.1}}</a>
 				<span id="net-update" class="nav-notify"></span>
 			</li>
 		{{/if}}
 		{{if $nav.community}}
-			<li id="nav-community-link" class="nav-menu {{$sel.community}}">
+			<li role="menuitem" id="nav-community-link" class="nav-menu {{$sel.community}}">
 				<a class="{{$nav.community.2}}" href="{{$nav.community.0}}" title="{{$nav.community.3}}" >{{$nav.community.1}}</a>
 			</li>
 		{{/if}}
 		
-		<li id="nav-site-linkmenu" class="nav-menu-icon"><a href="#" rel="#nav-site-menu"><span class="icon s22 icon-question"></span></a>
+		<li role="menu" id="nav-site-linkmenu" class="nav-menu-icon"><a rel="#nav-site-menu"><span class="icon s22 icon-question"><span class="sr-only">{{$nav.help.3}}</span></span></a>
 			<ul id="nav-site-menu" class="menu-popup">
-				{{if $nav.help}} <li><a class="{{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}" >{{$nav.help.1}}</a></li>{{/if}}
-				<li><a class="{{$nav.about.2}}" href="{{$nav.about.0}}" title="{{$nav.about.3}}" >{{$nav.about.1}}</a></li>
-				<li><a class="{{$nav.directory.2}}" href="{{$nav.directory.0}}" title="{{$nav.directory.3}}" >{{$nav.directory.1}}</a></li>
+				{{if $nav.help}} <li role="menuitem"><a class="{{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}" >{{$nav.help.1}}</a></li>{{/if}}
+				<li role="menuitem"><a class="{{$nav.about.2}}" href="{{$nav.about.0}}" title="{{$nav.about.3}}" >{{$nav.about.1}}</a></li>
+				<li role="menuitem"><a class="{{$nav.directory.2}}" href="{{$nav.directory.0}}" title="{{$nav.directory.3}}" >{{$nav.directory.1}}</a></li>
 			</ul>
 		</li>
 
 		{{if $nav.notifications}}
-			<li  id="nav-notifications-linkmenu" class="nav-menu-icon"><a href="{{$nav.notifications.0}}" rel="#nav-notifications-menu" title="{{$nav.notifications.1}}"><span class="icon s22 icon-bell tilted-icon"></span></a>
+			<li role="menu" id="nav-notifications-linkmenu" class="nav-menu-icon"><a href="{{$nav.notifications.0}}" rel="#nav-notifications-menu" title="{{$nav.notifications.1}}"><span class="icon s22 icon-bell tilted-icon"><span class="sr-only">{{$nav.notifications.1}}</span></span></a>
 				<span id="notify-update" class="nav-notify"></span>
 				<ul id="nav-notifications-menu" class="menu-popup">
-					<li id="nav-notifications-mark-all"><a href="#" onclick="notifyMarkAll(); return false;">{{$nav.notifications.mark.1}}</a></li>
-					<li id="nav-notifications-see-all"><a href="{{$nav.notifications.all.0}}">{{$nav.notifications.all.1}}</a></li>
-					<li class="empty">{{$emptynotifications}}</li>
+					<li role="menuitem" id="nav-notifications-mark-all"><a onclick="notifyMarkAll(); return false;">{{$nav.notifications.mark.1}}</a></li>
+					<li role="menuitem" id="nav-notifications-see-all"><a href="{{$nav.notifications.all.0}}">{{$nav.notifications.all.1}}</a></li>
+					<li role="menuitem" class="empty">{{$emptynotifications}}</li>
 				</ul>
 			</li>
 		{{/if}}
 		
 		{{if $userinfo}}
-			<li id="nav-user-linklabel" class="nav-menu">
-				<a href="#" rel="#nav-user-menu" title="{{$sitelocation}}">{{$userinfo.name}}<span id="intro-update" class="nav-notify"></span></a>
+			<li role="menu" id="nav-user-linklabel" class="nav-menu">
+				<a rel="#nav-user-menu" title="{{$sitelocation}}">{{$userinfo.name}}<span id="intro-update" class="nav-notify"></span></a>
 			</li>
-			<li id="nav-user-linkmenu" class="nav-menu-icon">
-				<a href="#" rel="#nav-user-menu" title="{{$sitelocation}}"><img src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"></a>
+			<li role="menu" id="nav-user-linkmenu" class="nav-menu-icon">
+				<a rel="#nav-user-menu" title="{{$sitelocation}}"><img src="{{$userinfo.icon}}" alt="{{$userinfo.name}}"></a>
 				<ul id="nav-user-menu" class="menu-popup">
-					{{if $nav.introductions}}<li><a class="{{$nav.introductions.2}}" href="{{$nav.introductions.0}}" title="{{$nav.introductions.3}}" >{{$nav.introductions.1}}</a><span id="intro-update-li" class="nav-notify"></span></li>{{/if}}
-					{{if $nav.contacts}}<li><a class="{{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}" >{{$nav.contacts.1}}</a></li>{{/if}}
-					{{if $nav.messages}}<li><a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" >{{$nav.messages.1}}</a><span id="mail-update" class="nav-notify"></span></a></li>{{/if}}
-					{{if $nav.manage}}<li><a class="{{$nav.manage.2}}" href="{{$nav.manage.0}}" title="{{$nav.manage.3}}">{{$nav.manage.1}}</a></li>{{/if}}				
-					{{if $nav.usermenu.1}}<li><a class="{{$nav.usermenu.1.2}}" href="{{$nav.usermenu.1.0}}" title="{{$nav.usermenu.1.3}}">{{$nav.usermenu.1.1}}</a></li>{{/if}}
-					{{if $nav.settings}}<li><a class="{{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}">{{$nav.settings.1}}</a></li>{{/if}}
-					{{if $nav.logout}}<li><a class="menu-sep {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" >{{$nav.logout.1}}</a></li>{{/if}}
+					{{if $nav.introductions}}<li role="menuitem"><a class="{{$nav.introductions.2}}" href="{{$nav.introductions.0}}" title="{{$nav.introductions.3}}" >{{$nav.introductions.1}}</a><span id="intro-update-li" class="nav-notify"></span></li>{{/if}}
+					{{if $nav.contacts}}<li role="menuitem"><a class="{{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}" >{{$nav.contacts.1}}</a></li>{{/if}}
+					{{if $nav.messages}}<li role="menuitem"><a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" >{{$nav.messages.1}}</a><span id="mail-update" class="nav-notify"></span></a></li>{{/if}}
+					{{if $nav.manage}}<li role="menuitem"><a class="{{$nav.manage.2}}" href="{{$nav.manage.0}}" title="{{$nav.manage.3}}">{{$nav.manage.1}}</a></li>{{/if}}				
+					{{if $nav.usermenu.1}}<li role="menuitem"><a class="{{$nav.usermenu.1.2}}" href="{{$nav.usermenu.1.0}}" title="{{$nav.usermenu.1.3}}">{{$nav.usermenu.1.1}}</a></li>{{/if}}
+					{{if $nav.settings}}<li role="menuitem"><a class="{{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}">{{$nav.settings.1}}</a></li>{{/if}}
+					{{if $nav.logout}}<li role="menuitem"><a class="menu-sep {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}" >{{$nav.logout.1}}</a></li>{{/if}}
 				</ul>
 			</li>
 		{{/if}}
 
 		{{if $nav.login}}
-			<li id="nav-login-link" class="nav-menu">
+			<li role="menuitem" id="nav-login-link" class="nav-menu">
 				<a class="{{$nav.login.2}}" href="{{$nav.login.0}}" title="{{$nav.login.3}}" >{{$nav.login.1}}</a>
-			<li>
+			</li>
 		{{/if}}
 		
 		{{if $nav.search}}
-			<li id="search-box">
+			<li role="search" id="search-box">
 				<form method="get" action="{{$nav.search.0}}">
 					<input id="search-text" class="nav-menu-search" type="text" value="" name="search">
 				</form>
@@ -77,18 +77,18 @@
 		{{/if}}
 
 		{{if $nav.admin}}
-			<li id="nav-admin-link" class="nav-menu">
+			<li role="menuitem" id="nav-admin-link" class="nav-menu">
 				<!-- <a class="{{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" >{{$nav.admin.1}}</a> -->
-				<a class="{{$nav.admin.2}} icon-sliders" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" ></a>
+				<a class="{{$nav.admin.2}} icon-sliders" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}" ><span class="sr-only">{{$nav.admin.3}}</span></a>
 			</li>
 		{{/if}}
 		
 		{{if $nav.apps}}
-			<li id="nav-apps-link" class="nav-menu {{$sel.apps}}">
-				<a class=" {{$nav.apps.2}}" href="#" rel="#nav-apps-menu" title="{{$nav.apps.3}}" >{{$nav.apps.1}}</a>
+			<li role="menu" id="nav-apps-link" class="nav-menu {{$sel.apps}}">
+				<a class=" {{$nav.apps.2}}" rel="#nav-apps-menu" title="{{$nav.apps.3}}" >{{$nav.apps.1}}</a>
 				<ul id="nav-apps-menu" class="menu-popup">
 					{{foreach $apps as $ap}}
-					<li>{{$ap}}</li>
+					<li role="menuitem">{{$ap}}</li>
 					{{/foreach}}
 				</ul>
 			</li>
diff --git a/view/theme/vier/templates/threaded_conversation.tpl b/view/theme/vier/templates/threaded_conversation.tpl
index 231cdcee4c..ae56371912 100644
--- a/view/theme/vier/templates/threaded_conversation.tpl
+++ b/view/theme/vier/templates/threaded_conversation.tpl
@@ -1,8 +1,7 @@
-
 {{$live_update}}
 
 {{foreach $threads as $thread}}
-
+<hr class="sr-only" />
 <div id="tread-wrapper-{{$thread.id}}" class="tread-wrapper {{if $thread.threaded}}threaded{{/if}}  {{$thread.toplevel}} {{$thread.network}}">
        
        
diff --git a/view/theme/vier/templates/wall_thread.tpl b/view/theme/vier/templates/wall_thread.tpl
index 33f8c5b10a..03c729e60f 100644
--- a/view/theme/vier/templates/wall_thread.tpl
+++ b/view/theme/vier/templates/wall_thread.tpl
@@ -44,7 +44,7 @@
 				<a href="{{$item.profile_url}}" target="redir" title="{{$item.linktitle}}" class="contact-photo-link" id="wall-item-photo-link-{{$item.id}}">
 					<img src="{{$item.thumb}}" class="contact-photo {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
 				</a>
-				<a href="#" rel="#wall-item-photo-menu-{{$item.id}}" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-{{$item.id}}">menu</a>
+				<a role="menu" rel="#wall-item-photo-menu-{{$item.id}}" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-{{$item.id}}">menu</a>
 				<ul class="contact-menu menu-popup" id="wall-item-photo-menu-{{$item.id}}">
 				{{$item.item_photo_menu}}
 				</ul>
@@ -58,7 +58,7 @@
 			</div>
 			{{/if}}			
 		</div>
-		<div class="wall-item-actions-author">
+		<div role="heading" aria-level="{{$item.thread_level}}" class="wall-item-actions-author">
 			<a href="{{$item.profile_url}}" target="redir" title="{{$item.linktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.sparkle}}">{{$item.name}}</span></a>
 			{{if $item.owner_url}}{{$item.via}} <a href="{{$item.owner_url}}" target="redir" title="{{$item.olinktitle}}" class="wall-item-name-link"><span class="wall-item-name{{$item.osparkle}}" id="wall-item-ownername-{{$item.id}}">{{$item.owner_name}}</span></a> <!-- {{$item.vwall}} -->{{/if}}
 			<span class="wall-item-ago">
@@ -95,38 +95,38 @@
 	</div>	
 	<div class="wall-item-bottom">
 		<div class="wall-item-links">
-			{{if $item.plink}}<a title="{{$item.plink.title}}" href="{{$item.plink.orig}}"><i class="icon-link icon-large"></i></a>{{/if}}
+			{{if $item.plink}}<a title="{{$item.plink.title}}" href="{{$item.plink.orig}}"><i class="icon-link icon-large"><span class="sr-only">{{$item.plink.title}}</span></i></a>{{/if}}
 		</div>
 		<div class="wall-item-actions">
 			<div class="wall-item-actions-social">
 			{{if $item.threaded}}
 			{{/if}}
 			{{if $item.comment}}
-				<span id="comment-{{$item.id}}" class="fakelink togglecomment" onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});" title="{{$item.switchcomment}}"><i class="icon-reply"></i></span>
+				<span id="comment-{{$item.id}}" class="fakelink togglecomment" onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});" title="{{$item.switchcomment}}"><i class="icon-reply"><span class="sr-only">{{$item.switchcomment}}</span></i></span>
 			{{/if}}
 			{{if $item.vote}}
 				{{if $item.vote.like}}
-				<a href="#" id="like-{{$item.id}}" title="{{$item.vote.like.0}}" onclick="dolike({{$item.id}},'like'); return false"><i class="icon-thumbs-up icon-large"></i></a>
+				<a role="button" id="like-{{$item.id}}" title="{{$item.vote.like.0}}" onclick="dolike({{$item.id}},'like'); return false"><i class="icon-thumbs-up icon-large"><span class="sr-only">{{$item.vote.like.0}}</span></i></a>
 				{{/if}}{{if $item.vote.dislike}}
-				<a href="#" id="dislike-{{$item.id}}" title="{{$item.vote.dislike.0}}" onclick="dolike({{$item.id}},'dislike'); return false"><i class="icon-thumbs-down icon-large"></i></a>
+				<a role="button" id="dislike-{{$item.id}}" title="{{$item.vote.dislike.0}}" onclick="dolike({{$item.id}},'dislike'); return false"><i class="icon-thumbs-down icon-large"><span class="sr-only">{{$item.vote.dislike.0}}</span></i></a>
 				{{/if}}
 			    {{if $item.vote.share}}
-				    <a href="#" id="share-{{$item.id}}" title="{{$item.vote.share.0}}" onclick="jotShare({{$item.id}}); return false"><i class="icon-retweet icon-large"></i></a>
+				    <a role="button" id="share-{{$item.id}}" title="{{$item.vote.share.0}}" onclick="jotShare({{$item.id}}); return false"><i class="icon-retweet icon-large"><span class="sr-only">{{$item.vote.share.0}}</span></i></a>
 			    {{/if}}
 			{{/if}}
 			{{if $item.star}}
-				<a href="#" id="star-{{$item.id}}" onclick="dostar({{$item.id}}); return false;"  class="{{$item.star.classdo}}"  title="{{$item.star.do}}"><i class="icon-star icon-large"></i></a>
-				<a href="#" id="unstar-{{$item.id}}" onclick="dostar({{$item.id}}); return false;"  class="{{$item.star.classundo}}"  title="{{$item.star.undo}}"><i class="icon-star-empty icon-large"></i></a>
+				<a role="button" id="star-{{$item.id}}" onclick="dostar({{$item.id}}); return false;"  class="{{$item.star.classdo}}" title="{{$item.star.do}}"><i class="icon-star icon-large"><span class="sr-only">{{$item.star.do}}</span></i></a>
+				<a role="button" id="unstar-{{$item.id}}" onclick="dostar({{$item.id}}); return false;"  class="{{$item.star.classundo}}"  title="{{$item.star.undo}}"><i class="icon-star-empty icon-large"><span class="sr-only">{{$item.star.undo}}</span></i></a>
 			{{/if}}
 			{{if $item.ignore}}
-				<a href="#" id="ignore-{{$item.id}}" onclick="doignore({{$item.id}}); return false;"  class="{{$item.ignore.classdo}}"  title="{{$item.ignore.do}}"><i class="icon-bell-slash icon-large"></i></a>
-				<a href="#" id="unignore-{{$item.id}}" onclick="doignore({{$item.id}}); return false;"  class="{{$item.ignore.classundo}}"  title="{{$item.ignore.undo}}"><i class="icon-bell-slash-o icon-large"></i></a>
+				<a role="button" id="ignore-{{$item.id}}" onclick="doignore({{$item.id}}); return false;"  class="{{$item.ignore.classdo}}"  title="{{$item.ignore.do}}"><i class="icon-bell-slash icon-large"><span class="sr-only">{{$item.ignore.do}}</span></i></a>
+				<a role="button" id="unignore-{{$item.id}}" onclick="doignore({{$item.id}}); return false;"  class="{{$item.ignore.classundo}}"  title="{{$item.ignore.undo}}"><i class="icon-bell-slash-o icon-large"><span class="sr-only">{{$item.ignore.undo}}</span></i></a>
 			{{/if}}
 			{{if $item.tagger}}
-				<a href="#" id="tagger-{{$item.id}}" onclick="itemTag({{$item.id}}); return false;" class="{{$item.tagger.class}}" title="{{$item.tagger.add}}"><i class="icon-tags icon-large"></i></a>
+				<a role="button" id="tagger-{{$item.id}}" onclick="itemTag({{$item.id}}); return false;" class="{{$item.tagger.class}}" title="{{$item.tagger.add}}"><i class="icon-tags icon-large"><span class="sr-only">{{$item.tagger.add}}</span></i></a>
 			{{/if}}
 			{{if $item.filer}}
-                                <a href="#" id="filer-{{$item.id}}" onclick="itemFiler({{$item.id}}); return false;" class="filer-item filer-icon" title="{{$item.filer}}"><i class="icon-folder-close icon-large"></i></a>
+                                <a role="button" id="filer-{{$item.id}}" onclick="itemFiler({{$item.id}}); return false;" class="filer-item filer-icon" title="{{$item.filer}}"><i class="icon-folder-close icon-large"><span class="sr-only">{{$item.filer}}</span></i></a>
 			{{/if}}
 			</div>
 			<div class="wall-item-location">{{$item.location}} {{$item.postopts}}</div>
@@ -136,10 +136,10 @@
 					<input type="checkbox" title="{{$item.drop.select}}" name="itemselected[]" class="item-select" value="{{$item.id}}" />
 				{{/if}}
 				{{if $item.drop.dropping}}
-					<a href="item/drop/{{$item.id}}" onclick="return confirmDelete();" title="{{$item.drop.delete}}"><i class="icon-trash icon-large"></i></a>
+					<a role="button" href="item/drop/{{$item.id}}" onclick="return confirmDelete();" title="{{$item.drop.delete}}"><i class="icon-trash icon-large"><span class="sr-only">{{$item.drop.delete}}</span></i></a>
 				{{/if}}
 				{{if $item.edpost}}
-					<a href="{{$item.edpost.0}}" title="{{$item.edpost.1}}"><i class="icon-edit icon-large"></i></a>
+					<a role="button" href="{{$item.edpost.0}}" title="{{$item.edpost.1}}"><i class="icon-edit icon-large"><span class="sr-only">{{$item.edpost.1}}</span></i></a>
 				{{/if}}
 			</div>