Skip to main content

Navigating WCAG 2.1: A Step-by-Step Approach for Developers

 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...
Post a Comment

Media Queries Cheat Sheet

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