loading...

HTML and CSS mistakes which I get to meet as person without disabilities

melnik909 profile image Stas Melnikov ・2 min read

A lot people think that accessibility problems relevant to people with disabilities. But it isn't, so I'd like to write about mistakes which I get to meet as person without disabilities.

The background-color property for the background images or video

I wanted to see some website while I was driving the subway to home. The website was loading and I was looking at the white screen. The background image loaded and I saw the company slogan that was white color. I should to have the ability to read white text on white background by developers' opinion.

Don't do it

.hero {
  background-image: url("example.jpg");
}

You can use it instead

.hero {
  background-image: url("example.jpg");
  background-color: #919191;
}

The email and tel types for the input element

I can't use the special keyboard on my smartphone when I fill in fields for email address and phone number. It happens because developers use the "text" type instead the "email" and "tel" types.

Don't do it

<input type="text" placeholder="Your email">
<input type="text" placeholder="Your phone number">

You can use it instead

<input type="email" placeholder="Your email">
<input type="tel" placeholder="Your phone number">

The outline: none

I can't use a website using my keyboard. I can't going to a link. I can't register. That happens because developers disable focus on elements when they add the none value for the outline property.

Don't do it

.button:focus {
  outline: none;
}

The div element for buttons

My mouse is broken one day and I tried to buy a new one using some website. I thought to use my keyboard for it but I haven't been able. I couldn't press the pay button using the Enter key. This button was marked by the div element.

Don't do it

<div role="button">Add item to bag</div>

You can use it instead

<button>Add item to bag</button>

Don't use the label element

I registered on some website and I needed to accept private policy on the last step. I clicked on the "Yes, I accept" text and the checkbox didn't change. I clicked again. The result was the same. Just developers didn't add the label element.

Don't do it

<div class="form-group">
 <input type="checkbox">
 <span>Yes, I accept</span>
</div>

You can use it instead

<label class="form-group">
 <input type="checkbox">
 <span>Yes, I accept</span>
</label>

The px units for the text font size

I worked with the project manager who have vision problems. Therefore she use the large font size mode in Google Chrome browser. She said me that she don't like to use websites on laptop because some of them have too small text font size. She showed an example and I saw that developers used the px units for the font-size property. So the text couldn't scale.

Don't do it

.hero {
  font-size: 16px;
}

You can use it instead

.hero {
  font-size: 1rem;
}

Posted on by:

melnik909 profile

Stas Melnikov

@melnik909

I help people to learn new things about HTML and CSS on Patreon platform 👉 https://www.patreon.com/posts/34774556

Discussion

markdown guide
 

I love this!!! In my opinion these design ideas shouldn't even be labeled as "accessibility" changes. They should be universal. Clean, quick tips. Awesome.

 

I really appreciate that you put these in a context, with real world examples of how changes could make your life better, even without disabilities!

I think the font-size being pixels shouldn't be an issue (any longer, in modern browsers), but maybe I'm missing some context or other information here?

 

Change your font size mode in browser. For example in Google Chrome, Settings -> Font Size -> Large. Or look at this post instagram.com/p/Bzx_-hQIFrf/

The medium mode of font size is ok for most people. Not for everyone. So I recommend use the em units so that you can help greater number of people

 

there's issue with chromium based android browsers that text won't scale down no matter what you set in system settings
it will get bigger if you wish so but won't get smaller, that's just the dumbest way of promoting phablets that are required to fit all these huge letters on screen

 

One thing that a lot of people also miss is "Cognitive Overload"; Basically adding a bunch of options on a page or too different controllers causes users to incorrectly use a system or have issues while using it; Basically keep it simple, don't reinvent the wheel and use common patterns already established by web development for a long time.

 

I'll take the font-size point to heart, thanks for sharing! 😁

 

in simple words: just don't break it