# Patrones - Aceptar políticas de privacidad. DESY. Sistema de diseño del Gobierno de Aragón.

## Patrones Índice de páginas

Patrones

# Aceptar políticas de privacidad

Cómo pedimos información

Es común tener que aceptar obligatoriamente algún tipo de politica antes de permitir enviar un formulario.

Política de privacidad y protección de datos

Acepto la [política de privacidad y la protección de datos](#) (Obligatorio)

Mostrar código del ejemplo: includes/\_pattern.formularios-acepto-politica.njk

## Contenido

Nunjucks macro del ejemplo: includes/\_pattern.formularios-acepto-politica.njk HTML del ejemplo: includes/\_pattern.formularios-acepto-politica.njk

### Nunjucks macro del ejemplo: includes/\_pattern.formularios-acepto-politica.njk

```js
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}

{{ componentCheckboxes({
  "idPrefix": "politicas-rgpd",
  "name": "check-politicas",
  "fieldset": {
    "legend": {
      "text": "Política de privacidad y protección de datos",
      "classes": "sr-only"
    }
  },
  "items": [
    {
      "value": "si",
      "html": 'Acepto la <a href="#" class="c-link">política de privacidad y la protección de datos</a> (Obligatorio)'
    }
  ]
})  }}
```

### HTML del ejemplo: includes/\_pattern.formularios-acepto-politica.njk

```html
<!-- checkboxes -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset>
    <legend class="sr-only">
      Política de privacidad y protección de datos
    </legend>
    <div class="c-checkboxes" data-module="c-checkboxes">
      <div class=" c-checkboxes__conditional-hidden">
        <div class="relative flex items-start py-base">
          <div class="flex items-center mx-sm">
            <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-3 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="politicas-rgpd" name="check-politicas" type="checkbox" value="si">
          </div>
          <div class="pt-0.5 leading-5">
            <!-- label -->
            <label class="block" for="politicas-rgpd">Acepto la <a href="#" class="c-link">política de privacidad y la protección de datos</a> (Obligatorio)</label>
            <!-- /label -->
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /checkboxes -->
```

## Sobre la política de privacidad [#](#sobre-la-poltica-de-privacidad)

### Qué es [#](#qu-es)

-   Es un documento legal en el que el titular de la web debe informar sus clientes y usuarios sobre los datos personales que se recopilan al navegar en el sitio.
-   Informar sobre qué datos recopilamos, cómo se almacenan y el tratamiento que tendrán.
-   Medidas empleadas para garantizar la seguridad y privacidad de los datos.
-   Debe cumplir el [RGPD](https://www.boe.es/buscar/doc.php?id=DOUE-L-2016-80807) y la [LOPDGDD](https://www.boe.es/buscar/act.php?id=BOE-A-2018-16673).
-   Tendrás que enlazarla en el [pie de página](componente-footer.html).

### Cuándo es obligatorio [#](#cundo-es-obligatorio)

Si alojas datos como:

-   Cookies de terceros (estadísticas, funcionales...)
-   Suscripciones y boletines
-   Blogs
-   Formularios y datos personales (nombres, direcciones, teléfonos...)

## Dónde lo utilizamos [#](#dnde-lo-utilizamos)

-   Antes de enviar un [formulario de registro](patrones-pagina-formulario.html).

## Qué componentes utilizamos [#](#qu-componentes-utilizamos)

-   [Casilla de verificación](componente-checkboxes.html)

## Accesibilidad [#](#accesibilidad)

-   Si necesitas aceptar varias políticas de privacidad, puedes incluir más items dentro del mismo `fieldset`
-   Los enlaces a la información sobre privacidad deben abarcar sólo palabras significativas. Si el enlace se abre en ventana nueva asegúrate de indicarlo en el `title` y usar el icono de enlace externo.