Best practices for optimizing SVG codeArticle contains
  1. Minify the code
  2. Compress the SVG files
    1. Enabling serving SVGZ files in Apache
    2. Enabling serving SVGZ files in Nginx
    3. Enabling serving SVGZ files in IIS
    4. Example page with SVG and SVGz
  3. Inkscape allows you to create optimized SVGs directly
    1. A step-by-step guide on how to save optimized SVG in Inkscape
    2. Additional options for optimization
  4. Command-line tool
Check if a string is valid HTML using JavaScriptArticle contains
  1. Essential requirements
  2. How does the DOMParser interface parse HTML strings differently based on the mimeType argument?
  3. Practical example
  4. Code
  5. Example of validation error
  6. What a MIME type is and why it's used in the isStringValidHtml function?
  7. How does the DOMParser API handle invalid HTML syntax?
Designing for dyslexic usersArticle contains
  1. What actually is dyslexia?
  2. Designing for dyslexia as a key to inclusivity and accessibility
  3. Choose clear fonts and typography
  4. Format text for ease of reading
  5. Use high contrast colors
  6. Incorporate multimedia for visual aids
  7. Use simple language and writing style
  8. Design intuitive navigation and layout
  9. Using images and diagrams to support text
  10. Summary of design considerations for dyslexic users
  11. Additional resources related to designing for dyslexic users
A person on the background of a puzzle

Designing for dyslexic users

Did you know that optimizing your digital content for dyslexic users may not only boost your website’s accessibility but also increase your customer base? With an estimated one out of ten people having dyslexia, that’s roughly 780 million people worldwide (1 out of 10 people have dyslexia) who could benefit from dyslexia-friendly design.

Dyslexia is a specific learning disability characterized by difficulties with accurate and/or fluent word recognition and poor spelling and decoding abilities. To ensure that your content is inclusive and accessible, consider implementing certain design considerations.

Continue reading “Designing for dyslexic users”
How do you measure the success of the website project?Article contains
  1. Key points of measuring the success of the website project
  2. What metrics and analytics do you use to track and report the website's performance and impact?
  3. Can data-driven decisions really optimize my website's user experience, content, and marketing strategies?
Font Italics: Improving Accessibility with Best PracticesArticle contains
  1. Are italic fonts always inaccessible?
  2. The impact of italic fonts on web accessibility
  3. Comparing three font families for readability: OpenDyslexic 3, Arial, and Tahoma
  4. Best practices for using italic fonts in web accessibility
  5. A summary of italic fonts and web accessibility
Hiding a text but making it accessible to a screen readerArticle contains
  1. Making hidden text accessible to screen readers: a guide
    1. Notes
  2. Difference between CSS class .visually-hidden and .sr-only
  3. Accessibility and Hidden Text: Can Screen Readers Detect It?
  4. How visibility: hidden affects screen readers
  5. Is there a way to test whether the hidden text is actually being read by screen readers after applying the .visually-hidden class?
  6. Why hide text from sighted users?
Female eye-looking, peeking through a triangle blue background

Hiding a text but making it accessible to a screen reader

Accessible hiding allows an element to be visually hidden while remaining accessible to assistive technologies such as screen readers. The approach is to apply a CSS class to the element that should not be shown.

There are several solutions for this type of CSS class, but we recommend following styles that cover hiding elements and optionally giving the ability to show the element when the element receives the focus or contains an element that has received focus. Useful for Skip to the main content links. See Adding a link at the top of each page that goes directly to the main content area.

Continue reading “Hiding a text but making it accessible to a screen reader”
The key to agile accessibility: Effective measurement of what mattersArticle contains
  1. Why should you track the performance of your agile accessibility efforts?
  2. What should you track to see if your agile approach to accessibility is effective?
  3. What are some common myths about accessibility in agile development?
Software testing. Two persons with multiple devices.

The key to agile accessibility: Effective measurement of what matters

Agile accessibility is the incorporation of accessibility principles and practices into the agile software development methodology.

Ensuring accessibility is an a constant and iterative process throughout the development cycle meaning making sure that software and web applications are designed and developed with accessibility in mind from the very beginning.

Tracking accessibility KPIs is a critical step in ensuring that your digital products are accessible to all users.

Continue reading “The key to agile accessibility: Effective measurement of what matters”
Sass with RTL and LTR support: creating multilingual websitesArticle contains
  1. Understanding Sass with RTL and LTR Support
  2. Key definitions and explanations
  3. A screenshot of a page with right-to-left content
  4. How to implement RTL and LTR support in Sass
  5. Changing the locale in Chromium-based browsers
  6. Tips and tricks for managing bi-directional text
    1. Time
    2. Parentheses
  7. Additional resources for managing bi-directional text
Arabic text example

Sass with RTL and LTR support: creating multilingual websites

Sass with RTL and LTR support isn’t available out of the box, but it can be done through simple Sass @mixin and @include rules that can be used across all Sass files.

RTL stands for Right-to-Left. It is a writing direction used in languages such as Arabic, Hebrew, and Persian. Supporting both right-to-left (RTL), more often bi-directional (BiDi), and left-to-right (LTR) representations of Web pages can be a challange.

Note that you can also achieve the same with Less (which stands for Leaner Style Sheets).

Continue reading “Sass with RTL and LTR support: creating multilingual websites”
Fixing layout shifting brought on by custom fontsArticle contains
  1. How custom fonts affect layout shifting and what to do about it
  2. What the page look like before and after rendering custom web fonts?
  3. Strategies for minimizing layout shifts with custom fonts
  4. Enhancing font loading and rendering for better user experience and SEO
  5. Additional considerations for optimizing font performance and user experience
  6. What fonts do not produce layout shifts?
Letter with sample fonts

Fixing layout shifting brought on by custom fonts

Custom fonts impact performance through delayed text rendering and layout shifts. This is because they have to be downloaded and the layout must be repainted again. When a visible element on your website changes size or location, it might have an impact on the position of the content surrounding it. This is known as a layout shift.

Note that if a web font has not loaded, browsers typically delay text rendering.

Continue reading “Fixing layout shifting brought on by custom fonts”
Reporting bug practicesArticle contains
  1. How do we define a bug?
  2. Submitting bugs
  3. When reporting a bug, what information should be included
  4. Choose a non-generic subject describing what and where is failing
  5. Use plain English, don't use words that only a few might understand
  6. Avoid acronyms
  7. Is the problem observed persistent or temporary?
  8. Actual behaviour
  9. Steps to reproduce
  10. Expected behaviour
  11. When possible, include logs, screenshots, video recordings, the app version, and any other supporting information
  12. Discussing root cause
  13. Geek and Poke fun