This content originally appeared on DEV Community and was authored by Stas Melnikov
In last year I collected some cases when HTML and CSS mistakes make accessibility of interfaces worse. In this article I'd like to share more cases.
How the justify-content and align-items make users suffer
When we solve issues of alignment we like to use alignment properties such as justify-content or align-items. But few people know these properties can lead to losing data, particularly frequent, when vertical alignment.
This is due to how these properties work. This process includes the two terms. The first, the alignment container is an element to that you declare the alignment properties.
The second, the alignment subject is elements that are inside of the alignment container. The alignment properties affect them.
So there is the case when the alignment subjects' sizes are larger than the alignment container's sizes. In the default alignment mode, it'll lead to overflow and loss of data. So users will see the cropped element.
I created the example with the modal element to show this behavior. At first, the text is short. But when we make it more we lose the heading and the close button.
We can fix it using auto margins because it uses extra space to align elements and doesn't lead to overflow. Take a look at how elements are no longer lost.
don't do this
<div class="modal">
<div class="modal__main"></div>
</div>
.modal {
display: flex;
justify-content: center;
align-items: center;
}
You can use this instead
<div class="modal">
<div class="modal__main"></div>
</div>
.modal {
display: flex;
}
.modal__main {
margin: auto;
}
You make text unavailable
Nowadays we often use custom fonts so that our interface looks more unique. Custom fonts aren't in our systems so we have to load them but it takes some time and the issue is what to display at this time.
By default, a browser waits while a font is loaded so he displays nothing. But we can change it that a browser uses the fallback for displaying text.
There is the font-display descriptor that determines how a font face is displayed based on whether and when it is downloaded and ready to use.
We can use the swap value that instructs the browser to use the fallback to display the text until the custom font is fully downloaded.
This trick helps an user start to interact with an interface faster and to reach its goals.
don't do this
@font-face {
font-family: "Baloo Tamma";
src: url("balotamma.woff2") format("woff2"),
url("balotamma.woff") format("woff");
}
You can use this instead
@font-face {
font-family: "Baloo Tamma";
src: url("balotamma.woff2") format("woff2"),
url("balotamma.woff") format("woff");
font-display: swap;
}
Your SVG icons break your interfaces
When you use SVG icons right in a HTML document, pay attention you have to set the width and height attributes. If you don't do it and you rely on you set the width and height properties in CSS your interface will be broken.
Your CSS might not be loaded and at this point, the icons will try to fill all of the available space. So the mistake happens. Just set the width and height attributes and can sleep easy. Your interfaces will be bulletproof!
don't do this
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path fill="currentColor" d="..."></path>
</svg>
svg {
width: 0.875rem;
height: 1rem;
}
You can use this instead
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
width="0.875rem"
height="1rem">
<path fill="currentColor" d="..."></path>
</svg>
You don't need to use heavy images for any type of devices
Our users face too heavy images when they take a look at websites. If they have high-speed internet isn't an important problem but often users remained where there are problems with the internet. It's might be the subway, nature, or another country. I think we have to help users use our apps.
The good idea is to help a browser doesn't load heavy images with cell phones or other mobile devices. And I want to share the solution that'll do it.
This solution is known as the picture element that allows defining the set of images' source paths so that a browser can load the most appropriate image for devices.
For example, we can create 2 source elements and define the width media feature to detect pads and desktops. Also, we will use the img element for cell phones. Then browsers will choose the image that best suits users.
Pay attention, I use the mobile-first approach so if the picture isn't supported by browsers or the user came using a cell phone the small image will be shown.
don't do this
<img
src="ferrari-1920x1080.jpg"
alt="yellow ferrari F8 spider on the background of the ocean">
You can use this instead
<picture>
<source
srcset="ferrari-1200x960.jpg"
media="(min-width: 641px) and (max-width: 1200px)">
<source
srcset="ferrari-1920x1080.jpg"
media="(min-width: 1201px)">
<img
src="ferrari-640x480.jpg"
alt="yellow ferrari F8 spider on the background of the ocean">
</picture>
Also, you can use the display density descriptor and the scrset attribute to suggest which image is better for a specific device taking into account pixel density.
For example, if a cell phone has 2x pixel density or more a browser loads the ferrari-640x480-2x.jpg image using the 2x descriptor. But if it has 1x pixel density the ferrari-640x480-1x image will be loaded. Also this rule will work for pads and desktop devices.
don't do this
<img
src="ferrari-1920x1080.jpg"
alt="yellow ferrari F8 spider on the background of the ocean">
You can use this instead
<img
src="ferrari-1x.jpg"
srcset="ferrari-2x.jpg 2x"
alt="yellow ferrari F8 spider on the background of the ocean">
<!-- or -->
<picture>
<source
srcset="ferrari-1200x960-1x.jpg,
ferrari-1200x960-2x.jpg 2x"
media="(min-width: 641px) and (max-width: 1200px)">
<source
srcset="ferrari-1920x1080-1x.jpg,
ferrari-1920x1080-2x.jpg 2x"
media="(min-width: 1201px)">
<img
src="ferrari-640x480-1x.jpg,
ferrari-640x480-2x.jpg 2x"
alt="yellow ferrari F8 spider on the background of the ocean">
</picture>
P.S. If you like these tips go to read others on my Linkedin.
This content originally appeared on DEV Community and was authored by Stas Melnikov
Stas Melnikov | Sciencx (2021-05-20T17:29:44+00:00) HTML and CSS mistakes which I get to meet as person without disabilities. Part 2. Retrieved from https://www.scien.cx/2021/05/20/html-and-css-mistakes-which-i-get-to-meet-as-person-without-disabilities-part-2-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.