UX Fundamentals: Accessible Design Principles PDF

UX FundamentalsDescribe key design principles and tools that define an accessible and engaging experience. After studying this topic, you should be able to: 1. **Explain the Importance of Accessibility in UX Design** 2. **Demonstrate Knowledge of Web Accessibility Standards such as WCAG (We...

UX FundamentalsDescribe key design principles and tools that define an accessible and engaging experience. After studying this topic, you should be able to: 1. **Explain the Importance of Accessibility in UX Design** 2. **Demonstrate Knowledge of Web Accessibility Standards such as WCAG (Web Content Accessibility Guidelines)** 3. **Understand Various Strategies to Convey Meaning to Non-Sighted Users** 4. **Understand Various Techniques for Creating Inclusive Designs in Salesforce** **Introduction**\ Accessibility involves ensuring that digital products and experiences are designed to be inclusive and usable by people of all abilities. The Web Content Accessibility Guidelines (WCAG) provide standards to ensure digital content accessibility. These guidelines are based on four fundamental principles: 1. **Perceivability**: Ensuring that content is accessible to the senses, such as providing alternative text for images or making content available in different formats. 2. **Operability**: Ensuring that users can interact with all elements of the interface, such as keyboard navigation and accessible buttons. 3. **Understandability**: Ensuring that the content is clear and easy to understand for all users, including those with cognitive disabilities. 4. **Robustness**: Ensuring that content is compatible with current and future technologies, making it accessible across different devices and platforms. Designing and writing content for accessibility involves creating user interfaces that cater to diverse abilities and crafting transparent and inclusive text that ensures equal understanding and engagement for all users. **Core Principles of WCAG** 1. **Understandable**: - Design interfaces that are clear, easy to follow, and use consistent and predictable navigation. - Provide helpful error messages to guide users and prevent confusion. 2. **Perceivable**: - All information and UI components must be presented in a way that users can perceive, regardless of their sensory capabilities. - This includes text alternatives for non-text content (e.g., images) and adaptable layouts. 3. **Operable**: - The user interface and navigation must be easy to operate for all users, including those with motor impairments. - This includes features like keyboard navigation and accessible buttons or controls. 4. **Robust**: - Products should withstand technological challenges and remain compatible with different devices and assistive technologies. - Ensure that content works well across various browsers, devices, and assistive tools used by individuals with disabilities. **Accessibility**\ Accessibility is the practice of creating products and experiences that can be used and accessed by as many people as possible, regardless of their abilities or disabilities. 1. **The Goals of Accessibility**:\ The goal of accessibility is to ensure that all users, including those with visual, auditory, motor, cognitive, or other impairments, can effectively interact with and understand the content and functionality of a website, application, or digital product. 2. **Inclusivity and Equal Access**:\ Accessibility promotes inclusivity and equal access to services, enabling people with disabilities to participate in the digital world. It also benefits users with temporary impairments or situational limitations, such as using a mobile device in sunlight or accessing content in a noisy environment. **Web Content Accessibility Guidelines (WCAG)**\ Web Content Accessibility Guidelines (WCAG) are guidelines designed to make web content more accessible to all users. The following are the core principles of WCAG: 1. **Perceivable**:\ All information and UI components must be presented in a way that users can perceive, regardless of their sensory capabilities. This includes providing text alternatives for non-text content and ensuring content can be adapted for different sensory needs. 2. **Operable**:\ The user interface and navigation must be easy to operate for all users, including those with motor impairments. This includes ensuring that interfaces can be navigated using a keyboard and providing accessible controls. 3. **Understandable**:\ Design interfaces that are clear, use consistent and predictable navigation, and provide helpful error messages. This helps users understand the content and how to interact with it. 4. **Robust**:\ Products should withstand technological challenges and remain compatible with different devices and assistive technologies. This ensures that content works well across various browsers, platforms, and devices, including assistive tools like screen readers. Here are the roles and responsibilities in **alphabetical order**: 1. **Content Teams** 2. **Designers and User Experience Teams** 3. **Front-End Web and Mobile Developers** 4. **Leadership and Executives** 5. **Marketing and Design Teams** 6. **Product Managers** 7. **Program Managers** 8. **Sales Teams** 9. **Security or Procurement Teams** 10. **Support and Training** 11. **Testers and Quality Engineers** 12. **User Research** **Roles and Responsibilities**\ The following roles within the organization are essential for ensuring accessibility: 1. **Content Teams**\ Write accessible content, provide alt text for images, and create style guides. 2. **Designers and UX Teams**\ Ensure that accessibility and inclusivity are integrated into user experiences. 3. **Leadership and Executives**\ Champion accessibility, foster an inclusive and equality-driven culture. 4. **Marketing Teams**\ Ensure that all brand elements align with accessibility standards. 5. **Front-End Developers**\ Implement accessible web and mobile designs that are compatible with assistive technology. 6. **Product Managers**\ Prioritize and integrate accessibility requirements into product development. 7. **Program Managers**\ Oversee accessibility efforts and ensure teams allocate time for addressing accessibility issues. 8. **Sales Teams**\ Educate members on accessibility and demo accessible products. 9. **Support and Training**\ Provide trained agents knowledgeable about accessibility to support users effectively. 10. **Testers and QA Engineers**\ Ensure accessible code, spot bugs pre-release, and check for accessibility issues. 11. **Security Teams**\ Approve and acquire accessible tools that foster usability for all users. 12. **User Research**\ Prioritize an accessible end-to-end process that caters to users with disabilities. **Assistive Technology**\ Assistive technology refers to devices and equipment designed to assist individuals with disabilities or limitations in performing tasks and improving their functional capabilities. 1. **Bridging the Gap**\ Assistive technologies aim to bridge the gap between the abilities of individuals with disabilities and the tasks they wish to accomplish, promoting greater independence, accessibility, and inclusion. 2. **Benefits of Assistive Technology**\ Assistive technology is crucial in promoting accessibility and inclusivity for individuals with disabilities, allowing them to interact with digital content, engage in daily tasks, and contribute fully to society. **Assistive Technology Examples**\ Examples of assistive technology include: 1. **Screen Readers**\ Software that reads out on-screen text to assist individuals with visual impairments in accessing digital content. 2. **Hearing Aids**\ Devices that amplify sound for individuals with hearing loss, helping them hear more clearly. 3. **Speech Recognition Software**\ Technology that converts spoken words into text, allowing users to interact with computers or devices using their voice. 4. **Captioning Tools**\ Tools that provide a text-based representation of audio content in videos, ensuring that users with hearing impairments can comprehend the spoken information. **Designing for Web Accessibility** 1. **Layout**\ Semantic HTML landmarks and heading tags (h1 to h6) are critical components of creating accessible user interfaces. - **Heading Tags (h1 to h6)**: - Establish a clear information hierarchy on a webpage, helping screen reader users comprehend the content\'s organization. - Allow users to navigate through different page sections easily and skip to the content they are interested in. - **Semantic HTML**:\ Provides a clear structure to the content, making it understandable for both humans and assistive technologies. Semantic HTML helps create meaningful content that aids in accessibility. **Landmarks of Semantic HTML**:\ The following landmarks are essential in organizing content in a way that is both human- and machine-readable: 1. **Header** 2. **Navigation** 3. **Main Content Area** 4. **Articles** 5. **Asides** 6. **Body** 7. **Footer** These landmarks help structure a webpage and make it easier for users, especially those using assistive technologies, to navigate and understand the content. **Icons and Images** 1. **Decorative** - Decorative icons and images are used purely for visual aesthetics and do not convey critical functionality to users. - Screen readers should ignore them, as they do not add meaningful content to the user experience. 2. **Informational** - Informational icons and images have a functional purpose and convey meaningful content to users. - These icons require assistive text or ARIA labels, and images need alt descriptions that provide information about their function, not just their appearance. - Icons and images are used to convey information or actions to users and should be made accessible for all, especially those relying on assistive technologies. **Color** 1. **Color Provides Meaning** - Relying solely on color to convey meaning, such as using green, yellow, and red icons to indicate users' online presence status, can create barriers for users with visual impairments or color vision deficiencies. - Users may be unable to interpret this information, leading to exclusion from accessing critical content. It's important to use multiple cues (e.g., text labels, patterns) alongside color to ensure the information is accessible to all users. 2. **Color Contrasts Elements and Their Background** - Users with visual challenges, including those with low vision or color blindness, rely on strong contrast to access and understand content effectively. - WCAG (Web Content Accessibility Guidelines) requirements for color contrast ratios recommend the contrast ratio between text and its background to be at least **4.5:1** for regular text and **3:1** for large text. - Ensuring good contrast improves the readability and accessibility of text for users with visual impairments. **Non-Solid Backgrounds**\ When working with text on top of non-solid backgrounds, designers should consider the following principles to minimize the visual and cognitive load on the user: 1. **Limit Text Type and Size** - Non-solid backgrounds should be reserved for heading text only, and the text should be set to at least **18px**. - The text should be limited to one line to avoid navigation difficulties caused by varying background shades behind each word or line. 2. **Use Vertical Gradients** - If using gradients, designers should opt for vertical ones where the color at the top is different from the color at the bottom. - Avoid horizontal, diagonal, and radial gradients, as they can make reading challenging due to inconsistent contrast across the text. 3. **Backup Color of the Background** - Designers should always define a backup background color, as some users may disable background images for accessibility reasons. - Even without the background image, the text should remain legible and meet the contrast requirements for readability. By following these principles, designers can ensure that text remains accessible and readable on non-solid backgrounds, providing a better experience for all users. **Animations**\ Well-designed animations create a sense of orientation within the user interface, but improperly designed animations can lead to dizziness or other discomforts. UX designers should consider the following guidelines: 1. **Avoid Flashing or Blinking** - To prevent user seizures, designers should avoid animations that flash or blink more than **3 times per second**, as rapid blinking can be harmful, especially to individuals with photosensitive conditions. 2. **Be Longer Than 5 Seconds** - Animations lasting longer than **5 seconds** must offer options to **pause**, **stop**, or **hide** the animation. - This ensures that users can control animations that might be distracting or cause discomfort. By adhering to these guidelines, designers can create accessible and user-friendly animations that enhance the experience without posing risks to user health. **Triggering Dizziness**\ Rules for avoiding triggering dizziness in users: 1. **Appropriate Animation Size** - Designers should consider the size of the movement relative to the screen. Smaller animations are generally less unsettling and less likely to cause discomfort than larger ones. 2. **Perceived Distance** - Designers should be cautious with animations that represent depth, as they can disorient users. Depth effects can cause confusion or discomfort, so it\'s important to ensure that such animations are subtle and intuitive. 3. **Mismatched Directions of Movement** - Designers should avoid mismatched directions of movement, especially in **parallax effects**, where the background moves at different speeds compared to the foreground as the user scrolls. - This can create an illusion of depth and motion that may lead to disorientation. Ensuring consistent and coordinated movement in animations helps reduce the likelihood of dizziness. By following these principles, designers can minimize the chances of triggering dizziness, creating a more comfortable and accessible experience for users. **Forms**\ Accessible forms are designed with visible labels, error guidance, user support, and safeguards to ensure that all users, including those with disabilities, can complete them efficiently. 1. **Including Visible Labels** - Visible labels establish an association between form fields and their corresponding labels, making it clear which information is required. - Descriptive labels allow users with screen readers to comprehend the purpose of each form field, ensuring the form is accessible to all users. 2. **Designing Helpful Error Messages** - Error messages should clearly communicate the nature of the error and provide specific guidance on how to correct it. - This ensures users understand the problem and can take appropriate action to resolve it. 3. **Guiding Users in Completing the Form** - Clear instructions within the form help users complete it correctly. - Explanations of the expected format for each field (e.g., date format, password strength) guide users and reduce errors. 4. **Providing Safeguards** - Users should be able to review and edit their input before submitting the form, allowing them to correct any mistakes. - This safeguard ensures that users can fix any validation errors and avoid being trapped by incorrect or incomplete information. By adhering to these principles, designers can create forms that are inclusive, easy to use, and accessible to all users. **Writing for Web Accessibility** **Structure**\ Effective content formatting provides a structured organization that helps users quickly comprehend and navigate using keyboards. The following structural elements are essential for creating accessible content: 1. **Headings** - Headings help break up content into manageable sections, creating a clear hierarchy that aids in navigation and comprehension. Properly structured headings (h1 to h6) are essential for accessibility and help screen reader users understand the flow of content. 2. **Lists** - Lists organize information in a clear and readable format, making it easier for users to follow. Properly marked-up lists (ordered or unordered) help screen readers recognize and announce the content as a list. 3. **Tables** - Tables should be used for presenting tabular data, not for layout purposes. When used, they should have clear headers and provide accessible table summaries to ensure that all users, including those using assistive technologies, can interpret the data. 4. **Link Labels** - Links should have descriptive and meaningful labels, ensuring that users understand where the link will take them. Vague labels like \"click here\" or \"read more\" should be avoided in favor of more descriptive text that conveys the purpose of the link. By adhering to these structural principles, content will be better organized and more accessible, improving the overall user experience for everyone. **Writing for Web Accessibility** **Structure**\ Effective content formatting provides a structured organization that helps users quickly comprehend and navigate using keyboards. The following structural elements are essential for creating accessible content: 1. **Headings** - Headings help break up content into manageable sections, creating a clear hierarchy that aids in navigation and comprehension. Properly structured headings (h1 to h6) are essential for accessibility and help screen reader users understand the flow of content. 2. **Lists** - Lists organize information in a clear and readable format, making it easier for users to follow. Properly marked-up lists (ordered or unordered) help screen readers recognize and announce the content as a list. 3. **Tables** - Tables should be used for presenting tabular data, not for layout purposes. When used, they should have clear headers and provide accessible table summaries to ensure that all users, including those using assistive technologies, can interpret the data. 4. **Link Labels** - Links should have descriptive and meaningful labels, ensuring that users understand where the link will take them. Vague labels like \"click here\" or \"read more\" should be avoided in favor of more descriptive text that conveys the purpose of the link. By adhering to these structural principles, content will be better organized and more accessible, improving the overall user experience for everyone. \` **Headings**\ A structured heading hierarchy benefits all users, ensuring content is organized and easily navigable. Sighted users can quickly scan content by identifying headings, while screen reader users rely on headings to understand the overall structure of the page. 1. **Improving Content Readability** - Headings and subheadings help set clear user expectations by breaking content into manageable segments, improving overall readability. - Only one heading should be used for the main title of the page to ensure clarity. - Designers should avoid skipping heading levels to preserve the correct structure, maintaining a logical nesting sequence from to. 2. **Proper Formatting** - To maintain visual consistency, designers should avoid using Roman numerals, letters, or numbers for heading structure. - Headings should not be used solely for decorative purposes or simply to change the font or size of text. The heading structure should focus on the semantic meaning and function of the content. By following these principles, designers can ensure that headings not only improve accessibility but also create an organized and user-friendly experience for all. **Lists**\ Lists help organize information, allowing users to easily follow points and navigate through content efficiently. 1. **The Proper HTML Structure** - Designers should use a **numbered list** when the order of items is significant, and they should create all lists, whether bulleted or numbered, with the appropriate HTML tags for accessibility. 2. **Clear and Concise Points** - Lists should not be created through indents, bold text, or symbols like dashes, asterisks, or other non-semantic symbols. - Designers should favor concise bullet points over lengthy or compound sentences to enhance readability and comprehension. **Tables**\ Tables are an effective way to structure and present data, but they must be designed with accessibility in mind. 1. **Title and Brief Overview** - Designers should provide a clear **title** and a concise **summary** before the table. This information helps screen readers understand the table\'s purpose and content. 2. **Features of Accessible Tables** - Each cell within the table should convey a single idea. - Avoid spanning cells across multiple rows or columns, as this can disrupt the table's logical structure. - Designers should use **percentages** rather than fixed **pixel widths** to ensure the table adapts well to different screen sizes, making it accessible across all devices. By following these guidelines, designers can create lists and tables that are both structured and accessible, improving usability for all users. **Link Labels**\ Links are essential for navigation and interaction, and it's crucial to ensure they are clear, distinctive, and accessible to all users, especially those relying on screen readers. 1. **Link Destination** - Link labels should describe the **link\'s destination** instead of simply presenting the web address (URL). - Common phrases like **\"Learn more\"** or **\"Go here\"** are often too vague and lack context, making it difficult for users, especially those using screen readers, to understand the purpose of the link. 2. **Unique Link Labels** - Link labels must be **unique** to avoid confusion, as duplicate labels can make it hard for users to differentiate between links. - Unique labels help users accurately understand and select the correct link. - Using an **external link icon** provides a visual indicator for links leading to external websites, helping users recognize where the link will take them. By ensuring that link labels are descriptive, unique, and informative, designers can significantly improve the accessibility and usability of navigation for all users. **Best Practices for Using Accessible Language**\ Effective communication in UX design depends on content that is clear, concise, and easy to understand for all users. 1. **Striving for Simplicity** - Craft concise sentences and paragraphs to avoid overwhelming users with lengthy text. - Simple and straightforward language helps ensure that content is easily understood by a wide range of users. 2. **Avoiding Jargon** - Avoid using industry-specific jargon, buzzwords, idiomatic expressions, or slang that may alienate or confuse users. - Clear, plain language ensures content is accessible to a broader audience. 3. **Clarifying Abbreviations** - Abbreviations should be defined the first time they are used, followed by the acronym in parentheses. - This helps users understand unfamiliar terms and ensures clarity. 4. **Defining Unfamiliar Terms** - For any unfamiliar terms, include a glossary or explanation to help users fully engage with the content without confusion or obstacles. **Avoiding Directional and Sensory Language**\ Directional and sensory language can be barriers for users who rely on assistive technologies, such as screen readers. 1. **Directional Language** - Directional language (e.g., words that describe color, size, shape, or location) assumes a visual context, which can be challenging for users who need assistance in interpreting the design or layout. - Avoid using terms like \"above,\" \"below,\" or \"to the right,\" and instead use more descriptive language that provides context regardless of visual perception. 2. **Sensory Language** - Sensory language like \"see,\" \"hear,\" or \"watch\" excludes users with visual or auditory impairments. - By using **neutral and descriptive language**, designers can ensure content remains universally understandable and accessible to all users, regardless of sensory ability. By adhering to these practices, designers can create content that is inclusive and understandable for a broader range of users.