Instructions / download link, self-sufficient link description

Development Accessibility
1

URL: /
Criterion: 3.3.2 Labels or Instructions (AA)

All links must either contain enough information in the link text or be located within a context that describes their purpose.

In the case of the “Download an iCalendar” icon (which is a link), the surrounding markup does not allow software to programmatically extract additional information to clarify the link. Although the link itself has a title="Download" attribute, this attribute is normally ignored by the accessibility technology so it is not used as context information or link description.

image

In this case, adding some visually hidden[1] text inside the anchor tag would duplicate information that we already have next to the link. Therefore, two viable solutions are:

  1. Convert the DIV that encloses both the icon and the description text into a P tag.
  2. Enclose both the description text and the icon in an A tag and convert the button into a purely decorative element with an aria-hidden=true attribute.

I intend to go with the second solution, as that has the advantage of offering a larger surface area for users with reduced motor ability.

[1] “Visually hidden” means hidden and taken out of the document flow using CSS in a way that does not hide it from accessibility technology. A common way to do this is, for instance:

%visually-hidden {
  position: absolute;
  right: 1000vw;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}