Some steps for a better screen reader compatibility

diff --git a/include/bbcode.php b/include/bbcode.php
index e872d859c53bec8e599715e775ccea8d34d1d8a3..8102fc3f71e5de0ef5251b034305cddb04ee4f04 100644 (file)
--- 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 9f12709042f876de8de6476ffbc329d8258c83f2..b5eb9b48e2f43aaf5bfa23eee262b61235a453b4 100644 (file)
--- 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 848a2a419007e9b6f9e389608c332a6e44d53151..f2830aae909194452c639682a68704ecd673a6c6 100644 (file)
--- 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 26b34073a63d981bc0e85c441c5d87908f0f314c..1800e3fc486bad2f679c9f0c13c81b0bef45ddd0 100644 (file)
--- 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 231cdcee4cb313e92860483f939ee94efdafb1a5..ae56371912a3d9fc056b8239aeafa2d63ae69e65 100644 (file)
--- 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 33f8c5b10a9d29c542809af870412b1ec95afb74..03c729e60f8082a42da7785ce60d34aa96b6b149 100644 (file)
--- 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>