---
title: JF Blog | Maria Lopez
description: Practical articles on web development, accessibility, and best practices for developers who care about building it right.
---

[Skip to content](https://thedeveloper.javierfuentes.cl/blog/author/maria-lopez#main-content)

[![Javier Fuentes - The Developer](https://thedeveloper.javierfuentes.cl/hubfs/jf-dev/img/logos/jf-logo.svg "Javier Fuentes - The Developer")](https://thedeveloper.javierfuentes.cl/)

- [Home](https://thedeveloper.javierfuentes.cl/qa-test)
- Products
  
  Show submenu for Products 
  
    - [Product 1](https://thedeveloper.javierfuentes.cl/qa-test)
      
      Show submenu for Product 1 
      
          - [Sub Product 1](https://thedeveloper.javierfuentes.cl/qa-test)
    - Product 2
      
      Show submenu for Product 2 
      
          - [Sub Product 2](https://thedeveloper.javierfuentes.cl/qa-test)
    - [Sub Product 3](https://thedeveloper.javierfuentes.cl/qa-test)
- [Pricing](https://thedeveloper.javierfuentes.cl/qa-test)
- Blog
- [Company](https://thedeveloper.javierfuentes.cl/qa-test)
  
  Show submenu for Company 
  
    - [History](https://thedeveloper.javierfuentes.cl/qa-test)
    - [Open Positions](https://thedeveloper.javierfuentes.cl/qa-test)

- [Home](https://thedeveloper.javierfuentes.cl/qa-test)
- Products
  
  Show submenu for Products 
  
    - [Product 1](https://thedeveloper.javierfuentes.cl/qa-test)
      
      Show submenu for Product 1 
      
          - [Sub Product 1](https://thedeveloper.javierfuentes.cl/qa-test)
    - Product 2
      
      Show submenu for Product 2 
      
          - [Sub Product 2](https://thedeveloper.javierfuentes.cl/qa-test)
    - [Sub Product 3](https://thedeveloper.javierfuentes.cl/qa-test)
- [Pricing](https://thedeveloper.javierfuentes.cl/qa-test)
- Blog
- [Company](https://thedeveloper.javierfuentes.cl/qa-test)
  
  Show submenu for Company 
  
    - [History](https://thedeveloper.javierfuentes.cl/qa-test)
    - [Open Positions](https://thedeveloper.javierfuentes.cl/qa-test)

Search

- There are no suggestions because the search field is empty.

## Latest articles

Explore the latest posts from the blog.

All Posts

Accessibility

Best-Practices

Javascript

CSS

HTML

UX

WCAG

Workflow

Design-Systems

Performance

<https://thedeveloper.javierfuentes.cl/blog/how-to-build-a-design-system-with-accessibility-at-its-core>

Aug 17, 2025

![How to Build a Design System with Accessibility at Its Core](https://thedeveloper.javierfuentes.cl/hs-fs/hubfs/Imported_Blog_Media/photo-1551288049-bebda4e38f71-1.jpg?width=600&height=300&name=photo-1551288049-bebda4e38f71-1.jpg)

- [Design-Systems](https://thedeveloper.javierfuentes.cl/blog/tag/design-systems)
- [Accessibility](https://thedeveloper.javierfuentes.cl/blog/tag/accessibility)
- [CSS](https://thedeveloper.javierfuentes.cl/blog/tag/css)

### How to Build a Design System with Accessibility at Its Core

Retrofitting accessibility into an existing design system is painful. Building it in from the start — with accessible color tokens, keyboard...

By [Maria Lopez](https://thedeveloper.javierfuentes.cl/blog/author/maria-lopez)

Read more   **〉**

<https://thedeveloper.javierfuentes.cl/blog/building-accessible-modal-dialogs-from-scratch>

Jul 06, 2024

![Building Accessible Modal Dialogs from Scratch](https://thedeveloper.javierfuentes.cl/hs-fs/hubfs/Imported_Blog_Media/photo-1555066931-4365d14bab8c-1.jpg?width=600&height=300&name=photo-1555066931-4365d14bab8c-1.jpg)

- [Accessibility](https://thedeveloper.javierfuentes.cl/blog/tag/accessibility)
- [Javascript](https://thedeveloper.javierfuentes.cl/blog/tag/javascript)
- [Components](https://thedeveloper.javierfuentes.cl/blog/tag/components)

### Building Accessible Modal Dialogs from Scratch

Modals are one of the most commonly broken accessible components. A correct implementation requires a focus trap, Escape key dismissal, aria...

By [Maria Lopez](https://thedeveloper.javierfuentes.cl/blog/author/maria-lopez)

Read more   **〉**

<https://thedeveloper.javierfuentes.cl/blog/keyboard-navigation-best-practices-for-modern-web-apps>

May 24, 2023

![Keyboard Navigation Best Practices for Modern Web Apps](https://thedeveloper.javierfuentes.cl/hs-fs/hubfs/Imported_Blog_Media/photo-1518770660439-4636190af475-1.jpg?width=600&height=300&name=photo-1518770660439-4636190af475-1.jpg)

- [Accessibility](https://thedeveloper.javierfuentes.cl/blog/tag/accessibility)
- [Javascript](https://thedeveloper.javierfuentes.cl/blog/tag/javascript)
- [UX](https://thedeveloper.javierfuentes.cl/blog/tag/ux)

### Keyboard Navigation Best Practices for Modern Web Apps

Many users rely exclusively on keyboards to navigate the web — including power users, people with motor disabilities, and those using assist...

By [Maria Lopez](https://thedeveloper.javierfuentes.cl/blog/author/maria-lopez)

Read more   **〉**

 Load more

 Loading...

No more posts to load.

Failed to load posts. Please try again.

[Follow us on Facebook](https://www.facebook.com/) [Follow us on LinkedIn](https://www.linkedin.com/) [Follow us on Twitter](https://www.twitter.com/) [Follow us on Instagram](https://www.instagram.com/)

© 2026 All rights reserved.