Post

HCI Overview Week 45 - Universal Usability & Accessibility

Posted
By Wei Xiong
13 min read
HCI Overview Week 45 - Universal Usability & Accessibility

TRACK - A

1. What is Universal Usability?

Universal Usability refers to the design and development of software systems that are accessible and effective for everyone, regardless of their individual differences such as physical abilities, cognitive capabilities, cultural backgrounds, or situational contexts. The goal is to create user interfaces that accommodate a diverse range of users, ensuring that no one is excluded due to their unique needs or limitations.

Key Points from the Lecture:

  • Inclusivity: Designing systems that cater to all users, not just the able-bodied or those without disabilities.
  • Empathy Building: Encouraging designers to consider perspectives beyond their own to address the needs of varied user groups.
  • Adaptability: Ensuring that interfaces can be modified or customized to support different user requirements.
  • Comprehensive Coverage: Avoiding assumptions about the “average” user to provide broader accessibility.

2. What Broad Categories of Disabilities Are There?

Disabilities can be broadly categorized into several types, each affecting different aspects of interaction with technology:

  1. Input Disabilities:
    • Motor Impairments: Conditions like cerebral palsy, tremors, or limb deficiencies that make it difficult to use standard input devices such as mice or keyboards.
    • Speech Impairments: Challenges in using voice recognition or voice-controlled systems due to slurred speech or inability to speak.
  2. Output Disabilities:
    • Visual Impairments: Ranging from complete blindness to partial vision loss, affecting how users perceive visual information on screens.
    • Hearing Impairments: Difficulty in perceiving auditory information, impacting the use of audio-based features.
  3. Cognitive Impairments:
    • Memory Issues: Challenges in retaining information or remembering how to use certain features.
    • Attention Disorders: Difficulties in maintaining focus, which can affect the ability to interact with complex interfaces.
    • Language Processing Disorders: Struggles with understanding or using language effectively within software interactions.
  4. Temporary Disabilities:
    • Disabilities that are not permanent, such as a broken arm or temporary vision issues like a cataract, which still require accessible design solutions.

Key Points from the Lecture:

  • Diversity Within Categories: Each broad category encompasses a range of specific conditions with varying degrees of severity.
  • Customization Needs: Assistive technologies often need to be tailored to individual users within these categories to be effective.
  • Overlap and Interaction: Users may experience multiple types of disabilities simultaneously, necessitating multifaceted design approaches.

3. Why Do We Have to Consider Disabilities When Designing User Interfaces?

Considering disabilities in UI design is crucial for several reasons:

  1. Inclusivity and Accessibility:
    • Ensures that all individuals, regardless of their abilities, can access and use software effectively.
    • Prevents exclusion of users who rely on assistive technologies.
  2. Legal and Ethical Responsibilities:
    • Compliance with accessibility laws and standards (e.g., ADA, WCAG) is often mandatory.
    • Ethical commitment to equity and equal access for all users.
  3. Enhanced User Experience:
    • Designing for accessibility can lead to better overall usability for everyone, not just those with disabilities.
    • Features like keyboard navigation, screen reader compatibility, and adjustable contrast settings benefit a wider audience.
  4. Empathy and Social Responsibility:
    • Fosters a deeper understanding and empathy towards users with different needs.
    • Encourages designers to think beyond their personal experiences and biases.
  5. Market Reach and Usability:
    • Expanding the usability of software to include users with disabilities can increase the potential user base.
    • Accessible designs often lead to innovations that improve functionality and user satisfaction for all users.

Key Points from the Lecture:

  • Removing Obstacles: Good UI design can eliminate barriers that prevent individuals with disabilities from using software.
  • Temporary Disabilities: Accessible designs also support users who may experience temporary impairments, ensuring flexibility and resilience in usage.

4. What is Internationalization and Localization of Software?

Internationalization (i18n) and Localization (l10n) are processes that enable software to be adapted for different languages, cultures, and regions without requiring significant redesign.

  1. Internationalization (i18n):
    • Definition: The process of designing and developing software so that it can be easily adapted to various languages and regions.
    • Focus Areas:
      • Character Support: Ensuring the software can handle different character sets and scripts.
      • Cultural Formats: Accommodating variations in date and time formats, currency, measurements, and other locale-specific data.
      • Directionality: Supporting both left-to-right and right-to-left text orientations.
      • Politeness and Formality Levels: Adjusting language usage to fit cultural norms.
  2. Localization (l10n):
    • Definition: The process of adapting internationalized software for a specific region or language by translating text and modifying cultural elements.
    • Focus Areas:
      • Translation: Converting user interface text, documentation, and other content into the target language.
      • Cultural Adaptation: Adjusting images, colors, symbols, and other design elements to align with local cultural preferences and sensitivities.
      • Functional Adjustments: Modifying functionalities that may not be relevant or appropriate in the target locale (e.g., legal requirements, privacy settings).

Key Points from the Lecture:

  • Separation of Concerns: Internationalization involves preparing the software for localization, which is the actual adaptation for a specific locale.
  • Beyond Translation: Localization encompasses more than just language translation; it includes adapting various aspects of the software to fit cultural and regional norms.
  • Practical Implementation: Developers should avoid hardcoding strings and instead use databases or resource files that can be easily translated and modified for different locales.
  • Technical Considerations: Addressing differences in text direction, date formats, currency, and other locale-specific elements is essential for creating truly localized software.

TRACK - B

1. What is Accessibility?

Accessibility in the context of web design refers to the practice of creating websites and web applications that can be used by as many people as possible, including those with various disabilities. The goal is to ensure that everyone, regardless of their physical, sensory, cognitive, or technical abilities, can access, navigate, understand, and interact with web content effectively.

Key Points from the Lecture:

  • Inclusivity: Accessibility aims to make web content usable for people with disabilities, such as visual impairments, hearing impairments, motor disabilities, and cognitive challenges.
  • Usability Enhancements: Features like keyboard navigation and descriptive alternative text (alt text) for images not only aid users with disabilities but also improve the overall user experience for everyone.
  • Myths Debunked:
    • Cost Misconception: While retrofitting accessibility features into an existing design can be costly, integrating accessibility considerations from the start is manageable and becomes a natural part of the development process.
    • Perfection Not Required: Achieving 100% accessibility is often unrealistic, especially for complex or highly interactive web applications. However, striving to make interfaces as accessible as possible is both feasible and beneficial.
  • Legal and Ethical Obligations: Public services and institutions, such as universities and government websites, are often required by law to adhere to specific accessibility standards to ensure equal access for all users.

2. How to Write Accessible HTML

Writing accessible HTML involves using semantic elements and proper structuring to ensure that web content is understandable and navigable by assistive technologies like screen readers. Here are some fundamental practices highlighted in the lecture:

Key Practices:

  1. Use Semantic Elements:

    • Proper Tagging: Utilize HTML elements according to their intended purpose. For example, use <button> for buttons instead of <div> elements styled to look like buttons.
    • Headings Structure: Employ heading tags (<h1>, <h2>, etc.) to create a logical document structure, which aids in navigation and comprehension for users relying on screen readers.

  2. Provide Meaningful Labels:

    • Form Inputs:

      Use

      1

      <label>

      elements associated with form controls to describe their purpose. For instance:

      1
2

      <label for="username">Username:</label>
<input type="text" id="username" name="username">

    • Descriptive Text: Ensure that all interactive elements have clear and descriptive text to convey their function.

  3. Alternative Text for Images and Media:

    • Alt Attributes:

      Include

      1

      alt

      attributes for

      1

      <img>

      tags to describe the content of images.

      1
2
3
4
5

      html
     
     
      
<img src="profile.jpg" alt="Profile picture of John Doe">

    • Captions and Transcripts: Provide captions for videos and transcripts for audio content to assist users with hearing impairments.

  4. Ensure Keyboard Accessibility:

    • Focusable Elements: All interactive elements should be accessible via keyboard navigation (e.g., using the Tab key).
    • Avoid Keyboard Traps: Ensure that users can navigate out of any interactive component without requiring a mouse.

  5. Use Clear and Simple Language:

    • Readable Text: Write content in clear, concise language to enhance understanding, especially for users with cognitive impairments.
    • Avoid Jargon: Minimize the use of complex terminology unless necessary, and provide explanations when used.

  6. Accessible Forms:

    • Fieldsets and Legends: Use <fieldset> and <legend> to group related form controls, providing context for users.
    • Error Messages: Clearly indicate and describe form validation errors to guide users in correcting them.

  7. Color Contrast and Visual Design:

    • High Contrast: Ensure sufficient contrast between text and background colors to aid users with visual impairments.
    • Avoid Reliance on Color Alone: Do not use color as the sole means of conveying information (e.g., error messages should include icons or text, not just color changes).

Demonstrative Example from the Lecture:

  • Bad Semantics:

    1
2
3
4

      
  
   
<div style="font-size: 24px;">Header</div>
    • Issue: Using a <div> with styling to represent a header element lacks semantic meaning, making it harder for screen readers to interpret.

  • Good Semantics:

    1

    <h1>Header</h1>
    • Benefit: The <h1> tag provides semantic meaning, indicating a top-level heading, which aids in navigation and understanding for assistive technologies.

3. What is WAI-ARIA and When is it Used?

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a set of attributes that can be added to HTML elements to enhance accessibility, especially for complex and dynamic web applications. It is designed to bridge gaps in native HTML accessibility, allowing developers to create more interactive and accessible user interfaces.

Key Points from the Lecture:

  1. Purpose of WAI-ARIA:

    • Enhance Semantic Meaning: Provides additional semantic information to elements that may not be inherently accessible.
    • Support Dynamic Content: Facilitates accessibility in applications with dynamic content updates, such as single-page applications (SPAs) and interactive widgets.

  2. When to Use WAI-ARIA:

    • Custom Interactive Elements: When creating custom UI components (e.g., custom buttons, tabs, modals) that do not use native HTML elements, WAI-ARIA can define roles, states, and properties to make them accessible.
    • Complex UI Structures: In scenarios where standard HTML does not sufficiently convey the structure or behavior of interactive elements to assistive technologies.
    • Live Regions: To notify assistive technologies of dynamic content changes, such as updates to a live chat window or real-time notifications.

  3. Core WAI-ARIA Concepts:

    • Roles: Define the type of element (e.g., role="navigation", role="button").
    • States and Properties: Indicate the current condition or configuration of an element (e.g., aria-expanded="true" for a collapsible section).
    • Landmarks: Help users navigate to specific regions of a page (e.g., role="main", role="search").

  4. Examples of WAI-ARIA Usage:

    • Navigation Menu:

      1
2
3
4
5
6

      <nav role="navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

    • Accessible Modal:

      1
2
3
4
5

      <div role="dialog" aria-labelledby="dialogTitle" aria-modal="true">
  <h2 id="dialogTitle">Modal Title</h2>
  <p>Modal content goes here.</p>
  <button aria-label="Close">X</button>
</div>

  5. Best Practices:

    • Use Native HTML When Possible: Prefer native HTML elements with built-in accessibility over custom elements with WAI-ARIA roles.
    • Avoid Overusing WAI-ARIA: Do not add unnecessary WAI-ARIA attributes to elements that are already accessible through native HTML.
    • Keep It Updated: Ensure that WAI-ARIA attributes accurately reflect the current state and behavior of interactive elements, especially when their state changes dynamically.

Demonstrative Example from the Lecture:

  • Live Updates Without WAI-ARIA:

    1
2
3
4

    <div>
  <h1>Random Quote</h1>
  <p>20 years from now, you will be more disappointed by the things that you didn't do than by the ones you did do.</p>
</div>
    • Issue: When the content updates dynamically, screen readers may not be notified of the changes.

  • Live Updates With WAI-ARIA:

    1
2
3
4

    <div aria-live="assertive">
  <h1>Random Quote</h1>
  <p>20 years from now, you will be more disappointed by the things that you didn't do than by the ones you did do.</p>
</div>
    • Benefit: The aria-live="assertive" attribute informs assistive technologies to announce the updated content immediately.

4. How Internationalization Can Be Implemented on the Web (In Broad Strokes)

Internationalization (i18n) is the process of designing and preparing web applications to support multiple languages and cultural contexts without requiring significant changes to the underlying codebase. This enables Localization (l10n), which is the actual adaptation of the application for a specific language and region.

Broad Steps to Implement Internationalization on the Web:

  1. Externalize Text Content:

    • Avoid Hardcoded Strings: Refrain from embedding fixed text within the HTML or JavaScript. Instead, store all user-facing text in separate files or databases.

    • Use Labels and Placeholders:

      Implement

      1

      data-local

      attributes or similar mechanisms to mark elements that require localization.

      1

      <span data-local="todo">To-Do</span>

  2. Utilize Internationalization Libraries:

    • Polyglot.js Example:

      Use libraries like Polyglot.js to manage translations and handle the insertion of localized text based on the selected language.

      1
2
3
4
5
6
7
8
9

      const polyglot = new Polyglot();
polyglot.extend({
  "todo": "To-Do",
  "addTask": "Add Task"
});
document.querySelectorAll('[data-local]').forEach(element => {
  const key = element.getAttribute('data-local');
  element.innerText = polyglot.t(key);
});

  3. Manage Language Resources:

    • Translation Files:

      Create separate JSON or similar files for each supported language containing key-value pairs of translations.

      1
2
3
4
5
6
7
8
9
10
11

      // en.json
{
  "todo": "To-Do",
  "addTask": "Add Task"
}
     
// da.json
{
  "todo": "Gøremül",
  "addTask": "Tilføj Opgave"
}

  4. Implement Language Switching Mechanism:

    • Language Flags: Provide a user interface element (e.g., dropdown menu, buttons) that allows users to select their preferred language.

    • Dynamic Content Loading:

      Upon selection, load the corresponding translation file and update the UI elements accordingly.

      1
2
3
4
5
6
7
8
9
10
11

      function switchLanguage(lang) {
  fetch(`${lang}.json`)
    .then(response => response.json())
    .then(translations => {
      polyglot.extend(translations);
      document.querySelectorAll('[data-local]').forEach(element => {
        const key = element.getAttribute('data-local');
        element.innerText = polyglot.t(key);
      });
    });
}

  5. Handle Date, Time, and Number Formats:

    • Locale-Specific Formatting:

      Use JavaScript’s

      1

      Intl

      API or similar libraries to format dates, times, numbers, and currencies according to the user’s locale.

      1
2

      javascript const formatter = new Intl.DateTimeFormat('da-DK');
console.log(formatter.format(new Date())); // Outputs date in Danish format

  6. Support Text Directionality:

    • Right-to-Left (RTL) Languages:

      Ensure that the layout accommodates RTL languages like Arabic and Hebrew by setting the

      1

      dir

      attribute appropriately.

      1

      <html lang="ar" dir="rtl">

  7. Avoid Cultural Biases:

    • Cultural Sensitivity: Be mindful of colors, symbols, images, and content that may have different meanings or connotations in different cultures.
    • Flexible Layouts: Design responsive and adaptable layouts that can accommodate varying text lengths and orientations.

  8. Test Across Languages and Cultures:

    • User Testing: Conduct usability testing with native speakers and users from different cultural backgrounds to identify and rectify localization issues.
    • Automated Tools: Utilize automated testing tools to check for consistency and completeness in translations.

Demonstrative Example from the Lecture:

  • Localizing a To-Do List Application:

    1
2
3

    <!-- HTML with data-local attributes -->
<span data-local="todo">To-Do</span>
<button data-local="addTask">Add Task</button>

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    // JavaScript using Polyglot.js for localization
const polyglot = new Polyglot();
const languages = {
  "en": { "todo": "To-Do", "addTask": "Add Task" },
  "da": { "todo": "Gøremül", "addTask": "Tilføj Opgave" }
};
  
function switchLanguage(lang) {
  polyglot.extend(languages[lang]);
  document.querySelectorAll('[data-local]').forEach(element => {
    const key = element.getAttribute('data-local');
    element.innerText = polyglot.t(key);
  });
}
  
// Initial language setup
switchLanguage('en');
  
// Example of switching to Danish
switchLanguage('da');

  • Outcome: By externalizing the text and using a localization library, the application can seamlessly switch between English and Danish, updating all relevant UI elements without altering the core HTML structure.

Human Computer Interaction, Overview
This post is licensed under CC BY 4.0 by the author.