Use Sophia to knock out your gen-ed requirements quickly and affordably. Learn more
×

Accessibility With Digital Media

Author: Sophia

what's covered
Accessibility in digital media refers to the practice of designing and developing digital content, platforms, and tools so that all individuals, including those with disabilities, can access and interact with them without barriers. This means ensuring that websites, applications, and other digital resources are usable by people with a wide range of abilities and disabilities, including visual, auditory, physical, speech, cognitive, and neurological disabilities. In this lesson, you will learn about key aspects of visual communication required for efficacy in web and mobile platforms. Specifically, this lesson will cover:

Table of Contents

1. Perceivability

Perceivability, also referred to as perceptibility, ensures that users can perceive the information being presented, such as providing text alternatives for non-text content and making content adaptable to different formats. This principle is part of the Web Content Accessibility Guidelines (WCAG) and focuses on making content available through multiple sensory channels, such as sight, hearing, and touch. The Web Content Accessibility Guidelines (WCAG) are a set of international standards designed to ensure that web content is accessible to all users, including those with disabilities. These guidelines are developed by the World Wide Web Consortium (W3C) under the Web Accessibility Initiative (WAI). The World Wide Web Consortium (W3C) is the primary international organization responsible for developing and maintaining web standards. Web standards are guidelines and specifications created to ensure the web’s long-term growth and consistency. The W3C’s mission is to ensure the long-term growth of the web by creating protocols and guidelines that keep the web open, accessible, and interoperable. The Web Accessibility Initiative (WAI) is a specialized division within the World Wide Web Consortium (W3C) dedicated to making the web accessible to everyone.

Providing text alternatives for non-text content, such as images, videos, and audio, makes information available for users with vision impairments. This includes alt text for images, captions for videos, and transcripts for audio content. These alternatives ensure that users who cannot see or hear the content can still understand it. Alt text, or alternative text, is a brief, descriptive text associated with an image in digital content. Content should be adaptable, allowing for versatility. Adaptable content refers to digital content designed to adjust and respond to the preferences, behaviors, and contexts of different users. This approach ensures that content can be modified in real time or presented in various formats to meet the needs of diverse audiences, ensuring that content can be presented in different ways without losing meaning—for example, allowing text to be resized without breaking the layout or providing content that can be read by screen readers. While content should be adaptable, it must also be distinguishable. Distinguishable content refers to content that is easier for users to see by ensuring that foreground information is clearly separated from the background. Users must also be able to hear audio files clearly. Creating distinguishable content includes using sufficient color contrast between text and background, avoiding the use of color alone to convey information, and ensuring that audio content is clear and not too loud.

Text resizing is another aspect of perceptibility that touches on both adaptable and distinguishable content. Allowing users to resize text up to 200% without loss of content or functionality makes it easier for users with low vision to read. Because the user can adjust the size, the content is adaptable, whereas the actual size increase makes the text distinguishable. The same can be said for audio control, allowing users to increase or decrease the volume in videos and sound effects makes the audio adaptable and distinguishable.

Other examples of perceptibility include non-text contrast and content on hover over or focus. Non-text contrast refers to the visual difference between non-text elements and their surrounding colors. This concept is important for ensuring that user interface components and graphical objects are easily distinguishable from their backgrounds. A 3:1 contrast ratio means that the luminance, or brightness, of the lighter color is three times that of the darker color. This ratio is used to ensure that non-text elements, such as icons and buttons, are distinguishable from their backgrounds, making them more accessible to people with visual impairments. For example, if a button has a light color and the background is darker, the light color should be three times brighter than the dark background to meet the 3:1 contrast ratio. Hover and focus are terms often used in web design and development to describe different states of user interaction with elements on a webpage. A hover occurs when a user places their cursor over an element without clicking it. For example, when you move your mouse over a button and it changes color, that’s a hover effect. It’s a way to provide visual feedback to users, indicating that the element is interactive. Focus is a state triggered when an element, such as a form input or a button, is selected or activated, typically by clicking on it or navigating to it using the keyboard. When an element is in focus, it usually has a visual indicator, like a border or a shadow, to show that it is ready for user input.

terms to know
Perceivability
Also referred to as perceptibility, it ensures that users can perceive the information being presented, such as providing text alternatives for non-text content and making content adaptable to different formats.
Web Content Accessibility Guidelines (WCAG)
A set of international standards designed to ensure that web content is accessible to all users, including those with disabilities.
Web Standards
Guidelines and specifications created to ensure the web’s long-term growth and consistency.
Web Accessibility Initiative (WAI)
A specialized division within the World Wide Web Consortium (W3C) dedicated to making the web accessible to everyone.
Alt Text
Also referred to as alternative text, it is a brief, descriptive text associated with an image in digital content.
Adaptable Content
Refers to digital content designed to adjust and respond to the preferences, behaviors, and contexts of different users.
Distinguishable Content
Refers to content that is easier for users to see by ensuring that foreground information is clearly separated from the background.
Non-Text Contrast
Refers to the visual difference between non-text elements and their surrounding colors.
3:1 Contrast Ratio
Means that the luminance, or brightness, of the lighter color is three times that of the darker color.
Hover
An action that takes place when a user places their cursor over an element without clicking it.
Focus
A state triggered when an element, such as a form input or a button, is selected or activated, typically by clicking on it or navigating to it using the keyboard.


2. Operability

Operability in web and mobile design refers to how easily users can interact with a product or system to achieve their goals. It focuses on making interfaces intuitive and user-friendly, ensuring that all users, regardless of their abilities, can access and use the system without unnecessary barriers. Some aspects of operability are keyboard accessibility, which is the process of ensuring that all interactive elements can be navigated and activated using a keyboard, which is crucial for users with motor disabilities. Clear navigation, or providing a logical and consistent structure for navigating through the interface, makes it easy for users to find what they need.

Responsive design is another technique for achieving operability. Responsive design is an approach to web design that ensures web pages render well on a variety of devices and screen sizes. This method adapts the layout and content of a website to provide optimal viewing and interaction.

Approximately fifty million people worldwide have epilepsy, a neurological condition associated with seizures. Certain elements like flashing lights have the capability of triggering seizures in users. Avoid content that flashes more than three times per second. This includes animations, videos, and GIFs. Steer clear of high-contrast patterns, such as stripes or checkerboards, avoid using saturated red colors in flashing content, and ensure that users can control animations, such as being able to pause, stop, or hide them. All of these factors can trigger seizures in epileptic users. Rapidly changing visuals or transitions can cause disorientation or nausea in otherwise healthy end users.

terms to know
Operability
Refers to how easily users can interact with a product or system to achieve their goals.
Keyboard Accessibility
The process of ensuring that all interactive elements can be navigated and activated using a keyboard.
Clear Navigation
Providing a logical and consistent structure for navigating through the interface.
Responsive Design
An approach to web design that ensures web pages render well on a variety of devices and screen sizes.


3. Understandability

Understandability is about ensuring that users can easily comprehend and interact with the content presented to them. This concept is crucial for creating digital experiences that are inclusive and effective, catering to a diverse range of user needs. Inclusive design is a design approach aimed at creating products, services, and environments that are usable and accessible to as many people as possible, particularly those who are often excluded. This methodology goes beyond just meeting accessibility standards; it considers the diverse needs, backgrounds, and experiences of users. The core idea of inclusive design is to recognize and address the various barriers that different user groups might face. This includes people with disabilities but also extends to those with different cultural backgrounds, languages, ages, and socio-economic statuses. By involving a wide range of users in the design process, inclusive design seeks to create solutions that work well for everyone.

Understandability focuses on the user’s ability to grasp the information and functionalities provided by a digital product without confusion or frustration. This involves several key principles and practices that designers must consider. The design should be intuitive. This means that users should be able to navigate and use the digital product with minimal effort and without needing extensive instructions. Intuitive design leverages familiar patterns and conventions, making it easier for users to understand how to interact with the product.

The content should be presented in a way that is accessible to all users, including those with disabilities. This involves using clear and readable fonts and appropriate color contrasts and providing alternative text for images. Accessibility ensures that everyone, regardless of their physical or cognitive abilities, can understand and use the digital product effectively.

Another important aspect is the use of visual aids. Visual elements such as icons, diagrams, and infographics can help to convey information more clearly and quickly than text alone. These aids can break down complex information into more digestible parts, making it easier for users to understand.

Consistency in design is also vital for understandability. Consistency refers to the practice of maintaining uniformity across all elements of a digital product or service. This principle ensures that users have a cohesive and predictable experience, which enhances usability and reduces confusion. When a digital product maintains consistent design elements, such as buttons, menus, and navigation structures, users can predict where to find information and how to perform tasks. This reduces the cognitive load on users, allowing them to focus more on the content and less on figuring out how to use the interface. Cognitive load refers to the total amount of mental effort being used in the working memory during a specific task or activity. It is a crucial concept in understanding how individuals process and retain information, especially in the context of problem solving, memory, and learning.

User testing is an essential practice in enhancing understandability. User testing is a process in product development and design where real users from the target audience interact with a product, feature, or prototype to evaluate its usability and overall user experience. By observing real users as they interact with the digital product, designers can identify areas where users struggle to understand or navigate the content. This feedback is invaluable for making iterative improvements that enhance the overall user experience.

Understandability in digital media is about making digital products that are easy to comprehend and interact with. It involves creating intuitive, accessible, visually supported, and consistent designs, and continuously refining these designs based on user feedback. By prioritizing understandability, designers can create digital experiences that are not only effective but also inclusive, ensuring that all users can benefit from the content and functionalities provided.

terms to know
Understandability
Ensuring that users can easily comprehend and interact with the content presented to them.
Inclusive Design
A design approach aimed at creating products, services, and environments that are usable and accessible to as many people as possible, particularly those who are often excluded.
Intuitive
Users can navigate and use the digital product with minimal effort and without needing extensive instructions.
Visual Aids
Visual elements such as icons, diagrams, and infographics.
Consistency
Refers to the practice of maintaining uniformity across all elements of a digital product or service.
Cognitive Load
Refers to the total amount of mental effort being used in the working memory during a specific task or activity.
User Testing
A process in product development and design where real users from the target audience interact with a product, feature, or prototype to evaluate its usability and overall user experience.


4. Robustness

Robustness refers to the creation of content that can be reliably interpreted and used by a wide variety of user agents, including web browsers, mobile devices, and assistive technologies such as screen readers. This principle is crucial for ensuring that all users, regardless of the tools they use to access digital content, can have a consistent and effective experience.

One way of achieving robustness in online content is maintaining web standards. Standards compliance, or adhering to web standards and guidelines, such as those set by the World Wide Web Consortium (W3C), ensures that content is compatible with various user agents. This includes using valid HTML, CSS, and other web technologies that are universally recognized and supported. HTML, or Hypertext Markup Language, is the standard markup language used to create and structure content on the web. It defines the elements and layout of web pages, allowing browsers to interpret and display text, images, and other multimedia elements. CSS, or Cascading Style Sheets, is a language used to describe the presentation of a document written in HTML or XML. It controls the layout, design, and visual appearance of web pages.

Implementing Accessible Rich Internet Applications (ARIA) roles, states, and properties can enhance the accessibility of dynamic content and complex user interfaces. Accessible Rich Internet Applications (ARIA) is a set of tools that help make web content and applications more accessible to people with disabilities. ARIA adds extra information to web pages so that assistive technologies, like screen readers, can understand and interact with the content better.

Designing content to work on a basic level across all browsers and devices, and then adding enhancements for more capable browsers, ensures that the core functionality is accessible to everyone. This approach is called progressive enhancement, and it prioritizes accessibility and usability, regardless of the user’s technology. Regularly testing content with various assistive technologies, such as screen readers, voice recognition software, and alternative input devices, helps identify and address potential accessibility issues. This ensures that the content remains robust and usable for all users. Ensuring that content adapts to different screen sizes and orientations is another consideration for robustness by making it accessible on a wide range of devices, from desktop computers to smartphones and tablets.

By focusing on robustness, designers and developers can create digital content that is not only accessible but also resilient to changes in technology. This approach ensures that all users, regardless of their abilities or the devices they use, can access and interact with the content effectively. Robust content contributes to a more inclusive digital environment, where everyone has equal access to information and services.

terms to know
Robustness
Refers to the creation of content that can be reliably interpreted and used by a wide variety of user agents, including web browsers, mobile devices, and assistive technologies such as screen readers.
Standards Compliance
Adhering to web standards and guidelines, such as those set by the World Wide Web Consortium (W3C).
HTML
Hypertext Markup Language, the standard markup language used to create and structure content on the web.
CSS
Controls the layout, design, and visual appearance of web pages.
Accessible Rich Internet Applications (ARIA)
A set of tools that help make web content and applications more accessible to people with disabilities.
Progressive Enhancement
Designing content to work on a basic level across all browsers and devices and then adding enhancements for more capable browsers.

summary
In this lesson, you learned about accessibility in digital media, concentrating on the importance of perceivability, operability, understandability, and robustness to make designs functional and inclusive for all users.

Source: THIS TUTORIAL WAS AUTHORED BY SOPHIA LEARNING. PLEASE SEE OUR TERMS OF USE.

Terms to Know
3:1 Contrast Ratio

Means that the luminance, or brightness, of the lighter color is three times that of the darker color.

Accessible Rich Internet Applications (ARIA)

A set of tools that help make web content and applications more accessible to people with disabilities.

Adaptable Content

Refers to digital content designed to adjust and respond to the preferences, behaviors, and contexts of different users.

Alt Text

Also referred to as alternative text, it is a brief, descriptive text associated with an image in digital content.

CSS

Controls the layout, design, and visual appearance of web pages.

Clear Navigation

Providing a logical and consistent structure for navigating through the interface.

Cognitive Load

Refers to the total amount of mental effort being used in the working memory during a specific task or activity.

Consistency

Refers to the practice of maintaining uniformity across all elements of a digital product or service.

Distinguishable Content

Refers to content that is easier for users to see by ensuring that foreground information is clearly separated from the background.

Focus

A state triggered when an element, such as a form input or a button, is selected or activated, typically by clicking on it or navigating to it using the keyboard.

HTML

Hypertext Markup Language, the standard markup language used to create and structure content on the web.

Hover

An action that takes place when a user places their cursor over an element without clicking it.

Inclusive Design

A design approach aimed at creating products, services, and environments that are usable and accessible to as many people as possible, particularly those who are often excluded.

Intuitive

Users can navigate and use the digital product with minimal effort and without needing extensive instructions.

Keyboard Accessibility

The process of ensuring that all interactive elements can be navigated and activated using a keyboard.

Non-Text Contrast

Refers to the visual difference between non-text elements and their surrounding colors.

Operability

Refers to how easily users can interact with a product or system to achieve their goals.

Perceivability

Also referred to as perceptibility, it ensures that users can perceive the information being presented, such as providing text alternatives for non-text content and making content adaptable to different formats.

Progressive Enhancement

Designing content to work on a basic level across all browsers and devices and then adding enhancements for more capable browsers.

Responsive Design

An approach to web design that ensures web pages render well on a variety of devices and screen sizes.

Robustness

Refers to the creation of content that can be reliably interpreted and used by a wide variety of user agents, including web browsers, mobile devices, and assistive technologies such as screen readers.

Standards Compliance

Adhering to web standards and guidelines, such as those set by the World Wide Web Consortium (W3C).

Understandability

Ensuring that users can easily comprehend and interact with the content presented to them.

User Testing

A process in product development and design where real users from the target audience interact with a product, feature, or prototype to evaluate its usability and overall user experience.

Visual Aids

Visual elements such as icons, diagrams, and infographics.

Web Accessibility Initiative (WAI)

A specialized division within the World Wide Web Consortium (W3C) dedicated to making the web accessible to everyone.

Web Content Accessibility Guidelines (WCAG)

A set of international standards designed to ensure that web content is accessible to all users, including those with disabilities.

Web Standards

Guidelines and specifications created to ensure the web’s long-term growth and consistency.