DEV Community: Cezary Tomczyk

European Accessibility Act

Cezary Tomczyk — Fri, 14 Feb 2025 14:38:45 +0000

The European Accessibility Act (EAA) is a legislation that aims to improve the accessibility of products and services in the European Union. Here are some key points:

*The EAA requires that certain products and services, such as websites, mobile applications, and electronic documents, comply with the Web Content Accessibility Guidelines (WCAG) 2.1.

The Act applies to EU member states and will be implemented in 2025.
The EAA covers a wide range of products and services, including:
- Websites and mobile applications
- Electronic documents, such as PDFs and e-books
- Self-service terminals, such as ATMs and ticket machines
- Computers and operating systems
The Act requires that these products and services be accessible to people with disabilities, including those with visual, auditory, motor, or cognitive disabilities.
The EAA also requires that accessibility information be provided to users, such as accessibility statements and contact information for accessibility support.
The Act will be enforced through a combination of national laws and EU regulations, and non-compliance can result in fines and other penalties.

In terms of WCAG compliance, the EAA requires that products and services meet the following success criteria:

Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
Operable: User interface components and navigation must be operable.
Understandable: Information and the operation of the user interface must be understandable.
Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.

Overall, the European Accessibility Act is an important step towards improving accessibility in the EU, and organizations should start preparing now to ensure compliance with the Act's requirements.

Read in details in the article "European Accessibility Act in questions and answers".

Typographic improvements tip (CSS)

Cezary Tomczyk — Sun, 07 Jan 2024 19:13:57 +0000

Use CSS property text-wrap: balance;

Text is wrapped in such a way that the quantity of characters on each line is optimally balanced, improving layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (six for Chromium and ten for Firefox).

https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

Are there any challenges or drawbacks to implementing Agile Accessibility in a project?

Cezary Tomczyk — Sun, 31 Dec 2023 11:54:26 +0000

Implementing Agile Accessibility in a project does come with certain challenges and potential drawbacks:

Lack of Clear Processes: Agile methodologies often encourage teams to operate with a lot of autonomy and flexibility. However, this can sometimes lead to teams getting sidetracked, particularly if there aren't enough processes in place to guide them. Without a clear vision or sufficient documentation, teams may struggle to stay focused on the project's goals, leading to scope creep and potential delays.
Difficulty Maintaining Collaboration: Agile methodologies emphasize continuous collaboration among team members. However, this can be challenging to maintain, especially in larger teams or across geographically dispersed teams. It requires additional time, commitment, and coordination to ensure that everyone is aligned and working towards the same objectives.
Challenges in Measuring Progress: With Agile methodologies, there isn't a fixed end date or final product specification, which makes it hard to measure progress. This can make it difficult for stakeholders to understand what's being achieved and whether the project is on track.

To mitigate these challenges, it's important to establish clear processes and guidelines, foster strong collaboration, and set up systems for regularly assessing and communicating progress. Tools like project management software and visual representation of workflows can be useful in facilitating these efforts.

Two WordPress plugins to improve the server performance object caching

Cezary Tomczyk — Tue, 19 Dec 2023 12:16:07 +0000

Object Cache 4 everyone

Improve your server performance using Memcached for object caching or improve your server performance using disk support for object caching.

https://wordpress.org/plugins/object-cache-4-everyone/

Query Monitor

Query Monitor is the developer tools panel for WordPress. It enables debugging of database queries, PHP errors, hooks and actions, block editor blocks, enqueued scripts and stylesheets, HTTP API calls, and more.

It includes some advanced features such as debugging of Ajax calls, REST API calls, user capability checks, and full support for block themes and full site editing. It includes the ability to narrow down much of its output by plugin or theme, allowing you to quickly determine poorly performing plugins, themes, or functions.

Query Monitor focuses heavily on presenting its information in a useful manner, for example by showing aggregate database queries grouped by the plugins, themes, or functions that are responsible for them. It adds an admin toolbar menu showing an overview of the current page, with complete debugging information shown in panels once you select a menu item.

Results

How to check what supported mime-type is by media audio or video in your browser

Cezary Tomczyk — Wed, 13 Dec 2023 17:22:51 +0000

Supported mime-type by media audio or video is super defragmented. To find out what your browser supports use following link (I've created that page):

https://www.sitelint.com/lab/audio-video-supported-media-type/

Top 10 bad practices in frontend development

Cezary Tomczyk — Sun, 12 Nov 2023 21:04:49 +0000

Here are the top 10 bad practices in frontend development:

Not using version control: Version control is essential for managing code changes and collaborating with other developers. Not using version control can lead to code conflicts and make it difficult to track changes over time.
Not optimizing images: Large images can slow down page load times, which can negatively impact the user experience. It's important to optimize images by compressing them and reducing their file size. A good practice is to serve responsive images.
Not testing on multiple devices and browsers: Websites should be tested on multiple devices and browsers to ensure that they work correctly for all users. Not testing on multiple devices and browsers can lead to compatibility issues.
Not following accessibility guidelines: Websites should be designed with accessibility in mind to ensure that they are usable by people with disabilities. Not following accessibility guidelines can lead to legal issues and prevent some users from accessing your content. Best is to audit website on the client side to get results based on a real user.
Not using semantic HTML: Semantic HTML helps search engines understand the content of your website and improves accessibility for users with screen readers. Not using semantic HTML can make it difficult for search engines to understand your site, as the code itself may not precisely describe the purpose of the content.
Not optimizing CSS and JavaScript: Large CSS and JavaScript files can slow down page load times, which can negatively impact user experience. It's important to optimize CSS and JavaScript by minifying them and reducing their file size.
Not using a CSS preprocessor: CSS preprocessors like Sass and Less can help you write more efficient and maintainable CSS code. Not using a CSS preprocessor can make it difficult to manage large CSS files and make the code less scalable.
Not using a task runner or build tool: Task runners like Gulp, Rollup or Webpack can automate repetitive tasks like minifying CSS, JavaScript files and many other tasks that can be automated to keep software development process consistent.
Not following coding standards: Following coding standards makes it easier for other developers to read and understand your code. Not following coding standards leads to inconsistency in software development pipeline and can make it difficult for other developers to work with your code.
Redundant comments: Comments that explain situations that can't be explained by the code itself are useful. However, commenting on each line of the code or requesting actions in the comments may misguide code readers, as the comments may easily be outdated.

Thoughts on that are very welcome.

Understanding page experience in Google Search results

Cezary Tomczyk — Fri, 10 Nov 2023 22:01:44 +0000

Google's core ranking systems look to reward content that provides a good page experience. Site owners who want to succeed with Google systems should not concentrate on only one or two aspects of the page experience. Instead, consider whether you're giving a consistently excellent website experience in all areas.

Self-assess your content's page experience

Answering yes to the questions below means you're highly likely on track in providing a good page experience:

Do pages have good Core Web Vitals?
Are pages served in a secure fashion?
Does content display well for mobile devices when viewed on them?
Does the content lack an excessive amount of ads that distract from or interfere with the main content?
Do pages lack intrusive interstitials?
How easily can visitors navigate to or locate the main content of your pages?
Is the page designed so visitors can easily distinguish the main content from other content on your page

Please keep in mind that these questions do not cover all aspects of the page experience to consider. However, questions like these, and consulting Page experience resources, may help you align with providing an overall good page experience.

Source: Google Search Central

Safari on MacOS has extra features for developers to control device settings

Cezary Tomczyk — Fri, 10 Nov 2023 09:37:06 +0000

Safari version 17.0 (19616.1.27.211.1) on MacOS has quite a few small features to control device settings that make app debugging easier.

I recommend trying it out.

Tailwind overcomplicated approach

Cezary Tomczyk — Thu, 09 Nov 2023 07:11:47 +0000

Here are the example of CSS classes on elements:

hidden pro-content-overlay w-full h-full absolute top-0 left-0 z-[9999] bg-[#00000080]
upgrade-button text-white hover:text-white focus:text-white focus:ring-0 px-4 py-2.5 inline-flex items-center rounded-md bg-[#ff9000] hover:bg-[#cf7500] font-semibold text-sm gap-2.5
settings-tab w-full focus:outline-0 !text-black aria-selected:text-gray-600 aria-selected:bg-gray-100 hover:text-gray-600 hover:bg-gray-100 group rounded-md px-5 py-3 flex items-center text-sm font-medium cursor-pointer
pro-badge cursor-pointer relative text-white text-[10px] py-[3px] px-[5px] leading-none ml-1.5
settings-tab w-full focus:outline-0 !text-black aria-selected:text-gray-600 aria-selected:bg-gray-100 hover:text-gray-600 hover:bg-gray-100 group rounded-md px-5 py-3 flex items-center text-sm font-medium cursor-pointer
border-gray-300 relative w-32 h-[135px] flex items-center justify-center cursor-pointer rounded-lg border bg-white shadow-sm focus:outline-none

And so on...

Ask yourself few questions:

Those classes describe the footer? Header? Or maybe a button? No. You can't determine it without looking at the rendered UI or potentially the HTML.
How does that make code easier to understand?
Passing arguments inside the CSS class name and propagating it across hundreds of different places won't make the code easier to maintain. Instead of making a change in one place, now you need to make it in a hundred other places.
Such an approach with adding a dozen classes makes the HTML just unnecessarily bigger in size. This impacts the HTML size and, hence, forces users to download and render more HTML.

Whoever decides to use Tailwind will add more unnecessary work in software development with practically no benefits.

Top 10 Digital Accessibility Challenges

Cezary Tomczyk — Thu, 26 Oct 2023 17:32:57 +0000

The following are the 10 most common digital accessibility problems that need to be addressed:

Inappropriate Alternative Text on Images: Alt text for images is one of the common accessibility issues in web design. According to WebAIM, 31.3 percent of home page banners were missing alternative texts.
Inaccessible Forms: Forms that are not properly labeled or structured can be difficult for users with disabilities to navigate.
Inaccessible PDFs and Documents: PDFs and other documents that are not properly tagged or structured can be difficult for users with disabilities to read.
Inaccessible Videos: Videos that do not have captions or transcripts can be difficult for users with hearing impairments to understand.
Inaccessible Audio: Audio content that does not have transcripts or captions can be difficult for users with hearing impairments to understand.
Inaccessible Links and Buttons: Links and buttons that are not properly labeled or structured can be difficult for users with disabilities to navigate.
Inaccessible Tables: Tables that are not properly structured can be difficult for users with disabilities to navigate.
Inaccessible Color Contrast: Poor color contrast can make it difficult for users with visual impairments to read text on a web page.
Inaccessible Keyboard Navigation: Websites that cannot be navigated using a keyboard can be difficult for users with mobility impairments to use.
Inaccessible Pop-ups and Alerts: Pop-ups and alerts that cannot be closed using a keyboard can be difficult for users with mobility impairments to use.

Use digital accessibility audits to perform automated and manual evaluations using various assistive technologies. A complete audit is a combination of manual and automated tests.

Note that some issues require manual testing, e.g., verifying if captions or transcripts make sense.

Create custom CSS property using @property CSS at-rule

Cezary Tomczyk — Thu, 26 Oct 2023 16:22:27 +0000

This is interesting. Ever wanted to create a custom CSS property? It seems now that it is possible.

The @property CSS at-rule is part of the CSS Houdini umbrella of APIs. It allows developers to explicitly define their CSS custom properties, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not.

The @property rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid @property rules result in a registered custom property, as if registerProperty() had been called with equivalent parameters.

Source: MDN.

Syntax

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

Optimising loading custom fonts to reduce layout shifts

Cezary Tomczyk — Wed, 25 Oct 2023 16:16:39 +0000

One of the most common causes of layout shifts is late-loading web fonts. To avoid layout shifts caused by web fonts, you can use the following techniques:

Preload critical fonts: Preloading critical fonts can help ensure that they are loaded before they are needed, thus avoiding layout shifts.
Subset fonts and serve as woff2: Subsetting fonts and serving them as woff2 can help reduce the size of the font files, which can speed up their loading time.
Use variable fonts or a limited set of weight variations: Using variable fonts or a limited set of weight variations can help reduce the number of font files that need to be loaded, which can speed up their loading time.
Host your own fonts on your main domain or subdomain: Hosting your own fonts on your main domain or subdomain can help ensure that they are loaded quickly and reliably.

To further optimise web font loading, you can also use the font-display property to control how web fonts are displayed while they are being loaded. For example, you can use font-display: swap to display fallback text while the web font is being loaded, and then swap in the web font when it is available.

Fixing layout shifting brought on by custom fonts can also be done using font-display: optional. This will avoid swapping and render fonts immediately when they are already available.