Marco Alka In other words the text content's huffing job, mixed with generated content since the X is presentational for screen media ONLY and therefor has no business even IN the markup.
... and of course developer ineptitude with that stupid malfing outdated outmoded for the love of Christmans stop F*ing using that we've been told for over a decade to stop huffing using that "onevent" attribute.
Just saying. Of course most of my modal closes don't even need JavaScript, but that's neither here nor there... and of course if it's scripting only it has no business IN the damned markup...
But yeah... ZERO point to that.
<button class="closeModal">Close</button>
With the STYLE (since that 'x' is presentation)
.closeModal {
display:inline-block;
position:relative;
font:normal 100%/150% arial,helvetica,sans-serif;
text-indent:-999em;
width:1.5em;
height:1.5em;
background:#F00;
color:#FFF;
border:0;
border-radius:0.75em;
box-shadow:0 0 0.15em 0.1em #000;
}
.closeModal:before {
content:"\1F5D9";
position:absolute;
top:-0.05em;
left:0;
width:1.5em;
text-indent:0;
text-align:center;
}
Most of that 'excess' code in the CSS being stuff you'd probably want to do to an "x" close button anyways. You know, make it pretty! I literally just lifted that off a page I was working on last week.
Of course, using the ACTUAL CANCELLATION UTF-8 CHARACTER can help with meaning as well. :p
At MOST I'd consider replicating the content in a title attribute... or just use TITLE instead of the aria-label nonsense SINCE THAT'S WHAT IT'S FOR!!!
Though again if the modal is scripting only, none of this has any business in the HTML. IF the modal is written accessibly using anchors, hashlinks, and the CSS :target attribute.. well, none of this applies.
Since scripting only modals are useless trash to people on screen readers and braille readers anyways, at which point that's a REALLY bad example.
But bottom line, WHEN POSSIBLE if you care about accessibility you should try to strive for ACTUAL text content wherever possible. Yes, even for your site logo. If you use IMG for a site logo, you're probably doing it wrong! Even for your icons, if you use IMG or SVG in the markup for such PRESENTATIONAL elements, you're probably doing it wrong!
Particularly the BS I've seen with SVG of late, inlining massive vector images in the markup on every pageload where there is ZERO opportunity for them to be cached? That's almost -- no, correction, that's JUST as mentally enfeebled as the dipshit advice people are handing out of late of moving style out of the stylesheet and into the STYLE tag. Serious herpafreakingderp. And I don't huffing care if it's Google PageSpeed handing out said advice, it's still ignorant incompetent nonsense that I've seen screw way too many sites!
But then it REALLY feels like nobody ever embraced proper semantics, logical document structure, or the INTENT of HTML 4 Strict... much less separation of presentation from content or grasping even the SIMPLEST parts of how caching models work, much less concepts like pre-caching subpage appearance via a monolithic stylesheet per media target.
Use the text, but hide it with text-align:-999em; so that screen readers / braille readers / search engines don't ignore it. Display:none and visibility:hidden are obeyed by those UA's even though they shouldn't be if like a good little doobie you've set at LEAST media="screen" on your stylesheet <link>, but because some dirtbag "black hat" SEO scam artists fifteen or so years ago abused those for "content cloaking" to try and game search results, they are obeyed now by both even when it's not the correct media type. (grr...)
A label doesn't even make sense, input is not a user changeable value, if anything that would confuse things.
The title attribute could work, but actual text is just better.
... and honestly, aria roles are an idiotic dumbass POORLY SUPPORTED IF IMPLEMENTED AT ALL bandwidth wasting train wreck that seems to have been created for just two reasons:
1) To try and make up for most developers being too ignorant or misinformed to use semantic markup properly. Honestly, throwing more code at the markup isn't the answer. Mind you I hold the same opinion of most of the new tags in HTML 5, YMMV
2) to give the nutjobs who used to cream their panties over "microformats" their own little corner to spank it in.
The moment you see
<form action="#" method="post" role="form">or
<a href="#" role="button">You'll know exactly what I mean by pointless idiotic halfwitted ignorant dumbass bandwidth wasting redundancies. JUST like how HTML 5's SECTION, ARTICLE, ASIDE, NAV, HEADER, and MAIN are redundant to just using H1..H6, HR, CAPTION, and LEGEND properly!