Glossary of Terms

Equivalent Software Definitions

Alt Text  

Alt Text is a short description of an image. An alt text can replace an image if it cannot be loaded by the browser. It is also required for accessibility purposes, allowing screen readers to convey the content of the image to the user. Alt Text is also indexed by search engines and can improve SEO. Alt text best practices are to keep the content relevant and under 250 characters. Note, if an image is purely decorative, it means it does not require an alt text. If you need additional help deciding how to use an alt text, please refer to the W3C’s alt decision tree.

Contrast Themes | Custom Color Themes

Contrast Themes is a Windows desktop system setting that allows a user to choose a background color and a text color. Hypothetically, Contrast Themes can display any color combination. Many low vision users prefer black backgrounds with bright yellow text to increase contrast. Alternatively, some users may choose a very low contrast theme, such as a tan background with sepia text, to reduce headaches and eye strain. Planning ahead for contrast themes allows you to anticipate both ends of the spectrum by simply using good contrast and luminosity within your graphics.

Color Contrast Ratios

We highly recommend checking your graphics and text with the APCA Contrast Calculator to make sure your images and text exceed the current WCAG 2.2 guidelines for color contrast.

Dark Mode

Dark mode is an accessibility feature that allows a user to change the color theme of an app or operating system to a darker color theme. It reduces visual complexity that can cause eye strain, and helps users with sensitivity to light. Our software allows you to upload a light mode version of your graphic and it will instantly calculate a dark mode version for you to customize as desired.

TIP: Be sure your website or app has a dark theme installed before you install your Smart SVGs.

Dark Themes

The terms "dark theme" and "dark mode" are used interchangeably, and can cause confusion."Dark theme" is a design term that refers to the CSS color palette consisting of darker colored backgrounds and lighter colored foreground elements. "Dark mode" is a term that refers to an OS, app, or browser setting that triggers the "dark theme" to display for the user.

However, websites and apps can be designed with any colors as their default, including using dark backgrounds and light text resembling a “dark theme”. This means that the website or app will always be displayed in the dark colors in which it was designed, whether or not a user has chosen a light or dark mode.

By contrast, some websites offer both a "light" and "dark" theme, and they let the browsers know this through a simple media query allowing the user’s preference to be displayed. This is what we mean by ensuring your website has a "dark theme" feature installed before choosing to add the “dark mode” option for your Smart SVGs. The “dark mode” version of your Smart SVG will be invoked by the browser, hopefully matching the behavior and color changes of your website interface. Without an actual “dark theme” and not having the background colors changing behind your image — issues could arise with a low contrast scenario ie: images disappearing!

If your website only has a dark color palette, and does not indicate it in CSS, your Smart SVG will load in the initial state.  In that case, design your SVG to match your website, and do not select the dark mode option.  You may still add the mobile responsive feature if you have a mobile version of your image.

Decorative 

An SVG marked as “Decorative” will not have Alt Text. Screen readers will ignore the image or icon. Please choose this option if your SVG is meant for visual, decorative purposes only and does not convey any other information to the user.

Generate Dark Theme

Equivalent will catalog color swatches from your uploaded SVG icon and recommend a dark mode version for a dark mode theme. You can choose the recommendation or edit the colors.

Light Mode

For the majority of graphics, the original design is created for Light Mode environments. This refers to a light background with dark text and graphics, and is the default setting for most user interfaces. This is the design version we ask you to upload into the software. Our software will then automatically walk you through designing a dark mode version of your image.

Long Description 

Graphics that contain essential information that can't be conveyed in a short phrase or sentence can use a Long Description to provide additional information when the Alt Text is not enough. Example: if describing a graph, also describe the conclusion reached from the data. We allow up to 2000 characters to write a more detailed descriptions for users.

Preview Background

This preview background color can be customized when designing your dark mode version of your Smart SVG. Please note, the preview background color will not be included or displayed on your final Smart SVG file. This is for design purpose only. We recommend only uploading images without any background color so the image can change to be customized for the user when they prefer to see a dark theme.

Responsive Resizing 

People experience the internet using a variety of devices with various screen sizes and resolutions. Smart SVG can adapt to the best possible layout for the user’s device through the use of media query breakpoints, the screen dimensions that trigger alterations to the graphic. When using our software you can upload a second image which is built into your Smart SVG to be swapped out when displayed below a certain breakpoint.

Responsive Breakpoints

Enter the browser window breakpoint width in pixels at which your website content changes or adapts to provide the best possible user experience on a mobile or tablet display.

Important Terms from W3C

Assistive Technologies

Hardware and/or software that:

• relies on services provided by a user agent to retrieve and render Web content

• works with a user agent or web content itself through the use of APIs, and

• provides services beyond those offered by the user agent to facilitate user interaction with web content by people with disabilities

Examples of assistive technologies that are important include the following:

• screen magnifiers, which are used to enlarge and improve the visual readability of rendered text and images;

• screen readers, which are most-often used to convey information through synthesized speech or a refreshable Braille display;

• text-to-speech software, which is used to convert text into synthetic speech;

• speech recognition software, which is used to allow spoken control and dictation;

• alternate input technologies (including head pointers, on-screen keyboards, single switches, and sip/puff devices), which are used to simulate the keyboard;

• alternate pointing devices, which are used to simulate mouse pointing and clicking.

Accessibility Tree

Tree of accessible objects that represents the structure of the user interface (UI). Each node in the accessibility tree represents an element in the UI as exposed through the accessibility API; for example, a push button, a check box, or container.

Accessible Description

An accessible description provides additional information, related to an interface element, that complements the accessible name. The accessible description might or might not be visually perceivable. 

Accessible Name

The accessible name is the name of a user interface element. Each platform accessibility API provides the accessible name property. The value of the accessible name may be derived from a visible (e.g., the visible text on a button) or invisible (e.g., the text alternative that describes an icon) property of the user interface element. See related accessible description.

A simple use for the accessible name property may be illustrated by an "OK" button. The text "OK" is the accessible name. When the button receives focus, assistive technologies may concatenate the platform's role description with the accessible name. For example, a screen reader may speak "push-button OK" or "OK button". The order of concatenation and specifics of the role description (e.g., "button", "push-button", "clickable button") are determined by platform accessibility APIs or assistive technologies.

Accessible object

A node in the accessibility tree of a platform accessibility API. Accessible objects expose various states, properties, and events for use by assistive technologies. In the context of markup languages (e.g., HTMLand SVG) in general, and of WAI-ARIA in particular, markup elements and their attributes are represented as accessible objects. 

Aural Experience - from Timbre

“Taken as a whole, the audible component of brand experience; everything a customer hears when interacting with a given company. As businesses become more attuned to the emotional state of their audiences and the degree to which sound has a such a significant impact on how audiences feel, companies are paying closer attention to the aural dimension of their brand experiences and approaching the design of Aural Experience with greater intentionality.”

Attribute

In this specification, attribute is used as it is in markup languages. Attributes are structural features added to elements to provide information about the states and properties of the object represented by the element.

Class

A set of instance objects that share similar characteristics.

Element

In this specification, element is used as it is in markup languages. Elements are the structural elements in markup language that contains the data profile for objects.

Event

A programmatic message used to communicate discrete changes in the state of an object to other objects in a computational system. User input to a web page is commonly mediated through abstract events that describe the interaction and can provide notice of changes to the state of a document object. In some programming languages, events are more commonly known as notifications.

Hidden

Indicates that the element is not visible, perceivable, or interactive to any user. An element is considered hidden if it or any one of its ancestor elements is not rendered or is explicitly hidden.

Informative

Content provided for information purposes and not required for conformance. Content required for conformance is referred to as normative.

Node

Basic type of object in the DOM tree or accessibility tree. DOM nodes are further specified as Element or Text nodes, among other types. The nodes of an accessibility tree are accessible objects. 

Normative

Required for conformance. By contrast, content identified as informative or "non-normative" is not required for conformance.

Object

In the context of user interfaces, an item in the perceptual user experience, represented in markup languages by one or more elements, and rendered by user agents.

In the context of programming, the instantiation of one or more classes and interfaces which define the general characteristics of similar objects. An object in an accessibility API may represent one or more DOMobjects. Accessibility APIs have defined interfaces that are distinct from DOM interfaces.Perceivable

Presentable to users in ways they can sense. References in this document relate to WCAG 2.1 Principle 1: Content must be perceivable [WCAG21].

Property

Attributes that are essential to the nature of a given object, or that represent a data value associated with the object. A change of a property may significantly impact the meaning or presentation of an object. Certain properties (for example, aria-multiline) are less likely to change than states, but note that the frequency of change difference is not a rule. A few properties, such as aria-activedescendant, aria-valuenow, and aria-valuetext are expected to change often. See clarification of states versus properties.

Role

Main indicator of type. This semantic association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.

Semantics

The meaning of something as understood by a human, defined in a way that computers can process a representation of an object, such as elements and attributes, and reliably represent the object in a way that various humans will achieve a mutually consistent understanding of the object.

State

A state is a dynamic property expressing characteristics of an object that may change in response to user action or automated processes. States do not affect the essential nature of the object, but represent data associated with the object or user interaction possibilities. See clarification of states versus properties.

Text node

Type of DOM node that represents the textual content of an attribute or an element. A Text node has no child nodes. 

Tooltip attribute

Any host language attribute that would result in a user agent generating a tooltip such as in response to a mouse hover in desktop user agents.

User Agent

Any software that retrieves, renders and facilitates end user interaction with Web content. This definition may differ from that used in other documents.

Widget

Discrete user interface object with which the user can interact. Widgets range from simple objects that have one value or operation (e.g., check boxes and menu items), to complex objects that contain many managed sub-objects (e.g., trees and grids).

W3C

The W3C refers to the World Wide Web Consortium, an international community where member organizations, staff, and the public work together to develop open standards for the long-term growth of the World Wide Web.

WCAG

WCAG is the acronym for the Web Content Accessibility Guidelines. This document covers a wide range of recommendations for making web content more accessible. These guidelines are utilized in most web accessibility standards and compliance.

Web Content

Web content refers to any information that may be found on a webpage, including but not limited to text, images, audio, video, and forms

Visual Perception Glossary

Curtsey of Andrew Somers, Myndex Luminance Contrast and Perception

Visible light is energy in a narrow range of frequencies or wavelengths that can be detected or sensed by "photo sensitive cells" in the back of the eye.

Color

color is not real, but a perception or interpretation by visual processing in the brain (in the brain's visual cortex) of stimulus from photosensitive cells in the eye.

• Hue — refers to a particular color sensation, i.e. red, green, yellow, blue, etc. Hue does not exist in reality, it is solely the perception of the visual system responding to light of different frequencies.

• Saturation — the color intensity or purity, reduced by:

  • tint (add white)

  • shade (add black)

  • tone (add grey)

Brightness — a relative perception, see also perceptual lightness.

Luminance (Y or L) — a physical measure of visible light intensity. Luminance is mathematically linear as light is in the real world.

Perceived Lightness (L*) — the perception of physical light intensity. Perceptual lightness is mathematically nonlinear in regards to light in the real world, however, some perceptual models attempt to provide a mathematically linear version of perception which then presents light as non-linear. The symbol L* refers to CIE L*a*b*, and should not be confused with luminance L.

Luma (Y' prime) — is a gamma encoded, weighted signal used in some video encodings. It is not to be confused with linear luminance.

Gamma — or transfer curve (TRC) is a curve that is commonly applied to image data for storage or broadcast to reduce perceived noise and improve data utilization.

Contrast — is a perception of the difference between two objects/elements. There are many forms of contrast, and the different types of contrast interact with and are affected by each other as well as being affected by other aspects of vision.

• Lightness contrast: the difference in lightness and darkness between two items. This is a particularly important form of contrast for information such as text.

• Spatial contrast: in other words contrasts of size. Size contrasts directly affect the perception of lightness contrasts.

• Hue contrast: the perception of different light frequencies. Hue contrasts are three times weaker than lightness contrasts, and some people have problems perceiving some hues, so hue should never be a primary design contrast.

• Positional contrasts: the distance and/or orientation between objects is important in object recognition and identification.

• Temporal contrasts: contrasts of time, speed, and change.

Visual Acuity — acuity refers to the ability of the eye's optics to focus light onto the photoreceptors on the back of the eye.

• Poor acuity is usually understood as blurry vision or an inability to focus.

Spatial Frequency — in a practical sense, this refers to the weight of a font, or the stroke width. A thinner font or narrower stroke width is a higher spatial frequency than a bolder or thicker stroke. Higher spatial frequencies require more luminance contrast to be visible than lower frequencies, such as a very bold large headline.