accesskey _ mod _ content

2.1 And WCAG 301-549

There has been developed and adopted a new version of the 301-549, IN the IN 301-549 v2.1.2 (2018-08) (Opens in new window)

This new version of the IN 301-549 is aligned with the version of the WCAG 2.1 and therefore introduces all new criteria.

In addition, the new version of the IN 301-549 has been declared on 21 december 2018 by the european commission as a standard harmonized system for the implementation of the Directive of Web Accessibility and therefore is the standard that applies in the spanish Public Administrations.

Quick guide to implementation WCAG 2.1 (Opens in new window)

The WCAG 2.1 (Opens in new window) introduces 17 new criteria in accordance, 12 of which have an adequate standard of compliance with or AA. These are:

  • 1.3 Adaptable pattern:
    • 1.3.4 Guidance (AA)
    • 1.3.5 Identify the purpose of the entry (AA)
    • 1.3.6 Identify the purpose (AAA)
  • 1.4 Distinct pattern:
    • 1.4.10 Reflux (AA)
    • 1.4.11 Contrast no text (AA)
    • 1.4.12 Text Spacing (AA)
    • 1.4.13 Contained in the cursor or focus (AA)
  • 2.1 Keyboard Accessible pattern:
    • 2.1.4 Shortcut keys of characters (A)
  • 2.2 Pattern Time:
    • 2.2.6 Waiting times (AAA)
  • 2.3 Pattern convulsions and physical reactions:
    • 2.3.3 Animation interactions (AAA)
  • Pattern 2.5 modalities of entry:
    • 2.5.1 Pointer Gestures (A)
    • 2.5.2 Cancellation of the pointer (A)
    • 2.5.3 Label in the name (A)
    • 2.5.4 Starting of movement (A)
    • 2.5.5 Target size (AAA)
    • 2.5.6 Mechanisms simultaneous entry (AAA)
  • 4.1 Compatible pattern:
    • 4.1.3 Messages (AA)

The new criteria of conformity is included in the existing Patterns except for the pattern 2.5 “ modalities of entry ” , which is a new pattern introduced in WCAG 2.1. Is devoted specifically to facilitate interaction through different input devices beyond interaction through keyboard, especially from mobile devices.

The accessibility standards Web content accessibility guidelines (WCAG) 2.1 ( Web Content Accessibility Guidelines 2.1 (Opens in new window) ) is the latest version of the guidelines of accessibility of Web content of the World Wide Web Consortium (W3C). The 5 june 2018 issued the final recommendation after a process of development of nearly 10 years since the issuance of Web Content Accessibility Guidelines 2.0 on 11 december 2008.

Other developments have with this new version with regard to its predecessor are:

  • 17 Have been added new criteria of conformity (5 new criteria in accordance ” level, 7 level AA and AAA level 5)
  • Have added new terms to the glossary
  • It adds a new pattern (2.5 "modalities of entry") to the second principle (Operability), passing from 12 to 13 patterns
  • It adds to the drafting of the criterion 1.3.3 specifically the color and off as a result the note by the criterion 1.4.1
  • It adds a further note the requirement 5.2.2 "" complete pages
  • It adds a further point in "optional components of the declaration of conformity" section in accordance

It is worth mentioning that this new version did not change the criteria of conformity of the WCAG 2.0 or even their numbering.

The WCAG 2.1 arise with the goal of improving the accessibility to focus on three user groups:

  • Persons with intellectual disabilities or learning
  • Persons with low vision
  • Persons with disabilities receiving from mobile devices

It was felt that the WCAG 2.0 not covered as expected the needs of certain types of disabilities such as cognitive or the needs of persons with low vision. Also, in recent years the technologies and forms to access the web content have varied significantly giving rise to situations not covered in the originally WCAG 2.0.

The WCAG 2.1 meant to meet a broader range of recommendations to make the web more accessible. These Guidelines aim to improve the accessibility of web content in desktop environments and notebooks and tablets and mobile devices.

Yes, the WCAG 2.1 have backwards compatibility with the WCAG 2.0.

The WCAG 2.1 can be regarded as a superset containing the WCAG 2.0. Those criteria in accordance with the WCAG 2.0 that were considered to be room for improvement have been supplemented with new ones more detailed criteria, but without changing the original wording of the original requirements which remain valid. Therefore, as extended by the WCAG 2.1 WCAG 2.0, there are no requirements which are not compatible with each one version and the other.

This enlargement strategy helps to make it clear that if a website is in accordance with the WCAG 2.1 will also be in accordance with the WCAG 2.0. And to the contrary, if a website is in accordance with the WCAG 2.0 is updated the WCAG 2.1 without incompatibilities.

Thus, for example, while in WCAG 2.0 called for only a contrast between the text color and color background (SC 1.4.3) in WCAG 2.1 contrast the requirement also applies to the textual content is not by adding a new criterion of conformity (SC 1.4.11).

No, as mentioned in the previous question, the criteria of conformity of the WCAG 2.0 have remained unchanged in WCAG 2.1. We can say that the WCAG 2.0 are included as is within the WCAG 2.1.

Developments are included in the form of new criteria in accordance, new definitions for explanation and a couple of new considerations to take into account in the general requirements accordingly.

No, the numbering of the criteria of conformity of the WCAG 2.0, as well as its level of conformity, remains unchanged in WCAG 2.1. Similarly, the numbering of sufficient techniques, complementary and shortcomings associated with the criteria of conformity. This way it is not necessary to change any of the existing references to the documentation of the guidelines since reports, guides, tools, etc.

To preserve the numbering of WCAG 2.0 the new criteria of conformity is added to continuation of the existing ones in the patterns. However, this strategy in which we change the numbering as a result, in the WCAG 2.1 loses the order of the criteria on the basis of their level of compliance within each pattern, where they were ordered from A level until the AA.

Thus, for example, the pattern 1.4 contained 9 criteria in accordance, since 1.4.1 level until 1.4.9 AAA level. In WCAG 2.1 are added to this pattern four new approaches in keeping with the existing numbering (1.4.10 until 1.4.13) remain all level AA.

IT introduces an important development to take into account when considering whether a web page is in accordance with the WCAG 2.1 (paragraph 5.2).

It adds a further note indicating that for a page as must also be in each variation of the page presented automatically to display different sizes (e.g. the variations of a web page “ responsive ” or adaptable). Therefore, a website with a web design adaptable (Responsive web design) with different produce absolutely for mobile, tablet and desk must comply with all the criteria in accordance in each of its possible visualizations.

One of the main objectives of the WCAG 2.1 is to improve the accessibility of web pages for persons with disabilities who access from mobile devices.

To achieve this goal have included a number of new requirements that are in this direction. However, and in direct relationship with mobile devices, the criterion in accordance 1.4.10 Reflow demands that the substance is introduced without loss of information or functionality and no need to scroll in two dimensional display Areas reduced (320x256 pixels CSS). Although this criterion is intended initially to improve the experience of persons with low vision, ensuring that can be zoom up at least 400 per cent of the original size without double scrollwheel (based on a resolution of 1280x1024), in practice and implicitly also means that the page should be “ adapt ” correctly to different sizes of window.

At the discretion of conformity is indicates that allowed the realignment of the content is also known as Web Design Adaptable (Responsive Web Design) and is seen as the most effective way to attaining this approach. Thus, among the techniques indicated is the use of media queries to establish a breach and reformat the content to different gauges. These display breakout points are exploding similarly both by reducing the size of the window or done zoom on the content.

Precisely, it has been determined a value of 320 pixels CSS like objective because it considers the size minimum feasible edit a website. It also has chosen this value because it coincides with the smallest screen mobile devices most common and because it corresponds to a large zoom 400 per cent in a browser of desktop with a width of 1280px window.

However, it is important to bear in mind that this requirement envisaged as exceptions those parts of the content and requiring a presentation and desktop publishing in two dimensions para poder transmitir su significado o para poder emplearse de forma correcta.

Within this exception may include graphics and multimedia content because we naturally have two dimensions, although it is possible until its re-dimension into the window size. A clearer exception is the case of data tables in the relations between the cells are set out in a two-dimensional context. Therefore, the data grids, in particular data tables complex, is outside the scope of this requirement.

Other content which can be regarded as an exception are those complex user interfaces as those providing dialog to edit contents must simultaneously display along with the toolbar (text editors, editors graphics, etc.). Moreover, although it is not mentioned explicitly in WCAG 2.1, could also be considered as exception forms or procedures of great complexity , both at the level of interaction and display, so that they are not reasonably operables from mobile devices.

No, the new criteria in accordance to take into account on mobile devices are more than a correct layout or display the contents.

Thus, the criterion in accordance 1.3.4 Guidance tells us that the content may not restrict its display and functionality to a single guidance of the screen (horizontal or vertical) unless such specific guidance is essential. Some users have anchored devices in a fixed position (e.g. on a wheelchair) and could not alter its guidance. For example, a user with a tablet anchored in an upright position could not access a website that show only horizontally.

The approach in accordance 2.5.1 Pointer Gestures indicates that all the functionality that utilizes multipoint gestures or dependants of the stroke conducted also must be able to carry out using a single point of contact and without strokes, through a single click a finger or with a pointer. For example, if it is possible to make a gesture of tweezers with two fingers to zoom in on a map or a linear movement to travel on the same time there must also be a couple of buttons to zoom and other buttons (e.g. wheel of four points) to the displacement. The aim of this approach is to ensure that the contents cannot operate from a large number of simple input devices so that people with mobility problems the to do.

The approach in accordance 2.5.4 Activation through Movement indicates any functionality that can operate through the movement of the device also must be able to carry out through the user interface and it should also be possible to disable this operation through the movement to prevent unintended actions. This benefits the people who have their devices anchored in fixed positions (e.g. a wheelchair) and cannot interact through the movement. It also prevents persons with mobility problems implementing certain actions accidentally in carrying out uncontrolled movements.

Furthermore, while the content will be correctly in a mobile device should not be blocked the possibility of zooming in on the same it is a mistake to use, for example, meta items with “ maximum-scale ” or “ minimum-scale ” or “ user-scalable = no ” or “ user-scalable = 0 ”.

Finally, and with a more general nature, the requirement in accordance Complete Pages indicates that for a web page can be considered as must also be possible in each of its different forms. In other words, there have also fulfilling all the criteria in accordance with the different versions of the website (mobile, tablet, desk, etc.).

In relation to the forms WCAG 2.1 included some important developments to take into account.

The approach in accordance 1.3.5 Identify the purpose of the Entry suggests that it must be able to automatically determine the purpose of the fields of data seeking information about the people. The objective is to ensure that the user applications to extract this information and communicate it to the individuals in different modalities or autofill such information to facilitate interaction with the forms.

In some cases it may seem sufficient to new types of items feature type “ tel ”, “ e-mail ”, “ password ”, etc. However, although these areas provide some information about the nature of the type of data, the categories that can be used are too generic. For example, serve to indicate that a field that is an email or phone, but not clarify what specific data to which they relate (MAY telephone or email of user or another person?).

It is therefore necessary to use alternative techniques such as attribute “ autocomplete ” of HTML 5.2 (Opens in new window) and a value that indicate the type of information requested (Opens in new window) (e.g. "name", "honorific-prefix", "given-name", "additional-name", "family-name",...).

Moreover, the criterion in accordance 2.5.3 In the Name Tag requests that the user interface components that have a text label (text or image) then your name or name accessible (label

While the WCAG 2.0 is only required a minimum contrast textual content, including the text displayed in images, in the WCAG 2.1 this requirement extends to textual content the visual information is required for its understanding or identification. Thus, it is necessary to ensure a minimum of contrast in all the visual elements needed to recognize and identify the different components that are part of the user interface and its possible states (except in the case of the inactive components). For example, the links, buttons, form fields, icons that act as liaisons (unaccompanied by text), the indicator of the keyboard focus, etc.

This requirement also applies, in general, to all those parts of the contents graphics that are necessary for your understanding. This is the case, for example, of any image that transmits information such as icons on the format of documents or those states identified indicate, notices, actions, social networks, etc. This also includes the different graphic elements forming part of diagrams, graphics or as may be the lines, the funds, the limits of the objects, forms, etc., text that could be part of the same.

This approach in accordance requires that if the user adjusts the presentation of the contents to certain standards, do not miss content or functionality. The parameters to justar are as follows:

  • Top of line : at least 1.5veces the font size.
  • Spacing : at least 2 times the size of the source.
  • Space between letters (tracking) : at least 0.12 times the size of the source.
  • Space between words : at least 0.16 times the size of the source.

To validate this approach can be used the Bookmarklet Steve Faulkner, available at https ://

This approach in accordance refers to the additional contents shown when one element receives or loses the pointer ( hover ) or the keyboard focus ( focus ), for example the pulldown menu that appears when the mouse pointer is over an item. There must be an additional mechanism to discard the additional contents without the need to move the pointer or change the keyboard focus.

What mechanism you can use to reject the additional content without the need to move the pointer or change the keyboard focus?

The proposed options are the use of the ESC key or specific button to close (the “ typical X ” or “ Close ”), while the button must now focus on the time to show the additional contents to not be necessary to shift the focus to the same.

MAY You should always be to dismiss the additional contents without the need to move the pointer or change the keyboard focus?

No if the additional contents shown an error in data entry or if you do not cover or replaces other content, it is not necessary to provide such a mechanism, as it did not hinder the display of any content.

The additional contents that shows or hides the visual presentation is controlled by the application of user and not by developers as, for example, the tooltip which shows the contents of the title attribute (title), is not affected by this criterion.

The criterion if applicable, for example, menus, pop-ups manners not custom tooltips …

In the components of the user interface (such as the form fields, buttons, links, controls to be generated by scripts as sliders, tabs, treeviews …) it is necessary for the text visible (who is your label and that serves to recognize them visually) also member of his name accessible (used by agents or user tools to display the contents to persons with disabilities).

To meet this criterion must be satisfied that the name accessible it is the content of the label accessible and can optionally set something more, but the beginning of the name accessible must be identical to the content of the label accessible, so that what is shown on screen (label) and what tools use (name accessible) begin exactly the same.

Tag name = accessible accessible + [xxxx]

Each component of user interface has a name accessible by default either the name accessible can be determined using the ARIA. If you use the ARIA, overrides the default name.

Each component of user interface has a name accessible by default (element content, value of an attribute or attachment). Below shows the name accessible by default for each component of UF:

The ui component Name accessible by default
Name accessible by default

Attachment content

Value for attribute value = ” XXXX ”

The attribute value alt = ” XXXX ”

Element content


Element content


We must see what is displayed on screen and see whether coincides with the name accessible.

Below are examples to clarify the criteria.

In the following cases the text that appears on the screen and the name accessible COINCIDE :




In the following cases the text that appears on the screen DOES NOT coincide with the name accessible :

On the screen is filled with “ Go ” and the name accessible is to “ Find ” in this site



On the screen is filled with “ Download specification ” and the name accessible is “ Download conversation specification ”




On the screen is filled with “ Search ” and the name accessible is “ find ” in this site

Find in this site

Related Material Related Material