Index: lams_central/src/java/org/lamsfoundation/lams/web/tag/PortraitTag.java
===================================================================
diff -u -rf11663c9b27c276fae910e6c3fa5561a3e2af781 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_central/src/java/org/lamsfoundation/lams/web/tag/PortraitTag.java	(.../PortraitTag.java)	(revision f11663c9b27c276fae910e6c3fa5561a3e2af781)
+++ lams_central/src/java/org/lamsfoundation/lams/web/tag/PortraitTag.java	(.../PortraitTag.java)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -29,6 +29,7 @@
 import javax.servlet.jsp.tagext.BodyTagSupport;
 import javax.servlet.jsp.tagext.Tag;
 
+import org.apache.commons.lang.StringUtils;
 import org.apache.log4j.Logger;
 import org.lamsfoundation.lams.usermanagement.User;
 import org.lamsfoundation.lams.usermanagement.service.IUserManagementService;
@@ -124,7 +125,8 @@
 	if (portraitId != null) {
 	    boolean isRound = (round != null ? Boolean.valueOf(round) : true);
 	    String[] sizes = getSizeClass();
-	    StringBuilder bldr = new StringBuilder("<img class=\"").append(sizes[0]);
+	    String alt = user == null || StringUtils.isBlank(user.getFirstName()) ? "user portrait" : user.getFirstName() + "'s portrait"; 
+	    StringBuilder bldr = new StringBuilder("<img alt=\"" + alt + "\" class=\"").append(sizes[0]);
 	    if (isRound) {
 		bldr.append(CSS_ROUND);
 	    }
Index: lams_central/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -rbc8213e12c4e5afddd0394ad66386ef3e70d1611 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_central/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision bc8213e12c4e5afddd0394ad66386ef3e70d1611)
+++ lams_central/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -101,15 +101,7 @@
 	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
 		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
 		<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-	
-		<c:choose>
-			<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-				<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
-			</c:when>
-			<c:otherwise>
-				<c:set var="ratingStarsClass" value="rating-stars"/>
-			</c:otherwise>
-		</c:choose>
+		<c:set var="isWidgetDisabled" value="${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}"/>
 			
 		<c:if test="${not hideCriteriaTitle}">
 			<div class="text-muted fw-bold">
@@ -126,7 +118,8 @@
 			</c:otherwise>
 		</c:choose>
 		
-		<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}" role="button" aria-label="<fmt:message key="${starsRateLabel}"/>">
+		<div class="${isWidgetDisabled? 'rating-stars-disabled' : 'rating-stars'} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}" role="button" aria-label="<fmt:message key="${starsRateLabel}"/>"
+			<c:if test="${!isWidgetDisabled}">tabindex="0"</c:if>>
 		</div>
 			
 		<c:choose>
Index: lams_tool_assessment/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_tool_assessment/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_assessment/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -101,15 +101,7 @@
 	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
 		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
 		<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
-	
-		<c:choose>
-			<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
-				<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
-			</c:when>
-			<c:otherwise>
-				<c:set var="ratingStarsClass" value="rating-stars"/>
-			</c:otherwise>
-		</c:choose>
+		<c:set var="isWidgetDisabled" value="${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}"/>
 			
 		<c:if test="${not hideCriteriaTitle}">
 			<div class="text-muted fw-bold">
@@ -126,7 +118,8 @@
 			</c:otherwise>
 		</c:choose>
 		
-		<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}" role="button" aria-label="<fmt:message key="${starsRateLabel}"/>">
+		<div class="${isWidgetDisabled? 'rating-stars-disabled' : 'rating-stars'} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}" role="button" aria-label="<fmt:message key="${starsRateLabel}"/>"
+			<c:if test="${!isWidgetDisabled}">tabindex="0"</c:if>>
 		</div>
 			
 		<c:choose>
Index: lams_tool_preview/web/WEB-INF/tags/Rating5.tag
===================================================================
diff -u -r0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_tool_preview/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 0ebe63b978acffe32a0c7e4a2cd63cfadf73cc96)
+++ lams_tool_preview/web/WEB-INF/tags/Rating5.tag	(.../Rating5.tag)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -105,9 +105,11 @@
 		<c:choose>
 			<c:when test='${disabled || isItemAuthoredByUser || ((maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating) || !(isCriteriaNotRatedByUser || allowRetries)}'>
 				<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+				<c:set var="isWidgetDisabled" value="true"/>
 			</c:when>
 			<c:otherwise>
 				<c:set var="ratingStarsClass" value="rating-stars"/>
+				<c:set var="isWidgetDisabled" value="false" />
 			</c:otherwise>
 		</c:choose>
 			
@@ -126,7 +128,8 @@
 			</c:otherwise>
 		</c:choose>
 		
-		<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}" role="button" aria-label="<fmt:message key="${starsRateLabel}"/>">
+		<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}" role="button" aria-label="<fmt:message key="${starsRateLabel}"/>"
+			<c:if test"${isWidgetDisabled}">tabindex="0"</c:if>>
 		</div>
 			
 		<c:choose>
Index: lams_tool_preview/web/WEB-INF/tags/StyledRating5.tag
===================================================================
diff -u -ra08fb689e1bb174869cb981d301b204d2f573590 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_tool_preview/web/WEB-INF/tags/StyledRating5.tag	(.../StyledRating5.tag)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
+++ lams_tool_preview/web/WEB-INF/tags/StyledRating5.tag	(.../StyledRating5.tag)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -132,34 +132,28 @@
 			</c:when>
 
 			<c:otherwise>
-				<table class="tablesorter" width="100%">
-					<tbody>
-					<c:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
-						<c:if test="${status.first && not empty rating.averageRating}">
-							<tr>
-								<td class="rating">
-									<div class="rating-stars-holder text-center center-block">
-										<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
-										<div class="rating-stars-disabled rating-stars-new" data-average="${rating.averageRating}" data-id="${objectId}"></div>
-										<div class="rating-stars-caption" id="rating-stars-caption-${objectId}">
-											<fmt:message key="label.avg.rating">
-												<fmt:param><span id="average-rating-${objectId}">${rating.averageRating}</span></fmt:param>
-												<fmt:param><span id="number-of-votes-${objectId}">${rating.numberOfVotes}</span></fmt:param>
-											</fmt:message>
-										</div>
-								</td>
-							</tr>
-						</c:if>
-						<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
-							<tr>
-								<td>
-									<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
-								</td>
-							</tr>
-						</c:if>
-					</c:forEach>
-					</tbody>
-				</table>
+				<c:forEach var="rating" items="${criteriaRatings.ratingDtos}" varStatus="status">
+					<c:if test="${status.first && not empty rating.averageRating}">
+						<div class="rating">
+							<div class="rating-stars-holder text-center center-block">
+								<c:set var="objectId">${criteriaRatings.ratingCriteria.ratingCriteriaId}-${rating.itemId}</c:set>
+								<div class="rating-stars-disabled rating-stars-new" data-average="${rating.averageRating}" data-id="${objectId}"></div>
+								<div class="rating-stars-caption" id="rating-stars-caption-${objectId}-currentUser">
+									<fmt:message key="label.avg.rating">
+										<fmt:param><span id="average-rating-${objectId}-currentUser">${rating.averageRating}</span></fmt:param>
+										<fmt:param><span id="number-of-votes-${objectId}-currentUser">${rating.numberOfVotes}</span></fmt:param>
+									</fmt:message>
+								</div>
+							</div>
+						</div>
+					</c:if>
+						
+					<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled && not empty rating.comment}">
+						<div>
+							<div class="rating-comment"><c:out value="${rating.comment}" escapeXml="false"/></div>
+						</div>
+					</c:if>
+				</c:forEach>
 			</c:otherwise>
 		</c:choose>
 
@@ -266,7 +260,6 @@
 			}
 
 			.rubrics-table.pivot-view .row:not(.rubrics-table-header) .col:not(:first-child) {
-				cursor: pointer;
 				text-align: center;
 			}
 
@@ -301,12 +294,6 @@
 				text-align: right;
 			}
 
-			.rubrics-rating-count > .badge {
-				color: gray;
-				background-color: white;
-				font-size: large;
-			}
-
 			.rubrics-table .rubrics-rating-cell .rubrics-rating-learner {
 				margin-top: 10px;
 			}
@@ -362,7 +349,7 @@
 									<c:if test="${rateCount > 0}">
 										<%-- learners see just how many rates they got from other learners --%>
 										<div class="rubrics-rating-count">
-											<span class="badge">x&nbsp;${rateCount}</span>
+											<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 										</div>
 
 										<%-- teachers see also who gave the rating --%>
@@ -394,7 +381,7 @@
 										<c:if test="${rateCount > 0}">
 											<%-- learners see just how many rates they got from other learners --%>
 											<div class="rubrics-rating-count">
-												<span class="badge">x&nbsp;${rateCount}</span>
+												<span class="badge text-bg-light">x&nbsp;${rateCount}</span>
 											</div>
 
 											<%-- teachers see also who gave the rating --%>
@@ -430,7 +417,7 @@
 			</c:when>
 			
 			<c:when test="${rubricsPivotView}">
-				<div id="rubrics-row-cards" role="tablist" aria-multiselectable="true">
+				<div id="rubrics-row-cards">
 						<%-- It is sufficient to take user names and columns from the first row/criterion --%>
 					<c:set var="columnHeaders" value="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" />
 					<c:set var="columnHeaderCount" value="${fn:length(columnHeaders)}" />
@@ -439,14 +426,12 @@
 						<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
 
 						<div class="lcard card rubrics-row-card pivot-view">
-							<div class="card-header text-bg-secondary" role="tab" id="heading${criteria.ratingCriteriaId}">
-						       	<span class="card-title collapsable-icon-left">
-						       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${criteria.ratingCriteriaId}"
-									   aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-panels">
-										<%-- Criterion "row" --%>
-										<c:out value="${criteria.title}" escapeXml="false" />
-									</button>
-								</span>
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
+						       	<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${criteria.ratingCriteriaId}"
+								   aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-panels">
+									<%-- Criterion "row" --%>
+									<c:out value="${criteria.title}" escapeXml="false" />
+								</button>
 							</div>
 
 							<div id="collapse${criteria.ratingCriteriaId}" class="collapse"
@@ -511,15 +496,13 @@
 					<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
 
 						<div class="card lcard rubrics-user-card">
-							<div class="card-header text-bg-secondary" role="tab" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
-						       	<span class="card-title collapsable-icon-left">
-						       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
+							<div class="card-header text-bg-secondary collapsable-icon-left" id="rubrics-heading-${criteriaGroupId}-${ratingDto.itemId}">
+					       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
 									   aria-expanded="false" aria-controls="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}"
 									   data-parent="#rubrics-users-panels-${criteriaGroupId}">
-										<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
-										&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
-									</button>
-								</span>
+									<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
+									&nbsp;<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
+								</button>
 							</div>
 
 							<div id="rubrics-collapse-${criteriaGroupId}-${ratingDto.itemId}" class="collapse"
Index: lams_tool_preview/web/pages/learning/comment.jsp
===================================================================
diff -u -ra08fb689e1bb174869cb981d301b204d2f573590 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_tool_preview/web/pages/learning/comment.jsp	(.../comment.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
+++ lams_tool_preview/web/pages/learning/comment.jsp	(.../comment.jsp)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -100,7 +100,7 @@
 
 							rows += '<td class="username" width="20%"><div class="float-start me-2">';
 							rows += definePortrait( userData["itemDescription2"], itemId, 'small', true, '${lams}' );
-							rows += '</div><span class="portrait-sm-lineheight">';
+							rows += '</div><span class="portrait-sm-lineheight" id="username-' + itemId + '">';
 							rows += userData["itemDescription"];
 							rows += '</span>'
 							rows += '</td>';
@@ -119,7 +119,7 @@
 								rows += '<div class="g-0">';
 								rows += '';
 								rows += '<div class="col-12 col-sm-11 ">';										
-								rows +=		'<textarea name="comment-textarea-'+itemId+'" rows="4" id="comment-textarea-'+ itemId + '" class="form-control"';
+								rows +=		'<textarea name="comment-textarea-'+itemId+'" rows="4" id="comment-textarea-'+ itemId + '" class="form-control" aria-labelledby="theader-comment username-' + itemId + '"';
 								<c:if test="${minRates ne 0 || maxRates ne 0}">
 									rows += ' onkeyup="return updatedComment(this);"';
 									if ( maxReached && commentPostedByUser == '' ) {
@@ -337,7 +337,7 @@
 			<th class="username" title="<fmt:message key='label.sort.by.user.name'/>" style="width:25%" > 
 				<fmt:message key="label.user.name" />
 			</th>
-			<th class="comment"> 
+			<th class="comment" id="theader-comment"> 
 				<fmt:message key="label.comment" />
 			</th>
 		</lams:TSTable5>
Index: lams_tool_preview/web/pages/learning/hedging.jsp
===================================================================
diff -u -ra08fb689e1bb174869cb981d301b204d2f573590 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_tool_preview/web/pages/learning/hedging.jsp	(.../hedging.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
+++ lams_tool_preview/web/pages/learning/hedging.jsp	(.../hedging.jsp)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -100,7 +100,7 @@
 				<div class="row">
 					<div class="col">
 						<lams:Portrait userId="${ratingDto.itemId}"/>
-						<span class="portrait-sm-lineheight ms-2">${ratingDto.itemDescription}</span>
+						<span class="portrait-sm-lineheight ms-2" id="username-${ratingDto.itemId}">${ratingDto.itemDescription}</span>
 					</div>
 					
 					<div style="width: 100px;">
@@ -109,7 +109,7 @@
 							${ratingDto.userRating}
 						</c:when>
 						<c:otherwise>
-							<select name="mark${ratingDto.itemId}" class="mark-hedging-select form-select">
+							<select name="mark${ratingDto.itemId}" class="mark-hedging-select form-select" aria-labelledby="assign-mark-info username-${ratingDto.itemId}">
 								<c:if test="${isEditingDisabled || question.responseSubmitted}">disabled="disabled"</c:if>				
 								<c:forEach var="i" begin="0" end="${criteriaRatings.ratingCriteria.maxRating}">
 									<option
Index: lams_tool_preview/web/pages/learning/rankall.jsp
===================================================================
diff -u -ra08fb689e1bb174869cb981d301b204d2f573590 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_tool_preview/web/pages/learning/rankall.jsp	(.../rankall.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
+++ lams_tool_preview/web/pages/learning/rankall.jsp	(.../rankall.jsp)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -1,4 +1,4 @@
-	<%-- Build up the divs now and the ordering, then include the divs in the body and trigger the ordering in document.ready --%>
+<%-- Build up the divs now and the ordering, then include the divs in the body and trigger the ordering in document.ready --%>
 <c:choose>
 	<c:when test="${finishedLock}">
 		<c:set var="rowdrop"></c:set>
@@ -24,6 +24,14 @@
 	</c:if>
 </c:forEach>
 
+<style>
+	#lastEntry {
+		padding-top:10px;
+		padding-bottom:10px;
+		list-style-type: none;
+	}
+</style>
+
 <script type="text/javascript" src="${lams}includes/javascript/interact.min.js"></script>
 <lams:JSImport src="includes/javascript/ranking.js" relative="true" />
 <script type="text/javascript">
@@ -152,9 +160,9 @@
 				<strong><fmt:message key="label.ranked"/></strong>
 				
 				<ul id="ranked" class="list-group mt-2">
-					<div id="lastEntry" class="${rowdrop} text-muted" style="padding-top:10px;padding-bottom:10px">
+					<li id="lastEntry" class="${rowdrop} text-muted">
 						<fmt:message key="label.addlearnerhere"/>
-					</div>
+					</li>
 				</ul>
 			</div>
 			
Index: lams_tool_preview/web/pages/learning/ranking.jsp
===================================================================
diff -u -ra08fb689e1bb174869cb981d301b204d2f573590 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_tool_preview/web/pages/learning/ranking.jsp	(.../ranking.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
+++ lams_tool_preview/web/pages/learning/ranking.jsp	(.../ranking.jsp)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -22,6 +22,12 @@
 	<c:set var="javascriptReady">${javascriptReady} setRanking('${ratingDto.itemDescription}', ${ratingDto.itemId}, '${ratingDto.userRating}');</c:set>		
 </c:forEach>
 
+<style>
+	li.row.text-bg-success {
+		min-height: 50px;
+	}
+</style>
+
 <script type="text/javascript" src="${lams}includes/javascript/interact.min.js"></script>
 <lams:JSImport src="includes/javascript/ranking.js" relative="true" />
 <script type="text/javascript">
@@ -162,16 +168,17 @@
 		</div>
 		
 		<div class="row m-3 mb-4" id="drag-area">
-			<ul class="col-sm-6 list-group">
+			<div class="col-sm-6">
 				<strong><fmt:message key="label.ranked"/></strong>
-
-				<c:forEach begin="1" end="${criteriaRatings.ratingCriteria.maxRating}" var="index">
-					<div class="row text-bg-success mt-2 ms-0">
-						<div class="col-sm-1 divrankxlabel">${index}:</div>
-						<div class="col-sm-10 divrankx ${rowdrop}" id="divrank${index}"></div>
-					</div>
-				</c:forEach>
-			</ul>
+				<ul class="list-group">
+					<c:forEach begin="1" end="${criteriaRatings.ratingCriteria.maxRating}" var="index">
+						<li class="row text-bg-success mt-2 ms-0">
+							<div class="col-sm-1 divrankxlabel">${index}:</div>
+							<div class="col-sm-10 divrankx ${rowdrop}" id="divrank${index}"></div>
+						</li>
+					</c:forEach>
+				</ul>
+			</div>
 			
 			<div class="col-sm-6">
 				<div class="${rowdrop} fw-bold" id="unranked">
Index: lams_tool_preview/web/pages/learning/rubrics.jsp
===================================================================
diff -u -ra08fb689e1bb174869cb981d301b204d2f573590 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_tool_preview/web/pages/learning/rubrics.jsp	(.../rubrics.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
+++ lams_tool_preview/web/pages/learning/rubrics.jsp	(.../rubrics.jsp)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -9,6 +9,7 @@
 	
 	.rubrics-table-header {
 		font-weight: bold;
+		text-align: center;
 	}
 
 	.rubrics-table .col:first-child {
@@ -36,6 +37,13 @@
 	.lcard {
 		margin-bottom: 1.25rem;
 	}
+	.row>button.col {
+		border: none;
+		background: none;
+	}
+	.row>button.col:focus-visible {
+    	box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, .5);
+	}
 
 </style>
 
@@ -104,26 +112,24 @@
 </div>
 <div class="clearfix"></div>
 
-<div id="rubrics-user-cards" role="tablist" aria-multiselectable="true">
+<div id="rubrics-user-cards">
 	<%-- It is sufficient to take user names and columns from the first row/criterion --%>
 	<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
 
 	<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
 			
 	    <div class="card lcard rubrics-user-card mt-2">
-	       <div class="card-header text-bg-secondary" role="tab" id="heading${ratingDto.itemId}">
-	       	<span class="card-title collapsable-icon-left">
+	       <div class="card-header text-bg-secondary collapsable-icon-left" id="heading${ratingDto.itemId}">
 	       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${ratingDto.itemId}" 
 						aria-expanded="false" aria-controls="collapse${ratingDto.itemId}" data-parent="#rubrics-users-cards"
 				>
 					<lams:Portrait userId="${ratingDto.itemId}" hover="false" />
 					&nbsp;
 					<c:out value="${ratingDto.itemDescription}" escapeXml="false"/>
 				</button>
-			</span>
 	       </div>
 	       
-	       <div id="collapse${ratingDto.itemId}" class="collapse" role="tabpanel" aria-labelledby="heading${ratingDto.itemId}">
+	       <div id="collapse${ratingDto.itemId}" class="collapse" aria-labelledby="heading${ratingDto.itemId}">
 				<div class="ltable rubrics-table mb-0">
 						<div class="row rubrics-table-header m-0">
 							<%-- Each answer column has the same length, all remaining space is take by the question column --%>
@@ -147,18 +153,25 @@
 									<c:out value="${criteria.title}" escapeXml="false" />
 								</div>
 								<c:forEach var="column" items="${criteria.rubricsColumns}" varStatus="columnOrderId">
-									<div onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count})" role="button"
+									<button type="button" onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count})"
 										<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
 										class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == columnOrderId.count}">text-bg-success</c:if>'
 									>
-										<c:out value="${column.name}" escapeXml="false" />	
-									</div>
+										<c:choose>
+											<c:when test="${empty column.name}">
+												...
+											</c:when>
+											<c:otherwise>
+												<c:out value="${column.name}" escapeXml="false" />	
+											</c:otherwise>
+										</c:choose>
+									</button>
 									<c:if test="${not columnOrderId.last and peerreview.rubricsInBetweenColumns}">
-										<div onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count + 0.5})" role="button"
+										<button type="button" onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnOrderId.count + 0.5})"
 											class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnOrderId.count + 0.5)}">text-bg-success</c:if>'
 										>
 											<i><fmt:message key="label.rating.rubrics.in.between" /></i>
-										</div>
+										</button>
 									</c:if>
 								</c:forEach>
 							</div>
Index: lams_tool_preview/web/pages/learning/rubricsPivot.jsp
===================================================================
diff -u -ra08fb689e1bb174869cb981d301b204d2f573590 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_tool_preview/web/pages/learning/rubricsPivot.jsp	(.../rubricsPivot.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
+++ lams_tool_preview/web/pages/learning/rubricsPivot.jsp	(.../rubricsPivot.jsp)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -34,6 +34,10 @@
 	.lcard {
 		margin-bottom: 1.25rem;
 	}
+	.row>button.col {
+		border: none;
+		background: none;
+	}
 </style>
 
 <script>
@@ -107,7 +111,7 @@
 </div>
 <div class="clearfix"></div>
 
-<div id="rubrics-row-cards" role="tablist" aria-multiselectable="true">
+<div id="rubrics-row-cards">
 	<%-- It is sufficient to take user names and columns from the first row/criterion --%>
 	<c:set var="exampleRatings" value="${criteriaRatings.ratingDtos}" />
 	<c:set var="columnHeaders" value="${criteriaRatings.ratingCriteria.rubricsColumnHeaders}" />
@@ -117,19 +121,16 @@
 		<c:set var="criteria" value="${criteriaDto.ratingCriteria}" />
 		
 	    <div class="lcard card rubrics-row-card">
-	       <div class="card-header text-bg-secondary" role="tab" id="heading${criteria.ratingCriteriaId}">
-	       	<span class="card-title collapsable-icon-left">
+	       <div class="card-header text-bg-secondary collapsable-icon-left" id="heading${criteria.ratingCriteriaId}">
 	       		<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapse${criteria.ratingCriteriaId}" 
 						aria-expanded="false" aria-controls="collapse${criteria.ratingCriteriaId}" data-parent="#rubrics-rows-cards"
 				>
 					<%-- Criterion "row" --%>
 					<c:out value="${criteria.title}" escapeXml="false" />
 				</button>
-			</span>
 	       </div>
 	       
-	       <div id="collapse${criteria.ratingCriteriaId}" class="collapse" 
-	       	    	role="tabpanel" aria-labelledby="heading${criteria.ratingCriteriaId}">
+	       <div id="collapse${criteria.ratingCriteriaId}" class="collapse" aria-labelledby="heading${criteria.ratingCriteriaId}">
 				<div class="ltable rubrics-table">
 					<div class="row rubrics-table-header m-0">
 						<%-- Learner profile pictures and names --%>
@@ -155,12 +156,12 @@
 									</div>
 									<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
 										
-										<div onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnHeaderCount - columnStatus.index})" role="button"
+										<button type="button" onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnHeaderCount - columnStatus.index})"
 											<%-- Columns are ordered from 1 to 5, so rate value is also the order ID of the column --%>
 											 class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index)}">text-bg-success</c:if>'
 										>
 											${columnHeaderCount - columnStatus.index}
-										</div>
+										</button>
 									</c:forEach>
 								</div>
 								
@@ -170,11 +171,11 @@
 											<i><fmt:message key="label.rating.rubrics.in.between" /></i>
 										</div>
 										<c:forEach var="ratingDto" items="${exampleRatings}" varStatus="learnerOrderId">
-											<div onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnHeaderCount - columnStatus.index - 0.5})" role="button"
+											<button type="button" onClick="javascript:rateRubricsCriteria(this, ${criteria.ratingCriteriaId}, ${ratingDto.itemId}, ${columnHeaderCount - columnStatus.index - 0.5})"
 												 class='col <c:if test="${criteriaDto.ratingDtos[learnerOrderId.index].userRating == (columnHeaderCount - columnStatus.index - 0.5)}">text-bg-success</c:if>'
 											>
 												${columnHeaderCount - columnStatus.index - 0.5}
-											</div>
+											</button>
 										</c:forEach>
 									</div>
 								</c:if>
Index: lams_tool_preview/web/pages/learning/star.jsp
===================================================================
diff -u -ra08fb689e1bb174869cb981d301b204d2f573590 -r25fa7a462f907084b2a8aa550082d70994d66609
--- lams_tool_preview/web/pages/learning/star.jsp	(.../star.jsp)	(revision a08fb689e1bb174869cb981d301b204d2f573590)
+++ lams_tool_preview/web/pages/learning/star.jsp	(.../star.jsp)	(revision 25fa7a462f907084b2a8aa550082d70994d66609)
@@ -94,20 +94,20 @@
 							
 							var isMaximumRatesPerUserReached = (${peerreview.maximumRatesPerUser} != 0) && (userData.ratesPerUser >= ${peerreview.maximumRatesPerUser});
 							
-							rows += '<tr>';
-
-							rows += '<td class="username"><div class="float-start me-2">';
-							rows += definePortrait( userData["itemDescription2"], itemId, 'small', true, '${lams}' );
-							rows += '</div><span class="portrait-sm-lineheight">';
-							rows += userData["itemDescription"];
-							rows += '</span>'
+							rows += '<tr>' +
+										'<td class="username">' + 
+											'<div class="float-start me-2">' +
+												definePortrait( userData["itemDescription2"], itemId, 'small', true, '${lams}' ) +
+										 	'</div>' +
+											'<span class="portrait-sm-lineheight" id="username-' + itemId + '">' +
+												userData["itemDescription"] +
+											'</span>';
 								
 							if (isMaximumRatesPerUserReached) {
 								rows += '<br/><div class="alert alert-warning"><i class="fa fa-exclamation-circle text-muted"></i> <spring:escapeBody javaScriptEscape="true"><fmt:message key="label.cant.rate" /></spring:escapeBody></div>';
 							}
 
 							rows += '</td>';
-							
 							rows += '<td class="rating">';
 							rows += 	'<div class="rating-stars-holder text-center center-block">';		
 							
@@ -117,9 +117,11 @@
 							var userRating = userData["userRating"];
 							var isCriteriaNotRatedByUser = userRating == "";
 							var userRatingDisplayed = (!isCriteriaNotRatedByUser) ? userRating : 0;
-							var ratingStarsClass = (isDisabled && isCriteriaNotRatedByUser) ? "rating-stars-disabled" : "rating-stars";
+							let isWidgetDisabled = (isDisabled && isCriteriaNotRatedByUser);
+							var ratingStarsClass = isWidgetDisabled ? "rating-stars-disabled" : "rating-stars";
+							var tabindex = isWidgetDisabled ? "" : 'tabindex="0"';
 							
-							rows += '<div class="'+ ratingStarsClass +' rating-stars-new" data-average="'+ userRatingDisplayed +'" data-id="'+ objectId +'">';
+							rows += '<div class="'+ ratingStarsClass +' rating-stars-new" data-average="'+ userRatingDisplayed +'" data-id="'+ objectId +'" role="button" aria-labelledby="theader-rating username-' + itemId + '" ' + tabindex + '>';
 							rows += '</div>';
 									
 							rows += '<div class="rating-stars-caption" id="rating-stars-caption-'+ objectId +'"';
@@ -149,7 +151,7 @@
 										rows += '" style="visibility: hidden;';
 									rows += '">';	
 									commentPostedByUser = commentPostedByUser.replace(/<BR>/gi, '\n');
-									rows +=		'<textarea name="comment-textarea-'+itemId+'" rows="4" id="comment-textarea-'+ itemId +'" onblur="onRatingSuccessCallback()" class="form-control">'+commentPostedByUser+'</textarea>';
+									rows +=		'<textarea name="comment-textarea-'+itemId+'" rows="4" id="comment-textarea-'+ itemId +'" onblur="onRatingSuccessCallback()" class="form-control" aria-labelledby="theader-comment username-' + itemId + '">'+commentPostedByUser+'</textarea>';
 									rows += '</div>';											
 								}
 								
@@ -303,21 +305,21 @@
 		<c:set var="numColumns" value="3"/>
 	</c:if>
 	
-		<lams:TSTable5 numColumns="${numColumns}" tableClass="tablesorter jRating">
-			<th class="username" title="<fmt:message key='label.sort.by.user.name'/>"> 
-				<fmt:message key="label.user.name" />
-			</th>
-			<th class="rating">  
-				<fmt:message key="label.rating" />
-			</th>
-			<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
-			<th class="comment"> 
+	<lams:TSTable5 numColumns="${numColumns}" tableClass="tablesorter jRating">
+		<th class="username" title="<fmt:message key='label.sort.by.user.name'/>"> 
+			<fmt:message key="label.user.name" />
+		</th>
+		<th class="rating" id="theader-rating">  
+			<fmt:message key="label.rating" />
+		</th>
+		<c:if test="${criteriaRatings.ratingCriteria.commentsEnabled}">
+			<th class="comment" id="theader-comment"> 
 				<fmt:message key="label.comment" />
 			</th>
-			</c:if>
-		</lams:TSTable5>
+		</c:if>
+	</lams:TSTable5>
 
-		<div id="no-users-info">
-			<fmt:message key="label.no.users" />
-		</div>
+	<div id="no-users-info">
+		<fmt:message key="label.no.users" />
+	</div>
 </div>
\ No newline at end of file