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...
Desktop - Tablet - Phone
Few media queries to make life simpler
h3 {text-align:center;}
/* PRINT VERSION */
@media print {
h3:after {content: ' - PRINT'; display: inline;}
}
/* PHONE VERSION */
@media only screen and (min-width: 320px) {
h3:after {content: ' - PHONE'; display: inline;}
}
/* TABLET VERSION */
@media only screen and (min-width: 768px) {
h3:after {content: ' - TABLET'; display: inline;}
}
/* DESKTOP VERSION */
@media only screen and (min-width: 980px) {
h3:after {content: ' - DESKTOP'; display: inline;}
}
/* GLOBAL STYLES */
h3 {text-align:center;}
/* PRINT VERSION */
@media print {
h3:after {content: ' - PRINT'; display: inline;}
}
/* PHONE LANDSCAPE VERSION */
@media only screen and (min-width: 320px) and (orientation : landscape) {
h3:after {content: ' - PHONE LANDSCAPE'; display: inline;}
}
/* PHONE PORTRAIT VERSION */
@media only screen and (min-width: 320px) and (orientation : portrait) {
h3:after {content: ' - PHONE PORTRAIT'; display: inline;}
}
/* TABLET LANDSCAPE VERSION - not work, are the same as desktop */
@media only screen and (min-width: 768px) and (orientation : landscape) {
h3:after {content: ' - TABLET LANDSCAPE'; display: inline;}
}
/* TABLET PORTRAIT VERSION */
@media only screen and (min-width: 768px) and (orientation : portrait) {
h3:after {content: ' - TABLET PORTRAIT'; display: inline;}
}
/* DESKTOP VERSION */
@media only screen and (min-width: 980px) {
h3:after {content: ' - DESKTOP'; display: inline;}
}
h3:after {content: ' - DESKTOP AND TABLET LANDSCAPE VERSION'; display: inline;}
@media only screen and (min-width: 768px) and (max-width: 959px) {
h3:after {content: ' - TABLET PORTRAIT'; display: inline;}
h3 {color:red;}
}
@media only screen and (max-width: 767px) {
h3:after {content: ' - PHONE LANDSCAPE AND PORTRAIT VERSION'; display: inline;}
}
/* UNCOMMENT ME TO SPECIFY PHONE PORTRAIT VERSION
@media only screen and (max-width: 479px) {
h3:after {content: ' - PHONE PORTAIT VERSION'; display: inline;}
}
*/
Comments
Post a Comment