Caso de estudio Portfolio

Gonzalo Blasco Fullstack React/TS · Especialista en accesibilidad

Accesibilidad como especialización activa

No es un checkbox. Es la lente con la que leo cada componente: qué anuncia un screen reader, qué pasa sin color, qué pasa solo con teclado. Lo demuestro con código mergeable en los repos más exigentes del ecosistema.

01La evidencia — estado real verificado

11 de agosto de 2026. Cada PR revisado contra la API de GitHub, no de memoria.

Facebook / astryx Design system de Meta

Default accessible labels to AvatarStatusDot per variant

Los indicadores de estado (Online/Away/Busy) tienen label accesible por defecto por variante, resolviendo WCAG 2.1 SC 1.4.1 (use of color). Resolución: prop explícita → default por variante → none. Con i18n catalog, tests de locale override y changeset.
Aprobado por code-ownerMergeable

WCAG 2.1 AA contrast failures in core color tokens

324 líneas corrigiendo contraste AA en los tokens de color del design system.
MergeableEspera re-review

Non-color indicator to current breadcrumb item

WCAG 1.4.1: el breadcrumb actual no depende solo del color.
Mergeable

shadcn/ui El ecosistema React más usado

Prevent layout shift on keyboard navigation (InputOTP)

El InputOTP se movía al navegar con teclado.
AprobadoMergeable

InputOTP transition · table scrollbar

Reduce layout shift del InputOTP limitando la transición; restaura la scrollbar visible en tablas (affordance de scroll).
2 PRs mergeables

Radix UI Primitivas headless accesibles

aria-activedescendant · ArrowUp focus · slider keyboard · focus freeze

Fixes de accesibilidad en primitivas headless: aria-activedescendant y aria-selected en Select, apertura de DropdownMenu con ArrowUp, commit de valor en Slider tras navegación por teclado, y prevención de focus freeze en Dialog.
4 PRs mergeables

carbon (IBM) Design system de IBM

Add aria-describedby prop support to ComposedModal

El ComposedModal de IBM Carbon ahora soporta aria-describedby, permitiendo asociar una descripción accesible al diálogo.
Mergeable

create-t3-app Scaffolder T3

Add accessible label to clipboard copy button

El botón de copiar al portapapeles en la web de create-t3-app ahora tiene un label accesible.
Mergeable

ui-skills Skills de UI

Improve fixing-accessibility skill with WCAG 2.2 coverage

Mejora la skill de fixing de accesibilidad con cobertura de WCAG 2.2.
Mergeable

01bContribuciones de accesibilidad en el ecosistema

Más allá de los tres repos detallados arriba, contribuciones de accesibilidad mergeables en todo el ecosistema open source.

02El sistema — cómo trabajo la accesibilidad

No es "agregar atributos". Es un proceso con criterio técnico y validación empírica.

Detectar el fallo real, no el síntoma

En astryx #4298 el problema no era "falta un label" — era que el status perdía significado para screen readers al componerse (parent-reads-child, issue #4777).

Entender la spec

WCAG 2.1 SC 1.4.1 (use of color), 1.4.11 (non-text contrast), 2.1.1 (keyboard). Cada fix cita su criterio.

Resolver con la jerarquía correcta

Prop explícita > default por variante > none. Nunca romper la semántica del sistema (lección del PR #4703: filled ≠ selected).

Validar empíricamente

Tests de locale override, tests de keyboard nav, verificación con screen readers (VoiceOver/NVDA) cuando el fix lo amerita.

Documentar el por qué

Changesets, i18n catalog, comentarios que explican la decisión, no solo el cambio.

03El resultado

13+
PRs de accesibilidad en el ecosistema
2
aprobados por reviewers
1
aprobado en design system de Meta
102
tests en a11y-fixer (propio)

Código real, revisado por maintainers reales, en repos que usan millones de personas. No es un curso ni un proyecto propio — es contribución a los estándares del ecosistema.

04El estado honesto

Mergeables, no mergeados

Estos PRs están mergeables, no mergeados — esperando review de maintainers. Y eso es exactamente el punto: el trabajo está hecho, validado técnicamente, y a un review de distancia de estar en producción.

El 11 de agosto de 2026, un PR en el design system de Facebook quedó aprobado por code-owner y otro (fix de CI) quedó mergeable — los más cerca que estuve de un merge en un repo de esa escala.

05Experiencia

Fullstack Developer
React/TS · Supabase · Edge Functions · IA como infraestructura
2024 – presente
Construyo aplicaciones fullstack reales (frontend React/TS, backend Supabase/Edge Functions, DB, billing, tooling). Uso IA como copiloto metodológico: sesiones por proyecto, memoria persistente, handoffs, subagentes. Stack opinado con documentación de decisiones (ADRs, OpenSpec, HANDOFF).
Frontend React Developer
9 años de experiencia
2015 – 2024
9 años como Frontend React. La accesibilidad se volvió mi especialización activa: la lente con la que leo cada componente (screen readers, uso de color, navegación por teclado). Contribuciones a los ecosistemas más exigentes: Facebook (astryx), shadcn/ui, Radix UI, IBM Carbon.

06Habilidades

Accesibilidad (WCAG 2.1 AA) React TypeScript Supabase Edge Functions Node.js SQL Billing Tooling Scaffolding OpenSpec Biome ADRs Testing (RTL, Vitest) Screen readers (VoiceOver, NVDA)

07Proyectos propios

Accessibility fix engine
Motor de fixes de accesibilidad. v0.6.0, 102 tests, pipeline completo.
Agent skills · web
Set de 59 skills de ingeniería probadas en OpenClaw, con web estática en GitHub Pages.
Scaffolder
Scaffolder opinado para Next.js 15, publicado en npm.
soporteml
CRM multi-tenant
CRM para vendedores de Mercado Libre con IA, billing e integraciones.

Gonzalo Blasco

Fullstack React/TS · Especialista en accesibilidad · Buscando rol donde la accesibilidad sea central

GitHub: github.com/gonzoblasco Stack: React/TS · Supabase · Edge Functions · billing · tooling · a11y
Metodología: IA como infraestructura de trabajo · stack opinado · ADRs · OpenSpec · HANDOFF