WCAG Accessibility

Accessibility compliance statement


Accessibility compliance

This website is fully compliant with [RD 1112/2018 or UNE-EN 301 549], having been developed following the Web Content Accessibility Guidelines (WCAG), version 2.0. This is an initiative backed by various international organizations and bodies in collaboration with the World Wide Web Consortium (W3C) to promote access to Internet content for users with disabilities.

Drafting of this Accessibility statement

This statement was drafted on 11 May 2021. A self-assessment carried out internally by the body itself was used to prepare the statement. Last review of the statement: 11 May 2021.

Observations and contact details

You can contact us regarding accessibility requirements (article 10.2.a) of Royal Decree 1112/2018) to, for example:

  • Report any possible breach by this website
  • Convey other content access difficulties
  • Present any other query or suggestion for improvement related to the accessibility of the website

01. Design decisions taken to increase website Accessibility

Sufficient contrast between the text and background colour

According to WCAG 2.0 guidelines, the contrast ratio between the text and the text background must be at least 4.5 to 1. In contexts where the font is at least 24 px or 19 px bold, the minimum ratio is reduced to 3 to 1.

Special care has been taken to avoid text over images.

Not highlighting important information using only colour

Other indicators (such as icons or text to accompany colour coding or an underline in linked text) have been used so that people who cannot distinguish colours can easily understand and use the content.

Not using sense related characteristics as the sole indicator for the understanding and use of the content

Instead, a combination of positioning, colour, and labelling is used to identify content, without relying solely on images, shape, size, visual location, orientation, or sound to specify important instructions for operating or understanding content.

Design focus states to help users browse and understand where they are

The design proposed on this website does not actively hide highlighted focus states (: focus). When people use a keyboard to browse, the website includes perfectly visible focus states.

Consistent alt text is written for images

Visually impaired users often use a voice browser to “read” the website. These specialized browsers convert text to speech so that the user can hear the words on a site. When a voice browser reaches an image, it looks for alternative text that it can read aloud; if it doesn’t find any, it will often just say “image”, leaving the user unclear on what the image is and how important it is to the story.

To avoid this, all the items explaining the image are described, whilst avoiding providing generic alternative text.

If an experience cannot be accessible, use another method for users to obtain said information

Furthermore, effort has been made to provide access to the content of the website by more than one method, using different menus or suitable links to ensure fluid internal browsing.

Be as consistent and clear as possible in the design

All item functions, location, and labelling is intended to be accurate. Said items work and are identified consistently.

Clear information architecture is used, with section titles and paragraphs to organize the content. The texts are also clear and slang and idioms are avoided at all times.

02. Decisions made during web development to increase site Accessibility

Use the correct HTML elements for content

HTML elements communicate to the browser what type of content they contain and how the browser should render or process that content. The Accessibility tree is based on assumptions about the elements and their structure. This is the browser function that powers screen readers.

In this area the correct elements have been chosen for the current context, as a simple way of creating a good base for the website’s user experience.

Keyboard navigation support

Browsers support tabbing through links, forms, and button elements. This is an easy way to move around the page, but it’s very easy to accidentally interfere with this functionality: relying on CSS to move elements instead of reordering the HTML; hiding elements from the tab flow, either by spoofing buttons (with JavaScript) instead of using button elements or by disabling the tab via tabindex = ”- 1”; and hiding form elements (in a tabbed interface) but not removing them from the tab stream (so that hidden form elements can be brought into focus).

All these practices have been avoided in the development of this website in order to increase the accessibility of the content.

Understand and use HTML references

People using assistive devices may not want to browse all content in a linear fashion, but rather use an outline view (generated from markup) to find relevant content.

In this area, this website has established reference points in HTML to define specific areas, such as header (header), main content (main), contact forms (form), navigation elements or menus (nav), and footer (footer).

Use ARIA attributes only when necessary

ARIA stands for Accessible Rich Internet Applications. It is an optional but useful specification for defining ways to markup HTML that has dynamic experiences (usually controlled by JavaScript).

The purpose of using them is to communicate to the browser and assistive technology, such as web page readers, how the content is going to change or what the purpose of the content is. Dynamic error messages can call up screen readers, buttons can be linked to the content they affect, and many other useful states can be expressed at the code level.

In the development of this website, ARIA markup and tagging was used only in cases where the HTML semantics were not sufficient to describe the state or function of an object.

Give users a way to bypass top-level navigation to access main content

It is especially useful for keyboard users to be given a way to bypass top-level navigation (header) to access the main content (main). To do this a button has been provided at the top of the page (it can only be visible if active) which, when clicked, changes the current focus of the button to the top of the main content on the page. This avoids the user having to scroll through many navigation elements.

This content access button is located before the beginning of the main navigation menu.

Make descriptive links

Assistive technology is able to find all the links on a page and present them in various forms, but these links are quite impractical for links that are just “click here”.

Therefore, links have been created that clearly describe where they will take the user if they click on it, which gives them an idea of what will happen if they click on it.

Avoid images and icons in pseudo-elements

As far as possible, development has avoided creating icons in pseudo-elements which, when read by assistive technology (which relies on HTML to find the content to be displayed to users), return empty elements.

Where elements have been implemented that do have this feature, they have been tagged using aria-hidden=”true” to avoid the process described above and enhance the experience for users who use assistive technology to read the page.

Create alternative routes for users to access information

It can be difficult to turn certain components (like an SVG map or video) into accessible experiences. In such cases, for this website in particular, descriptions of the videos have been given for users who may require them.

Links are visually identifiable

The links on this website are assigned clear styles that define the focus (: focus) and active (: active) states. The outline property indicates when an element is either selected or has focus. This is useful for users who are unable to use a mouse or have poor eyesight.

The HTML document has a language attribute

The HTML lang attribute is used to identify the language of text content on the website. This information helps search engines return language-specific results and is also used by screen readers that switch between language profiles to provide the correct accent and pronunciation.

03. Alternative tools that are provided to enhance the user experience at the accessibility level

Accessibility Menu

In order to make the website browsing experience more user-friendly for users with various disabilities, an accessibility menu has been enabled that directly affects how content is presented.

These assigned styles relate to the following criteria:

Light mode
Viewing content in high contrast mode on a light background.

Dark mode
Viewing content in high contrast mode on a dark background.

This functionality highlights the text areas of the website.

Font size
Allows you to increase the size of the fonts displayed on the website.

Increases the spacing of website texts to improve their readability.

Aumenta el interlineado de los textos del sitio web para favorecer la legibilidad de los mismos.

Alternates the main website font with another monospaced font that allows for greater readability and, therefore, greater understanding of the texts for users with dyslexia.

04. Implementation of third-party software

This website uses a content manager (CMS) and software developed by third parties to run properly.

Although these tools have been verified to ensure they comply with Accessibility guidelines, they and the content manager require periodic updates. This means that at certain times between periodic Accessibility reviews some of the updates may not meet the criteria for an accessible website.

In such cases, or whenever as a user you find an Accessibility problem on this website, please do not hesitate to get in touch with us and let us know.