diff --git a/dist/leaflet.css b/dist/leaflet.css
index 06945ec4c..5630816cf 100644
--- a/dist/leaflet.css
+++ b/dist/leaflet.css
@@ -526,13 +526,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	width: 18px;
 	height: 14px;
 	font: 16px/14px Tahoma, Verdana, sans-serif;
-	color: #c3c3c3;
+	color: #757575;
 	text-decoration: none;
-	font-weight: bold;
 	background: transparent;
 	}
 .leaflet-container a.leaflet-popup-close-button:hover {
-	color: #999;
+	color: #585858;
 	}
 .leaflet-popup-scrolled {
 	overflow: auto;
diff --git a/src/layer/Popup.js b/src/layer/Popup.js
index e7a1cce9f..aa8d9057d 100644
--- a/src/layer/Popup.js
+++ b/src/layer/Popup.js
@@ -190,8 +190,10 @@ export var Popup = DivOverlay.extend({
 
 		if (this.options.closeButton) {
 			var closeButton = this._closeButton = DomUtil.create('a', prefix + '-close-button', container);
+			closeButton.setAttribute('role', 'button'); // overrides the implicit role=link of <a> elements #7399
+			closeButton.setAttribute('aria-label', 'Close popup');
 			closeButton.href = '#close';
-			closeButton.innerHTML = '&#215;';
+			closeButton.innerHTML = '<span aria-hidden="true">&#215;</span>';
 
 			DomEvent.on(closeButton, 'click', this._close, this);
 		}