feat: add sponsors info page

[itziarZG]

[ctrl-alt-d]

Unable to see the page at: http://localhost:4321/sponsors

[ctrl-alt-d]

General a11y issues

• Barcelona looks like a button, but is not.
• > looks as expandable, but is not.

• > Nivel de Seniority should be h2 (not h3)
• Check if Extras (Add-ons) match headers hierarchy level, maybe is h2 (?)
• The 'progress bar' for seniority is not accessible, set role img:

<div
  class="flex w-full h-10 rounded-md overflow-hidden mb-4"
  role="img"
  aria-label="Experience distribution: Junior 20 percent, Senior or Pro 60 percent, Expert 20 percent"
>

Accessibility review Sponsors table

What’s good

• Correct semantic structure: <table>, <thead>, <tbody>, <tr>.
• This is real tabular data (benefits × plans), so a table is the right choice.

Issues & fixes

1) Add proper header associations (scope="col" / scope="row")

Screen readers need explicit row/column relationships.

Columns (plans)

<thead>
  <tr>
    <th scope="col">Beneficios</th>
    <th scope="col">Bronce</th>
    <th scope="col">Plata</th>
    <th scope="col">Oro</th>
    <th scope="col">Platino</th>
    <th scope="col">Principal</th>
  </tr>
</thead>

Rows (benefits) — use <th scope="row"> in the first column

<tbody>
  <tr>
    <th scope="row">Stand físico</th>
    <td>…</td>
    <td>…</td>
  </tr>
</tbody>

2) Complex <th> content triggers duplicate VoiceOver reading

Current headers contain multiple nested elements (plan name, price, limit), which VoiceOver may read:

• once as a single concatenated header, then
• again element-by-element.

Fix: one accessible label + hide visual composition

<th
  scope="col"
  aria-label="Plan Bronce. Precio 1.000 euros. Ilimitado."
>
  <div aria-hidden="true">Bronce</div>
  <div aria-hidden="true">1.000€</div>
  <div aria-hidden="true">Ilimitado</div>
</th>

3) Emojis / symbols need text alternatives (🚫 / ✅ / -)

Don’t rely on emoji or punctuation alone to convey meaning.

Fix pattern

<td>
  <span aria-hidden="true">🚫</span>
  <span class="sr-only">No incluido</span>
</td>

Or (for checkmarks):

<td>
  <span aria-hidden="true">✅</span>
  <span class="sr-only">Incluido</span>
</td>

[dukebody]

@ctrl-alt-d puedes aplicar los cambios que propones y mandar otro screenshot?

[dukebody]

Como curiosidad, respecto a:

Don’t rely on emoji or punctuation alone to convey meaning.
Yo siempre había entendido que no había problema con los lectores de pantalla y los emojis para personas ciegas. Una persona que ve, igualmente tiene que interpretar que el símbolo de prohibido significa que no está incluído, ¿no?

Pero vamos, no me parece mal añadir lo que comentas.

[ctrl-alt-d]

Yo siempre había entendido que no había problema con los lectores de pantalla y los emojis para personas ciegas.

No hay ningún problema con los emojis. Pero yo interpreto que se han usado emojis para representación visual, como si fuera una imagen. Cuando lo he probado con el lector de pantalla se me hacía muy rara la lectura de la tabla. Te pongo un ejemplo que va más allá de los emojis, la tabla tenía en la primera versión - para las opciones no disponibles, es un símbolo puramente visual, el lector lee guion. Es decir, que interpreto que si el contenido es un emoji entonces no hay problema para dejar emoji, pero si estamos usando emojis para hacerlo bonito y que algunos no tienen relación con el contenido (como el selected ✅) entonces mejor substituirlos por contenido. Quizá otra persona dirá que mejor dejar la misma experiencia.

[ctrl-alt-d]

La página no es responsive, estáis al caso?

[ctrl-alt-d]

@ctrl-alt-d puedes aplicar los cambios que propones y mandar otro screenshot?

He aplicado los cambios. Para screen readers solo he escondido los emojis de la tabla, no los otros, aunque creo que todos esos emojis son puramente decorativos y deberían esconderse. Ejemplo, la captura de debajo, el lector lo lee como 'Silueta de dos personas', +800, asistentes. Yo creo que sería mejor que lo leyera como 800 asistentes, pero a raíz del comentario de @dukebody lo he respetado.

[itziarZG]

La página no es responsive, estáis al caso?

en teoria deberia salir un scroll horizontal y la primera columna sticky.. igual depende del browser y haya que echarle otro ojo

[ctrl-alt-d]

Para mbl exploraría alternatives al table. Quizá cards o, al haber tantas opciones, acordeón. Es solo una idea.