Semantic HTML explainedArticle contains
  1. What is semantic in HTML?
  2. What is the difference between semantic HTML and traditional HTML?
    1. Traditional HTML
    2. Semantic HTML
  3. Key differences
  4. What is an example of a semantic code?
  5. Benefits of semantic HTML
  6. What is semantic HTML in accessibility?
    1. Meaningful structure for assistive technologies
    2. Improved content understanding
    3. Enhanced keyboard navigation
    4. Compatibility with ARIA attributes
  7. Does semantic HTML improve SEO?
    1. Better content structure
    2. Enhanced crawling and indexing
    3. Rich snippets and featured results
    4. Keyword context
  8. Semantic HTML enhances maintainability and code readability
  9. Web components
  10. Challenges and traps
  11. Considerations and best practices
    1. Structured data (JSON-LD)
    2. Using ARIA and role attributes
  12. Frequently asked questions
    1. Why should I use semantic HTML?
    2. Why should I worry about semantic HTML when I use structured data (JSON-LD)?
  13. Summary
Four tiles and on each of them letters: H, T, M, L. Above sentence: semantic. Image by Miguel Á. Padriñán from Pixabay

Semantic HTML explained

Semantic HTML. The term itself might sound technical and niche, but its impact on the web is anything but. It’s the foundation upon which accessible, maintainable, and search engine-friendly website content is built. Let’s dive into the core principles of semantic HTML, exploring its benefits, common pitfalls, and ultimately, why it’s a crucial skill for any web developer.

Continue reading “Semantic HTML explained”
JavaScript and wait until DOM element existsArticle contains
  1. Introduction
  2. How to wait until a DOM element exists before executing a JavaScript function?
  3. Solution and implementation
  4. Workable example
A keyboard placed on a white surface, accompanied by text that includes "JAVASCRIPT Wait for the DOM element."

JavaScript and wait until DOM element exists

To wait for an HTML element to exist in the DOM using JavaScript, we’ll use requestAnimationFrame to periodically check for the element’s existence, and combine it with Promise to achieve this without blocking the main thread.

This approach is performance-friendly because requestAnimationFrame allows the browser to optimize rendering and ensures that the checks occur at the right time in the rendering cycle.

Continue reading “JavaScript and wait until DOM element exists”
Auditing website using Chrome extensionArticle contains
  1. What are Chrome extensions?
  2. Why auditing website using Chrome extension?
  3. What are the advantages for Chrome extension?
    1. Enhancing productivity
    2. Customizing the browsing experience
    3. Improving communication and collaboration
    4. Enhancing security and privacy
    5. Seamless integration with web applications
    6. Opportunity for audits and recommendations
  4. How can web developers benefit from using Chrome extensions for audits?
    1. Comprehensive auditing tools
    2. Real-time feedback
    3. Streamlined workflow
    4. Enhanced collaboration
    5. Continuous improvement
  5. What are limitations for Chrome extension?
    1. Capabilities and behavior limitations
    2. Key technical limitations of Chrome extensions
    3. Policies and guidelines
  6. Single code, high portability
  7. Conclusion
Abstract circles. Image by Reto Scheiwiller from Pixabay.

Auditing website using Chrome extension

Website performance, SEO, and accessibility are crucial for online success. A comprehensive audit serves as a critical tool for identifying areas of improvement, enhancing user experience, and optimizing search engine performance. But conducting a thorough audit can seem daunting, especially for smaller businesses or individuals with limited budgets. Thankfully, a plethora of free Chrome extensions offer a convenient and accessible way to analyze your website and identify areas for improvement.

This review explores the capabilities and limitations of using such extensions for website auditing.

Continue reading “Auditing website using Chrome extension”
Escape HTML string tags in JavaScriptArticle contains
  1. Why escape HTML?
  2. What happens when HTML is not escaped?
  3. How does escaping HTML prevent XSS attacks?
  4. When to escape HTML?
  5. Best practices for secure HTML escaping
    1. Escape on output, not on input
    2. Use a trusted escaping mechanism
    3. Avoid manual replacement
    4. Test your escaping mechanism
    5. Consider Content Security Policy (CSP)
  6. How to escape an HTML string in JavaScript?
    1. Character replacement
    2. Tagged template literal function
  7. When to use the escapeHtml template literal function
  8. Comparison of the provided code examples
  9. In summary
Implement "Please wait" message while iframe is loading using JavaScriptArticle contains
  1. Easy steps to implement a Please Wait message
  2. The code usage example
  3. Understanding the code
  4. Workable example
  5. Tips for enhancements and important considerations
  6. Conclusion
Monitor, code on it and the open HTML tag iframe.

Implement “Please wait” message while iframe is loading using JavaScript

When embedding content using iframe (inline frame), users may experience delays while the iframe loads, especially if the content is from a slow server or a third-party site. During this period, users may perceive the application as unresponsive. To mitigate this issue, a Please wait message or an animated loading indicator can be displayed, depending on the design requirements.

Let’s explore the method to implement Please wait message for the iframe using TypeScript, a superset of JavaScript.

Continue reading “Implement “Please wait” message while iframe is loading using JavaScript”
Disabling video autoplay in Brave browserArticle contains
  1. Desktop browser
    1. macOS version
    2. Windows version
  2. Mobile browser
    1. Android
    2. iOS
  3. Still not working? Report a bug to Brave.
Accessibility, VPAT, ACR in questions and answersArticle contains
  1. What is a VPAT?
  2. What is an ACR?
  3. Understanding the relationship: Template vs. Completed Report
  4. What is the purpose of the VPAT template?
  5. Key components of a VPAT/ACR
  6. VPAT editions
  7. Is a VPAT/ACR mandatory?
  8. Mobile app accessibility: do you need to complete a VPAT?
  9. Who is responsible for completing the VPAT?
  10. What happens if you don't have an ACR?
  11. Does an ACR guarantee 100% compliance?
  12. What standards and guidelines are used to evaluate accessibility in an ACR?
  13. Who needs to provide an ACR?
  14. How often should you update your ACR?
  15. Why is the VPAT/ACR important?
  16. Can the completed VPAT (ACR) be used for auditing and compliance purposes?
  17. What are the requirements for creating an ACR?
  18. Where can I find ACRs (completed VPATs)?
  19. Steps to create your ACR from the VPAT template
  20. Key Takeaways
  21. Conclusion
  22. Example ACR (Completed VPAT version 2.4)
Magnifying glass with inscription: "Frequently asked questions" and below: "Accessibility, VPAT, ACR". Image by Louis from Pixabay.

Accessibility, VPAT, ACR in questions and answers

The VPAT® is a free template used to create an Accessibility Conformance Report (ACR), which plays a vital role in promoting accessibility in technology. The completed VPAT document is the ACR, providing transparency for consumers and organizations to make informed decisions. This single document helps organizations comply with legal requirements and foster an inclusive environment for all users.

Understanding this relationship is crucial: the VPAT is the standardized template, and the ACR is the final report generated by completing that template with your product’s specific accessibility information.

Continue reading “Accessibility, VPAT, ACR in questions and answers”
Generate SSL certificates for all sites in NginxArticle contains
  1. Creating SSL certificate for your Nginx-managed domain
    1. Install Certbot
    2. List all domains in the Nginx configuration
    3. Obtain the SSL certificate
    4. Reload the Nginx configuration without restarting the entire server
    5. Verification
  2. Automating the renewal process
    1. Check if Certbot auto-renew is enabled
    2. Simulate renewal
    3. Optionally add a hook for Nginx reload
The role of AI in streamlining accessibility and SEO testingArticle contains
  1. Understanding Accessibility and SEO
  2. How AI is transforming accessibility testing
  3. Key benefits of AI in accessibility testing
  4. AI's role in SEO testing
  5. How AI enhances SEO testing
  6. The intersection of accessibility and SEO
  7. Challenges and considerations
  8. Implementing AI for accessibility and SEO testing
  9. The future of AI in accessibility and SEO
    1. Voice search optimisation
    2. Personalized experiences
    3. Predictive analytics
  10. Closing points
  11. Frequently asked questions (FAQ)
    1. How does AI make websites more accessible?
    2. Can AI do SEO optimization?
    3. What are the mutual advantages of accessibility and SEO?
    4. Are there issues to using AI for accessibility and SEO?
  12. Need help?
  13. Author biography
Large, stylized, light-green letters spelling out "SEO" are centrally featured. Three stylized figures, a man and two women, are positioned around the "SEO" letters.

The role of AI in streamlining accessibility and SEO testing

Business success depends heavily on the development of websites which provide convenient navigation alongside search engine compatibility. Accessibility, together with Search Engine Optimization (SEO), stands as the key dimension for reaching this objective. The separate practices of accessibility and Search Engine Optimization (SEO) share many common elements while AI technology reshapes modern business methods for them.

Continue reading “The role of AI in streamlining accessibility and SEO testing”
Resolving "Duplicate without user-selected canonical" issues for multilingual documents with multiple language versionsArticle contains
  1. The problem
  2. The solution
  3. Conclusion
Text "SEO" and below the "Google Search Console" logo. Image by Katarzyna Tyl from Pixabay.

Resolving “Duplicate without user-selected canonical” issues for multilingual documents with multiple language versions

The issue of Duplicate without user-selected canonical arises in the context of search engine optimization (SEO) when multiple pages with similar or identical content are indexed by search engines. This situation is particularly prevalent in multilingual websites, where content may be available in various languages but links to the same underlying document.

That issue happened on our webpage, European Accessibility Act in PDF where all links pointed to the same document, but in a different languages.

Continue reading “Resolving “Duplicate without user-selected canonical” issues for multilingual documents with multiple language versions”