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

FEW NICE FEATURES OF HTML5


Few nice features of HTML5

HTML5 is providing so many different useful features. without doubt its making web developer life easy. Some of the cool features I've listed below

  • No Need for any XHTML DOCTYPE definition anymore. Your webpage can work without this.
    
    
              
  • Video tag: You can embed video without third-party proprietary plug-ins or codec. Video becomes as easy as embedding an image.
    
              
  • Audio tag: You can also embed Audio without third-party proprietary plug-ins.
    
              
  • Semantic tags: There is no need to remember those messy way of codding for web developers. HTML5 comes with very big list of semantic tags.
  • Local Storage: This nice features allows in HTML5 allow you to save or remember everything you type even after you refresh or close the browser. Works nicely in modern browsers.
    
    
    
    
    
  • Placeholder: This features allows user to place entry within inputs properly the value of the attribute can be set anything initially, but once the user deletes the value and navigates away, it will be left blank.
        
           
           
    
  • Canvas: This features allows web developers to create area to make 2D graphics and many more thing on web page. There is specific codding to write for creating graphics.
    
    
    
    
    
    Your browser does not support the HTML5 canvas tag.
    
    
    
    
    
    
  • Editable Content: This features allows user to edit content in html control itself. You need to add an attribute called contentEditable=”true” to the HTML control.

    Click here to edit this content!

  • Geolocation: The HTML Geolocation API is used to get the geographical position of a user.
    
    
    
    
    

    Click the button to get your coordinates.

  • Drag and Drop: Drag and drop is part of the standard: Any element can be draggable in html5.
    
    
    
    
    
    
    
    
    

    Drag the W3Schools image into the rectangle:


  • Web workers: A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
    
    
    
    
    

    Count numbers:

    Note: Internet Explorer 9 and earlier versions do not support Web Workers.

  • Required Attribute: This features automatically specifies whether the specific input field is required or not.
    
    
    
    
  • Regular Expressions: This features allows us to insert a regular expression directly into component.
           
    
  • Autofocus: This features allows if we wanted to give focus to some component by default.
    
    
  • Email and Range inputs: There are many different useful components introduced in HTML5 like and range and email.
    
      
    

Comments

Popular posts from this blog

Flexbox CSS Cheat Sheet by Learnpine

 

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

Free classic icon libraries for developers

Hello techies,  Here are a few Best free icon libraries Material UI Icons Great set of icons available free to download in SVG and PNG format. Feather Icons Big list of icons with option to change size and color Zondi Icons A few list of standard icons available free to download Hero Icons Variety of icons free to copy as SVG format and can be used within JSX Hero Pattern Good number of SVG patterns available free to download and use for your application. The Noun Project One of the best place to download creative icons but, needs to give credits to creators. .