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

Popular posts from this blog

Flexbox CSS Cheat Sheet by Learnpine

 
Post a Comment
Read more

Debug Angular app in VS code editor

Simplest way to debug your Angular app by adding debugger for chrome extension in your MS Visular Studio. Add below configuration. You can add configuration by visiting debug panel. It will create .vscode directory for you and it will add default configuration for you. You can add/ modify configuration based on your requirement. For local development debugging you can use below configuration by enabling chrome debugging. launch.json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:4200", "webRoot...
Post a Comment
Read more

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
Read more