Diferencia entre revisiones de «2526MicroUdL2.5.2-A-001»
Página creada con «{{ActividadWCAG |id_criterio=2.5.2 - Cancelación del puntero (Nivel: A) |id_subcriterio=2.5.2-A |id_universidad=MicroUdL |curso_academico=2025-26 |enlace=https://wikiwcag.udl.cat/Principio_2/2.5_Modalidades_de_los_input/2.5.2-A |noa_barrera_evidencia_img=2025 26 MicroUdL 2.5.2-A NOA.png |noa_barrera_evidencia_url=https://create.kahoot.it/auth/register?next=%2Fcreator%3Ftemplate%3D20517497-6809-49c5-88c9-a104af2bcb0e |noa_barrera_explicacion=Aquí vemos dos maneras de…» |
Sin resumen de edición |
||
| Línea 7: | Línea 7: | ||
|noa_barrera_evidencia_img=2025 26 MicroUdL 2.5.2-A NOA.png | |noa_barrera_evidencia_img=2025 26 MicroUdL 2.5.2-A NOA.png | ||
|noa_barrera_evidencia_url=https://create.kahoot.it/auth/register?next=%2Fcreator%3Ftemplate%3D20517497-6809-49c5-88c9-a104af2bcb0e | |noa_barrera_evidencia_url=https://create.kahoot.it/auth/register?next=%2Fcreator%3Ftemplate%3D20517497-6809-49c5-88c9-a104af2bcb0e | ||
|noa_barrera_evidencia_html=<nowiki> | |||
<div><button data-testid="teacher-button" type="button" tabindex="0" class="styles__1g5agrwo styles_BaseButton__1g5agrwa accessibility-compliant-tab-focus_accessibilityCompliantTabFocus__y0g7lb1 styles_ButtonVariants_variant_raised__1g5agrwu styles_ButtonVariants_size_medium__1g5agrws styles_ButtonVariants_fullWidth_false__1g5agrwq user-type-button__Button-sc-sabyca-0 lbcXOs" aria-label="Registrarse como Profesor" style="--background__1g5agrw0: var(--colors-primary-main__uy9rl80); --onBackground__1g5agrw1: var(--colors-primary-onMain__uy9rl81); --text__1g5agrw2: var(--colors-text-accent__uy9rl87); --outline__1g5agrw3: var(--colors-primary-main__uy9rl80); --hoverBackground__1g5agrw4: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 15%); --activeBackground__1g5agrw5: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 30%); --disabledBackground__1g5agrw6: var(--colors-disabled-main__uy9rl8b); --onDisabledBackground__1g5agrw7: var(--colors-disabled-onMain__uy9rl8c); --buttonHeight__1g5agrw8: var(--spacing-s40__104dd0sb); --buttonOffset__1g5agrw9: var(--spacing-s4__104dd0s2);"><div class="styles__1g5agrw10 styles_BaseTitle__1g5agrwz ellipsis-box_ellipsisBox__pi1fr10 styles_Title_variant_raised__1g5agrw14 styles_Title_size_medium__1g5agrw12"><div class="user-type-button__ShapeWrapper-sc-sabyca-5 hibWpI"><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__DarkShape-sc-sabyca-4 eAnOFW" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 24px; height: 24px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-59060d36-4896-4544-a831-f71578f0c032" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-59060d36-4896-4544-a831-f71578f0c032">Icono</title><path d="M27,24.559972 L5,24.559972 L16,7 L27,24.559972 Z" style="fill: rgb(197, 0, 40);"></path></svg></span><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__Shape-sc-sabyca-3 cVMKuY" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 18px; height: 18px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-12f888a3-230d-44ab-baaf-8ac9cbb60e1a" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-12f888a3-230d-44ab-baaf-8ac9cbb60e1a">Icono</title><path d="M27,24.559972 L5,24.559972 L16,7 L27,24.559972 Z" style="fill: rgb(255, 255, 255);"></path></svg></span></div><div class="user-type-button__OptionTextWrapper-sc-sabyca-1 fHMeSf"><span class="user-type-button__OptionText-sc-sabyca-2 ZnvKh">Profesor</span></div></div></button><button data-testid="business-button" type="button" tabindex="0" class="styles__1g5agrwo styles_BaseButton__1g5agrwa accessibility-compliant-tab-focus_accessibilityCompliantTabFocus__y0g7lb1 styles_ButtonVariants_variant_raised__1g5agrwu styles_ButtonVariants_size_medium__1g5agrws styles_ButtonVariants_fullWidth_false__1g5agrwq user-type-button__Button-sc-sabyca-0 jqWxpe" aria-label="Registrarse como Profesional" style="--background__1g5agrw0: var(--colors-primary-main__uy9rl80); --onBackground__1g5agrw1: var(--colors-primary-onMain__uy9rl81); --text__1g5agrw2: var(--colors-text-accent__uy9rl87); --outline__1g5agrw3: var(--colors-primary-main__uy9rl80); --hoverBackground__1g5agrw4: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 15%); --activeBackground__1g5agrw5: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 30%); --disabledBackground__1g5agrw6: var(--colors-disabled-main__uy9rl8b); --onDisabledBackground__1g5agrw7: var(--colors-disabled-onMain__uy9rl8c); --buttonHeight__1g5agrw8: var(--spacing-s40__104dd0sb); --buttonOffset__1g5agrw9: var(--spacing-s4__104dd0s2);"><div class="styles__1g5agrw10 styles_BaseTitle__1g5agrwz ellipsis-box_ellipsisBox__pi1fr10 styles_Title_variant_raised__1g5agrw14 styles_Title_size_medium__1g5agrw12"><div class="user-type-button__ShapeWrapper-sc-sabyca-5 hibWpI"><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__DarkShape-sc-sabyca-4 eAnOFW" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 24px; height: 24px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-665a34ac-2c61-46e4-a303-45eb1a940aa5" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-665a34ac-2c61-46e4-a303-45eb1a940aa5">Icono</title><path d="M7,7 L25,7 L25,25 L7,25 L7,7 Z" style="fill: rgb(0, 83, 181);"></path></svg></span><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__Shape-sc-sabyca-3 cVMKuY" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 18px; height: 18px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-8220284a-ad63-4c9c-baac-2f4b10c7b228" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-8220284a-ad63-4c9c-baac-2f4b10c7b228">Icono</title><path d="M7,7 L25,7 L25,25 L7,25 L7,7 Z" style="fill: rgb(255, 255, 255);"></path></svg></span></div><div class="user-type-button__OptionTextWrapper-sc-sabyca-1 fHMeSf"><span class="user-type-button__OptionText-sc-sabyca-2 ZnvKh">Profesional</span></div></div></button><button data-testid="student-button" type="button" tabindex="0" class="styles__1g5agrwo styles_BaseButton__1g5agrwa accessibility-compliant-tab-focus_accessibilityCompliantTabFocus__y0g7lb1 styles_ButtonVariants_variant_raised__1g5agrwu styles_ButtonVariants_size_medium__1g5agrws styles_ButtonVariants_fullWidth_false__1g5agrwq user-type-button__Button-sc-sabyca-0 gCvEIe" aria-label="Registrarse como Estudiante" style="--background__1g5agrw0: var(--colors-primary-main__uy9rl80); --onBackground__1g5agrw1: var(--colors-primary-onMain__uy9rl81); --text__1g5agrw2: var(--colors-text-accent__uy9rl87); --outline__1g5agrw3: var(--colors-primary-main__uy9rl80); --hoverBackground__1g5agrw4: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 15%); --activeBackground__1g5agrw5: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 30%); --disabledBackground__1g5agrw6: var(--colors-disabled-main__uy9rl8b); --onDisabledBackground__1g5agrw7: var(--colors-disabled-onMain__uy9rl8c); --buttonHeight__1g5agrw8: var(--spacing-s40__104dd0sb); --buttonOffset__1g5agrw9: var(--spacing-s4__104dd0s2);"><div class="styles__1g5agrw10 styles_BaseTitle__1g5agrwz ellipsis-box_ellipsisBox__pi1fr10 styles_Title_variant_raised__1g5agrw14 styles_Title_size_medium__1g5agrw12"><div class="user-type-button__ShapeWrapper-sc-sabyca-5 hibWpI"><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__DarkShape-sc-sabyca-4 eAnOFW" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 24px; height: 24px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-dbcc9bfd-9356-4c83-8366-0394d35741d6" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-dbcc9bfd-9356-4c83-8366-0394d35741d6">Icono</title><path d="M4,16.0038341 L16,4 L28,16.0007668 L16,28 L4,16.0038341 Z" style="fill: rgb(189, 135, 0);"></path></svg></span><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__Shape-sc-sabyca-3 cVMKuY" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 18px; height: 18px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-21a5227b-39bc-4290-bf36-8354bedf64ed" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-21a5227b-39bc-4290-bf36-8354bedf64ed">Icono</title><path d="M4,16.0038341 L16,4 L28,16.0007668 L16,28 L4,16.0038341 Z" style="fill: rgb(255, 255, 255);"></path></svg></span></div><div class="user-type-button__OptionTextWrapper-sc-sabyca-1 fHMeSf"><span class="user-type-button__OptionText-sc-sabyca-2 ZnvKh">Estudiante</span></div></div></button><button data-testid="social-button" type="button" tabindex="0" class="styles__1g5agrwo styles_BaseButton__1g5agrwa accessibility-compliant-tab-focus_accessibilityCompliantTabFocus__y0g7lb1 styles_ButtonVariants_variant_raised__1g5agrwu styles_ButtonVariants_size_medium__1g5agrws styles_ButtonVariants_fullWidth_false__1g5agrwq user-type-button__Button-sc-sabyca-0 ipSCOy" aria-label="Registrarse como Familia y amigos" style="--background__1g5agrw0: var(--colors-primary-main__uy9rl80); --onBackground__1g5agrw1: var(--colors-primary-onMain__uy9rl81); --text__1g5agrw2: var(--colors-text-accent__uy9rl87); --outline__1g5agrw3: var(--colors-primary-main__uy9rl80); --hoverBackground__1g5agrw4: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 15%); --activeBackground__1g5agrw5: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 30%); --disabledBackground__1g5agrw6: var(--colors-disabled-main__uy9rl8b); --onDisabledBackground__1g5agrw7: var(--colors-disabled-onMain__uy9rl8c); --buttonHeight__1g5agrw8: var(--spacing-s40__104dd0sb); --buttonOffset__1g5agrw9: var(--spacing-s4__104dd0s2);"><div class="styles__1g5agrw10 styles_BaseTitle__1g5agrwz ellipsis-box_ellipsisBox__pi1fr10 styles_Title_variant_raised__1g5agrw14 styles_Title_size_medium__1g5agrw12"><div class="user-type-button__ShapeWrapper-sc-sabyca-5 hibWpI"><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__DarkShape-sc-sabyca-4 eAnOFW" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 24px; height: 24px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-9d753ff7-1e79-4cae-8563-54018d6357ab" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-9d753ff7-1e79-4cae-8563-54018d6357ab">Icono</title><path d="M16,27 C9.92486775,27 5,22.0751322 5,16 C5,9.92486775 9.92486775,5 16,5 C22.0751322,5 27,9.92486775 27,16 C27,22.0751322 22.0751322,27 16,27 Z" style="fill: rgb(0, 113, 0);"></path></svg></span><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__Shape-sc-sabyca-3 cVMKuY" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 18px; height: 18px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-8bf60536-b889-4099-b150-6e9796e86e15" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-8bf60536-b889-4099-b150-6e9796e86e15">Icono</title><path d="M16,27 C9.92486775,27 5,22.0751322 5,16 C5,9.92486775 9.92486775,5 16,5 C22.0751322,5 27,9.92486775 27,16 C27,22.0751322 22.0751322,27 16,27 Z" style="fill: rgb(255, 255, 255);"></path></svg></span></div><div class="user-type-button__OptionTextWrapper-sc-sabyca-1 fHMeSf"><span class="user-type-button__OptionText-sc-sabyca-2 ZnvKh">Familia y amigos</span></div></div></button></div> | |||
</nowiki> | |||
|noa_barrera_explicacion=Aquí vemos dos maneras de no cumplir: | |noa_barrera_explicacion=Aquí vemos dos maneras de no cumplir: | ||
Al acceder al proceso de registro de la página de Kahoot!, se muestra una pantalla en la que se solicita seleccionar el perfil de uso (Profesor, Profesional, Estudiante o Familia y amigos). Al pulsar directamente sobre cualquiera de las opciones, la acción se ejecuta inmediatamente y se avanza automáticamente al siguiente paso del proceso, sin posibilidad de cancelar la acción del puntero. | <ul> | ||
<li>Al acceder al proceso de registro de la página de Kahoot!, se muestra una pantalla en la que se solicita seleccionar el perfil de uso (Profesor, Profesional, Estudiante o Familia y amigos). Al pulsar directamente sobre cualquiera de las opciones, la acción se ejecuta inmediatamente y se avanza automáticamente al siguiente paso del proceso, sin posibilidad de cancelar la acción del puntero.</li> | |||
Por otro lado, el menú de idiomas que aparece en la esquina superior derecha, se dispara durante el evento "down" del mouse, y no al soltar, es decir, con el evento "up. | <li>Por otro lado, el menú de idiomas que aparece en la esquina superior derecha, se dispara durante el evento "down" del mouse, y no al soltar, es decir, con el evento "up.</li> | ||
</ul> | |||
|noa_barrera_usuarios=<ul> | |noa_barrera_usuarios=<ul> | ||
| Línea 24: | Línea 29: | ||
<li><strong>Impedimentos temporales o situacionales:</strong> Pantallas táctiles pequeñas, uso con una sola mano, movimiento (transporte), fatiga. Aunque no tengan una discapacidad permanente, se ven afectados de forma situacional.</li> | <li><strong>Impedimentos temporales o situacionales:</strong> Pantallas táctiles pequeñas, uso con una sola mano, movimiento (transporte), fatiga. Aunque no tengan una discapacidad permanente, se ven afectados de forma situacional.</li> | ||
</ul> | </ul> | ||
|acc_barrera_evidencia_img=2025 26 MicroUdL 2.5.2-A ACC.png | |||
|acc_barrera_evidencia_url=https://www.menti.com/al31znzzz7e2 | |||
|acc_barrera_evidencia_html=<nowiki> | |||
<div class="m-a r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-a m-ag m-ao r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><h1 id="slide-title" data-testid="voting-title" font-size="175" font-weight="regular" class="m-ap m-aq m-ar m-as m-at r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body"><div><div contenteditable="false" role="none" translate="no" class="tiptap ProseMirror"><p>¿Cuántas patas tiene un gato?</p></div></div></h1></div><form class="flex flex-col flex-none items-start min-w-0 min-h-0 relative w-full"><fieldset class="m-a r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><legend class="sr-only">¿Cuántas patas tiene un gato?</legend><div class="m-a m-au r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><label for="019b5ffa-2f0f-7d9d-8754-29d7fdf1aa0d" data-testid="choice-0" class="r-text break-words max-w-full text-87-5 leading-normal font-semibold font-body inline-block cursor-pointer text-text w-full mb-0"><div overflow="hidden" class="m-av m-cb m-ax m-cc m-ay m-a m-c m-u m-cd m-az m-ba m-y m-z m-bb m-bc m-bd m-be m-bf m-bg m-bh m-bi r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-a m-v m-bj m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-u m-bl m-bm m-c m-ay m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="m-ce m-bn m-a m-ay m-c m-bk r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body"><span class=" r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body" style="word-break: break-word;">2 patas</span></span><div class="m-bo r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="flex gap-2 items-center justify-center check-item"><input class="appearance-none border border-solid border-border-strong cursor-pointer disabled:border-border-disabled disabled:cursor-not-allowed disabled:bg-disabled disabled:hover:bg-disabled-strong duration-100 ease-in-out transition-all focus-visible:ring-offset-2 focus-visible:ring-4 focus-visible:ring-interactive-focused focus:ring-none relative shrink-0 hover:border-secondary hover:border-2 checked:border-none r-check-item h-[28px] w-[28px] checked:bg-button-bg-primary-checked checked:hover:bg-button-bg-primary-checked-hover rounded-full" id="019b5ffa-2f0f-7d9d-8754-29d7fdf1aa0d" type="radio" value="019b5ffa-2f0f-7d9d-8754-29d7fdf1aa0d" name="choices"><svg class="block absolute pointer-events-none h-[24px] w-[24px]" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-testid="radiobutton-icon" aria-hidden="true"><circle fill="var(--color-on-secondary)" cx="12" cy="12" r="4"></circle></svg></span></div></div></div></div></label><label for="019b5ffa-2f0f-7092-bf73-15b06fb4f65e" data-testid="choice-1" class="r-text break-words max-w-full text-87-5 leading-normal font-semibold font-body inline-block cursor-pointer text-text w-full mb-0"><div overflow="hidden" class="m-av m-aw m-ax m-ay m-a m-c m-u m-q m-az m-ba m-y m-z m-bb m-bc m-bd m-be m-bf m-bg m-bh m-bi r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-a m-v m-bj m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-u m-bl m-bm m-c m-ay m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="m-aq m-bn m-a m-ay m-c m-bk r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body"><span class=" r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body" style="word-break: break-word;">3 patas</span></span><div class="m-bo r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="flex gap-2 items-center justify-center check-item"><input class="appearance-none border border-solid border-border-strong cursor-pointer disabled:border-border-disabled disabled:cursor-not-allowed disabled:bg-disabled disabled:hover:bg-disabled-strong duration-100 ease-in-out transition-all focus-visible:ring-offset-2 focus-visible:ring-4 focus-visible:ring-interactive-focused focus:ring-none relative shrink-0 hover:border-secondary hover:border-2 checked:border-none r-check-item h-[28px] w-[28px] checked:bg-button-bg-primary-checked checked:hover:bg-button-bg-primary-checked-hover rounded-full" id="019b5ffa-2f0f-7092-bf73-15b06fb4f65e" type="radio" value="019b5ffa-2f0f-7092-bf73-15b06fb4f65e" name="choices"></span></div></div></div></div></label><label for="019b5ffa-2f0f-7d0a-8f54-e45e4c3d48cc" data-testid="choice-2" class="r-text break-words max-w-full text-87-5 leading-normal font-semibold font-body inline-block cursor-pointer text-text w-full mb-0"><div overflow="hidden" class="m-av m-aw m-ax m-ay m-a m-c m-u m-q m-az m-ba m-y m-z m-bb m-bc m-bd m-be m-bf m-bg m-bh m-bi r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-a m-v m-bj m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-u m-bl m-bm m-c m-ay m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="m-aq m-bn m-a m-ay m-c m-bk r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body"><span class=" r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body" style="word-break: break-word;">4 patas</span></span><div class="m-bo r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="flex gap-2 items-center justify-center check-item"><input class="appearance-none border border-solid border-border-strong cursor-pointer disabled:border-border-disabled disabled:cursor-not-allowed disabled:bg-disabled disabled:hover:bg-disabled-strong duration-100 ease-in-out transition-all focus-visible:ring-offset-2 focus-visible:ring-4 focus-visible:ring-interactive-focused focus:ring-none relative shrink-0 hover:border-secondary hover:border-2 checked:border-none r-check-item h-[28px] w-[28px] checked:bg-button-bg-primary-checked checked:hover:bg-button-bg-primary-checked-hover rounded-full" id="019b5ffa-2f0f-7d0a-8f54-e45e4c3d48cc" type="radio" value="019b5ffa-2f0f-7d0a-8f54-e45e4c3d48cc" name="choices"></span></div></div></div></div></label></div></fieldset><div height="100%" class="m-a m-p m-ae m-u m-l r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-a m-c r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><button class=" data-[has-status="false"]:disabled:bg-disabled-strong data-[has-status="false"]:disabled:text-on-disabled-strong data-[has-status="false"]:disabled:shadow-none disabled:cursor-not-allowed flex flex-row justify-center items-center text-center relative no-underline font-body font-semibold cursor-pointer rounded-full whitespace-nowrap opacity-100 duration-300 ease-in-out outline-transparent focus-visible:outline-solid focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-interactive-focused px-8 py-4 text-100 leading-125 bg-button-bg-primary text-on-primary data-[has-status="false"]:hover:bg-button-bg-primary-hover data-[has-status="false"]:active:bg-button-bg-primary-active" data-has-status="false" type="submit"><span class="opacity-0 absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center transition-opacity"></span><span data-testid="button-children" aria-hidden="false" class="flex flex-row items-center text-inherit transition-opacity opacity-100">Submit</span></button></div></div><div class="light" style="display: contents;"></div><div class="light" style="display: contents;"></div></form></div> | |||
</nowiki> | |||
|acc_barrera_explicacion=Seleccionar una opción no ejecuta la acción final. Al pulsar una respuesta (por ejemplo, “2 patas”), solo se marca la opción, no se produce ningún cambio de contexto ni avance automático, es decir, existe un paso explícito de confirmación. | |||
La acción principal (enviar la respuesta) solo se ejecuta al activar el botón “Submit”, y el evento de puntero se ejecuta en “up" click, no en “down”, es decir el comportamiento sigue el patrón esperado de controles de formulario accesibles. | |||
}} | }} | ||
Revisión del 18:03 27 dic 2025
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_2/2.5_Modalidades_de_los_input/2.5.2-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://create.kahoot.it/auth/register?next=%2Fcreator%3Ftemplate%3D20517497-6809-49c5-88c9-a104af2bcb0e
2.1.2. Código HTML:
<div><button data-testid="teacher-button" type="button" tabindex="0" class="styles__1g5agrwo styles_BaseButton__1g5agrwa accessibility-compliant-tab-focus_accessibilityCompliantTabFocus__y0g7lb1 styles_ButtonVariants_variant_raised__1g5agrwu styles_ButtonVariants_size_medium__1g5agrws styles_ButtonVariants_fullWidth_false__1g5agrwq user-type-button__Button-sc-sabyca-0 lbcXOs" aria-label="Registrarse como Profesor" style="--background__1g5agrw0: var(--colors-primary-main__uy9rl80); --onBackground__1g5agrw1: var(--colors-primary-onMain__uy9rl81); --text__1g5agrw2: var(--colors-text-accent__uy9rl87); --outline__1g5agrw3: var(--colors-primary-main__uy9rl80); --hoverBackground__1g5agrw4: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 15%); --activeBackground__1g5agrw5: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 30%); --disabledBackground__1g5agrw6: var(--colors-disabled-main__uy9rl8b); --onDisabledBackground__1g5agrw7: var(--colors-disabled-onMain__uy9rl8c); --buttonHeight__1g5agrw8: var(--spacing-s40__104dd0sb); --buttonOffset__1g5agrw9: var(--spacing-s4__104dd0s2);"><div class="styles__1g5agrw10 styles_BaseTitle__1g5agrwz ellipsis-box_ellipsisBox__pi1fr10 styles_Title_variant_raised__1g5agrw14 styles_Title_size_medium__1g5agrw12"><div class="user-type-button__ShapeWrapper-sc-sabyca-5 hibWpI"><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__DarkShape-sc-sabyca-4 eAnOFW" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 24px; height: 24px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-59060d36-4896-4544-a831-f71578f0c032" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-59060d36-4896-4544-a831-f71578f0c032">Icono</title><path d="M27,24.559972 L5,24.559972 L16,7 L27,24.559972 Z" style="fill: rgb(197, 0, 40);"></path></svg></span><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__Shape-sc-sabyca-3 cVMKuY" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 18px; height: 18px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-12f888a3-230d-44ab-baaf-8ac9cbb60e1a" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-12f888a3-230d-44ab-baaf-8ac9cbb60e1a">Icono</title><path d="M27,24.559972 L5,24.559972 L16,7 L27,24.559972 Z" style="fill: rgb(255, 255, 255);"></path></svg></span></div><div class="user-type-button__OptionTextWrapper-sc-sabyca-1 fHMeSf"><span class="user-type-button__OptionText-sc-sabyca-2 ZnvKh">Profesor</span></div></div></button><button data-testid="business-button" type="button" tabindex="0" class="styles__1g5agrwo styles_BaseButton__1g5agrwa accessibility-compliant-tab-focus_accessibilityCompliantTabFocus__y0g7lb1 styles_ButtonVariants_variant_raised__1g5agrwu styles_ButtonVariants_size_medium__1g5agrws styles_ButtonVariants_fullWidth_false__1g5agrwq user-type-button__Button-sc-sabyca-0 jqWxpe" aria-label="Registrarse como Profesional" style="--background__1g5agrw0: var(--colors-primary-main__uy9rl80); --onBackground__1g5agrw1: var(--colors-primary-onMain__uy9rl81); --text__1g5agrw2: var(--colors-text-accent__uy9rl87); --outline__1g5agrw3: var(--colors-primary-main__uy9rl80); --hoverBackground__1g5agrw4: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 15%); --activeBackground__1g5agrw5: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 30%); --disabledBackground__1g5agrw6: var(--colors-disabled-main__uy9rl8b); --onDisabledBackground__1g5agrw7: var(--colors-disabled-onMain__uy9rl8c); --buttonHeight__1g5agrw8: var(--spacing-s40__104dd0sb); --buttonOffset__1g5agrw9: var(--spacing-s4__104dd0s2);"><div class="styles__1g5agrw10 styles_BaseTitle__1g5agrwz ellipsis-box_ellipsisBox__pi1fr10 styles_Title_variant_raised__1g5agrw14 styles_Title_size_medium__1g5agrw12"><div class="user-type-button__ShapeWrapper-sc-sabyca-5 hibWpI"><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__DarkShape-sc-sabyca-4 eAnOFW" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 24px; height: 24px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-665a34ac-2c61-46e4-a303-45eb1a940aa5" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-665a34ac-2c61-46e4-a303-45eb1a940aa5">Icono</title><path d="M7,7 L25,7 L25,25 L7,25 L7,7 Z" style="fill: rgb(0, 83, 181);"></path></svg></span><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__Shape-sc-sabyca-3 cVMKuY" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 18px; height: 18px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-8220284a-ad63-4c9c-baac-2f4b10c7b228" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-8220284a-ad63-4c9c-baac-2f4b10c7b228">Icono</title><path d="M7,7 L25,7 L25,25 L7,25 L7,7 Z" style="fill: rgb(255, 255, 255);"></path></svg></span></div><div class="user-type-button__OptionTextWrapper-sc-sabyca-1 fHMeSf"><span class="user-type-button__OptionText-sc-sabyca-2 ZnvKh">Profesional</span></div></div></button><button data-testid="student-button" type="button" tabindex="0" class="styles__1g5agrwo styles_BaseButton__1g5agrwa accessibility-compliant-tab-focus_accessibilityCompliantTabFocus__y0g7lb1 styles_ButtonVariants_variant_raised__1g5agrwu styles_ButtonVariants_size_medium__1g5agrws styles_ButtonVariants_fullWidth_false__1g5agrwq user-type-button__Button-sc-sabyca-0 gCvEIe" aria-label="Registrarse como Estudiante" style="--background__1g5agrw0: var(--colors-primary-main__uy9rl80); --onBackground__1g5agrw1: var(--colors-primary-onMain__uy9rl81); --text__1g5agrw2: var(--colors-text-accent__uy9rl87); --outline__1g5agrw3: var(--colors-primary-main__uy9rl80); --hoverBackground__1g5agrw4: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 15%); --activeBackground__1g5agrw5: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 30%); --disabledBackground__1g5agrw6: var(--colors-disabled-main__uy9rl8b); --onDisabledBackground__1g5agrw7: var(--colors-disabled-onMain__uy9rl8c); --buttonHeight__1g5agrw8: var(--spacing-s40__104dd0sb); --buttonOffset__1g5agrw9: var(--spacing-s4__104dd0s2);"><div class="styles__1g5agrw10 styles_BaseTitle__1g5agrwz ellipsis-box_ellipsisBox__pi1fr10 styles_Title_variant_raised__1g5agrw14 styles_Title_size_medium__1g5agrw12"><div class="user-type-button__ShapeWrapper-sc-sabyca-5 hibWpI"><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__DarkShape-sc-sabyca-4 eAnOFW" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 24px; height: 24px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-dbcc9bfd-9356-4c83-8366-0394d35741d6" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-dbcc9bfd-9356-4c83-8366-0394d35741d6">Icono</title><path d="M4,16.0038341 L16,4 L28,16.0007668 L16,28 L4,16.0038341 Z" style="fill: rgb(189, 135, 0);"></path></svg></span><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__Shape-sc-sabyca-3 cVMKuY" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 18px; height: 18px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-21a5227b-39bc-4290-bf36-8354bedf64ed" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-21a5227b-39bc-4290-bf36-8354bedf64ed">Icono</title><path d="M4,16.0038341 L16,4 L28,16.0007668 L16,28 L4,16.0038341 Z" style="fill: rgb(255, 255, 255);"></path></svg></span></div><div class="user-type-button__OptionTextWrapper-sc-sabyca-1 fHMeSf"><span class="user-type-button__OptionText-sc-sabyca-2 ZnvKh">Estudiante</span></div></div></button><button data-testid="social-button" type="button" tabindex="0" class="styles__1g5agrwo styles_BaseButton__1g5agrwa accessibility-compliant-tab-focus_accessibilityCompliantTabFocus__y0g7lb1 styles_ButtonVariants_variant_raised__1g5agrwu styles_ButtonVariants_size_medium__1g5agrws styles_ButtonVariants_fullWidth_false__1g5agrwq user-type-button__Button-sc-sabyca-0 ipSCOy" aria-label="Registrarse como Familia y amigos" style="--background__1g5agrw0: var(--colors-primary-main__uy9rl80); --onBackground__1g5agrw1: var(--colors-primary-onMain__uy9rl81); --text__1g5agrw2: var(--colors-text-accent__uy9rl87); --outline__1g5agrw3: var(--colors-primary-main__uy9rl80); --hoverBackground__1g5agrw4: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 15%); --activeBackground__1g5agrw5: color-mix(in srgb, var(--colors-primary-main__uy9rl80), var(--colors-black) 30%); --disabledBackground__1g5agrw6: var(--colors-disabled-main__uy9rl8b); --onDisabledBackground__1g5agrw7: var(--colors-disabled-onMain__uy9rl8c); --buttonHeight__1g5agrw8: var(--spacing-s40__104dd0sb); --buttonOffset__1g5agrw9: var(--spacing-s4__104dd0s2);"><div class="styles__1g5agrw10 styles_BaseTitle__1g5agrwz ellipsis-box_ellipsisBox__pi1fr10 styles_Title_variant_raised__1g5agrw14 styles_Title_size_medium__1g5agrw12"><div class="user-type-button__ShapeWrapper-sc-sabyca-5 hibWpI"><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__DarkShape-sc-sabyca-4 eAnOFW" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 24px; height: 24px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-9d753ff7-1e79-4cae-8563-54018d6357ab" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-9d753ff7-1e79-4cae-8563-54018d6357ab">Icono</title><path d="M16,27 C9.92486775,27 5,22.0751322 5,16 C5,9.92486775 9.92486775,5 16,5 C22.0751322,5 27,9.92486775 27,16 C27,22.0751322 22.0751322,27 16,27 Z" style="fill: rgb(0, 113, 0);"></path></svg></span><span class="icon__Icon-sc-xvsbpg-0 exxNNM user-type-button__Shape-sc-sabyca-3 cVMKuY" data-functional-selector="icon" style="display: inline-block; vertical-align: middle; width: 18px; height: 18px;"><svg viewBox="0 0 32 32" focusable="false" stroke="none" stroke-width="0" aria-labelledby="label-8bf60536-b889-4099-b150-6e9796e86e15" aria-hidden="true" class="icon__Svg-sc-xvsbpg-1 feLttt"><title id="label-8bf60536-b889-4099-b150-6e9796e86e15">Icono</title><path d="M16,27 C9.92486775,27 5,22.0751322 5,16 C5,9.92486775 9.92486775,5 16,5 C22.0751322,5 27,9.92486775 27,16 C27,22.0751322 22.0751322,27 16,27 Z" style="fill: rgb(255, 255, 255);"></path></svg></span></div><div class="user-type-button__OptionTextWrapper-sc-sabyca-1 fHMeSf"><span class="user-type-button__OptionText-sc-sabyca-2 ZnvKh">Familia y amigos</span></div></div></button></div>
Explicación del problema detectado:
Aquí vemos dos maneras de no cumplir:
- Al acceder al proceso de registro de la página de Kahoot!, se muestra una pantalla en la que se solicita seleccionar el perfil de uso (Profesor, Profesional, Estudiante o Familia y amigos). Al pulsar directamente sobre cualquiera de las opciones, la acción se ejecuta inmediatamente y se avanza automáticamente al siguiente paso del proceso, sin posibilidad de cancelar la acción del puntero.
- Por otro lado, el menú de idiomas que aparece en la esquina superior derecha, se dispara durante el evento "down" del mouse, y no al soltar, es decir, con el evento "up.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
- Personas con discapacidad motora: Temblor, espasticidad, parálisis cerebral, distonías, artritis, Parkinson, lesiones medulares, etc. Pueden pulsar un control sin querer o no ser capaces de mantener el puntero estable. Necesitan poder cancelar la acción desplazando el puntero fuera del elemento antes de soltar.
- Personas que usan dispositivos de entrada alternativos: Trackballs, joysticks, pulsadores, emuladores de ratón, dispositivos de acceso adaptado. Estos dispositivos suelen generar eventos de puntero menos precisos, aumentando el riesgo de activaciones accidentales.
- Personas con discapacidad visual o baja visión: Dificultad para localizar exactamente el área interactiva. Pueden pulsar un elemento equivocado y necesitan margen para rectificar antes de que la acción se ejecute.
- Personas con discapacidad cognitiva: Dificultades para procesar rápidamente cambios de contexto inesperados. Si una acción se ejecuta inmediatamente al tocar o pulsar, puede generar confusión, desorientación o pérdida del control de la interacción.
- Impedimentos temporales o situacionales: Pantallas táctiles pequeñas, uso con una sola mano, movimiento (transporte), fatiga. Aunque no tengan una discapacidad permanente, se ven afectados de forma situacional.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.menti.com/al31znzzz7e2
2.2.2 Código HTML:
<div class="m-a r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-a m-ag m-ao r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><h1 id="slide-title" data-testid="voting-title" font-size="175" font-weight="regular" class="m-ap m-aq m-ar m-as m-at r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body"><div><div contenteditable="false" role="none" translate="no" class="tiptap ProseMirror"><p>¿Cuántas patas tiene un gato?</p></div></div></h1></div><form class="flex flex-col flex-none items-start min-w-0 min-h-0 relative w-full"><fieldset class="m-a r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><legend class="sr-only">¿Cuántas patas tiene un gato?</legend><div class="m-a m-au r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><label for="019b5ffa-2f0f-7d9d-8754-29d7fdf1aa0d" data-testid="choice-0" class="r-text break-words max-w-full text-87-5 leading-normal font-semibold font-body inline-block cursor-pointer text-text w-full mb-0"><div overflow="hidden" class="m-av m-cb m-ax m-cc m-ay m-a m-c m-u m-cd m-az m-ba m-y m-z m-bb m-bc m-bd m-be m-bf m-bg m-bh m-bi r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-a m-v m-bj m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-u m-bl m-bm m-c m-ay m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="m-ce m-bn m-a m-ay m-c m-bk r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body"><span class=" r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body" style="word-break: break-word;">2 patas</span></span><div class="m-bo r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="flex gap-2 items-center justify-center check-item"><input class="appearance-none border border-solid border-border-strong cursor-pointer disabled:border-border-disabled disabled:cursor-not-allowed disabled:bg-disabled disabled:hover:bg-disabled-strong duration-100 ease-in-out transition-all focus-visible:ring-offset-2 focus-visible:ring-4 focus-visible:ring-interactive-focused focus:ring-none relative shrink-0 hover:border-secondary hover:border-2 checked:border-none r-check-item h-[28px] w-[28px] checked:bg-button-bg-primary-checked checked:hover:bg-button-bg-primary-checked-hover rounded-full" id="019b5ffa-2f0f-7d9d-8754-29d7fdf1aa0d" type="radio" value="019b5ffa-2f0f-7d9d-8754-29d7fdf1aa0d" name="choices"><svg class="block absolute pointer-events-none h-[24px] w-[24px]" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-testid="radiobutton-icon" aria-hidden="true"><circle fill="var(--color-on-secondary)" cx="12" cy="12" r="4"></circle></svg></span></div></div></div></div></label><label for="019b5ffa-2f0f-7092-bf73-15b06fb4f65e" data-testid="choice-1" class="r-text break-words max-w-full text-87-5 leading-normal font-semibold font-body inline-block cursor-pointer text-text w-full mb-0"><div overflow="hidden" class="m-av m-aw m-ax m-ay m-a m-c m-u m-q m-az m-ba m-y m-z m-bb m-bc m-bd m-be m-bf m-bg m-bh m-bi r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-a m-v m-bj m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-u m-bl m-bm m-c m-ay m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="m-aq m-bn m-a m-ay m-c m-bk r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body"><span class=" r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body" style="word-break: break-word;">3 patas</span></span><div class="m-bo r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="flex gap-2 items-center justify-center check-item"><input class="appearance-none border border-solid border-border-strong cursor-pointer disabled:border-border-disabled disabled:cursor-not-allowed disabled:bg-disabled disabled:hover:bg-disabled-strong duration-100 ease-in-out transition-all focus-visible:ring-offset-2 focus-visible:ring-4 focus-visible:ring-interactive-focused focus:ring-none relative shrink-0 hover:border-secondary hover:border-2 checked:border-none r-check-item h-[28px] w-[28px] checked:bg-button-bg-primary-checked checked:hover:bg-button-bg-primary-checked-hover rounded-full" id="019b5ffa-2f0f-7092-bf73-15b06fb4f65e" type="radio" value="019b5ffa-2f0f-7092-bf73-15b06fb4f65e" name="choices"></span></div></div></div></div></label><label for="019b5ffa-2f0f-7d0a-8f54-e45e4c3d48cc" data-testid="choice-2" class="r-text break-words max-w-full text-87-5 leading-normal font-semibold font-body inline-block cursor-pointer text-text w-full mb-0"><div overflow="hidden" class="m-av m-aw m-ax m-ay m-a m-c m-u m-q m-az m-ba m-y m-z m-bb m-bc m-bd m-be m-bf m-bg m-bh m-bi r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-a m-v m-bj m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-u m-bl m-bm m-c m-ay m-bk r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="m-aq m-bn m-a m-ay m-c m-bk r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body"><span class=" r-text break-words max-w-full text-text-weak text-100 leading-normal font-normal font-body" style="word-break: break-word;">4 patas</span></span><div class="m-bo r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><span class="flex gap-2 items-center justify-center check-item"><input class="appearance-none border border-solid border-border-strong cursor-pointer disabled:border-border-disabled disabled:cursor-not-allowed disabled:bg-disabled disabled:hover:bg-disabled-strong duration-100 ease-in-out transition-all focus-visible:ring-offset-2 focus-visible:ring-4 focus-visible:ring-interactive-focused focus:ring-none relative shrink-0 hover:border-secondary hover:border-2 checked:border-none r-check-item h-[28px] w-[28px] checked:bg-button-bg-primary-checked checked:hover:bg-button-bg-primary-checked-hover rounded-full" id="019b5ffa-2f0f-7d0a-8f54-e45e4c3d48cc" type="radio" value="019b5ffa-2f0f-7d0a-8f54-e45e4c3d48cc" name="choices"></span></div></div></div></div></label></div></fieldset><div height="100%" class="m-a m-p m-ae m-u m-l r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><div class="m-a m-c r-box flex flex-col flex-none items-start min-w-0 min-h-0 relative w-auto"><button class=" data-[has-status="false"]:disabled:bg-disabled-strong data-[has-status="false"]:disabled:text-on-disabled-strong data-[has-status="false"]:disabled:shadow-none disabled:cursor-not-allowed flex flex-row justify-center items-center text-center relative no-underline font-body font-semibold cursor-pointer rounded-full whitespace-nowrap opacity-100 duration-300 ease-in-out outline-transparent focus-visible:outline-solid focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-interactive-focused px-8 py-4 text-100 leading-125 bg-button-bg-primary text-on-primary data-[has-status="false"]:hover:bg-button-bg-primary-hover data-[has-status="false"]:active:bg-button-bg-primary-active" data-has-status="false" type="submit"><span class="opacity-0 absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center transition-opacity"></span><span data-testid="button-children" aria-hidden="false" class="flex flex-row items-center text-inherit transition-opacity opacity-100">Submit</span></button></div></div><div class="light" style="display: contents;"></div><div class="light" style="display: contents;"></div></form></div>
Explicación de la solución aplicada:
Seleccionar una opción no ejecuta la acción final. Al pulsar una respuesta (por ejemplo, “2 patas”), solo se marca la opción, no se produce ningún cambio de contexto ni avance automático, es decir, existe un paso explícito de confirmación.
La acción principal (enviar la respuesta) solo se ejecuta al activar el botón “Submit”, y el evento de puntero se ejecuta en “up" click, no en “down”, es decir el comportamiento sigue el patrón esperado de controles de formulario accesibles.
