DEV Community

Cover image for 🤓🔥How To Make Websites Accessible To All 💯

🤓🔥How To Make Websites Accessible To All 💯

Ankit on June 04, 2020

Hey, I'm Ankit a lover of "Accessible & Fast Web". Have you ever thought that how blessed we are to be normal ? If not, then you better start. ...
Collapse
 
thinkverse profile image
Kim Hallberg • • Edited

"tag is to bold the text and also mark this as important part of the text whereas tag is just a visual element to show text in bold format." - maybe want to specify which tag does what? I just saw @iannismccluskey commented about it, but I'll share my thoughts about it too.

I would also recommend reading the book Accessibility for Everyone by Laura Kalbag, I'm currently reading it myself and it's good.

Collapse
 
growthfyi profile image
Ankit •

Sorry there was an error (technical error) where it wasn't detecting html tags I wrote in markdown. Would you mind rechecking the section again?

Collapse
 
thinkverse profile image
Kim Hallberg •

Now it displays the tags. 🙂

Thread Thread
 
growthfyi profile image
Ankit •

Do you like and understand it now?

Thread Thread
 
thinkverse profile image
Kim Hallberg •

Yes, the <strong> tag and <b> tag both visually changes the text to bold but only <strong> mark it as important to screen readers if I read that correctly.

Hint, you can use single backticks (`) to indicate code in a paragraph.

Thread Thread
 
growthfyi profile image
Ankit •

Ah thanks for the suggestion didn't knew I could use (`) to mark code I used &lt; and &gt; instead and it gets the work done.

Collapse
 
galdin profile image
Galdin Raphael •

Hey, "Proper Labelling of Elements" is missing the aria-label attribute.... I think you intended to include it?

Collapse
 
growthfyi profile image
Ankit • • Edited

Oopsie, thanks. Will fix it asap.

Collapse
 
iannismccluskey profile image
iannismccluskey • • Edited

Nice article. But you may want to rewrite the "Knowing Use Of Tags" section. I read it three times and still don't really understand what you meant.

Collapse
 
growthfyi profile image
Ankit •

Yeah, I got that. I'm trying to find a way. Any suggestions?

Collapse
 
iannismccluskey profile image
iannismccluskey •

Is it due to HTML tags that were interpreted instead of being displayed ?

Thread Thread
 
growthfyi profile image
Ankit • • Edited

Actually what I wanted to say is "Web Developers" don't know the difference between similar tags.

For example, strong tag and b tag both visually do the same thing but are semantically different.

Strong tag is to bold a text which needs to be emphasized or is important.
B tag is just a visual element for bold text.

Also I have updated the part and changed title to "Semantic Use Of Tags", how does it look? updated the content too.

Updated: Just understood what you wished to say, updated now with proper tags being shown.

Collapse
 
melvin2016 profile image
MELVIN GEORGE •

Good content.

Collapse
 
growthfyi profile image
Ankit •

Thanks, this is my first article here and glad to have such review. I'll try to add few more points too.