Get Familiar with WCAG 2.1: WCAG 2.1 is like the rulebook for web accessibility. It's split into four parts: Perceivable, Operable, Understandable, and Robust (POUR). For instance, "Perceivable" includes rules like giving all images a text description (alt text) for folks who can't see them. Run an Accessibility Audit: Use tools like Google Lighthouse or WAVE to scan your site. They'll flag up stuff like missing alt text, low color contrast, or form fields without labels. Manual Testing: Automated tools can't catch everything. You'll need up roll to your sleeves and do some manual testing. Try navigating your site using only your keyboard, or using a screen reader like NVDA or VoiceOver. You're checking that all content and functionality is accessible. Write an Accessibility Statement: This is a page on your site where you talk about your commitment to accessibility. You could mention that you're aiming for WCAG 2.1 Level AA compliance, lis
If you're front-end developer than you must be knowing the little struggle of implementing preprocessors like Saas and Less. This technologies helps you in adding second layer on top of your css layer.
You need to wrap variable under var() function. You can do inheritance
Even it allw you to specify multiple levels of fallbacks
Variable can be accessed and value can be changed via javascrpit
Most useful concepts in implementing the second layer are defining reusable global variables that we can reuse again.
Good to know that now, CSS variables are now here and it will allow you to do a few things that you couldn't even do with preprocessors!
In CSS now you can define
:root {
--main-bg: #dddddd;
}
body {
background: var(--main-bg);
}
.container{
background: var(--main-bg);
}
You need to wrap variable under var() function. You can do inheritance
.container {
--type-font: Gotham;
}
.wrapper, .container {
font-family: var(--type-font);
}
Even it allw you to specify multiple levels of fallbacks
.container {
font-family: var(--type-family, Arial);
}
Variable can be accessed and value can be changed via javascrpit
var body = document.querySelector('body')
body.style.setProperty("--main-bg", "#cccccc");
myVar = getComputedStyle(body).getPropertyValue("--main-bg");
console.log(myVar);
Comments
Post a Comment