Popular posts

So the role is BS, but what about the aria-label? According to MDN:

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen.

With the following example:

<button aria-label="Close" onclick="myDialog.close()">X</button>

Which looks a lot like an icon-button to me...

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;
    /*
        FF goes full Pakled if border isn't zero on a button
        when it comes to absolute positioning a child...
    */
    border:0;
    border-radius:0.75em;
    box-shadow:0 0 0.15em 0.1em #000;
}

.closeModal:before {
    content:"\1F5D9";
    position:absolute;
    top:-0.05em; /* adjust for oddball font-face alignment */
    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.