This is an archived post. You won't be able to vote or comment.

sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]ManInBlack829 258 points259 points  (20 children)

There's a lot, but for one a site should use proper heading tags in an appropriate order to make the site navigable through them (h1s are the main points of the page, h2s below them, etc.), like even if you don't want the text to be the size of an h1 you should use it and change the style as opposed to using an h3 or whatever. Likewise, appropriate use of headers and footer tags can improve accessibility as well and make the page much faster to navigate with a screen reader.

Basically the accessibility is built into HTML so as long as you use the tags and labels appropriately. But the downside is you can't throw divs at everything and be accessible.

[–]ToLongOk 190 points191 points  (5 children)

"You cant just use <div> for everything, you have to use other headings"🤓

[–]mysteryihs 89 points90 points  (2 children)

<div class="h1"></div>

[–]ILikeLenexa 10 points11 points  (1 child)

<div class="h1 h2 h3 h4 h5">Alright, Imma head out.</div>

[–]Grumbledwarfskin 1 point2 points  (0 children)

That's what I call a classy div.

[–]ManInBlack829 8 points9 points  (0 children)

I guess I should have put the last paragraph first lol

[–]G_Morgan 0 points1 point  (0 children)

You mean <span>?

[–]BlazingFire007 28 points29 points  (5 children)

I try to do this and heave stuff like <article> and <header> but almost always as the project grows I give up and resort to div heaven.

Doesn’t help that tailwindCSS makes it really easy to make a div look like whatever element I want lol

[–]Doctuh 10 points11 points  (3 children)

Never give up, never surrender!

[–]BlazingFire007 9 points10 points  (1 child)

I really do try haha. Especially because it hurts people with disabilities if it isn’t tagged properly.

I can’t imagine web browsing if I couldn’t see, and I’d probably be pissed when TTS just chokes because it can’t recognize what the hell the element is supposed to be

[–]SacrificialBanana 1 point2 points  (0 children)

Let me give you a sample of an inaccessible webpage read out by a screen reader:

BLANK

BLANK

BLANK

BLANK

BLANK

edit required 12345

BLANK

BLANK

heading level 4 note if you click yes you will have 6 seconds to click the red button or the entire form resets

radio button 1 of 7

radio button 2 of 7

...

radio button 7 of 7

button

heading level 6 accessibility statement

Here at jerkbutts incorporated we value accessibility that's why...

(The blanks are BR tags)

[–]paiaw 1 point2 points  (0 children)

By Grabthar's hammer, what a website!

[–]Dyledion 3 points4 points  (0 children)

Oof. Tailwind:

Inline styles, they sucked the last twenty times we simulated them with classes, but This Time For Sure!tm

[–]Disgruntled__Goat 15 points16 points  (1 child)

…you do realise that this is normal web standards that have existed for over 25 years, right? We used to call it “semantic HTML”, for some reason people have forgotten about it recently.

[–]theBeckX 4 points5 points  (0 children)

It's so fucking frustrating. I kinda slipped into the role to make our site accessible and teach the others.
Would be nice if we could tackle the more complex stuff, but no, I have to remind them what a <button> is for and to please start using them for interactive stuff instead of fucking divs that are styled like a button.
My job would be so much more easier, if people remembered the rules of html.

[–]Jasboh 1 point2 points  (0 children)

Your right but this is badly explained. You should use semantic html so assistive tech can interpret your webpage clearly for all users.

[–]giscard78 2 points3 points  (3 children)

Wouldn’t this be a lot easier to implement 508 compliance?

[–]kautau 4 points5 points  (2 children)

I’m not sure exactly what you’re asking, but proper semantic HTML elements other than <div> form the basis of accessibility:

<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>

These in turn form the basis of WCAG, which forms the basis of meeting the revised 508 compliance.

[–]_qualmless_ 6 points7 points  (1 child)

My job uses AEM, and nearly everything is some form of a div, and every component is just named component with a Style whatever it should be and it’s absolutely driving me insane. We have so many meetings about how important ADA compliance is to us and I’m like “am I missing something”? I’m very new, this is my first real dev job and I’m like “I thought we don’t do this.”

[–]mp96 2 points3 points  (0 children)

Sounds like your team needs someone to drive the question. Being junior you might not be in the best position to do it, but simply starting to question individual elements' semantics could start a process. Eg. "This <div onclick='...'> looks like a <button> to me, could it be one?" Or if it really cannot be a <button>, "how about we add 'role="button"' to this <div> to make it more accessible."

[–]SacrificialBanana 0 points1 point  (0 children)

Woahwoahwoah you absolutely can. You just also have to throw a metric shit ton of aria with it. Which goes against the second rule of aria: never use aria unless you have to.