DEV Community: Ismael Ramos 🚀

Angular 2025 Guide – Part 2: Project Structure with the Features Approach

Ismael Ramos 🚀 — Tue, 15 Apr 2025 13:00:00 +0000

Welcome to the second entry in the Angular 2025 Guide! In Part 1, we explored how to master standalone components, the backbone of modern Angular development. Now that you know how to build in a modular, component-first way, it’s time to look at the big picture: how to structure your entire project to support this new paradigm.

Spoiler: if you’re still organizing your app by modules or by type (components here, services there)... yeah, it’s time for an intervention.

We’ll cover smart folder architecture with real examples from the base project repo (angular-example-app), that will guide this series.

Organizing by feature — the core idea

In a features-first structure, your app is split by capabilities, not by type. A feature contains its own UI, logic, routes, and maybe even state.

Here’s a simplified snapshot:

.
└── app/
    └── features/
        ├── authentication/
        │   ├── pages/
        │   │   ├── log-in
        │   │   ├── register
        │   │   └── my-account
        │   ├── services
        │   ├── types
        │   └── authentication.routes.ts
        ├── home/
        │   ├── home.component.html
        │   ├── home.component.scss
        │   └── home.component.ts
        └── pokemon/
            ├── components/
            │   ├── catch-animation
            │   ├── pokedex
            │   ├── pokemon-battlefield
            │   ├── pokemon-card
            │   ├── pokemon-image
            │   └── pokemon-search-input
            ├── pages/
            │   ├── my-pokemon
            │   └── pokemon-detail
            ├── services
            ├── types
            └── pokemon.routes.ts

Real example: see src/app/features in the Angular Example App.

Why this works:

Each feature is self-contained.
Teams can work independently on features.
Easier to refactor, lazy-load, or even remove.

No more shared/ — use core/ instead

The old shared/ folder was a magnet for chaos. Sometimes you'd even dump everything there “just in case” it might be reused. It became the graveyard of your architecture.

.
└── core/
    ├── components
    ├── constants
    ├── directives
    ├── enums
    ├── guards
    ├── interceptors
    ├── pipes
    ├── providers
    ├── services
    ├── tokens
    ├── types
    └── validators

You'll find this setup under src/app/core.

Everything there should be agnostic and not related to any concrete feature. In this architecture, if you find some functionality reused in multiple places, make it a feature.

You treat reused logic like a first-class citizen, not an afterthought in a utils.ts.

⚡ Standalone + route-based loading = faster apps

Angular 17+ is built for this. With standalone components and route-level providers, your features load quickly and stay isolated.

export const appRoutes: Route[] = [
  {
    path: ROOT_PATHS.home,
    component: HomeComponent,
  },
  {
    path: AUTHENTICATION_PATHS.base,
    loadChildren: async () =>
      import('./features/authentication/authentication.routes').then(
        (module_) => module_.AUTHENTICATION_ROUTES,
      ),
  },
  {
    path: ROOT_PATHS.myPokemon,
    component: MyPokemonComponent,
    canActivate: [authenticationGuard],
  },
  {
    path: POKEMON_PATHS.base,
    loadChildren: async () =>
      import('./features/pokemon/pokemon.routes').then((module_) => module_.POKEMON_ROUTES),
  },
  { path: '404', component: Error404Component },
  { path: '**', redirectTo: '404' },
];

This means:

No need for a HomeModule
Smaller bundles on load
No leaking providers globally

Example: See how app.routes.ts are used.

Summary — Feature First All the Way

Feature-based structure is the default in 2025. Modules are optional.
The core/ folder replaces shared/, organized by responsibility.
Everything reused = a feature — give it its folder and routes if needed.
Standalone + feature providers = better performance and clean DI.
Avoid libs/ or mega service folders. Keep it flat, clear, and focused.

✅ What’s Next: The Signal Way - Modern State and Data Flow

Up next in the series: we’ll dive into Signals, httpResource, and local state management.

Have questions or want to see a specific example? Drop an issue in the repo or reach out!

I hope you’ve learned something new from all of this. If you think this might help others, please hit the like button so more people can find it. ❤️

Got thoughts or questions? Drop a comment — I'd love to respond!

Angular 2025 Guide: Mastering Standalone Components

Ismael Ramos 🚀 — Mon, 14 Apr 2025 13:00:00 +0000

Introduction to the series

If you learned Angular back in the Angular 2–14 days, you’re not alone — and you're definitely not outdated. The framework has evolved quickly: standalone components, signals, zoneless change detection... sometimes it feels like a whole new Angular.

But you don’t need to start from scratch.

This series is here to help you catch up step by step, with real examples and no overwhelm. Whether you’re returning to Angular or diving in for the first time, you’ll learn how to level up with modern patterns, like local state management with signals.

Learning with real examples

We’ll be using angular-example-app as the base project for every post. This app showcases best practices, up-to-date features, and a structure ideal for beginners to learn from and professionals to build on.

🚀 Getting Started with Standalone Components in Angular

When you first start learning Angular, one of the biggest hurdles is understanding NgModules — how to declare them, import them, and keep everything in sync. But with the introduction of Standalone Components, Angular makes things much simpler, especially for beginners.

In this post, we’ll break down what standalone components are, how they work, and how they compare to NgModules.

What are Standalone Components?

Standalone components were introduced in Angular 14 to reduce the need for NgModules. A standalone component can import everything it needs on its own, making your Angular apps more modular and easier to understand.

In short:

You don’t need to declare it in any module.
It handles its imports (like CommonModule, RouterModule, etc.).
You can use it directly in routes or other standalone components.

The Old Way: With NgModules

Traditionally, you’d need a module like this:

// old-school.component.ts
@Component({
  selector: 'app-old-school',
  templateUrl: './old-school.component.html',
})
export class OldSchoolComponent {}

// old-school.module.ts
@NgModule({
  declarations: [OldSchoolComponent],
  imports: [CommonModule],
})
export class OldSchoolModule {}

This approach works fine, but it creates extra files and boilerplate, especially for small or isolated components.

The New Way: Standalone Components

Now check out how the HomeComponent is defined:

// home.component.ts
@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './home.component.html',
})
export class HomeComponent {}

🧪 You can see this in action in the angular-example-app:
src/app/pages/home/home.component.ts

How Routing Works with Standalone Components

Instead of loading a module in the router, you just point to the standalone component:

// app.routes.ts
export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./pages/home/home.component').then((m) => m.HomeComponent),
  },
];

You’ll find this setup under src/app/app.routes.ts.
It’s simple, direct, and doesn’t need lazy-loaded modules anymore.

New app config

One of the coolest parts of using standalone components is how cleanly you can configure your whole app without AppModule. In the base project, this is all done in a single file: src/app/app.config.ts

It is the brain of the app — it defines all the global wiring (routing, HTTP, animations, images, environment...) in a single, easy-to-maintain file.

Here’s a breakdown of what this file does — and why it’s so powerful:

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: ENVIRONMENT,
      useValue: environment,
    },
    provideExperimentalZonelessChangeDetection(),
    provideRouter(
      appRoutes,
      withInMemoryScrolling(),
      withViewTransitions({
        onViewTransitionCreated: ({ transition, to }) => {
          const router = inject(Router);
          const toTree = createUrlTreeFromSnapshot(to, []);
          // Skip the transition if the only thing changing is the fragment and queryParams
          if (
            router.isActive(toTree, {
              paths: 'exact',
              matrixParams: 'exact',
              fragment: 'ignored',
              queryParams: 'ignored',
            })
          ) {
            transition.skipTransition();
          }
        },
      }),
      withComponentInputBinding(),
      withRouterConfig({ paramsInheritanceStrategy: 'always', onSameUrlNavigation: 'reload' }),
      withPreloading(PreloadAllModules),
    ),
    provideHttpClient(
      withFetch(),
      withInterceptors([authenticationInterceptor, cachingInterceptor]),
    ),
    provideAnimationsAsync(),
    provideCloudinaryLoader('https://res.cloudinary.com/ismaestro/'),
  ],
};

Key Features

Let’s break down some of the powerful things this configuration enables:

provideExperimentalZonelessChangeDetection()

Removes Angular’s dependency on Zone.js, enabling better performance with modern reactive patterns. ⚠️ It's still experimental, you should avoid this for production apps!

provideRouter() with Extras

This router setup includes:

withInMemoryScrolling(): preserves scroll position on navigation.
withViewTransitions(): enables smooth transitions between views, and even skips them when nothing relevant changes.
withComponentInputBinding(): allows inputs to be set via route params.
withPreloading(PreloadAllModules): preloads all lazy-loaded routes in the background for faster navigation.

provideHttpClient() with withFetch()

Switches Angular to use the Fetch API instead of XMLHttpRequest. Also registers interceptors.

provideAnimationsAsync()

Uses Angular’s modern async animations system. For more information, follow the official animations guide.

Ties Everything Together

This config file is passed to bootstrapApplication in main.ts, like so:

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

main.ts This replaces the old AppModule entirely.

✅ What’s Next: Feature-First Project Structure

Standalone components are the foundation of modern Angular — they simplify your architecture, reduce boilerplate, and make your app easier to reason about. If you're just coming back to Angular, this is the best place to restart.

In the next post, we’ll explore how to structure your project from a feature-first perspective, taking a close look at how the angular-example-app organizes code in a scalable and maintainable way. :)

I hope you’ve learned something new from all of this. If you think this might help others, please hit the like button so more people can find it. ❤️

Got thoughts or questions? Drop a comment — I'd love to respond!

Updates from the Angular Team and new Angular 17 features!

Ismael Ramos 🚀 — Tue, 07 Nov 2023 14:00:00 +0000

Table of content

1 - New site domain and home for developers
2 - New tutorials and playground
3 - New Angular logo
4 - SSR and SSG are now stable
5 - New control flow
- @if
- @for
- @switch
6 - Defer syntax is in developer preview
7 - Standalone components by default
8 - Webpack deprecated in favor of Esbuild and Vite
9 - New inspect mode for dependency injection graph
10 - Custom @Input transforms
11 - Minor refactor in styles and styleUrl properties

So, on November 6, 2023, the Angular Team dropped some cool updates and talked about a bunch of new Angular 17 features that I'd love to break down for you.

You have the whole live event on YouTube.

1 - New site domain and home for developers

The new website with all the documentation updated, reference materials, and core concepts, is ready for new developers at angular.dev.

It's going to be open-sourced soon and might serve as a good production example app. I have mine here, which I'm planning to update soon ;)

2 - New tutorials and playground

They released new tutorials addressed to beginners, intermediate, and advanced developers. They are going to be embedded in the website itself.

There is going to be a new essentials guide, to manage all the core concepts.

The playground has been redesigned and is at angular.dev/playground.

3 - New Angular logo

Because new modern things are coming and the brand seems a little bit old. It tries to be more inclusive.

4 - SSR and SSG are now stable

There is a new option for creating an app with the server side enabled from the start. A lot of people have been asking for improvements in this topic. Here they are:

ESM support for server builds
Build speed improvements for server bundles
Dev server SSR improvements
Hydration is now stable for production. More in angular.dev/guide/hydration.

The future is about SSR streaming. They are going in that direction.

5 - New control flow

Another key feature is the new control flow, which is easier to read and write, has new features like if-else, and has also performance improvements. Let's see some examples:

@if

<section>
    @if (user.loggedIn) {
        <app-dashboard />
    }
    @else {
        <app-login />
    }
</section>

@for

<section>
    @for (user of userList; track user) {
        <app-card [data]="user" />
    }
    @empty {
        <p>There were no items in the list</p>
    }
</section>

A few notes here. Track property is mandatory to avoid memory problems. We can use @empty, when the array has no elements, to directly show something.

@switch

<section>
    @switch (membershipStatus) {
        @case ("gold") {
            <p>Your discount is 20%</p>
        }
        @default {
            <p>Keep earning rewards.</p>
        }
    }
</section>

This new control flow makes the template render sometimes 90% faster than before. It is optional and a migration is available for it.

6 - Defer syntax is in developer preview

Now we are going to be able to defer some parts of the template. It is non-blocking. Here you have a complete example:

<button #trigger (click)="load = true">
    Load component
</button>

@defer (on viewport(trigger); when load == true) {
    <recommended-movies />
} @placeholder (minimum 500ms) {
    <img src="placeholder-image.png" />
} @loading (after 500ms; minimum 1s) {
    <spinner />
} @error {
    <p> Oops, something went wrong</p>
}

There are some built-in triggers, such as:

idle: load as soon as your browser reports it is in an idle state.
interaction: load when an element is clicked, focused, or similar behavior.
viewport: load when the content enters the client's viewport window.
hover: load when the mouse is hovering over an area.
timer: load after a specific timeout.

You can also do prefetching and also create custom triggers:

<section #trigger>
    ...
    @defer (prefetch on immediate;
            prefetch when val === true) {
        <large-component />
    }
    ...
</section>

The documentation has been improved and it's available at angular.dev/guide/defer.

7 - Standalone components by default

The team has decided to set standalone components enabled by default. NgModules are still valid.

8 - Webpack deprecated in favor of Esbuild and Vite

As Standalone Components, Esbuild is enabled by default for new projects. As an example, the angular material documentation website now builds 2.5 times faster using this configuration.

They recommend migrating all projects to Esbuild because of the performance improvements and future better support.

9 - New inspect mode for dependency injection graph

It is available in the angular dev tools.

10 - Custom @Input transforms

If the value has to be transformed and normalized to a certain type, there are some built-in transformers:

@Component({
  selector: 'custom-slider',
  ...
})
export class CustomSlider {
  @Input({transform: trimString}) label = '';
}
function trimString(value: string | undefined) {
  return value?.trim() ?? '';
}

11 - Minor refactor in styles and styleUrl properties

Last but not least, they updated these properties while creating a component. Before, they were arrays. Now you can write:

@Component({
  styleUrl: './user-profile.component.css',
  styles: '.username {color: red; }',
  ...
})

I hope you have learned something new from all. If you think this might help other people, please hit the like button so that others can read it. ❤️

If you have any thoughts or questions, feel free to leave a comment!

Top 20 Must-Know Tips for Web Accessibility

Ismael Ramos 🚀 — Wed, 12 Jul 2023 14:55:01 +0000

Table of content

1 - Learn how to use a screen reader
- Most commonly used keys
2 - Gain good knowledge of ARIA
- Most common ARIA attributes
3 - Use semantic HTML
- Examples of semantic usage of HTML tags
- The main advantage of semantic HTML
Basic concepts
- 4 - Use tabindex, but with caution
- 5 - Create proper outlines
- 6 - Allow keyboard navigation throughout your website
- 7 - Identify the language
- 8 - Ensure ARIA attributes are in the correct language
- 9 - Texts must be resizable
- 10 - Use headings in the proper order
Accessibility in base components
- 11 - Make images accessible
- 12 - Create icons for everyone
- 13 - Don't forget states in buttons
- 14 - Create descriptive links
- 15 - Ensure forms are accessible
- 16 - Include captions for videos
- 17 - Provide transcripts or audio descriptions for audio content
- 18 - Use titles and make iframes responsive
Other improvements
- 19 - Make downloads descriptive
- 20 - Create a link to bypass blocks
Last words

This third part of the series aims to provide you with essential principles (not all of them, as that's almost impossible!), practical advice, and examples for creating accessible websites.

I'll share some essential guidelines that our team has followed to make our website accessible and achieve a double A level of accessibility.

We'll uncover the secrets of creating clear descriptions for images, explore the world of navigating using only the keyboard, and much more, so that everyone can browse your site like a pro. :)

1 - Learn how to use a screen reader

Before getting into the code, it's important to understand how to use a screen reader. It's a fundamental skill that will help you to know the challenges users face when navigating your website.

In our team, most of us use Voiceover as we work under MacOs. But there are alternatives for Windows systems like Speechify, JAWS and NVDA.

Taking the time to familiarize yourself with a screen reader will provide you with valuable insights into the user experience.

Most commonly used keys

Tab and Shift+Tab: these keys allow users to move forward and backward through interactive elements on a web page, such as links, form fields, and buttons.

Arrow Keys: the arrow keys are used to navigate within a block of text or move between different components, such as headings, paragraphs, and lists. Users can move up, down, left, or right to explore the content in detail.

Nodes: navigating by nodes allows you to explore and interact with every element, like moving from one piece of the puzzle to another. In Voiceover you can navigate by pressing Control + Option + Arrow key.

Enter or Spacebar: these keys are used to activate buttons, links, or form controls. When a user lands on an interactive element, they can press Enter or Spacebar to trigger the associated action or follow a link.

Headings: many screen readers provide shortcut keys to jump between headings. For example, pressing the "H" key allows users to navigate to the next heading, making it easier to skim through the structure of a web page.

Search: screen readers often provide a search function that enables users to find specific words or phrases on a webpage. By entering keywords, users can quickly locate relevant information without having to navigate the entire page. Also there is a very useful combination in Voiceover to display all headings, links and form controls, which is Control + Shift + U.

2 - Gain good knowledge of ARIA

In this second tip, I thinks it's important to give context about what ARIA means. Basically, ARIA stands for Accessible Rich Internet Applications. It's a term that refers to a set of guidelines and tools designed to enhance the user-friendliness of websites for individuals with disabilities.

ARIA assists in providing additional information to web elements, such as buttons or links, so that screen readers and other assistive technologies can better understand them. It's like giving a shout-out to those who can't see or use a mouse, so they can navigate and interact with websites smoothly.

Most common ARIA attributes

These are the ARIA attributes that we primarily use in our journey to achieve double A accessibility for the website we were working on. There are more attributes available, but it's crucial to be familiar with at least these:

aria-hidden: by setting aria-hidden="true", we indicate to assistive technologies that the icon should be hidden from the accessibility tree. It's used for non-interactive elements.

<button class="icon-button">
  <span class="visually-hidden" aria-hidden="true">Close</span>
  <i class="fas fa-times"></i>
</button>

aria-label: provides a text alternative for an element when no visible label is present.

<button class="icon-button" aria-label="Search">
  <i class="fas fa-search"></i>
</button>

aria-labelledby: associates an element with another element that serves as its label.

<div id="alert-message" role="alert" aria-labelledby="alert-heading alert-description">
  <h3 id="alert-heading">Important Info!</h3>
  <p id="alert-description">Please be aware of the upcoming changes.</p>
</div>

The value of the attribute, "alert-heading alert-description," corresponds to the IDs of the heading (<h3>) and paragraph (<p>) elements that provide the label and description for the alert message.

By using aria-labelledby, you establish a relationship between the <div> element and the labeled heading and description. The screen reader will read the entire text inside those elements.

aria-describedby: associates an element with another element that describes its purpose.

<label for="username">Username:</label>
<input type="text" id="username" aria-describedby="username-description">
<p id="username-description">Please enter a unique username consisting of letters and numbers.</p>

One common situation is to provide extra information in inputs like usernames, emails, and passwords, where the user has to use a specific set of characters.

aria-expanded: indicates whether a collapsible element is currently expanded or collapsed.

<button id="toggle-button" aria-expanded="false" onclick="toggleContent()">
  Toggle Content
</button>

By dynamically updating the aria-expanded attribute based on the state of the content, the screen read can announce the current state to the user.

aria-disabled: indicates that an element is disabled and cannot be interacted with.

<button aria-disabled="true">Submit</button>

aria-live: indicates that content within an element should be dynamically announced to the screen reader. We often use this to inform the user of form errors.

<div aria-live="polite" id="status-message">
  New message received: You have 1 unread notification.
</div>

role: used to define the purpose or type of an element on a web page.

The role attribute can be applied to a wide range of HTML elements, such as <div>, <span>, <button>, <nav>, and more. Some common role values include "button," "link," "navigation," "heading," "list," "form," and "banner," among others. Each role value conveys a specific meaning and functionality to assistive technologies.

<div role="alert" aria-live="assertive">
  <p>This is an important alert message!</p>
</div>

If you need to create a component with a specific role, you can refer to the patterns website of the W3C.

3 - Use semantic HTML

Well, semantic HTML is like using special tags that provide meaning and structure to your web content. Instead of just slapping any old tag on things, you can use tags like <header>, <nav>, <article>, and <footer> to show the structure and purpose of different parts of your page.

For example, instead of using a <div> for your website's navigation menu, you would use the <nav> tag. This tells humans, search engines, and screen readers that the content inside it represents the site's navigation.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Examples of semantic usage of HTML tags

These are important situations where you have to use the
appropriate tags.

<header>: represents the introductory or top section of a page.

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <!-- Navigation menu -->
  </nav>
</header>

<main>: represents the main content of a document.

<main>
  <h2>About Me</h2>
  <p>I'm passionate about web development, ...</p>
</main>

<article>: represents a self-contained composition, such as a blog post, news article, or forum post.

<article>
  <h3>Post title</h3>
  <p>Recently, I went on an amazing trip...</p>
</article>

<section>: represents a standalone section within a document.

<section>
  <h2>Services</h2>
  <ul>
    <li>Web Design</li>
    <li>Front-end Development</li>
  </ul>
</section>

<footer>: represents the bottom section of a document or section.

<footer>
  <p>&copy; 2023 MyWebsite. All rights reserved.</p>
  <nav>
    <!-- Footer navigation goes here -->
  </nav>
</footer>

<fieldset>: is used to group the contact information fields together.

<form>
  <fieldset>
    <legend>Contact Information</legend>

    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </fieldset>

  <button type="submit">Submit</button>
</form>

The main advantage of semantic HTML

Semantic HTML elements contribute to a logical and well-organized tab order. Keyboard-only users heavily rely on the tab key to navigate through interactive elements on a webpage.

By using appropriate semantic elements like <button>, <a>, and form elements with proper labeling, you ensure that keyboard users can efficiently navigate and interact with your website.

Without Semantic HTML

<section>
  <h2>Welcome!</h2>
  <p>Some paragraph</p>

  <div class="button-container">
    <div class="button">Register</div>
  </div>

  <p>Or, if you have any questions, feel free to <span class="link"><a href="/contact">contact us</a></span>.</p>
</section>

With Semantic HTML

<section>
  <h2>Welcome!</h2>
  <p>Some paragraph</p>

  <button>Register</button>

  <p>Or, if you have any questions, feel free to <a href="/contact">contact us</a>.</p>
</section>

This consideration is crucial for individuals with motor disabilities who may not be able to use a mouse.

So go ahead, embrace Semantic HTML and enjoy the ride!

Basic concepts

4 - Use tabindex, but with caution

Tabindex is an attribute you can add to HTML elements to control their keyboard navigation order. It allows you to determine which elements receive focus when users navigate through your web page using the Tab key.

By setting tabindex values, you can customize the order and make your site more accessible to all users, especially those who rely on keyboards for navigation.

Best practices for tabindex

Only modify the tabindex values when necessary. Most interactive elements automatically receive focus in the default Tab order, so only intervene when it improves the overall user experience.

Possible values: the two possible values that are recommended, are "0" and "-1".

If tabindex="0" is used to make elements focusable, the keyboard interaction must be correct and intuitive for that element. This means that elements that are presented as buttons, for example, must respond to both Enter and Spacebar key presses.

By giving them a tabindex value of 0, you ensure that these elements can receive keyboard focus and be easily accessed using the Tab key. It's like opening the door for keyboard users to interact with these elements that wouldn't typically be clickable.

When you set tabindex="-1", it takes the element out of the regular navigation flow.

However, it's important to note that you should not assign the value "-1" to elements that need to be accessible via keyboard, such as links or buttons that sighted users can easily click on with a mouse.

Generally speaking, it is recommended to avoid the use of tabindex="-1" unless you have a specific reason to do so.

Maintain a logical flow: arrange tabindex values in a logical order that reflects the visual and reading flow of your content. Users should be able to navigate through your website naturally, without encountering unexpected jumps or skipping important elements.
Skip non-interactive elements: avoid assigning tabindex to non-interactive elements like text paragraphs or images. This helps users focus on interactive elements that require action or input.

5 - Create proper outlines

Outlines are like visual hugs that surround interactive elements such as buttons, links, and form fields when you interact with them.

.focus-outline {
   outline: 2px solid blue;
   outline-offset: 2px;
}

They provide a clear visual indication, usually a border or highlight, to show you which element is currently in focus. Whether you're using a keyboard or a mouse, these outlines ensure you can easily identify and interact with the right elements on a webpage.

Best practices for outlines

Visibility: outlines should be visible and clearly distinguishable, ensuring they stand out from the surrounding content. It is important to choose colors and styles that provide sufficient contrast, and to avoid designs that may cause confusion or distract from the main content.
Avoid removing outlines: it's crucial not to remove or disable outlines unless you have replaced them with a suitable and accessible alternative. Removing outlines altogether can disorient and confuse users, especially those who rely on keyboard navigation. Unfortunately, some developers occasionally choose to remove outlines. However, it's highly recommended not to do it.
Design consistency: look for a consistent outline style across your website. This helps users develop familiarity with the visual cues, promoting a smooth and intuitive browsing experience.

If you are a designer, please read the second part of this series.

6 - Allow keyboard navigation throughout your website

Keyboard navigation is one of the most important parts of web accessibility.

First, you have to know that it is closely related to semantic HTML and native elements. When you combine these two, something amazing happens - users can effortlessly navigate through most of the website using just their keyboard, without needing any special tweaks or tricks.

So, one of the principles that we are following when creating new components and develop new features, is to always use native elements whenever possible.

I will give you an example with the dialog element. Instead of creating your own modal, you should use the native component because it implements all the necessary features like escape, trap focus, close button, etc.

<dialog open>
  <p>This is a simple dialog!</p>
  <form method="dialog">
    <button>nice! ok!</button>
  </form>
</dialog>

One last advice about this is to take the #nomouse challenge! Try navigating the web page and controlling all its features using the tab key on a keyboard; don’t touch the mouse. This simple test is typically a good indicator of accessibility. For more information, see nomouse.org.

7 - Identify the language

You need to provide context about the language that the webpage is based on and specific paragraphs or components that are in a different language.

The `lang` attribute

Setting the lang attribute in the HTML tag allows you to declare the language of the web page. This helps screen readers and other assistive technologies identify and present the content correctly.

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

Keep in mind that if there is a paragraph in a different language you have to specify its language like this:

<body>
  <!-- English (US) content -->
  <p lang="en-US">Explore and enjoy our diverse content.</p>

  <!-- Hindi content -->
  <p lang="hi">हमारी विविधतापूर्ण सामग्री का अन्वेषण और आनंद लें।</p>
</body>

Anyway, there are a few exceptions like quotations, proper terms, technical terms, foreign words like "Sushi" or the language selector:

8 - Ensure ARIA attributes are in the correct language

If your webpage is primarily in English, it's important to ensure that aria attributes are also in English.

However, if the user switches to a different language, the aria attributes should change accordingly. It's advisable to avoid mixing languages as much as possible to maintain consistency and clarity throughout the user experience.

9 - Texts must be resizable

To make your website more user-friendly and accessible, it's crucial to ensure that the text is resizable.

Ideally, users should be able to increase the font size by up to 200% without any content getting cut off or losing any functionality.

Generally speaking, you should use em units for font sizes.

div.a {
  font-size: 14px; // :(
}

div.b {
  font-size: 1rem; // :)
}

div.c {
  font-size: 1.2em; // :)
}

By using scalable units like em and rem, we enable users to control the scale of the sites, thereby, providing us with our desired accessibility.

If you are thinking about using rem, keep in mind that scaling up and down accurately can be a challenge for all the text elements to adjust properly.

But for sure, try to avoid px unit on font sizes. They simply do not scale.

10 - Use headings in the proper order

When structuring your content, it's essential to use headings in a logical hierarchy.

Start with the main heading (usually <h1>) for the page title or main section, followed by subheadings (<h2>) for major subsections, and so on.

This hierarchy helps users understand the content's organization and allows screen readers to navigate through the page more effectively.

<h1>Best practices for Web Accessibility!</h1>
<h2>Basic concepts</h2>
<h3>Headings</h3>
<h4>Best practices for headings</h4>
....
<h2>Advanced concepts</h2>
<h3>Creating an accessible component library</h3>

It's essential to follow a consistent heading order without skipping levels. For example, don't jump from <h2> to <h4> directly. Skipping levels can confuse screen readers and make it harder for users to understand the content's structure.

As a final tip in this section, I would like to recommend you to place important interactive elements higher up in the web page.

Accessibility in base components

11 - Make images accessible

Let's explore easy-to-implement techniques to optimize your images for web accessibility.

Provide descriptive alt text: make sure to use concise and descriptive language to describe the content and purpose of the image.

<img src="example.jpg" alt="A group of friends enjoying a picnic in the park">

Decorative alt: in some cases, you may include decorative images that don't add any significant information to your content. For such images, it's best to provide an empty alt text or use the aria-hidden attribute to let screen readers skip over them.

<img src="decoration.jpg" alt="" aria-hidden="true">

Provide captions and image descriptions: for complex images, charts, or infographics, it's helpful to provide additional context through captions or detailed image descriptions.

<figure>
  <img src="infographic.jpg" alt="Data visualization of population growth">
  <figcaption>Data visualization of population growth in the last decade</figcaption>
</figure>

File formats: use widely supported formats like JPEG, PNG, or GIF for regular images. If you have complex graphics or images with transparency, consider using SVG. These formats ensure compatibility with various browsers and assistive technologies.
Implement responsive images: use the srcset attribute to provide multiple image sources of varying sizes.

<img srcset="small.jpg 320w,
              medium.jpg 768w,
              large.jpg 1200w"
     sizes="(max-width: 768px) 100vw,
            50vw"
     src="large.jpg" alt="A responsive image">

12 - Create icons for everyone

Instead of using icons solely as decorative elements, consider implementing semantic HTML elements like <span> or <i> and provide an appropriate text alternative.

<span class="icon" aria-hidden="true">📞</span>
<span class="sr-only">Phone</span>

In addition, icon fonts and SVGs are highly recommended for accessibility. They allow icons to be resized without losing quality and ensure compatibility across various devices and browsers.

For complex SVGs consider using title and desc elements along with aria-labelledby like this:

<svg 
   role="img"
   aria-labelledby="svg-title svg-description"
   xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px"
   y="0px"
   viewBox="0 0 48 48"
   xml:space="preserve">
      <title id="svg-title">A short title to resume the purpose of the svg!</title>
      <desc id="svg-description">A description with more details.</desc>
      <path d="..."/>
</svg>

13 - Don't forget states in buttons

Buttons are fundamental elements of web design, providing interactive functionality and serving as important call-to-action components.

Apart from using the semantic html tag <button>and providing a descriptive text like "Send Message", you should also provide visual feedback using the :focus and :hover states.

<button class="primary-button">Save Changes</button>

.primary-button:hover {
  background-color: #42b983;
  color: white;
}

.primary-button:focus {
  background-color: #342455;
  color: black;
}

There is also the disabled state, that will require you to use aria-disabled if its focusable:

<button aria-disabled="true">
  Continue
</button>

If the button is fully disabled then:

<button disabled>
  Continue
</button>

For toggle buttons you should use the, aria-pressed="true/false" attribute, and for menus you can use aria-expanded="true/false".

14 - Create descriptive links

Sometimes, it can be challenging to decide between using buttons or links. Our rule for making this decision is that if the user is redirected to another page or location, it should be a link.

Even if a link appears as a big shiny button, it is crucial to use the <a> element when coding it.

Remember, this is a design tip that we covered in the second part of this series. It's important to avoid using generic link labels like "click here" or "read more."

Note: links should not solely consist of the URL, unless it is intended for printing purposes, such as in a Word document. Additionally, if a link opens in a new window, make sure to mention that to the user.

Example: Article about Web Accessibility (opens in new tab)

15 - Ensure forms are accessible

Here, we encounter one of the most challenging aspects of web accessibility.

Forms can consist of a wide range of components, such as comboboxes, inputs with various types like numbers or dates, text areas, and many more.

Ensuring the accessibility of each form component is crucial, but discussing every component in detail would be insane. Instead, I will provide you with more general but equally important tips:

Semantic HTML (yes, again): when structuring your forms, use semantic HTML elements like <form>, <fieldset>, and <legend> to provide a clear and organized structure.

<form action="#">
  <fieldset>
    <legend>Do you agree?</legend>
    <input type="checkbox" id="chbx" name="agree" value="Yes!" />
    <label for="chbx">I agree</label>
  </fieldset>
</form>

This allows the screen reader to provide context about the field the user has to fill.

Use labels: ensure each form field has a descriptive label associated with it. Use the <label> element and associate it with the corresponding form field using the "for" attribute or by nesting the input element within the label.

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Clear instructions: include clear and concise instructions to guide users through the form-filling process. Place instructions near the related form fields, using additional text or elements such as <p> or <span>.

<label for="email">Email:</label>
<input type="email" id="email" name="email">
<p class="instructions">Please enter a valid email address.</p>

Provide error validation and feedback: associate error messages with their respective form fields using ARIA attributes, and use visually distinct styles or alert boxes to notify users of errors while maintaining color contrast for readability.

Here is an example, but since this is a complex topic, I recommend you reading Sandrina's post on Accessible Form Validation. Simply amazing!

<input
  id="address"
  type="text"
  required="required"
  aria-invalid="true"
  aria-describedby="addressError addressHint"
/>
<span>
  <p id="addressError">Address cannot be empty.</p>
  <p id="addressHint">Remember to include the door and apartment.</p>
</span>

16 - Include captions for videos

This is not as common as forms, but on the other hand, it is generally easier to make them accessible.

First, you need to provide captions:

<video>
  <source src="video.mp4" type="video/mp4">
  <track src="captions.vtt" kind="captions" label="English" srclang="en" default>
</video>

And second, always make controls available for keyboard users:

<video controls tabindex="0">
  <source src="video.mp4" type="video/mp4">
</video>

Some other tips are:

Avoid using flashing or blinking content that can trigger seizures.
Avoid using auto-playing media or animations that may cause distractions.
Color plays a significant role in videos, from subtitles to graphical elements. Ensure that the color contrast between the text and background is correct.
Choose an accessible video media player

17 - Provide transcripts or audio descriptions for audio content

In this case we can provide transcripts like this:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
<p><a href="audio-transcript.txt">Read the audio transcript</a></p>

Verify that the audio content, transcripts, captions, and audio descriptions are correctly interpreted.

Note: Audio descriptions should provide a detailed and concise narrative of the visual elements and actions taking place in the video.

18 - Use titles and make iframes responsive

Iframes are versatile tools that enable seamless embedding of external content into your website. However, some improvements are necessary to enhance their accessibility.

Use descriptive titles

When using iframes, provide descriptive titles that convey the purpose and content of the embedded page.

<iframe src="external-page.html" title="Weather Forecast"></iframe>

Make them responsive

Ensure that iframes are responsive and adapt well to different screen sizes and resolutions.

<div class="wrapper">
  <iframe src='some url' frameborder="0" allowfullscreen></iframe>
</div>

.wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Provide a fallback option

In some cases, iframes may not be supported or accessible for certain users or devices. To ensure that all users can access the essential information, provide a fallback option.

<iframe src="external-page.html">
  <img src="fallback-image.jpg" alt="Fallback Image: Content Not Available">
  <p>If you are unable to view the content, please try accessing it directly using the <a href="external-page.html">fallback link</a>.</p>
</iframe>

Other improvements

19 - Make downloads descriptive

Let me briefly touch upon this topic because occasionally we encounter tricky situations that can confuse users.

This tip is basically use a descriptive link text, provide the file extension and the file size (if possible).

<a href="document.pdf">Download the User Manual (PDF, 2.5MB)</a>

20 - Create a link to bypass blocks

Bypass blocks are essential in web accessibility. They allow users to skip repetitive or non-essential content and navigate directly to the main content of a webpage.

An example:

<a href="#main-content" class="skip-link">Skip to Main Content</a>

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  padding: 10px;
  background-color: #42b983;
  color: white;
  text-decoration: none;
}

.skip-link:not(:focus):not(:active) {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.skip-link:focus {
  top: 5px;
  left: 5px;
  background-color: #0066cc;
}

The skip link is positioned fixed and visible initially. However, I use the :not(:focus):not(:active) selector, so it is hidden (position: absolute; top: -9999px; left: -9999px;) for mouse users.

It only becomes visible when it receives focus or is active, following the styles defined in the :focus selector.

This way, the skip link will be accessible and hidden for mouse users while remaining visible and functional for keyboard users.

You can test it out for yourself on dev.to :)

Last words

So there you have it! We've covered what I believe are the top 20 must-know tips for web accessibility. Special thanks to @pablo_medina and @juanpabloamador for their feedback!

The next article in the series will be about "Common accessibility challenges our team has faced". Stay tuned!

And remember, making your website accessible is not just a good practice, it is the right thing to do.

This post may be long but I hope you have learned something new from among all. If you think this might help other people, please hit the like button so that others can read it. ❤️

If you have any thoughts or questions, feel free to leave a comment!

What framework should I use to create an accessible component library?

Ismael Ramos 🚀 — Wed, 05 Jul 2023 13:16:26 +0000

So I need to create a component library, and the requirements are:

Components must be accessible. Be careful with this. More info here, here, and here.
Components must work with different technologies, like, SSR and SPAs like Angular.
The library has to be lightweight.

Candidates: Stencil, Lit, FAST, Solid, anything else?

I think Lit does not allow removing shadow dom (because of accessibility) and use slots. Does Stencil?

I need opinions!!

Designing for All: Achieving Web Accessibility in Web Design

Ismael Ramos 🚀 — Thu, 29 Jun 2023 10:40:10 +0000

Table of contents

Clear and Logical Structure
Typography Guidelines
Responsive Design
Designing with Color in Mind: A Key Focus Area
- Color Contrast
- Alternative indicators
- Error messages
- Designing in greyscale
Consistent Navigation
Consistency in UI Components
Non-Motion-based Solutions
Focus Indication
Optimal Touch Target Size and Spacing
Open Links in New Window
Creating Links with Purpose
Animations and Flashing Content

Continuing with the next part of this series, we'll learn more about designing accessible web pages. It is crucial to prioritize accessibility in our designs.

On our path to achieving the double A, we sometimes encounter issues during development, which are actually problems that stem from earlier, from the design phase.

Here I'm going to explain the most important aspects, a designer must know and fulfil when making accessible designs.

Clear and Logical Structure

A logical structure helps users with screen readers or assistive technologies understand and navigate the content easily.

Ensure your page titles are descriptive and informative. Use informative headings and labels for forms and interactive controls. This is particularly beneficial for users with limited short-term memory, low vision, or difficulty reading text. These users may only see a few words at a time, so clear headings and labels help them understand the purpose of each section effectively.
Also, generate content that possesses the ability to be showcased in various formats, such as a simplified layout, while retaining both its information and structure.

Very important, ensure clarity in all your writing, not only headings.

Typography Guidelines

Leave a space following paragraphs that is at least 2 times the font size.
Line height (line spacing) should be a minimum of 1.5 times the font size.
Maintain word spacing of at least 0.16 times the font size.
Set letter spacing (tracking) to a minimum of 0.12 times the font size.
Avoid using font sizes smaller than 10 points.

Responsive Design

This is very obvious, but create a responsive design that adapts to different screen sizes and devices. It ensures that users can access and navigate the website seamlessly on desktops, tablets, and mobile devices.

I prefer developing using mobile-first approach.

Designing with Color in Mind: A Key Focus Area

While color is undoubtedly important in web design, it is crucial to ensure that it does not create barriers for individuals with visual impairments.

Color Contrast

Ensure sufficient contrast between text and background colors to make content readable. Consider users with visual impairments and use color contrast checkers to verify that your color combinations meet accessibility standards.

Ensure that text maintains a color contrast ratio of at least 4.5:1 with its background.
Icons and graphical objects should have a contrast ratio of at least 3:1 when compared to adjacent color(s).
Large-scale text should have a contrast ratio of at least 3:1.

If the text is integrated within a logo or brand name, there is no minimum contrast requirement.

Alternative indicators

Avoid relying solely on color to convey information. Provide additional indicators such as icons, labels, or patterns to ensure that users with color vision deficiencies can still understand and interact with the content.

Error messages

If color is used to indicate status, error messages, or alerts, ensure that there is also a non-color element or text-based explanation accompanying it. This ensures that users who cannot perceive color differences can still comprehend the information being conveyed.

Designing in greyscale

One effective technique in achieving accessibility is designing in greyscale, where colors are removed and the website is presented in shades of grey.

This approach ensures that the website's content and visual elements can still be perceived and understood by individuals with visual impairments or color vision deficiencies. Designing in greyscale allows for a focus on contrast, typography, and clear visual hierarchy, enabling an accessible and user-friendly experience for a wider range of users.

Use color simulation tools to experience how your website appears to individuals with different types of color vision deficiencies. These tools can help identify potential issues and allow for necessary adjustments to improve accessibility.

Consistent Navigation

Maintain a consistent and predictable navigation structure throughout the website. Clear labels, logical menus, and breadcrumb trails make it easier for users to locate and access different sections of the website.

Consistency in UI Components

It is important to ensure that components with similar functionality maintain consistency throughout the website or application. Establishing a design system, pattern library, or style guide is highly recommended to emphasize and maintain consistency within the team.

This enhances usability, reduces cognitive load, and establishes a cohesive visual identity for the brand.

Additionally, a design system or style guide streamlines the development process, promotes collaboration, and facilitates efficient teamwork.

We use storybook in our development cycle.

Non-Motion-based Solutions

If you rely on device motion to activate a specific feature, it is essential to offer an alternative user interface for accessing that feature. Alternatively, allow users to disable the motion activation of the feature altogether.

Focus Indication

Provide clear visual cues to indicate the focus state of interactive elements, such as links, buttons, and form fields.

Optimal Touch Target Size and Spacing

In web accessibility, it is recommended that the size of pointer targets for interactive elements be at least 44x44 pixels, ensuring easy and accurate interaction. However, there are a few exceptions:

Equivalent: If the target can be accessed through an equivalent link or control on the same page, which is also at least 44x44 pixels, the size requirement can be met by the alternative element.
Inline: If the target is embedded within a sentence or a block of text, the size requirement may be adjusted to fit within the context, considering the surrounding content.

Open Links in New Window

Opening links in new windows can be disorienting for users, especially those who rely on screen readers or have cognitive disabilities. It can disrupt their browsing experience and make it challenging to navigate back to the original page.

Instead, it is best to allow users to control how they open links by providing clear and descriptive link text, and letting them decide whether to open links in the same window or a new tab.

Creating Links with Purpose

Use descriptive and meaningful links instead of generic phrases like 'Click here' or content-free text such as 'More details' when applying them to a list of links.

Animations and Flashing Content

Avoid using excessive or intense animations, especially those with high contrast, rapid movement, or frequent flashing. If animations are necessary, provide users with options to control or pause them, allowing individuals to navigate and consume content at their own pace.

Additionally, ensure that any essential information presented in animations or flashing content is also available through non-animated means, such as descriptive text or alternative formats. This guarantees that users who cannot perceive or may be affected by the animations can still access and understand the information.

Furthermore, provide the option for users to pause, stop, or hide any moving, blinking, scrolling, or automatically updating elements within the content, such as dynamically-updating news tickers or chat messages.

Remember, designing an accessible website is an ongoing process that requires continuous evaluation and improvement. By considering these items, you can ensure that your websites are inclusive, user-friendly, and accessible to a diverse range of users.

If we approach web accessibility from the beginning, developers, and most importantly, end users, will experience gratitude and satisfaction.

I hope you have learned something new. If you think this might help other people, please hit the like button so that others can read it. ❤️

If you have any thoughts or questions, feel free to leave a comment!

Beyond Barriers: 4 Key Reasons to Embrace Web Accessibility

Ismael Ramos 🚀 — Thu, 29 Jun 2023 09:32:32 +0000

Table of content

Why you should care about web accessibility?
- Inclusivity
  - Different types of disabilities
- Legal and Ethical Obligations
- Sectors with legal requirements
- Improved User Experience
- Search Engine Optimization (SEO)
  - Some examples
    - Semantic HTML Markup
    - Alternative Text for Images
    - Transcripts for Multimedia Content
    - Responsive Design and Mobile Accessibility
    - Improved User Experience
    - Keyboard Accessibility
Wrapping Up

Welcome to the world of web accessibility, where you hold the power to create inclusive websites that leave no user behind.

You're reading this article right now 'cause a year ago, my team had this goal to make the website we were working on double AA accessible and I'm gonna share my experiences with you.

This series contains a total of 5 posts, which topics are:
  1. Why you should create accessible websites.
  2. First, create accessible designs.
  3. Key fundamentals on Web Accessibility (in progress)
  4. Common accessibility challenges we faced (in progress)
  5. Accessibility tools you must know (in progress)

So It's time to make the web accessible, one line of code at a time but first, let me give you four reasons that should be enough to convince you that learning and continuously developing accessible websites is the way to go.

Why you should care about web accessibility?

Inclusivity

Accessibility ensures that individuals with disabilities can access and use websites without barriers. By making your website accessible, you open doors to a wider audience and create an inclusive online environment where everyone can participate, engage, and benefit from the information and services you provide.

Different types of disabilities

Visual disabilities: Users who are blind, have low vision, or experience color blindness.
Hearing disabilities: Users who are deaf or hard of hearing.
Motor disabilities: Users with motor impairments that affect their ability to use a mouse or keyboard effectively.
Cognitive disabilities: Users with cognitive impairments that affect their comprehension or ability to process information.
Autism spectrum disorder (ASD): Individuals with ASD may have unique sensory and communication needs.
Elderly users: Older adults may experience age-related disabilities such as decreased vision, hearing loss, or reduced motor skills.
Learning disabilities: Users with learning disabilities, such as dyslexia or attention deficit hyperactivity disorder (ADHD), may face challenges in processing and understanding information.
Speech impairments: Users with speech impairments may have difficulty speaking or communicating verbally.

Legal and Ethical Obligations

Many countries have laws and regulations that require websites to be accessible. If you're in the EU, take a moment to read up on the European Accessibility Act.

Sectors with legal requirements

Public Sector: government websites, portals, and online services provided by federal, state, or local governments.
Education: schools, colleges, and universities, often have legal obligations to ensure their websites and online learning platforms are accessible.
Healthcare: hospitals, clinics, and healthcare providers, may have legal obligations to ensure individuals with disabilities can access vital healthcare information, make appointments, access medical records, etc.
Banking and Financial Services: banks, financial institutions, and insurance companies are often required to be accessible so users can access banking services, manage accounts, make transactions, and access financial information independently.

Travel and Hospitality: airlines, hotels, and travel agencies, may have legal obligations to provide accessible booking systems, airline websites, hotel reservations, and travel information.
Entertainment and Media: movie theaters, streaming services, and news websites, often have legal requirements to make their digital content accessible. This includes providing closed captions, audio descriptions, and accessible video players to ensure individuals with disabilities can access and enjoy their content.

By ensuring accessibility compliance, you not only meet legal obligations but also demonstrate a commitment to ethical practices, promoting equal access and equal opportunities for all users.

Improved User Experience

Accessibility often goes hand in hand with a better user experience for all users, not just those with disabilities. Elements such as clear navigation, well-structured content, and sufficient color contrast benefit everyone by making websites easier to understand, navigate, and interact with.

An accessible website streamlines user interactions, making it easier and more efficient for users to find information, complete tasks, and achieve their goals. By removing barriers and providing accessible design elements, users can navigate through the website seamlessly, locate desired content quickly, and interact with features effectively.

A website that is accessible and usable generates higher user engagement and satisfaction. When users can easily access and interact with the content, they are more likely to stay on the site, explore further, and accomplish their objectives.

Search Engine Optimization (SEO)

Let's say you are not convinced yet about the efford that this requires and the benefits we all get. Well, here's one significant advantage for the website.

Accessibility features align with SEO best practices. For instance, providing alternative text for images helps search engines understand the content, improving your website's visibility and ranking in search results. Additionally, accessible websites tend to have better performance, mobile optimization, and clean code, which positively impact SEO efforts.

Some examples

Semantic HTML Markup

Using semantic HTML tags, such as heading tags (H1, H2, etc.) and proper markup for lists and tables, improves both web accessibility and SEO. Screen readers rely on these tags to navigate and understand page structure, while search engines interpret them to determine the importance and context of content.

Alternative Text for Images

Providing descriptive alternative text (alt text) for images not only makes them accessible to visually impaired users but also allows search engines to understand the image context. This can improve the website's visibility in image search results and contribute to overall SEO efforts.

Transcripts for Multimedia Content

Including transcripts for audio and video content not only makes the content accessible to users who are deaf or hard of hearing but also provides textual content that search engines can index. Transcripts can increase keyword relevance, improve search rankings, and attract more organic traffic to the website.

Responsive Design and Mobile Accessibility

Since mobile-friendliness is a crucial factor in search engine algorithms, an accessible and mobile-responsive website can positively impact SEO rankings.

Improved User Experience

Search engines value positive user experiences and tend to reward websites that prioritize accessibility and user-centric design. This can lead to increased user engagement, longer visit durations, and lower bounce rates, all of which can positively impact SEO performance.

Keyboard Accessibility

This also improves SEO because search engines assess the website's accessibility and usability, taking into account keyboard accessibility as a positive user experience signal.

Wrapping Up

I think these examples illustrate the importance of always prioritizing accessibility when creating your websites, so you enhance inclusivity, meet legal requirements, improve the user experience, and boost your online presence through better SEO.

Ultimately, it's a win-win situation for both users and website owners.

I hope you have learned something new. If you think this might help other people, please hit the like button so that others can read it. ❤️

If you have any thoughts or questions, feel free to leave a comment!

Increase coverage on every feature with Karma/Jest and Husky

Ismael Ramos 🚀 — Thu, 23 Feb 2023 16:43:59 +0000

Table of content

Check your coverage percentage
Execute tests before pushing

Have you ever add new features and after some time, coverage seems to be decreasing, even if you are creating or updating some tests?

I'm going to explain how we can always be sure that coverage increase and not the opposite. It's a combination of two things:

Check your coverage percentage

First, we need to be sure that coverage does not decrease over a certain percentage.

This is an example for those using Karma:

// karma.conf.js
module.exports = function (config) {
  config.set({
    ...
    coverageReporter: {
      ...
      check: {
        global: {
          statements: 42.7,
          lines: 44.0,
          branches: 41.4,
          functions: 26.0,
        },
      },
    },
    ...
};

Or if you are using Jest:

// jest.config.js
{
...
"jest": {
  "coverageThreshold": {
    "global": {
      "branches": 50,
        "functions": 50,
        "lines": 50,
        "statements": 50
    }
  }
}

This will provoke the command to fail (usually npm test or equivalent), if at least one of them does not reach the minimum required.

Execute tests before pushing

The second thing you have to do, is to run all your tests just before pushing changes to the repository.
This is just an idea, maybe you want to do it before you commit those changes, I leave it to you.

To do that, I'm going to use husky. You just need to install it, and then create your first hook like this:

// .husky/pre-push
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

[ -n "$CI" ] && exit 0

npm run test

You have an angular app where you can find this examples which is using karma and husky in this repo.

I hope you have learned something new. If you think this might help other people, please hit the like button so that others can read it. ❤️

If you have any thoughts or questions, feel free to leave a comment!

innerText vs textContent in 2023

Ismael Ramos 🚀 — Tue, 07 Feb 2023 12:00:00 +0000

Table of content

The basics
innerText
textContent
Other differences
- Text-transform property
- Setter
Conclusion

What do I need to use? innerText or textContent? Here I´m going to analyse the differences
between both, and some hidden abilities that you may not know.

The code is available in this stackblitz.

The basics

Giving this HTML:

<div id="container">
  <span style="display: none">HIDDEN SECTION</span>
  <p><style>p { font-weight: bold}</style> Paragraph with line <br>break, spaces     and bold style.</p>
  <script>console.log('this is a script tag')</script>
</div>

var containerDiv = document.querySelector('#container');
var textNode = document.createTextNode('text');

innerText

It is used to get the rendered text of an element.
Does not include hidden elements like styles or scripts. Requires layout to calculate the result.
Not available for text nodes, only for HTMLElement objects.
Evaluates breaking lines tags. <br> -> \n
No spaces will be concatenated.
More performance-heavy. Take it wisely. In general, users won't notice the difference.
98.61% supported. Can I use

console.log(containerDiv.innerText);
// result:
// Paragraph with line
// break and bold style.

console.log(textNode.innerText);
// result:
// undefined

textContent

It represents the full-text content of an element and its descendants.
Includes hidden elements like styles or scripts.
Available for all Node objects.
Evaluates control characters like \n.
Can prevent XSS attacks. More info in this dom spec.
98.91% supported. Can I use. Be careful with IE 6-8.

console.log(containerDiv.textContent);
// result:
// 
// HIDDEN SECTION
// 
// 
// p {
//   font-weight: bold;
// }
// 
// Paragraph with line break, spaces and bold style.
// 
// 
// console.log('this is a script tag');
// 

console.log(textNode.textContent);
// result:
// word1
// word2

Other differences

Text-transform property

In this case, we are going to use text-transform and this is what happens:

<div id="transform" style="text-transform: uppercase;">text uppercase</div>

var transformDiv = document.querySelector('#transform');

// innerText
console.log(transformDiv.innerText);
// result:
// TEXT UPPERCASE

// textContent
console.log(transformDiv.textContent);
// result:
// text uppercase

Setter

And what happens if we set textContent to some random text? You will lose all children nodes!
In fact, this is a very simple and fast way to delete them.

<p id="setter">
  <style>span {font-weight: bold;}</style> basic <span>text</span>
</p>

var setterDiv = document.querySelector('#setter');

console.log(setterDiv.textContent);
// result:
// span {font-weight: bold;} basic text

setterDiv.textContent = 'some other text';
console.log(setterDiv.textContent);
// result:
// some other text

As you can see, we lose all nodes inside the container.

Conclusion

So if you are trying to simply get the text from an element you can use innerText.
Consider also the use of innerHTML, which lets you work with HTML rich text and doesn't automatically encode and decode text, depending on what are your needs. Otherwise, textContent is the way.

I hope you have learned something new. If you think this might help other people, please hit the like button so that others can read it. ❤️

If you have any thoughts or questions, feel free to leave a comment!

Implementing Standalone Components in Angular 15

Ismael Ramos 🚀 — Mon, 16 Jan 2023 20:57:48 +0000

Table of content

Bootstrap
App Component, but standalone
Lazy loading routes
Conclusion

In this article, I'm going to show you the most important parts to create an angular app using only standalone components. Yes, no ngmodule is needed.

You have all the code available in this repo, which tries to represent a real-world app. If you are learning Angular, give it a try, and give me your thoughts!

DEMO HERE: https://angular-example-app.netlify.app/

Bootstrap

The most important change is inside the src/main.ts file. First of all, we need to bootstrap the application in a different way:

Before:

platformBrowserDynamic().bootstrapModule(AppModule);

After:

import { importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
...

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(HttpClientModule),
    provideRouter([
      {
        path: '',
        component: HomePageComponent,
        pathMatch: 'full',
      },
      { path: '404', component: Error404PageComponent },
      { path: '**', redirectTo: '404' },
    ]),
    ...
  ],
});

Now, we are using provideRouter and importProvidersFrom. These methods allow us to provide routes and extract providers from some modules without importing them.

App Component, but standalone

Following the bootstrap configuration, we need to create components and enable the standalone flag. The app.component.ts looks like this:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  imports: [RouterOutlet, NgIf, ...],
  standalone: true,
})
export class AppComponent implements OnInit {}

Notice how can we import other standalone components directly, and even other ngmodules, like for example ReactiveFormsModule. Other than that, everything inside the component works as before.
Here another example of component using other standalone components and modules:

@Component({
  selector: 'app-edit-profile',
  templateUrl: './edit-profile.component.html',
  standalone: true,
  imports: [ReactiveFormsModule, TrimDirective, FormErrorsComponent, LowercaseDirective, NgIf],
})
export class EditProfileComponent implements OnInit {}

Lazy loading routes

Lastly, I'm going to show you how to lazy loading routes. You have to do it while defining the bootstrap:

{
  path: 'auth',
    loadChildren: () => import('./app/modules/auth/auth.routes').then(mod => mod.AUTH_ROUTES),
}

Here I'm using a constant called AUTH_ROUTES to hold my auth routes:

export const authPaths = {
  base: 'auth',
  logIn: 'log-in',
  register: 'register',
  logout: 'logout',
};

export const authRoutes = {
  logIn: `/${authPaths.base}/${authPaths.logIn}`,
  register: `/${authPaths.base}/${authPaths.register}`,
  logout: `/${authPaths.base}/${authPaths.logout}`,
};

export const AUTH_ROUTES: Route[] = [
  { path: authPaths.logIn, component: LogInPageComponent, canActivate: [NoAuthGuard] },
  { path: authPaths.register, component: RegisterPageComponent, canActivate: [NoAuthGuard] },
  {
    path: authPaths.logout,
    component: LogoutPageComponent,
  },
  { path: '**', redirectTo: appPaths.error404 },
];

By doing this, I can refactor route names easily.

Conclusion

Remember, you have a complete real world app in this repo.

DEMO HERE: https://angular-example-app.netlify.app/

I hope you have learned something new. If you think this might help other people, please hit the like button so that others can read it. ❤️

If you have any thoughts or questions, feel free to leave a comment!

What do you think about my portfolio website?

Ismael Ramos 🚀 — Thu, 31 Mar 2022 06:37:56 +0000

ismaelramos.dev
I released my website last week. Any suggestions? Do you like the design?

(UPDATE)

We all agree the cookie consent is bothering a lot. I decided to remove analytics tools...
The button to toggle the theme vision has been updated
The timeline is now inverted

24 ideas to include in your Definition of Done

Ismael Ramos 🚀 — Tue, 29 Mar 2022 10:55:14 +0000

Table of content

User story double-checked
Code is readable and clean
Check if changes can affect several components
Check if changes can affect several types of users
No errors in the console
Internationalization: all languages are filled
Must be responsive
Must be accessible
HTML and CSS are valid
Functionality tested in multiple browsers
New metrics if necessary
Code is bug-free
Unit tests covering most of the branches and with meaningful expects
End-to-end tests are passing
Integration tests are passing
Performance tests are passing
Security standards have been met
Any configuration, build changes, or model changes are documented
Documentation: Confluence / Swagger / StoryBook / Readme
Screenshot for the sprint demo
Code review and functionality tested by team members
Approved by QA
Approved by stakeholders (customer, manager, product owner)
Pipeline or build are passing

After a few years of being a software developer, I want to make a list of some tips and examples that you can include in the definition of done.

I will keep an eye on the comments to add new items if necessary.

Keep in mind that the best DoD is that one that has been agreed upon across the team. The order is meant to be logical from a dev perspective, and some of them are front end specific:

User story double-checked

It could seem obvious but is not. Read the user story after you think everything is done, in case you have forgotten something.

Code is readable and clean

It would be also well-formatted, complying with the style guide used by the team.

Check if changes can affect several components

Try not to break other functionalities while developing new features. If the changes affect other parts, validate all of them.

Check if changes can affect several types of users

It is common to have different roles (administrators, consumers, publishers, etc). Test the functionality against all of them.

No errors in the console

Sometimes everything seems to be ok, but there are still some errors in the console. If you are working in the frontend, maybe you
can try a javascript error notifier chrome extension.

Internationalization: all languages are filled

Be sure to check that all translations are ok and every i18n file contains the right language.

Must be responsive

If the feature requires some new markup, it has to be responsive. Check also that there is no horizontal overflow.
I wrote an article just about this.

Must be accessible

Always keep in mind that what you do should be accessible and meet the WCAG standard.

HTML and CSS are valid

Validate the HTML and CSS rules. You can use the W3C Markup Validation Service.

Functionality tested in multiple browsers

Test always at least two browsers. Knowing the most used browsers for your app/website should help to run specific tests in that ones.

New metrics if necessary

Sometimes we need to measure how much value is being delivered to the user.

Code is bug-free

Try to break the new feature. Test for basic and non-basic functionality issues. What if you fill forms with empty inputs, incorrect types, or too long texts?
Also, if I'm developing a new endpoint and, I don't receive all the data? (try to use schema validations).

Unit tests covering most of the branches and with meaningful expects

Try to cover at least 85% of the lines, and the majority of the branches. Expects have to make sense, and tests descriptions as well.

End-to-end tests are passing

In our team we use Cypress, and sometimes it is required to make a new e2e test for some parts.

Integration tests are passing

Very important if we don't want to break the application as a whole.

Performance tests are passing

Very few projects that I've worked on had performance tests. But they are important and this could apply in some cases.
Artillery saved my life in the past.

Security standards have been met

Ohhh this is hard but always having in mind security could save yours. We use SonarQube and Kiuwan.

Any configuration, build changes, or model changes are documented

Maybe this user story requires doing something after everything is deployed. Or maybe there is a model change that has to be notified to other
teams that depend on us. We use RFCs, but the user story should reflect those situations.

Documentation: Confluence / Swagger / StoryBook / Readme

It depends on the side you are working on, but documentation is your ally. Also meet the backend and frontend standards like Swagger, Storybook,
or a basic Readme file.

Screenshot for the sprint demo

At the end of every sprint, you should be doing a demo to show and review new functionalities. Once you have everything ready, just make a screenshot
before continuing with another user story.

Code review and functionality tested by team members

So you came through all of that, well done. Now leave other team members, ideally, more than two, review your work.
Three persons think more and better than just one.

Approved by QA

If you can have a QA team in charge of that part, perfect. They should give you the ok.

Approved by stakeholders (customer, manager, product owner)

I've been in some teams in which ones the PO had to give his approval to continue.

Pipeline or build are passing

And if everything seems ready, just be sure the pipeline is passing and there is no problem with the build process as well.

So these are some ideas that maybe can fit in your definition of done. What do you think? What is yours?

I hope you have learned something new. If you think this might help other people, please hit the like button so that others can read it. ❤️

If you have any thoughts or questions, feel free to leave a comment!

DEV Community: Ismael Ramos 🚀

Angular 2025 Guide – Part 2: Project Structure with the Features Approach

Organizing by feature — the core idea

No more shared/ — use core/ instead

⚡ Standalone + route-based loading = faster apps

Summary — Feature First All the Way

✅ What’s Next: The Signal Way - Modern State and Data Flow

Angular 2025 Guide: Mastering Standalone Components

Introduction to the series

Learning with real examples

🚀 Getting Started with Standalone Components in Angular

What are Standalone Components?

The Old Way: With NgModules

The New Way: Standalone Components

How Routing Works with Standalone Components

New app config

Key Features

provideExperimentalZonelessChangeDetection()

provideRouter() with Extras

provideHttpClient() with withFetch()

provideAnimationsAsync()

Ties Everything Together

✅ What’s Next: Feature-First Project Structure

Updates from the Angular Team and new Angular 17 features!

1 - New site domain and home for developers

2 - New tutorials and playground

3 - New Angular logo

4 - SSR and SSG are now stable

5 - New control flow

@if

@for

@switch

6 - Defer syntax is in developer preview

7 - Standalone components by default

8 - Webpack deprecated in favor of Esbuild and Vite

9 - New inspect mode for dependency injection graph

10 - Custom @Input transforms

11 - Minor refactor in styles and styleUrl properties

Top 20 Must-Know Tips for Web Accessibility

1 - Learn how to use a screen reader

Most commonly used keys

2 - Gain good knowledge of ARIA

Most common ARIA attributes

3 - Use semantic HTML

Examples of semantic usage of HTML tags

The main advantage of semantic HTML

Basic concepts

4 - Use tabindex, but with caution

Best practices for tabindex

5 - Create proper outlines

Best practices for outlines

6 - Allow keyboard navigation throughout your website

7 - Identify the language

The lang attribute

8 - Ensure ARIA attributes are in the correct language

9 - Texts must be resizable

10 - Use headings in the proper order

Accessibility in base components

11 - Make images accessible

12 - Create icons for everyone

13 - Don't forget states in buttons

14 - Create descriptive links

15 - Ensure forms are accessible

16 - Include captions for videos

17 - Provide transcripts or audio descriptions for audio content

18 - Use titles and make iframes responsive

Use descriptive titles

Make them responsive

Provide a fallback option

Other improvements

19 - Make downloads descriptive

20 - Create a link to bypass blocks

Last words

What framework should I use to create an accessible component library?

Designing for All: Achieving Web Accessibility in Web Design

Clear and Logical Structure

Typography Guidelines

Responsive Design

Designing with Color in Mind: A Key Focus Area

Color Contrast

The `lang` attribute