ACCESIBILITY USE CASE

  1. Introduction & Overall analysis

This audit provides an examination of the Zoios dashboard UI with a particular focus on its alignment with established usability and accessibility standards. Each section of the UI is critically analyzed against best practices as informed by the referenced materials on accessibility and usability for UX designers.

  1. General Accessibility & Usability Observations

This is the current appearance of the dashboard and starting point of the analysis.

2a. Insufficient Color Contrast Across the UI

Issue:The dashboard utilizes a color scheme that, in certain areas, fails to provide adequate contrast between text (including graphical text) and its background, as well as among interactive elements like buttons and links.


Accessibility Concern: Low color contrast can significantly impair the ability for users with visual impairments, including those with low vision or color vision deficiencies, to read and interact with the dashboard.

2b. Inconsistent Text Hierarchy

Issue:The dashboard lacks clear text hierarchy, and several sections feature text in sizes that challenge readability, particularly for secondary information such as annotations or descriptions.

Accessibility Concern: A lack of clear text hierarchy and the use of small font sizes can significantly affect the readability and navigability of content for users, especially those with visual or cognitive disabilities.

2c. Color Dependency

Issue: The graph component relies solely on color to differentiate between data points, which may pose accessibility challenges for users with color vision deficiencies.

Accessibility Concern: Depending solely on color to convey information excludes users with various visual impairments, particularly those with color blindness.

SIDE NAVIGATION

Vertical interface element used for site navigation.

  1. Side Navigation

The side navigation as shown across different visions does not fully comply with usability for people with visual impairments for several reasons

  • Color Contrast: Insufficient for users with color vision deficiencies.

  • Icon Clarity: Not distinguishable enough for visually impaired, especially with red-green color blindness.

  • Text Legibility: ext clarity is compromised for those with color blindness.

  • Visual Hierarchy: Lacks clear structure to aid users with visual impairments.

3a. Contrast and Legibility

Issue: The text and icons lack sufficient contrast against the background, potentially reducing readability for users with visual impairments.

Accessibility Concern: Users with visual impairments, including those with color vision deficiencies, may struggle to read and interact with the interface due to insufficient contrast between text, icons, and the background.

Current colors:

Text and icon colors:

  • Regular-state icon: #A9BFB9

Background colors:

  • Background-color: #F9FDFC

Solution: To ensure optimal accessibility and legibility of our interface, we will make contrast adjustments in alignment with AAA compliance


Technique:

  • Icon Color Adjustment: The regular-state icon color will be modified from #A9BFB9 to #3B3B3B. This modification aims to ensure that the regular-state icon meets the minimum contrast ratio of 4.5:1 against the background color. WCAG Success Criterion 1.4.3: Contrast


  • Background Color Update: The background color will be changed from #F9FDFC to #FAFAFA. This update is intended to significantly enhance the contrast with text and icons, improving readability for all users.

3b. Interactive element identification

Issue: Navigation elements may not be immediately recognizable as interactive to all users, and the focus states for keyboard navigation might not be clear.

Accessibility Concern: Users may encounter difficulty in identifying interactive elements, especially those with visual impairments or who rely on keyboard navigation.


Solution: Enhance the identification and clarity of interactive elements, making them more recognizable to users.

Technique:

  1. Active-state Icon Color Modification: The active-state icon color will be modified to #06413F to ensure a minimum contrast ratio of 4.5:1 against the background.WCAG Success Criterion 1.4.11: Non-text Contrast.

  2. Background-Hovered-state Color Adjustment: Similarly, the background-hovered-state color will be adjusted to #E7F3EF.

  3. Border-current-state Addition: A border with #389991 color will be added to interactive elements in the side-nav menu. This addition aims to provide additional tactile feedback for users with full blindness.

3c. Icon Clarity and Recognition

Issue: Icons within the interface may lack clarity or fail to be easily identifiable, hindering user recognition and navigation, especially for individuals with visual impairments.

Accessibility Concern: The current icons present challenges in terms of clarity and recognizability, impacting user navigation and accessibility, particularly for those with visual impairments.

Ensuring clear and distinguishable icons is essential for facilitating seamless user interaction and adhering to accessibility standards.

Solution: To address the identified issues with icon clarity and recognition, a series of adjustments will be made to replace the existing icons with a new set that prioritizes clarity, consistency, and accessibility.


Technique: The new icons will feature distinct shapes and characteristics to ensure easy recognition and comprehension for all users.


Additionally, each icon will be accompanied by descriptive text or alternative text to enhance accessibility for users who rely on screen readers, adhering to inclusive design principles.

3d. Spacing and Size of Interactive Elements


Issue: The spacing between interactive elements is insufficient.

Accessibility Concern: Inadequate spacing between interactive elements can lead to usability issues, especially for users with fine motor control difficulties or those utilizing touch interfaces.

Insufficient spacing may result in accidental selections or difficulty in accurately targeting specific elements, impeding user navigation and interaction.

Solution: To address the accessibility concerns associated with spacing between interactive elements, adjustments will be made to enhance the spacing consistency and improve user experience.

Technique:

  1. Consistent Spacing Implementation: All interactive elements will undergo adjustment to ensure a consistent spacing of 10 pixels between each other.

  2. Element Size Enhancement: The height of interactive elements will be increased to 50 pixels, surpassing the recommended minimum touch target size of 44x44 pixels.

3e. Semantic Structure and Navigation


Issue: The semantic structure of the navigation menu may not be clear, potentially leading to confusion for users who rely on assistive technologies.

Accessibility Concern: The concern lies in ensuring that the navigation menu's organization and labeling are intuitive and understandable for all users, particularly those using assistive technologies.


Solution: Implemented a navigation structure dividing elements into two sections:

  1. Reports: Contains static information primarily for reading with minimal interaction.

  2. Tools: Houses interactive pages for performing actions rather than data analysis.


Technique: Dividing the elements into distinct sections based on their function and interaction level, users, including those who rely on assistive technologies, can easily understand and navigate the website.

3f. Logo Contrast and Branding


Issue: The prominence of the logo branding might overshadow other elements in the UI, potentially causing distraction and detracting from overall user experience.

Additionally, as the logo is an image, its content might not be accessible to users relying on screen readers without appropriate alternative text.

Accessibility Concern: Logos are central to brand identity, but their visual presentation must not compromise the accessibility of textual content.

Ensuring adequate color contrast within the logo text is crucial for readability, particularly for users with visual impairments.

Solution:
  • Color Adjustment: Implementing a gradient of colors, specifically #009793, to ensure sufficient color contrast within the logo text.
  • Alt Text Provision: Providing descriptive alternative text for the logo to convey its content and purpose to users who use screen readers.

Technique:

3g. Aria Labels


In this example, each link has an aria-label that describes its purpose.

  • The buttons used to expand the submenus have aria-controls to indicate what they control, aria-expanded to indicate whether the submenu is open or closed, and aria-label to describe the action.

  • When a submenu is expanded, aria-expanded would be set to "true" and the hidden attribute would be removed from the corresponding submenu ul.

<nav aria-label="Sidebar">
  <ul>
    <li>
      <a href="/overview" aria-label="Overview - current page">Overview</a>
    </li>
    <li>
      <button aria-controls="reports-submenu" aria-expanded="false" aria-label="Expand Reports submenu">Reports</button>
      <ul id="reports-submenu" hidden>
        <li><a href="/reports/drivers" aria-label="Drivers Report">Drivers</a></li>
        <li><a href="/reports/analyses" aria-label="Analyses Report">Analyses</a></li>
        <li><a href="/reports/lifecycle" aria-label="Lifecycle Report">Lifecycle</a></li>
      </ul>
    </li>
    <li>
      <button aria-controls="tools-submenu" aria-expanded="false" aria-label="Expand Tools submenu">Tools</button>
      <ul id="tools-submenu" hidden>
        <li><a href="/team" aria-label="Team Tools">Team</a></li>
        <li><a href="/personality" aria-label="Personality Tools">Personality</a></li>
      </ul>
    </li>
    <li>
      <a href="/journal" aria-label="Journal">Journal</a>
    </li>
    <li>
      <a href="/comments" aria-label="Comments">Comments</a>
    </li>
  </ul>
</nav>

3h. Updated design

After addressing the identified issues, the side navigation now ensures better usability for people with visual impairments:

Improved Accessibility:

  • Color Contrast: Enhanced to meet WCAG standards, ensuring sufficient contrast for users with color vision deficiencies.

  • Icon Clarity: Icons redesigned to be more distinguishable, particularly for users with red-green color blindness.

  • Text Legibility: Text clarity improved through better color choices and contrast adjustments, catering to users with color blindness.

  • Visual Hierarchy: Clear structure implemented to aid users with visual impairments, ensuring easier navigation and comprehension of content.

TOP NAVIGATION

Quick access to dashboard features.

  1. Top Navigation

The Top navigation as shown across different visions does not fully comply with usability for people with visual impairments for several reasons:


  • Title Clarity and Page Identification: The absence of a descriptive and prominently displayed page title can leave users with visual impairments unable to determine the current page and its purpose.

  • Contrast: The top navigation may lack sufficient color contrast, which is particularly challenging for users with visual impairments, making it hard to discern textual and interactive elements.

  • Search Functionality: The top navigation does not include a search function, omitting a vital tool that users with visual impairments rely on to efficiently find content.

  • Notification Feature: The absence of a notification feature in the top navigation can prevent users with visual impairments from receiving important alerts and updates that are typically highlighted visually.

4a. Title Clarity and Page Identification

Issue: The title "Overview" may not clearly stand out as the page's main header, potentially causing confusion about the page's purpose.

Accessibility Concern: Clear and distinguishable headings are essential for users to quickly understand the structure and content of web pages.


Solution:

  1. Color Contrast Enhancement: Utilizing contrasting colors to separate the title from the navigation background, enhancing its visibility and ensuring it is easily recognizable as the main heading.

  2. Custom Text Integration: Incorporating custom inline text, such as "Company Overview: Review of Latest Analytics," to provide additional context and guide user expectations.

  3. Font Size and Weight Adjustment: Modifying the font size and weight to establish a clear visual hierarchy, ensuring that the title stands out prominently as the main header on the page.

Technique:


Border-color


The choice of color for the decorative border lines is #E0E0E0, ensuring they are distinctive enough to be recognized while maintaining a pleasing aesthetic.

As purely aesthetic elements, decorative border lines are exempt from strict accessibility requirements such as color contrast ratios, as long as they do not convey critical information or functionality.

4b. Profile Card-Item Contrast and Accessibility

Issue: The contrast between the elements of the profile card and the background might be insufficient, potentially affecting the readability for users with visual impairments.

Accessibility Concern: Ensuring adequate color contrast is crucial for text visibility, especially for users with visual impairments.

Clear contrast between text and background enhances readability and usability.


Solution:

To address the accessibility concerns, the following adjustments were made:

  • Adjusted primary-text-color to #131313 and secondary-text-color to #515151 to ensure sufficient contrast

  • Modified font-weight from extra-bold to bold for the title and from thin to regular for the subtitle to improve legibility and maintain consistency.

Technique:

4c. Inclusion of Search Functionality

Best Practice: Integrating a search function facilitates users in quickly finding the information they need within the dashboard.


Accessibility issue: The absence of a search function can hinder users, especially those with specific needs or those navigating large datasets, from efficiently accessing relevant content. Providing alternative methods for content discovery is crucial for ensuring inclusivity and usability.

Solution:

  1. Icon Placement: Position the search icon before the text in the input field to align with user expectations.

  2. Color Contrast: Confirm sufficient contrast between text (#4D4D4D) and background (#F6F6F6), ensuring that the icon color (#333333) also meets accessibility standards.

  3. Text Size: Set font size to at least 14px for readability.

  4. Spacing: Provide ample spacing and padding around the input field for touch interaction

Technique:

4d. Notification Feature

Best Practice: Notifications help users stay informed about new information or changes within the dashboard.

Accessibility Concern: Without proper implementation, notifications may not be accessible to all users, particularly those relying on screen readers or users with visual impairments. Ensuring that notifications are perceivable, operable, and understandable by all users is essential for accessibility.

Solution:

  1. Integrate a notification icon: Include a visually distinct icon on the navigation bar to alert users to new information or updates.

  2. Implement ARIA live regions: Ensure that the notification alerts are announced by screen readers without requiring user focus.

  3. High contrast design: Design the notification feature with a high contrast ratio to ensure visibility and readability for users with visual impairments.

Technique:

4e. Aria Labels


  • Each element has an aria-label or an alt attribute to ensure that screen readers can provide a context-rich description to users who rely on them.

  • The aria-describedby is used to associate the notification button with additional descriptive text.

  • The hidden span (id="notification-count") is an example of how we could provide additional context to the notification button which could be dynamically shown or hidden and updated based on the number of new notifications.

<nav aria-label="Top navigation bar">
  <h1 aria-label="Page title">Company Overview: Review of latest analytics</h1>
  <form role="search" aria-label="Site search">
    <input type="search" aria-label="Search surveys, metrics, engagement levels, or insights" placeholder="Search surveys, metrics, engagement levels, or insights">
    <button type="submit" aria-label="Submit search">Search</button>
  </form>
  <div aria-label="User profile">
    <button aria-label="Notifications" aria-describedby="notification-count">
      <span id="notification-count" hidden>0 new notifications</span>
      <!-- Icon for notifications -->
    </button>
    <img src="path-to-user-image.jpg" alt="Profile picture of Anders Munk" />
    <span aria-label="User name and company">Anders Munk, Tech Agency</span>
  </div>
</nav>

3h. Updated design

After implementing the necessary changes to enhance accessibility, the top navigation would be described as follows:

  • Title Clarity and Page Identification: A clear and concise page title is now prominently displayed, providing users with visual impairments a straightforward understanding of the page's content and purpose.

  • Contrast: The top navigation has been updated with high-contrast colors, improving visibility and legibility for users with visual impairments, including those with color vision deficiencies.

  • Search Functionality: A search feature has been integrated into the top navigation, complete with an accessible design and clear labeling, enabling users with visual impairments to navigate and locate information more efficiently.

  • Notification Feature: A notification system has been added to the top navigation, designed to be accessible with visual indicators as well as auditory alerts, ensuring that users with visual impairments are promptly informed of important updates.

CARDS ITEM

Information cards with progressive bars.

  1. Cards Item

The Card-item does not fully comply with usability for people with visual impairments for the following reasons:

  • Clarity of Data Visualization: Users with color vision deficiencies may struggle to differentiate between metrics due to reliance on color alone.

  • Progress Bar and Text Legibility: Progress bars and text may not be discernible by users with color vision deficiencies due to reliance on color.

  • Font Size Issues: Text on the metrics cards may appear too small for comfortable reading.

  • Hierarchy & Borders: Lack of clear font-weight hierarchy and borders makes it difficult to prioritize information.

4a. Clarity of Data Visualization

Issue: Users with color vision deficiencies may struggle to differentiate between metrics due to the reliance on color alone to convey information in data visualization.

Accessibility Concern: Relying solely on color to distinguish between data points can pose challenges for users with color vision deficiencies, potentially leading to difficulty in interpreting the visualized data.

Solution: Ensure that the information conveyed by color is also available in a non-color format, such as text or patterns.

Technique: Ensuring that information conveyed by color differences is also available in text.

4b. Progress Bar and Text Legibility

Issue

  • While the progress bars utilize color to illustrate performance against benchmarks, they rely on color alone, which may not be discernible by users with color vision deficiencies.

  • The text sizes, particularly for the descriptive text, appear small, which may affect readability for users with visual impairments.

Accessibility

  • The progress bars' reliance on color alone to convey information might not be accessible to users with color vision deficiencies and doesn't meet WCAG guidelines for distinguishable visual elements.

  • Text must be legible for all users, including those with low vision.

Solution :
For the progress bars, adding a non-color indicator, like a pattern or hatch marks, could improve differentiation without relying solely on color.

For the text, increasing the size and ensuring that fonts are resizable will cater to a wider range of users.

Technique:

For the progress bars, use techniques such as:

  • WCAG Technique G14: Ensuring that information conveyed by color differences is also available in text.

  • WCAG Technique G182: Ensuring that additional visual cues are available when text color differences are used to convey information.

4c. Font Size Issues

Issue: The text on the metrics cards may appear too small, potentially affecting readability for users.

Accessibility Concern: Text should adhere to font size guidelines to ensure readability for all users, including those with visual impairments.


Solution: Ensure that text size meets or exceeds standard legibility requirements, accommodating users with varying visual abilities.

Technique: While there is no official minimum font size for the web, it is generally agreed upon that 14px and 16px for body text is a good starting point.


4c. Hierarchy & Borders


Issue: The UI lacks clear font-weight hierarchy, leading to difficulty in prioritizing information.

Accessibility Concern: Without visual hierarchy, users, especially those with cognitive disabilities, may struggle to identify key information.
WCAG Success Criterion 1.3.1: Info and Relationships


Solution:

  • Establish varied font-weights to guide users naturally.

  • Use bolder weights for titles and key data, and lighter weights for descriptions.

Technique for Borders: Add subtle borders to interactive elements for clearer boundaries, aiding users with visual impairments.
WCAG Success Criterion 1.4.11: Non-text Contrast


4d. Aria Labels


  • The role="slider" attribute indicates that the element is used as a slider for the visual representation of the score.

  • The aria-valuenow attribute indicates the current value, which is 73 in this case.

  • The aria-valuemin and aria-valuemax attributes define the minimum and maximum values for the slider, which are 0 and 100, respectively.

  • The aria-label provides a text description of the slider's function and current value.

  • The tabindex="0" attribute makes the slider focusable via keyboard interaction, enhancing accessibility.

<div role="article" aria-label="Well-being score card">
  <p aria-label="Current well-being score">73</p>
  <p aria-label="Context of score">Well-being score - Most recent measure</p>
  <div role="slider" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" aria-label="Current well-being score of 73 out of 100, slightly below the average score of 77" tabindex="0">
    <!-- Visual representation of the slider/bar -->
  </div>
  <p aria-label="Score interpretation">Your most recent well-being score of 73 is a little low and could be better compared to the average of 77 across companies.</p>
</div>

4e. Updated design

After implementing the necessary changes to enhance accessibility, the card items now have:

  • Clarity of Data Visualization: Implemented alternative visual cues alongside color to aid differentiation between metrics for users with color vision deficiencies.

  • Progress Bar and Text Legibility: Enhanced progress bars and text legibility to ensure readability for all users, regardless of color vision.

  • Font Size Adjustments: Increased text size on metrics cards for improved readability.

  • Hierarchy & Borders: Implemented clear font-weight hierarchy and borders to aid in prioritizing information and enhancing overall user experience.

INFORMATION PANEL

Summary and Activity Display tab.

  1. Information Panel

The lnformation panel navigation does not fully comply with usability for people with visual impairments for the following reasons:

  • Font-Weight Hierarchy Issue: Uniform font weights hinder quick recognition of informational hierarchy.

  • Text Increment Indicators Issue: The absence of clear markers for data fluctuations can obscure the understanding of trends.

  • Semantic Structure Issue: The menu's semantic layout may be unclear, which can be problematic for assistive technologies and affect navigation ease.


6a. Font-Weight Hierarchy

Issue: Uniform font-weight throughout the information panel hampers the user's ability to quickly identify the hierarchy of information.


Accessibility Concern: A clear visual hierarchy is critical for users with cognitive disabilities or low vision.

Solution: Create visual distinction using varied font-weights; bold for key data, regular for supporting text.


Technique:

6b. Text Increment Indicators

6c. Semantic Structure

Issue: The semantic structure of the information-panel menu may not be clear.

Accessibility Concern: Information and relationships should be easy to recognize for cognitive assistance.

Solution:

Implemented a navigation structure dividing elements into two sections:

  • Company: Contains static information primarily for reading with minimal interaction.

  • Activity: Houses interactive pages for performing actions rather than data analysis.


Technique:

6d. Insights Feature for Cognitive Support

Issue: Users with cognitive disabilities may struggle to interpret complex data sets.

Accessibility Concern: Summarized insights can support cognitive processing and decision-making.

Solution: Implement a feature that provides summarized insights to support users with cognitive disabilities in interpreting complex data sets.

Technique: Though not specified in WCAG, prioritizing adaptable and readable content principles aids users with cognitive disabilities.

Summarizing insights through natural language processing aligns with WCAG's compatibility goal.

6e. Aria Labels


  • The aside tag is used to represent the information panel as a complementary section of the page.

  • The aria-label attribute provides descriptive labels for different sections and elements, which will be read by screen readers.

  • The aria-labelledby attribute references the id of headings to provide context for the following content sections.

  • The numbers and associated text (like "248 Employees") are combined into a single label for clarity. If there's an interactive element to show the changes in percentage (like +20%), this can be included in the aria-label as well.

<aside aria-label="Summary panel with current status and activities">
  <h2 aria-label="Summary">Summary</h2>
  <p aria-label="Description">Current status and latest activities</p>
  <section aria-labelledby="company-info">
    <h3 id="company-info">Company</h3>
    <p aria-label="Number of active employees">248 Employees currently active</p>
    <p aria-label="Average tenure of employees">1.2 Years of tenure for all employee records</p>
    <p aria-label="Average age of active employees">31 Average age currently active</p>
  </section>
  <section aria-labelledby="activity-info">
    <h3 id="activity-info">Activity</h3>
    <p aria-label="Employee response rate with increase">95% Response rate, increased by 20% recently</p>
    <p aria-label="Number of initiatives with decrease">3 Initiatives, decreased by 2% in the last 12 months</p>
    <p aria-label="Number of new hires with increase">45 New hires, increased by 20% in the last 12 months</p>
  </section>
  <section aria-labelledby="insights-info">
    <h3 id="insights-info">Insights</h3>
    <p aria-label="Suggested action to improve team engagement">Implement new initiatives: Consider hosting brainstorming sessions to inspire team engagement and creativity.</p>
  </section>
</aside>

6f. Updated design

The information-panel navigation has been improved for better usability for people with visual impairments, and an insights feature has been added to support users with cognitive disabilities:

  • Font-Weight Hierarchy Improvement: Adjusted font weights now effectively differentiate levels of information for quicker hierarchy recognition.

  • Text Increment Indicators Enhancement: Clear markers and descriptive labels for data trends have been added for improved trend understanding.

  • Semantic Structure Clarification: The menu's semantic organization has been refined for clearer navigation and better support with assistive technologies.

  • Insights Feature Enhancement for Cognitive Support: A new feature that simplifies complex data into easily digestible insights has been introduced, aiding users with cognitive disabilities in interpreting data sets.

CHART

Line chart section

  1. Chart Section


The Chart Section does not fully comply with usability for people with visual impairments for the following reasons:

  • Contrast and Color Differentiation Issue: Insufficient contrast between the color gradients can lead to indistinct data series representation.

  • Tooltip Accessibility Issue: Limited accessibility of tooltips through keyboard navigation and screen readers may exclude users relying on assistive technologies.

  • Data Point Indicator Visibility and Interaction Issue: Indistinct and hard-to-select data points present challenges for users with motor and severe visual impairments.

  • Legibility of Data Points Issue: Small text size at data points may hinder readability, impacting users with low vision.

7a. Axes and Labels Clarity

Issue: The current axes on the chart are not sufficiently labeled, which may impede users, particularly those with cognitive disabilities, from understanding the chart's timeframe and data scale.

Accessibility Concern: Axes and data labels must be perceivable and understandable for all users, as dictated by WCAG guidelines.

Solution: Clearly label the X-axis with months to denote the timeline and the Y-axis with a numerical scale from 1 to 100 to indicate the data's magnitude.

Technique:

  • WCAG 1.3.1: Info and Relationships, to ensure that the information, structure, and relationships conveyed through presentation are programmatically determinable or are presented in text.

  • WCAG 1.4.11: Non-text Contrast, ensuring that essential graphical elements have a contrast ratio of at least 3:1 against adjacent colors.

7b. Color-coded data series are unclear to users with color vision deficiencies

Issue : Charts use color to distinguish between different data series, which can be problematic for users with color vision deficiencies, making it hard for them to interpret the data correctly.

Accessibility Concern: It's important that information is not conveyed by color alone to ensure accessibility for all users.

Solution: Enhance the chart by incorporating distinct patterns or shapes for each data series alongside the existing color coding. This modification allows users to distinguish between data series without relying solely on color.

Technique:

  • WCAG 1.4.1: Use of Color: Introducing non-color cues (patterns/shapes) to convey information, ensuring that the presentation of data is not dependent solely on color perception.

  • WCAG 1.1.1: Non-text Content: By providing text alternatives in tooltips for all non-text content, we ensure that everyone can understand what the visuals represent.

7c. Highlighted Data Series Usability and Accessibility Analysis


Issue: The current visualization highlights a data series, but the clarity and interaction with the highlighted elements may not be sufficient for users with visual or motor impairments.

Accessibility Concern: Highlighted elements in a data visualization should be easily discernible, interactive and easily selectable for users navigating with assistive technologies.

Solution: To improve accessibility, the size of interactive data point markers within the highlighted series is increased, and the border contrast enhanced for better visibility. Additionally, introducing a hover-over or focus effect that further distinguishes the active point.

Technique: Implement WCAG Technique G181, ensuring that interactive elements are not only visible but also easy to select. This includes providing a larger clickable area around the data points and utilizing visual cues.

7d. Aria Labels


  • The role="region" attribute helps screen readers identify the chart as a significant section of the page.

  • The role="img" attribute is applied to the chart container along with an aria-label that describes the overall nature of the chart. This label explains that the chart depicts three metrics, each represented by a different style of line.

  • The role="complementary" attribute on the chart key provides a semantic indication that this section complements the main content, which is the chart.

  • Each metric in the legend is described, noting the style of line that represents it on the chart.

  • The role="button" and tabindex="0" on the Filters div make it accessible as an interactive element.

  • The id="chart-tooltip" is associated with a hidden role="tooltip" that should be dynamically shown with appropriate aria-hidden toggling when data points are interacted with. The content within this tooltip would be updated based on the data point in focus or hovered over.

<div role="region" aria-label="Interactive key metrics chart from September to March, tracking well-being, stress, and eNPS. Use the keyboard or mouse to explore data points for detailed values.">
  <h2 aria-label="Section title">Key Metrics</h2>
  <div role="img" aria-label="Line chart depicting three key metrics. Solid line represents well-being, dashed line represents stress, and dotted line represents eNPS.">
    <!-- Chart implementation -->
  </div>
  <div role="complementary" aria-label="Chart key">
    <ul>
      <li aria-label="Well-being, trend shown by a solid line.">Well-being</li>
      <li aria-label="Stress, trend shown by a dashed line.">Stress</li>
      <li aria-label="eNPS, trend shown by a dotted line.">eNPS</li>
    </ul>
  </div>
  <div aria-label="Chart filter functionality" role="button" tabindex="0">Filters</div>
  <div id="chart-tooltip" role="tooltip" aria-hidden="true">
    <!-- Hidden tooltip content, to be made visible when data points are focused or hovered -->
  </div>
</div>

7e. Updated design

The Chart Section has been enhanced for optimal usability for people with visual impairments, addressing previous concerns:

  • Color and Contrast Optimization: The data series are now distinguishable without reliance on color alone, through the use of contrasting hues complemented by distinct shapes or patterns.

  • Data Point Clarity and Interaction: Data points have been redesigned with increased size and clear labeling, making them easy to select and understand, aiding users with motor or visual impairments.

  • Comparative Data View: An alternative comparative data view, has been implemented to facilitate easier analysis for all users, including those with cognitive disabilities.

RESULT

Summary of the project findings

8a. Conclusion

The comprehensive audit of the dashboard UI underscored the necessity of aligning with accessibility norms.

Notable improvements include:


  • The rectification of color contrasts, augmentation of text hierarchy, and enhancement of icon clarity, which now adhere to WCAG standards.

  • The updated side navigation provides improved legibility and interaction for visually impaired users.

  • Significant strides were made in the areas of semantic structuring and aria-label implementation, bolstering navigability for assistive technology users.


Overall, the design modifications have successfully forged a more inclusive and navigable environment, demonstrating a steadfast commitment to accessibility and setting a new benchmark for future iterations.

8b. Red Green Color Blindness

This is the most common form of color blindness. It affects approximately 8.5% of the population.

8c. Total Color Blindness

This condition is much rarer, affecting roughly 1 in 30,000 to 50,000 people worldwide. Individuals with achromatopsia cannot perceive any color at all and see the world in varying shades of gray.

8d. End Result

The before and after comparison demonstrates an improvement in accessibility, with enhanced color contrast, clear text hierarchies, and interactive elements that comply with WCAG standards, providing an inclusive user experience.

SEE MY OTHER PROJECTS

ACCESIBILITY USE CASE

  1. Introduction & Overall analysis

This audit provides an examination of the Zoios dashboard UI with a particular focus on its alignment with established usability and accessibility standards. Each section of the UI is critically analyzed against best practices as informed by the referenced materials on accessibility and usability for UX designers.

  1. General Accessibility & Usability Observations

This is the current appearance of the dashboard and starting point of the analysis.

2a. Insufficient Color Contrast Across the UI

Issue:The dashboard utilizes a color scheme that, in certain areas, fails to provide adequate contrast between text (including graphical text) and its background, as well as among interactive elements like buttons and links.


Accessibility Concern: Low color contrast can significantly impair the ability for users with visual impairments, including those with low vision or color vision deficiencies, to read and interact with the dashboard.

2b. Inconsistent Text Hierarchy

Issue:The dashboard lacks clear text hierarchy, and several sections feature text in sizes that challenge readability, particularly for secondary information such as annotations or descriptions.

Accessibility Concern: A lack of clear text hierarchy and the use of small font sizes can significantly affect the readability and navigability of content for users, especially those with visual or cognitive disabilities.

2c. Color Dependency

Issue: The graph component relies solely on color to differentiate between data points, which may pose accessibility challenges for users with color vision deficiencies.

Accessibility Concern: Depending solely on color to convey information excludes users with various visual impairments, particularly those with color blindness.

SIDE NAVIGATION

Vertical interface element used for site navigation.

  1. Side Navigation

The side navigation as shown across different visions does not fully comply with usability for people with visual impairments for several reasons

  • Color Contrast: Insufficient for users with color vision deficiencies.

  • Icon Clarity: Not distinguishable enough for visually impaired, especially with red-green color blindness.

  • Text Legibility: ext clarity is compromised for those with color blindness.

  • Visual Hierarchy: Lacks clear structure to aid users with visual impairments.

3a. Contrast and Legibility

Issue: The text and icons lack sufficient contrast against the background, potentially reducing readability for users with visual impairments.

Accessibility Concern: Users with visual impairments, including those with color vision deficiencies, may struggle to read and interact with the interface due to insufficient contrast between text, icons, and the background.

Current colors:

Text and icon colors:

  • Regular-state icon: #A9BFB9

Background colors:

  • Background-color: #F9FDFC

Solution: To ensure optimal accessibility and legibility of our interface, we will make contrast adjustments in alignment with AAA compliance


Technique:

  • Icon Color Adjustment: The regular-state icon color will be modified from #A9BFB9 to #3B3B3B. This modification aims to ensure that the regular-state icon meets the minimum contrast ratio of 4.5:1 against the background color. WCAG Success Criterion 1.4.3: Contrast


  • Background Color Update: The background color will be changed from #F9FDFC to #FAFAFA. This update is intended to significantly enhance the contrast with text and icons, improving readability for all users.

3b. Interactive element identification

Issue: Navigation elements may not be immediately recognizable as interactive to all users, and the focus states for keyboard navigation might not be clear.

Accessibility Concern: Users may encounter difficulty in identifying interactive elements, especially those with visual impairments or who rely on keyboard navigation.


Solution: Enhance the identification and clarity of interactive elements, making them more recognizable to users.

Technique:

  1. Active-state Icon Color Modification: The active-state icon color will be modified to #06413F to ensure a minimum contrast ratio of 4.5:1 against the background.WCAG Success Criterion 1.4.11: Non-text Contrast.

  2. Background-Hovered-state Color Adjustment: Similarly, the background-hovered-state color will be adjusted to #E7F3EF.

  3. Border-current-state Addition: A border with #389991 color will be added to interactive elements in the side-nav menu. This addition aims to provide additional tactile feedback for users with full blindness.

3c. Icon Clarity and Recognition

Issue: Icons within the interface may lack clarity or fail to be easily identifiable, hindering user recognition and navigation, especially for individuals with visual impairments.

Accessibility Concern: The current icons present challenges in terms of clarity and recognizability, impacting user navigation and accessibility, particularly for those with visual impairments.

Ensuring clear and distinguishable icons is essential for facilitating seamless user interaction and adhering to accessibility standards.

Solution: To address the identified issues with icon clarity and recognition, a series of adjustments will be made to replace the existing icons with a new set that prioritizes clarity, consistency, and accessibility.


Technique: The new icons will feature distinct shapes and characteristics to ensure easy recognition and comprehension for all users.


Additionally, each icon will be accompanied by descriptive text or alternative text to enhance accessibility for users who rely on screen readers, adhering to inclusive design principles.

3d. Spacing and Size of Interactive Elements


Issue: The spacing between interactive elements is insufficient.

Accessibility Concern: Inadequate spacing between interactive elements can lead to usability issues, especially for users with fine motor control difficulties or those utilizing touch interfaces.

Insufficient spacing may result in accidental selections or difficulty in accurately targeting specific elements, impeding user navigation and interaction.

Solution: To address the accessibility concerns associated with spacing between interactive elements, adjustments will be made to enhance the spacing consistency and improve user experience.

Technique:

  1. Consistent Spacing Implementation: All interactive elements will undergo adjustment to ensure a consistent spacing of 10 pixels between each other.

  2. Element Size Enhancement: The height of interactive elements will be increased to 50 pixels, surpassing the recommended minimum touch target size of 44x44 pixels.

3e. Semantic Structure and Navigation


Issue: The semantic structure of the navigation menu may not be clear, potentially leading to confusion for users who rely on assistive technologies.

Accessibility Concern: The concern lies in ensuring that the navigation menu's organization and labeling are intuitive and understandable for all users, particularly those using assistive technologies.


Solution: Implemented a navigation structure dividing elements into two sections:

  1. Reports: Contains static information primarily for reading with minimal interaction.

  2. Tools: Houses interactive pages for performing actions rather than data analysis.


Technique: Dividing the elements into distinct sections based on their function and interaction level, users, including those who rely on assistive technologies, can easily understand and navigate the website.
WCAG Success Criterion 1.3.1: Info and Relationships



3f. Logo Contrast and Branding


Issue: The prominence of the logo branding might overshadow other elements in the UI, potentially causing distraction and detracting from overall user experience.

Additionally, as the logo is an image, its content might not be accessible to users relying on screen readers without appropriate alternative text.

Accessibility Concern: Logos are central to brand identity, but their visual presentation must not compromise the accessibility of textual content.

Ensuring adequate color contrast within the logo text is crucial for readability, particularly for users with visual impairments.

Solution:

  • Color Adjustment: Implementing a gradient of colors, specifically #009793, to ensure sufficient color contrast within the logo text.
  • Alt Text Provision: Providing descriptive alternative text for the logo to convey its content and purpose to users who use screen readers.

Technique:

3g. Aria Labels


In this example, each link has an aria-label that describes its purpose.

  • The buttons used to expand the submenus have aria-controls to indicate what they control, aria-expanded to indicate whether the submenu is open or closed, and aria-label to describe the action.

  • When a submenu is expanded, aria-expanded would be set to "true" and the hidden attribute would be removed from the corresponding submenu ul.

<nav aria-label="Sidebar">
  <ul>
    <li>
      <a href="/overview" aria-label="Overview - current page">Overview</a>
    </li>
    <li>
      <button aria-controls="reports-submenu" aria-expanded="false" aria-label="Expand Reports submenu">Reports</button>
      <ul id="reports-submenu" hidden>
        <li><a href="/reports/drivers" aria-label="Drivers Report">Drivers</a></li>
        <li><a href="/reports/analyses" aria-label="Analyses Report">Analyses</a></li>
        <li><a href="/reports/lifecycle" aria-label="Lifecycle Report">Lifecycle</a></li>
      </ul>
    </li>
    <li>
      <button aria-controls="tools-submenu" aria-expanded="false" aria-label="Expand Tools submenu">Tools</button>
      <ul id="tools-submenu" hidden>
        <li><a href="/team" aria-label="Team Tools">Team</a></li>
        <li><a href="/personality" aria-label="Personality Tools">Personality</a></li>
      </ul>
    </li>
    <li>
      <a href="/journal" aria-label="Journal">Journal</a>
    </li>
    <li>
      <a href="/comments" aria-label="Comments">Comments</a>
    </li>
  </ul>
</nav>

3h. Updated design

After addressing the identified issues, the side navigation now ensures better usability for people with visual impairments:

Improved Accessibility:

  • Color Contrast: Enhanced to meet WCAG standards, ensuring sufficient contrast for users with color vision deficiencies.

  • Icon Clarity: Icons redesigned to be more distinguishable, particularly for users with red-green color blindness.

  • Text Legibility: Text clarity improved through better color choices and contrast adjustments, catering to users with color blindness.

  • Visual Hierarchy: Clear structure implemented to aid users with visual impairments, ensuring easier navigation and comprehension of content.

TOP NAVIGATION

Quick access to dashboard features.

  1. Top Navigation

The Top navigation as shown across different visions does not fully comply with usability for people with visual impairments for several reasons:


  • Title Clarity and Page Identification: The absence of a descriptive and prominently displayed page title can leave users with visual impairments unable to determine the current page and its purpose.

  • Contrast: The top navigation may lack sufficient color contrast, which is particularly challenging for users with visual impairments, making it hard to discern textual and interactive elements.

  • Search Functionality: The top navigation does not include a search function, omitting a vital tool that users with visual impairments rely on to efficiently find content.

  • Notification Feature: The absence of a notification feature in the top navigation can prevent users with visual impairments from receiving important alerts and updates that are typically highlighted visually.

4a. Title Clarity and Page Identification

Issue: The title "Overview" may not clearly stand out as the page's main header, potentially causing confusion about the page's purpose.

Accessibility Concern: Clear and distinguishable headings are essential for users to quickly understand the structure and content of web pages.


Solution:

  1. Color Contrast Enhancement: Utilizing contrasting colors to separate the title from the navigation background, enhancing its visibility and ensuring it is easily recognizable as the main heading.

  2. Custom Text Integration: Incorporating custom inline text, such as "Company Overview: Review of Latest Analytics," to provide additional context and guide user expectations.

  3. Font Size and Weight Adjustment: Modifying the font size and weight to establish a clear visual hierarchy, ensuring that the title stands out prominently as the main header on the page.

Technique:


Border-color


The choice of color for the decorative border lines is #E0E0E0, ensuring they are distinctive enough to be recognized while maintaining a pleasing aesthetic.

As purely aesthetic elements, decorative border lines are exempt from strict accessibility requirements such as color contrast ratios, as long as they do not convey critical information or functionality.

4b. Profile Card-Item Contrast and Accessibility

Issue: The contrast between the elements of the profile card and the background might be insufficient, potentially affecting the readability for users with visual impairments.

Accessibility Concern: Ensuring adequate color contrast is crucial for text visibility, especially for users with visual impairments.

Clear contrast between text and background enhances readability and usability.


Solution:

To address the accessibility concerns, the following adjustments were made:

  • Adjusted primary-text-color to #131313 and secondary-text-color to #515151 to ensure sufficient contrast

  • Modified font-weight from extra-bold to bold for the title and from thin to regular for the subtitle to improve legibility and maintain consistency.

Technique:

4c. Inclusion of Search Functionality

Best Practice: Integrating a search function facilitates users in quickly finding the information they need within the dashboard.


Accessibility issue: The absence of a search function can hinder users, especially those with specific needs or those navigating large datasets, from efficiently accessing relevant content. Providing alternative methods for content discovery is crucial for ensuring inclusivity and usability.

Solution:

  1. Icon Placement: Position the search icon before the text in the input field to align with user expectations.

  2. Color Contrast: Confirm sufficient contrast between text (#4D4D4D) and background (#F6F6F6), ensuring that the icon color (#333333) also meets accessibility standards.

  3. Text Size: Set font size to at least 14px for readability.

  4. Spacing: Provide ample spacing and padding around the input field for touch interaction

Technique:

4d. Notification Feature

Best Practice: Notifications help users stay informed about new information or changes within the dashboard.

Accessibility Concern: Without proper implementation, notifications may not be accessible to all users, particularly those relying on screen readers or users with visual impairments. Ensuring that notifications are perceivable, operable, and understandable by all users is essential for accessibility.

Solution:

  1. Integrate a notification icon: Include a visually distinct icon on the navigation bar to alert users to new information or updates.

  2. Implement ARIA live regions: Ensure that the notification alerts are announced by screen readers without requiring user focus.

  3. High contrast design: Design the notification feature with a high contrast ratio to ensure visibility and readability for users with visual impairments.

Technique:

4e. Aria Labels


  • Each element has an aria-label or an alt attribute to ensure that screen readers can provide a context-rich description to users who rely on them.

  • The aria-describedby is used to associate the notification button with additional descriptive text.

  • The hidden span (id="notification-count") is an example of how we could provide additional context to the notification button which could be dynamically shown or hidden and updated based on the number of new notifications.

<nav aria-label="Top navigation bar">
  <h1 aria-label="Page title">Company Overview: Review of latest analytics</h1>
  <form role="search" aria-label="Site search">
    <input type="search" aria-label="Search surveys, metrics, engagement levels, or insights" placeholder="Search surveys, metrics, engagement levels, or insights">
    <button type="submit" aria-label="Submit search">Search</button>
  </form>
  <div aria-label="User profile">
    <button aria-label="Notifications" aria-describedby="notification-count">
      <span id="notification-count" hidden>0 new notifications</span>
      <!-- Icon for notifications -->
    </button>
    <img src="path-to-user-image.jpg" alt="Profile picture of Anders Munk" />
    <span aria-label="User name and company">Anders Munk, Tech Agency</span>
  </div>
</nav>

3h. Updated design

After implementing the necessary changes to enhance accessibility, the top navigation would be described as follows:

  • Title Clarity and Page Identification: A clear and concise page title is now prominently displayed, providing users with visual impairments a straightforward understanding of the page's content and purpose.

  • Contrast: The top navigation has been updated with high-contrast colors, improving visibility and legibility for users with visual impairments, including those with color vision deficiencies.

  • Search Functionality: A search feature has been integrated into the top navigation, complete with an accessible design and clear labeling, enabling users with visual impairments to navigate and locate information more efficiently.

  • Notification Feature: A notification system has been added to the top navigation, designed to be accessible with visual indicators as well as auditory alerts, ensuring that users with visual impairments are promptly informed of important updates.

CARDS ITEM

Information cards with progressive bars.

  1. Cards Item

The Card-item does not fully comply with usability for people with visual impairments for the following reasons:

  • Clarity of Data Visualization: Users with color vision deficiencies may struggle to differentiate between metrics due to reliance on color alone.

  • Progress Bar and Text Legibility: Progress bars and text may not be discernible by users with color vision deficiencies due to reliance on color.

  • Font Size Issues: Text on the metrics cards may appear too small for comfortable reading.

  • Hierarchy & Borders: Lack of clear font-weight hierarchy and borders makes it difficult to prioritize information.

4a. Clarity of Data Visualization

Issue: Users with color vision deficiencies may struggle to differentiate between metrics due to the reliance on color alone to convey information in data visualization.

Accessibility Concern: Relying solely on color to distinguish between data points can pose challenges for users with color vision deficiencies, potentially leading to difficulty in interpreting the visualized data.

Solution: Ensure that the information conveyed by color is also available in a non-color format, such as text or patterns.

Technique: Ensuring that information conveyed by color differences is also available in text.

4b. Progress Bar and Text Legibility

Issue

  • While the progress bars utilize color to illustrate performance against benchmarks, they rely on color alone, which may not be discernible by users with color vision deficiencies.

  • The text sizes, particularly for the descriptive text, appear small, which may affect readability for users with visual impairments.

Accessibility

  • The progress bars' reliance on color alone to convey information might not be accessible to users with color vision deficiencies and doesn't meet WCAG guidelines for distinguishable visual elements.

  • Text must be legible for all users, including those with low vision.

Solution :
For the progress bars, adding a non-color indicator, like a pattern or hatch marks, could improve differentiation without relying solely on color.

For the text, increasing the size and ensuring that fonts are resizable will cater to a wider range of users.

Technique:

For the progress bars, use techniques such as:

  • WCAG Technique G14: Ensuring that information conveyed by color differences is also available in text.

  • WCAG Technique G182: Ensuring that additional visual cues are available when text color differences are used to convey information.

4c. Font Size Issues

Issue: The text on the metrics cards may appear too small, potentially affecting readability for users.

Accessibility Concern: Text should adhere to font size guidelines to ensure readability for all users, including those with visual impairments.


Solution: Ensure that text size meets or exceeds standard legibility requirements, accommodating users with varying visual abilities.

Technique: While there is no official minimum font size for the web, it is generally agreed upon that 14px and 16px for body text is a good starting point.


4c. Hierarchy & Borders


Issue: The UI lacks clear font-weight hierarchy, leading to difficulty in prioritizing information.

Accessibility Concern: Without visual hierarchy, users, especially those with cognitive disabilities, may struggle to identify key information.
WCAG Success Criterion 1.3.1: Info and Relationships


Solution:

  • Establish varied font-weights to guide users naturally.

  • Use bolder weights for titles and key data, and lighter weights for descriptions.

Technique for Borders: Add subtle borders to interactive elements for clearer boundaries, aiding users with visual impairments.
WCAG Success Criterion 1.4.11: Non-text Contrast

4d. Aria Labels


  • The role="slider" attribute indicates that the element is used as a slider for the visual representation of the score.

  • The aria-valuenow attribute indicates the current value, which is 73 in this case.

  • The aria-valuemin and aria-valuemax attributes define the minimum and maximum values for the slider, which are 0 and 100, respectively.

  • The aria-label provides a text description of the slider's function and current value.

  • The tabindex="0" attribute makes the slider focusable via keyboard interaction, enhancing accessibility.

<div role="article" aria-label="Well-being score card">
  <p aria-label="Current well-being score">73</p>
  <p aria-label="Context of score">Well-being score - Most recent measure</p>
  <div role="slider" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" aria-label="Current well-being score of 73 out of 100, slightly below the average score of 77" tabindex="0">
    <!-- Visual representation of the slider/bar -->
  </div>
  <p aria-label="Score interpretation">Your most recent well-being score of 73 is a little low and could be better compared to the average of 77 across companies.</p>
</div>

4e. Updated design

After implementing the necessary changes to enhance accessibility, the card items now have:

  • Clarity of Data Visualization: Implemented alternative visual cues alongside color to aid differentiation between metrics for users with color vision deficiencies.

  • Progress Bar and Text Legibility: Enhanced progress bars and text legibility to ensure readability for all users, regardless of color vision.

  • Font Size Adjustments: Increased text size on metrics cards for improved readability.

  • Hierarchy & Borders: Implemented clear font-weight hierarchy and borders to aid in prioritizing information and enhancing overall user experience.

INFORMATION PANEL

Summary and Activity Display tab.

  1. Information Panel

The lnformation panel navigation does not fully comply with usability for people with visual impairments for the following reasons:

  • Font-Weight Hierarchy Issue: Uniform font weights hinder quick recognition of informational hierarchy.

  • Text Increment Indicators Issue: The absence of clear markers for data fluctuations can obscure the understanding of trends.

  • Semantic Structure Issue: The menu's semantic layout may be unclear, which can be problematic for assistive technologies and affect navigation ease.


6a. Font-Weight Hierarchy

Issue: Uniform font-weight throughout the information panel hampers the user's ability to quickly identify the hierarchy of information.


Accessibility Concern: A clear visual hierarchy is critical for users with cognitive disabilities or low vision.

Solution: Create visual distinction using varied font-weights; bold for key data, regular for supporting text.


Technique:

6b. Text Increment Indicators

6c. Semantic Structure

Issue: The semantic structure of the information-panel menu may not be clear.

Accessibility Concern: Information and relationships should be easy to recognize for cognitive assistance.

Solution:

Implemented a navigation structure dividing elements into two sections:

  • Company: Contains static information primarily for reading with minimal interaction.

  • Activity: Houses interactive pages for performing actions rather than data analysis.


Technique:

6d. Insights Feature for Cognitive Support

Issue: Users with cognitive disabilities may struggle to interpret complex data sets.

Accessibility Concern: Summarized insights can support cognitive processing and decision-making.

Solution: Implement a feature that provides summarized insights to support users with cognitive disabilities in interpreting complex data sets.

Technique: Though not specified in WCAG, prioritizing adaptable and readable content principles aids users with cognitive disabilities.

Summarizing insights through natural language processing aligns with WCAG's compatibility goal.

6e. Aria Labels


  • The aside tag is used to represent the information panel as a complementary section of the page.

  • The aria-label attribute provides descriptive labels for different sections and elements, which will be read by screen readers.

  • The aria-labelledby attribute references the id of headings to provide context for the following content sections.

  • The numbers and associated text (like "248 Employees") are combined into a single label for clarity. If there's an interactive element to show the changes in percentage (like +20%), this can be included in the aria-label as well.

<aside aria-label="Summary panel with current status and activities">
  <h2 aria-label="Summary">Summary</h2>
  <p aria-label="Description">Current status and latest activities</p>
  <section aria-labelledby="company-info">
    <h3 id="company-info">Company</h3>
    <p aria-label="Number of active employees">248 Employees currently active</p>
    <p aria-label="Average tenure of employees">1.2 Years of tenure for all employee records</p>
    <p aria-label="Average age of active employees">31 Average age currently active</p>
  </section>
  <section aria-labelledby="activity-info">
    <h3 id="activity-info">Activity</h3>
    <p aria-label="Employee response rate with increase">95% Response rate, increased by 20% recently</p>
    <p aria-label="Number of initiatives with decrease">3 Initiatives, decreased by 2% in the last 12 months</p>
    <p aria-label="Number of new hires with increase">45 New hires, increased by 20% in the last 12 months</p>
  </section>
  <section aria-labelledby="insights-info">
    <h3 id="insights-info">Insights</h3>
    <p aria-label="Suggested action to improve team engagement">Implement new initiatives: Consider hosting brainstorming sessions to inspire team engagement and creativity.</p>
  </section>
</aside>

6f. Updated design

The information-panel navigation has been improved for better usability for people with visual impairments, and an insights feature has been added to support users with cognitive disabilities:

  • Font-Weight Hierarchy Improvement: Adjusted font weights now effectively differentiate levels of information for quicker hierarchy recognition.

  • Text Increment Indicators Enhancement: Clear markers and descriptive labels for data trends have been added for improved trend understanding.

  • Semantic Structure Clarification: The menu's semantic organization has been refined for clearer navigation and better support with assistive technologies.

  • Insights Feature Enhancement for Cognitive Support: A new feature that simplifies complex data into easily digestible insights has been introduced, aiding users with cognitive disabilities in interpreting data sets.

CHART

Line chart section

  1. Chart Section


The Chart Section does not fully comply with usability for people with visual impairments for the following reasons:

  • Contrast and Color Differentiation Issue: Insufficient contrast between the color gradients can lead to indistinct data series representation.

  • Tooltip Accessibility Issue: Limited accessibility of tooltips through keyboard navigation and screen readers may exclude users relying on assistive technologies.

  • Data Point Indicator Visibility and Interaction Issue: Indistinct and hard-to-select data points present challenges for users with motor and severe visual impairments.

  • Legibility of Data Points Issue: Small text size at data points may hinder readability, impacting users with low vision.

7a. Axes and Labels Clarity

Issue: The current axes on the chart are not sufficiently labeled, which may impede users, particularly those with cognitive disabilities, from understanding the chart's timeframe and data scale.

Accessibility Concern: Axes and data labels must be perceivable and understandable for all users, as dictated by WCAG guidelines.

Solution: Clearly label the X-axis with months to denote the timeline and the Y-axis with a numerical scale from 1 to 100 to indicate the data's magnitude.

Technique:

  • WCAG 1.3.1: Info and Relationships, to ensure that the information, structure, and relationships conveyed through presentation are programmatically determinable or are presented in text.

  • WCAG 1.4.11: Non-text Contrast, ensuring that essential graphical elements have a contrast ratio of at least 3:1 against adjacent colors.

7b. Color-coded data series are unclear to users with color vision deficiencies

Issue : Charts use color to distinguish between different data series, which can be problematic for users with color vision deficiencies, making it hard for them to interpret the data correctly.

Accessibility Concern: It's important that information is not conveyed by color alone to ensure accessibility for all users.

Solution: Enhance the chart by incorporating distinct patterns or shapes for each data series alongside the existing color coding. This modification allows users to distinguish between data series without relying solely on color.

Technique:

  • WCAG 1.4.1: Use of Color: Introducing non-color cues (patterns/shapes) to convey information, ensuring that the presentation of data is not dependent solely on color perception.

  • WCAG 1.1.1: Non-text Content: By providing text alternatives in tooltips for all non-text content, we ensure that everyone can understand what the visuals represent.

7c. Highlighted Data Series Usability and Accessibility Analysis


Issue: The current visualization highlights a data series, but the clarity and interaction with the highlighted elements may not be sufficient for users with visual or motor impairments.

Accessibility Concern: Highlighted elements in a data visualization should be easily discernible, interactive and easily selectable for users navigating with assistive technologies.

Solution: To improve accessibility, the size of interactive data point markers within the highlighted series is increased, and the border contrast enhanced for better visibility. Additionally, introducing a hover-over or focus effect that further distinguishes the active point.

Technique: Implement WCAG Technique G181, ensuring that interactive elements are not only visible but also easy to select. This includes providing a larger clickable area around the data points and utilizing visual cues.

7d. Aria Labels


  • The role="region" attribute helps screen readers identify the chart as a significant section of the page.

  • The role="img" attribute is applied to the chart container along with an aria-label that describes the overall nature of the chart. This label explains that the chart depicts three metrics, each represented by a different style of line.

  • The role="complementary" attribute on the chart key provides a semantic indication that this section complements the main content, which is the chart.

  • Each metric in the legend is described, noting the style of line that represents it on the chart.

  • The role="button" and tabindex="0" on the Filters div make it accessible as an interactive element.

  • The id="chart-tooltip" is associated with a hidden role="tooltip" that should be dynamically shown with appropriate aria-hidden toggling when data points are interacted with. The content within this tooltip would be updated based on the data point in focus or hovered over.

<div role="region" aria-label="Interactive key metrics chart from September to March, tracking well-being, stress, and eNPS. Use the keyboard or mouse to explore data points for detailed values.">
  <h2 aria-label="Section title">Key Metrics</h2>
  <div role="img" aria-label="Line chart depicting three key metrics. Solid line represents well-being, dashed line represents stress, and dotted line represents eNPS.">
    <!-- Chart implementation -->
  </div>
  <div role="complementary" aria-label="Chart key">
    <ul>
      <li aria-label="Well-being, trend shown by a solid line.">Well-being</li>
      <li aria-label="Stress, trend shown by a dashed line.">Stress</li>
      <li aria-label="eNPS, trend shown by a dotted line.">eNPS</li>
    </ul>
  </div>
  <div aria-label="Chart filter functionality" role="button" tabindex="0">Filters</div>
  <div id="chart-tooltip" role="tooltip" aria-hidden="true">
    <!-- Hidden tooltip content, to be made visible when data points are focused or hovered -->
  </div>
</div>

7e. Updated design

The Chart Section has been enhanced for optimal usability for people with visual impairments, addressing previous concerns:

  • Color and Contrast Optimization: The data series are now distinguishable without reliance on color alone, through the use of contrasting hues complemented by distinct shapes or patterns.

  • Data Point Clarity and Interaction: Data points have been redesigned with increased size and clear labeling, making them easy to select and understand, aiding users with motor or visual impairments.

  • Comparative Data View: An alternative comparative data view, has been implemented to facilitate easier analysis for all users, including those with cognitive disabilities.

RESULT

Summary of the project findings

8a. Conclusion

The comprehensive audit of the dashboard UI underscored the necessity of aligning with accessibility norms.

Notable improvements include:


  • The rectification of color contrasts, augmentation of text hierarchy, and enhancement of icon clarity, which now adhere to WCAG standards.

  • The updated side navigation provides improved legibility and interaction for visually impaired users.

  • Significant strides were made in the areas of semantic structuring and aria-label implementation, bolstering navigability for assistive technology users.


Overall, the design modifications have successfully forged a more inclusive and navigable environment, demonstrating a steadfast commitment to accessibility and setting a new benchmark for future iterations.

8b. Red Green Color Blindness

This is the most common form of color blindness. It affects approximately 8.5% of the population.

8c. Total Color Blindness

This condition is much rarer, affecting roughly 1 in 30,000 to 50,000 people worldwide. Individuals with achromatopsia cannot perceive any color at all and see the world in varying shades of gray.

8d. End Result

The before and after comparison demonstrates an improvement in accessibility, with enhanced color contrast, clear text hierarchies, and interactive elements that comply with WCAG standards, providing an inclusive user experience.

SEE MY OTHER PROJECTS

ACCESIBILITY USE CASE

  1. Introduction & Overall analysis

This audit provides an examination of the Zoios dashboard UI with a particular focus on its alignment with established usability and accessibility standards. Each section of the UI is critically analyzed against best practices as informed by the referenced materials on accessibility and usability for UX designers.

  1. General Accessibility & Usability Observations

This is the current appearance of the dashboard and starting point of the analysis.


2a. Insufficient Color Contrast Across the UI

Issue:The dashboard utilizes a color scheme that, in certain areas, fails to provide adequate contrast between text (including graphical text) and its background, as well as among interactive elements like buttons and links.


Accessibility Concern: Low color contrast can significantly impair the ability for users with visual impairments, including those with low vision or color vision deficiencies, to read and interact with the dashboard.
WCAG guidelines under Success Criterion 1.4.3


2b. Inconsistent Text Hierarchy

Issue:The dashboard lacks clear text hierarchy, and several sections feature text in sizes that challenge readability, particularly for secondary information such as annotations or descriptions.

Accessibility Concern: A lack of clear text hierarchy and the use of small font sizes can significantly affect the readability and navigability of content for users, especially those with visual or cognitive disabilities. WCAG guidelines under Success Criterion 1.3.1: Info and Relationships


2c. Color Dependency

Issue: The graph component relies solely on color to differentiate between data points, which may pose accessibility challenges for users with color vision deficiencies.

Accessibility Concern: Depending solely on color to convey information excludes users with various visual impairments, particularly those with color blindness. WCAG guidelines under Success Criterion 1.4.1: Use of Color


SIDE NAVIGATION

Vertical interface element used for site navigation.

  1. Side Navigation


The side navigation as shown across different visions does not fully comply with usability for people with visual impairments for several reasons:

  • Color Contrast: Insufficient for users with color vision deficiencies.

  • Icon Clarity: Not distinguishable enough for visually impaired, especially with red-green color blindness.

  • Text Legibility: ext clarity is compromised for those with color blindness.

  • Visual Hierarchy: Lacks clear structure to aid users with visual impairments.


3a. Contrast and Legibility

Issue: The text and icons lack sufficient contrast against the background, potentially reducing readability for users with visual impairments.

Accessibility Concern: Users with visual impairments, including those with color vision deficiencies, may struggle to read and interact with the interface due to insufficient contrast between text, icons, and the background.

Current colors:

Text and icon colors:

  • Regular-state icon: #A9BFB9

Background colors:

  • Background-color: #F9FDFC


Solution: To ensure optimal accessibility and legibility of our interface, we will make contrast adjustments in alignment with AAA compliance


Technique:

  • Icon Color Adjustment: The regular-state icon color will be modified from #A9BFB9 to #3B3B3B. This modification aims to ensure that the regular-state icon meets the minimum contrast ratio of 4.5:1 against the background color. WCAG Success Criterion 1.4.3: Contrast


  • Background Color Update: The background color will be changed from #F9FDFC to #FAFAFA. This update is intended to significantly enhance the contrast with text and icons, improving readability for all users.


3b. Interactive element identification

Issue: Navigation elements may not be immediately recognizable as interactive to all users, and the focus states for keyboard navigation might not be clear.

Accessibility Concern: Users may encounter difficulty in identifying interactive elements, especially those with visual impairments or who rely on keyboard navigation.

Solution: Enhance the identification and clarity of interactive elements, making them more recognizable to users.

Technique:

  1. Active-state Icon Color Modification: The active-state icon color will be modified to #06413F to ensure a minimum contrast ratio of 4.5:1 against the background.WCAG Success Criterion 1.4.11: Non-text Contrast.

  2. Background-Hovered-state Color Adjustment: Similarly, the background-hovered-state color will be adjusted to #E7F3EF.

  3. Border-current-state Addition: A border with #389991 color will be added to interactive elements in the side-nav menu. This addition aims to provide additional tactile feedback for users with full blindness.


3c. Icon Clarity and Recognition

Issue: Icons within the interface may lack clarity or fail to be easily identifiable, hindering user recognition and navigation, especially for individuals with visual impairments.

Accessibility Concern: The current icons present challenges in terms of clarity and recognizability, impacting user navigation and accessibility, particularly for those with visual impairments.

Ensuring clear and distinguishable icons is essential for facilitating seamless user interaction and adhering to accessibility standards.


Solution: To address the identified issues with icon clarity and recognition, a series of adjustments will be made to replace the existing icons with a new set that prioritizes clarity, consistency, and accessibility.


Technique: The new icons will feature distinct shapes and characteristics to ensure easy recognition and comprehension for all users.


Additionally, each icon will be accompanied by descriptive text or alternative text to enhance accessibility for users who rely on screen readers, adhering to inclusive design principles.

WCAG Success Criterion 1.1.1 Non-text Content


3d. Spacing and Size of Interactive Elements


Issue: The spacing between interactive elements is insufficient.

Accessibility Concern: Inadequate spacing between interactive elements can lead to usability issues, especially for users with fine motor control difficulties or those utilizing touch interfaces.

Insufficient spacing may result in accidental selections or difficulty in accurately targeting specific elements, impeding user navigation and interaction.


Solution: To address the accessibility concerns associated with spacing between interactive elements, adjustments will be made to enhance the spacing consistency and improve user experience.

Technique:

  1. Consistent Spacing Implementation: All interactive elements will undergo adjustment to ensure a consistent spacing of 10 pixels between each other.

  2. Element Size Enhancement: The height of interactive elements will be increased to 50 pixels, surpassing the recommended minimum touch target size of 44x44 pixels.

WCAG Success Criterion 2.5.5: Target Size


3e. Semantic Structure and Navigation


Issue: The semantic structure of the navigation menu may not be clear, potentially leading to confusion for users who rely on assistive technologies.

Accessibility Concern: The concern lies in ensuring that the navigation menu's organization and labeling are intuitive and understandable for all users, particularly those using assistive technologies.


Solution: Implemented a navigation structure dividing elements into two sections:

  1. Reports: Contains static information primarily for reading with minimal interaction.

  2. Tools: Houses interactive pages for performing actions rather than data analysis.


Technique: Dividing the elements into distinct sections based on their function and interaction level, users, including those who rely on assistive technologies, can easily understand and navigate the website.
WCAG Success Criterion 1.3.1: Info and Relationships



3f. Logo Contrast and Branding


Issue: The prominence of the logo branding might overshadow other elements in the UI, potentially causing distraction and detracting from overall user experience.

Additionally, as the logo is an image, its content might not be accessible to users relying on screen readers without appropriate alternative text.

Accessibility Concern: Logos are central to brand identity, but their visual presentation must not compromise the accessibility of textual content.

Ensuring adequate color contrast within the logo text is crucial for readability, particularly for users with visual impairments.

Solution:

  • Color Adjustment: Implementing a gradient of colors, specifically #009793, to ensure sufficient color contrast within the logo text.
  • Alt Text Provision: Providing descriptive alternative text for the logo to convey its content and purpose to users who use screen readers.

Technique:

3g. Aria Labels


In this example, each link has an aria-label that describes its purpose.

  • The buttons used to expand the submenus have aria-controls to indicate what they control, aria-expanded to indicate whether the submenu is open or closed, and aria-label to describe the action.

  • When a submenu is expanded, aria-expanded would be set to "true" and the hidden attribute would be removed from the corresponding submenu ul.

<nav aria-label="Sidebar">
  <ul>
    <li>
      <a href="/overview" aria-label="Overview - current page">Overview</a>
    </li>
    <li>
      <button aria-controls="reports-submenu" aria-expanded="false" aria-label="Expand Reports submenu">Reports</button>
      <ul id="reports-submenu" hidden>
        <li><a href="/reports/drivers" aria-label="Drivers Report">Drivers</a></li>
        <li><a href="/reports/analyses" aria-label="Analyses Report">Analyses</a></li>
        <li><a href="/reports/lifecycle" aria-label="Lifecycle Report">Lifecycle</a></li>
      </ul>
    </li>
    <li>
      <button aria-controls="tools-submenu" aria-expanded="false" aria-label="Expand Tools submenu">Tools</button>
      <ul id="tools-submenu" hidden>
        <li><a href="/team" aria-label="Team Tools">Team</a></li>
        <li><a href="/personality" aria-label="Personality Tools">Personality</a></li>
      </ul>
    </li>
    <li>
      <a href="/journal" aria-label="Journal">Journal</a>
    </li>
    <li>
      <a href="/comments" aria-label="Comments">Comments</a>
    </li>
  </ul>
</nav>

3h. Updated design

After addressing the identified issues, the side navigation now ensures better usability for people with visual impairments:

Improved Accessibility:

  • Color Contrast: Enhanced to meet WCAG standards, ensuring sufficient contrast for users with color vision deficiencies.

  • Icon Clarity: Icons redesigned to be more distinguishable, particularly for users with red-green color blindness.


  • Text Legibility: Text clarity improved through better color choices and contrast adjustments, catering to users with color blindness.


  • Visual Hierarchy: Clear structure implemented to aid users with visual impairments, ensuring easier navigation and comprehension of content.


TOP NAVIGATION

Quick access to dashboard features.

  1. Top Navigation


The side navigation as shown across different visions does not fully comply with usability for people with visual impairments for several reasons:


  • Title Clarity and Page Identification: The absence of a descriptive and prominently displayed page title can leave users with visual impairments unable to determine the current page and its purpose.

  • Contrast: The top navigation may lack sufficient color contrast, which is particularly challenging for users with visual impairments, making it hard to discern textual and interactive elements.

  • Search Functionality: The top navigation does not include a search function, omitting a vital tool that users with visual impairments rely on to efficiently find content.

  • Notification Feature: The absence of a notification feature in the top navigation can prevent users with visual impairments from receiving important alerts and updates that are typically highlighted visually.


4a. Title Clarity and Page Identification

Issue: The title "Overview" may not clearly stand out as the page's main header, potentially causing confusion about the page's purpose.

Accessibility Concern: Clear and distinguishable headings are essential for users to quickly understand the structure and content of web pages.


3a. Contrast and Legibility

Solution:

  1. Color Contrast Enhancement: Utilizing contrasting colors to separate the title from the navigation background, enhancing its visibility and ensuring it is easily recognizable as the main heading.

  2. Custom Text Integration: Incorporating custom inline text, such as "Company Overview: Review of Latest Analytics," to provide additional context and guide user expectations.

  3. Font Size and Weight Adjustment: Modifying the font size and weight to establish a clear visual hierarchy, ensuring that the title stands out prominently as the main header on the page.

Technique:

WCAG Success Criterion 2.4.6: Headings and Labels


Border-color


The choice of color for the decorative border lines is #E0E0E0, ensuring they are distinctive enough to be recognized while maintaining a pleasing aesthetic.

As purely aesthetic elements, decorative border lines are exempt from strict accessibility requirements such as color contrast ratios, as long as they do not convey critical information or functionality.
The choice of color for the decorative border lines is #E0E0E0, ensuring they are distinctive enough to be recognized while maintaining a pleasing aesthetic.

4b. Profile Card-Item Contrast and Accessibility

Issue: The contrast between the elements of the profile card and the background might be insufficient, potentially affecting the readability for users with visual impairments.

Accessibility Concern: Ensuring adequate color contrast is crucial for text visibility, especially for users with visual impairments.

Clear contrast between text and background enhances readability and usability.

Solution:

To address the accessibility concerns, the following adjustments were made:

  • Adjusted primary-text-color to #131313 and secondary-text-color to #515151 to ensure sufficient contrast

  • Modified font-weight from extra-bold to bold for the title and from thin to regular for the subtitle to improve legibility and maintain consistency.

Technique:

4c. Inclusion of Search Functionality

Best Practice: Integrating a search function facilitates users in quickly finding the information they need within the dashboard.


Accessibility issue: The absence of a search function can hinder users, especially those with specific needs or those navigating large datasets, from efficiently accessing relevant content. Providing alternative methods for content discovery is crucial for ensuring inclusivity and usability.

Solution:

  1. Icon Placement: Position the search icon before the text in the input field to align with user expectations.

  2. Color Contrast: Confirm sufficient contrast between text (#4D4D4D) and background (#F6F6F6), ensuring that the icon color (#333333) also meets accessibility standards.

  3. Text Size: Set font size to at least 14px for readability.

  4. Spacing: Provide ample spacing and padding around the input field for touch interaction

Technique:

4d. Notification Feature

Best Practice: Notifications help users stay informed about new information or changes within the dashboard.

Accessibility Concern: Without proper implementation, notifications may not be accessible to all users, particularly those relying on screen readers or users with visual impairments. Ensuring that notifications are perceivable, operable, and understandable by all users is essential for accessibility.

Solution:

  1. Integrate a notification icon: Include a visually distinct icon on the navigation bar to alert users to new information or updates.

  2. Implement ARIA live regions: Ensure that the notification alerts are announced by screen readers without requiring user focus.

  3. High contrast design: Design the notification feature with a high contrast ratio to ensure visibility and readability for users with visual impairments.

Technique:

4e. Aria Labels


  • Each element has an aria-label or an alt attribute to ensure that screen readers can provide a context-rich description to users who rely on them.

  • The aria-describedby is used to associate the notification button with additional descriptive text.

  • The hidden span (id="notification-count") is an example of how we could provide additional context to the notification button which could be dynamically shown or hidden and updated based on the number of new notifications.

<nav aria-label="Top navigation bar">
  <h1 aria-label="Page title">Company Overview: Review of latest analytics</h1>
  <form role="search" aria-label="Site search">
    <input type="search" aria-label="Search surveys, metrics, engagement levels, or insights" placeholder="Search surveys, metrics, engagement levels, or insights">
    <button type="submit" aria-label="Submit search">Search</button>
  </form>
  <div aria-label="User profile">
    <button aria-label="Notifications" aria-describedby="notification-count">
      <span id="notification-count" hidden>0 new notifications</span>
      <!-- Icon for notifications -->
    </button>
    <img src="path-to-user-image.jpg" alt="Profile picture of Anders Munk" />
    <span aria-label="User name and company">Anders Munk, Tech Agency</span>
  </div>
</nav>

3h. Updated design

After implementing the necessary changes to enhance accessibility, the top navigation would be described as follows:

  • Title Clarity and Page Identification: A clear and concise page title is now prominently displayed, providing users with visual impairments a straightforward understanding of the page's content and purpose.

  • Contrast: The top navigation has been updated with high-contrast colors, improving visibility and legibility for users with visual impairments, including those with color vision deficiencies.

  • Search Functionality: A search feature has been integrated into the top navigation, complete with an accessible design and clear labeling, enabling users with visual impairments to navigate and locate information more efficiently.

  • Notification Feature: A notification system has been added to the top navigation, designed to be accessible with visual indicators as well as auditory alerts, ensuring that users with visual impairments are promptly informed of important updates.


CARDS ITEM

Information cards with progressive bars.

  1. Cards Item

The Card-item does not fully comply with usability for people with visual impairments for the following reasons:

  • Clarity of Data Visualization: Users with color vision deficiencies may struggle to differentiate between metrics due to reliance on color alone.

  • Progress Bar and Text Legibility: Progress bars and text may not be discernible by users with color vision deficiencies due to reliance on color.

  • Font Size Issues: Text on the metrics cards may appear too small for comfortable reading.

  • Hierarchy & Borders: Lack of clear font-weight hierarchy and borders makes it difficult to prioritize information.


4a. Title Clarity and Page Identification

Issue: Users with color vision deficiencies may struggle to differentiate between metrics due to the reliance on color alone to convey information in data visualization.

Accessibility Concern: Relying solely on color to distinguish between data points can pose challenges for users with color vision deficiencies, potentially leading to difficulty in interpreting the visualized data.


Solution: Ensure that the information conveyed by color is also available in a non-color format, such as text or patterns.

Technique: Ensuring that information conveyed by color differences is also available in text.

4b. Progress Bar and Text Legibility

Issue

  • While the progress bars utilize color to illustrate performance against benchmarks, they rely on color alone, which may not be discernible by users with color vision deficiencies.

  • The text sizes, particularly for the descriptive text, appear small, which may affect readability for users with visual impairments.

Accessibility

  • The progress bars' reliance on color alone to convey information might not be accessible to users with color vision deficiencies and doesn't meet WCAG guidelines for distinguishable visual elements.

  • Text must be legible for all users, including those with low vision.

Solution :
For the progress bars, adding a non-color indicator, like a pattern or hatch marks, could improve differentiation without relying solely on color.

For the text, increasing the size and ensuring that fonts are resizable will cater to a wider range of users.

Technique:

For the progress bars, use techniques such as:

  • WCAG Technique G14: Ensuring that information conveyed by color differences is also available in text.

  • WCAG Technique G182: Ensuring that additional visual cues are available when text color differences are used to convey information.

4c. Font Size Issues

Issue: The text on the metrics cards may appear too small, potentially affecting readability for users.

Accessibility Concern: Text should adhere to font size guidelines to ensure readability for all users, including those with visual impairments.


Solution: Ensure that text size meets or exceeds standard legibility requirements, accommodating users with varying visual abilities.

Technique: While there is no official minimum font size for the web, it is generally agreed upon that 14px and 16px for body text is a good starting point.


4c. Hierarchy & Borders


Issue: The UI lacks clear font-weight hierarchy, leading to difficulty in prioritizing information.

Accessibility Concern: Without visual hierarchy, users, especially those with cognitive disabilities, may struggle to identify key information.
WCAG Success Criterion 1.3.1: Info and Relationships

Solution:

  • Establish varied font-weights to guide users naturally.

  • Use bolder weights for titles and key data, and lighter weights for descriptions.

Technique for Borders: Add subtle borders to interactive elements for clearer boundaries, aiding users with visual impairments.
WCAG Success Criterion 1.4.11: Non-text Contrast


4d. Aria Labels


  • The role="slider" attribute indicates that the element is used as a slider for the visual representation of the score.

  • The aria-valuenow attribute indicates the current value, which is 73 in this case.

  • The aria-valuemin and aria-valuemax attributes define the minimum and maximum values for the slider, which are 0 and 100, respectively.

  • The aria-label provides a text description of the slider's function and current value.

  • The tabindex="0" attribute makes the slider focusable via keyboard interaction, enhancing accessibility.

<div role="article" aria-label="Well-being score card">
  <p aria-label="Current well-being score">73</p>
  <p aria-label="Context of score">Well-being score - Most recent measure</p>
  <div role="slider" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" aria-label="Current well-being score of 73 out of 100, slightly below the average score of 77" tabindex="0">
    <!-- Visual representation of the slider/bar -->
  </div>
  <p aria-label="Score interpretation">Your most recent well-being score of 73 is a little low and could be better compared to the average of 77 across companies.</p>
</div>

4e. Updated design

After implementing the necessary changes to enhance accessibility, the card items now have:

  • Clarity of Data Visualization: Implemented alternative visual cues alongside color to aid differentiation between metrics for users with color vision deficiencies.

  • Progress Bar and Text Legibility: Enhanced progress bars and text legibility to ensure readability for all users, regardless of color vision.

  • Font Size Adjustments: Increased text size on metrics cards for improved readability.

  • Hierarchy & Borders: Implemented clear font-weight hierarchy and borders to aid in prioritizing information and enhancing overall user experience.

INFORMATION PANEL

Summary and Activity Display tab.


6a. Information Panel

The lnformation panel navigation does not fully comply with usability for people with visual impairments for the following reasons:

  • Font-Weight Hierarchy Issue: Uniform font weights hinder quick recognition of informational hierarchy.

  • Text Increment Indicators Issue: The absence of clear markers for data fluctuations can obscure the understanding of trends.

  • Semantic Structure Issue: The menu's semantic layout may be unclear, which can be problematic for assistive technologies and affect navigation ease.

6a. Font-Weight Hierarchy

Issue: Uniform font-weight throughout the information panel hampers the user's ability to quickly identify the hierarchy of information.


Accessibility Concern: A clear visual hierarchy is critical for users with cognitive disabilities or low vision.

Solution: Create visual distinction using varied font-weights; bold for key data, regular for supporting text.


Technique:


6b. Text Increment Indicators

6c. Semantic Structure

Issue: The semantic structure of the left-panel menu may not be clear.

Accessibility Concern: Information and relationships should be easy to recognize for cognitive assistance.

Solution:

Implemented a navigation structure dividing elements into two sections:

  • Company: Contains static information primarily for reading with minimal interaction.

  • Activity: Houses interactive pages for performing actions rather than data analysis.


Technique:

6d. Insights Feature for Cognitive Support

Issue: Users with cognitive disabilities may struggle to interpret complex data sets.

Accessibility Concern: Summarized insights can support cognitive processing and decision-making.

Solution: Implement a feature that provides summarized insights to support users with cognitive disabilities in interpreting complex data sets.

Technique: Though not specified in WCAG, prioritizing adaptable and readable content principles aids users with cognitive disabilities.

Summarizing insights through natural language processing aligns with WCAG's compatibility goal.

6e. Aria Labels


  • The aside tag is used to represent the information panel as a complementary section of the page.

  • The aria-label attribute provides descriptive labels for different sections and elements, which will be read by screen readers.

  • The aria-labelledby attribute references the id of headings to provide context for the following content sections.

  • The numbers and associated text (like "248 Employees") are combined into a single label for clarity. If there's an interactive element to show the changes in percentage (like +20%), this can be included in the aria-label as well.

<aside aria-label="Summary panel with current status and activities">
  <h2 aria-label="Summary">Summary</h2>
  <p aria-label="Description">Current status and latest activities</p>
  <section aria-labelledby="company-info">
    <h3 id="company-info">Company</h3>
    <p aria-label="Number of active employees">248 Employees currently active</p>
    <p aria-label="Average tenure of employees">1.2 Years of tenure for all employee records</p>
    <p aria-label="Average age of active employees">31 Average age currently active</p>
  </section>
  <section aria-labelledby="activity-info">
    <h3 id="activity-info">Activity</h3>
    <p aria-label="Employee response rate with increase">95% Response rate, increased by 20% recently</p>
    <p aria-label="Number of initiatives with decrease">3 Initiatives, decreased by 2% in the last 12 months</p>
    <p aria-label="Number of new hires with increase">45 New hires, increased by 20% in the last 12 months</p>
  </section>
  <section aria-labelledby="insights-info">
    <h3 id="insights-info">Insights</h3>
    <p aria-label="Suggested action to improve team engagement">Implement new initiatives: Consider hosting brainstorming sessions to inspire team engagement and creativity.</p>
  </section>
</aside>

6f. Updated design

After implementing the necessary changes to enhance accessibility, the card items now have:

  • Clarity of Data Visualization: Implemented alternative visual cues alongside color to aid differentiation between metrics for users with color vision deficiencies.

  • Progress Bar and Text Legibility: Enhanced progress bars and text legibility to ensure readability for all users, regardless of color vision.

  • Font Size Adjustments: Increased text size on metrics cards for improved readability.

  • Hierarchy & Borders: Implemented clear font-weight hierarchy and borders to aid in prioritizing information and enhancing overall user experience.

CHART

Line chart section


  1. Graph Section


The Chart Section does not fully comply with usability for people with visual impairments for the following reasons:

  • Contrast and Color Differentiation Issue: Insufficient contrast between the color gradients can lead to indistinct data series representation.

  • Tooltip Accessibility Issue: Limited accessibility of tooltips through keyboard navigation and screen readers may exclude users relying on assistive technologies.

  • Data Point Indicator Visibility and Interaction Issue: Indistinct and hard-to-select data points present challenges for users with motor and severe visual impairments.

  • Legibility of Data Points Issue: Small text size at data points may hinder readability, impacting users with low vision.

7a. Axes and Labels Clarity

Issue: The current axes on the chart are not sufficiently labeled, which may impede users, particularly those with cognitive disabilities, from understanding the chart's timeframe and data scale.

Accessibility Concern: Axes and data labels must be perceivable and understandable for all users, as dictated by WCAG guidelines.

Solution: Clearly label the X-axis with months to denote the timeline and the Y-axis with a numerical scale from 1 to 100 to indicate the data's magnitude.

Technique:

  • WCAG 1.3.1: Info and Relationships, to ensure that the information, structure, and relationships conveyed through presentation are programmatically determinable or are presented in text.

  • WCAG 1.4.11: Non-text Contrast, ensuring that essential graphical elements have a contrast ratio of at least 3:1 against adjacent colors.

7b. Color-coded data series are unclear to users with color vision deficiencies

Issue : Charts use color to distinguish between different data series, which can be problematic for users with color vision deficiencies, making it hard for them to interpret the data correctly.

Accessibility Concern: It's important that information is not conveyed by color alone to ensure accessibility for all users.

Solution: Enhance the chart by incorporating distinct patterns or shapes for each data series alongside the existing color coding. This modification allows users to distinguish between data series without relying solely on color.

Technique:

  • WCAG 1.4.1: Use of Color: Introducing non-color cues (patterns/shapes) to convey information, ensuring that the presentation of data is not dependent solely on color perception.

  • WCAG 1.1.1: Non-text Content: By providing text alternatives in tooltips for all non-text content, we ensure that everyone can understand what the visuals represent.


7c. Highlighted Data Series Usability and Accessibility Analysis


Issue: The current visualization highlights a data series, but the clarity and interaction with the highlighted elements may not be sufficient for users with visual or motor impairments.

Accessibility Concern: Highlighted elements in a data visualization should be easily discernible, interactive and easily selectable for users navigating with assistive technologies.

Solution: To improve accessibility, the size of interactive data point markers within the highlighted series is increased, and the border contrast enhanced for better visibility. Additionally, introducing a hover-over or focus effect that further distinguishes the active point.

Technique: Implement WCAG Technique G181, ensuring that interactive elements are not only visible but also easy to select. This includes providing a larger clickable area around the data points and utilizing visual cues.

7d. Aria Labels


  • The role="region" attribute helps screen readers identify the chart as a significant section of the page.

  • The role="img" attribute is applied to the chart container along with an aria-label that describes the overall nature of the chart. This label explains that the chart depicts three metrics, each represented by a different style of line.

  • The role="complementary" attribute on the chart key provides a semantic indication that this section complements the main content, which is the chart.

  • Each metric in the legend is described, noting the style of line that represents it on the chart.

  • The role="button" and tabindex="0" on the Filters div make it accessible as an interactive element.

  • The id="chart-tooltip" is associated with a hidden role="tooltip" that should be dynamically shown with appropriate aria-hidden toggling when data points are interacted with. The content within this tooltip would be updated based on the data point in focus or hovered over.

<div role="region" aria-label="Interactive key metrics chart from September to March, tracking well-being, stress, and eNPS. Use the keyboard or mouse to explore data points for detailed values.">
  <h2 aria-label="Section title">Key Metrics</h2>
  <div role="img" aria-label="Line chart depicting three key metrics. Solid line represents well-being, dashed line represents stress, and dotted line represents eNPS.">
    <!-- Chart implementation -->
  </div>
  <div role="complementary" aria-label="Chart key">
    <ul>
      <li aria-label="Well-being, trend shown by a solid line.">Well-being</li>
      <li aria-label="Stress, trend shown by a dashed line.">Stress</li>
      <li aria-label="eNPS, trend shown by a dotted line.">eNPS</li>
    </ul>
  </div>
  <div aria-label="Chart filter functionality" role="button" tabindex="0">Filters</div>
  <div id="chart-tooltip" role="tooltip" aria-hidden="true">
    <!-- Hidden tooltip content, to be made visible when data points are focused or hovered -->
  </div>
</div>

7e. Updated design


The Chart Section has been enhanced for optimal usability for people with visual impairments, addressing previous concerns:

  • Color and Contrast Optimization: The data series are now distinguishable without reliance on color alone, through the use of contrasting hues complemented by distinct shapes or patterns.

  • Data Point Clarity and Interaction: Data points have been redesigned with increased size and clear labeling, making them easy to select and understand, aiding users with motor or visual impairments.

  • Comparative Data View: An alternative comparative data view, has been implemented to facilitate easier analysis for all users, including those with cognitive disabilities.

RESULT

Summary of the project findings



8a. Conclusion

The comprehensive audit of the dashboard UI underscored the necessity of aligning with accessibility norms.

Notable improvements include:


  • The rectification of color contrasts, augmentation of text hierarchy, and enhancement of icon clarity, which now adhere to WCAG standards.

  • The updated side navigation provides improved legibility and interaction for visually impaired users.

  • Significant strides were made in the areas of semantic structuring and aria-label implementation, bolstering navigability for assistive technology users.


Overall, the design modifications have successfully forged a more inclusive and navigable environment, demonstrating a steadfast commitment to accessibility and setting a new benchmark for future iterations.

8b. Red Green Color Blindness


This is the most common form of color blindness. It affects approximately 8.5% of the population.

8c. Total Color Blindness

This condition is much rarer, affecting roughly 1 in 30,000 to 50,000 people worldwide. Individuals with achromatopsia cannot perceive any color at all and see the world in varying shades of gray.

8c. End Result

The before and after comparison demonstrates an improvement in accessibility, with enhanced color contrast, clear text hierarchies, and interactive elements that comply with WCAG standards, providing an inclusive user experience.




SEE MY OTHER PROJECTS

ACCESIBILITY USE CASE

  1. Introduction & Overall analysis

This audit provides an examination of the Zoios dashboard UI with a particular focus on its alignment with established usability and accessibility standards. Each section of the UI is critically analyzed against best practices as informed by the referenced materials on accessibility and usability for UX designers.

  1. General Accessibility & Usability Observations

This is the current appearance of the dashboard and starting point of the analysis.

2a. Insufficient Color Contrast Across the UI

Issue:The dashboard utilizes a color scheme that, in certain areas, fails to provide adequate contrast between text (including graphical text) and its background, as well as among interactive elements like buttons and links.


Accessibility Concern: Low color contrast can significantly impair the ability for users with visual impairments, including those with low vision or color vision deficiencies, to read and interact with the dashboard.

2b. Inconsistent Text Hierarchy

Issue:The dashboard lacks clear text hierarchy, and several sections feature text in sizes that challenge readability, particularly for secondary information such as annotations or descriptions.

Accessibility Concern: A lack of clear text hierarchy and the use of small font sizes can significantly affect the readability and navigability of content for users, especially those with visual or cognitive disabilities.

2c. Color Dependency

Issue: The graph component relies solely on color to differentiate between data points, which may pose accessibility challenges for users with color vision deficiencies.

Accessibility Concern: Depending solely on color to convey information excludes users with various visual impairments, particularly those with color blindness.

SIDE NAVIGATION

Vertical interface element used for site navigation.

  1. Side Navigation

The side navigation as shown across different visions does not fully comply with usability for people with visual impairments for several reasons

  • Color Contrast: Insufficient for users with color vision deficiencies.

  • Icon Clarity: Not distinguishable enough for visually impaired, especially with red-green color blindness.

  • Text Legibility: ext clarity is compromised for those with color blindness.

  • Visual Hierarchy: Lacks clear structure to aid users with visual impairments.

3a. Contrast and Legibility

Issue: The text and icons lack sufficient contrast against the background, potentially reducing readability for users with visual impairments.

Accessibility Concern: Users with visual impairments, including those with color vision deficiencies, may struggle to read and interact with the interface due to insufficient contrast between text, icons, and the background.

Current colors:

Text and icon colors:

  • Regular-state icon: #A9BFB9

Background colors:

  • Background-color: #F9FDFC

Solution: To ensure optimal accessibility and legibility of our interface, we will make contrast adjustments in alignment with AAA compliance


Technique:

  • Icon Color Adjustment: The regular-state icon color will be modified from #A9BFB9 to #3B3B3B. This modification aims to ensure that the regular-state icon meets the minimum contrast ratio of 4.5:1 against the background color. WCAG Success Criterion 1.4.3: Contrast


  • Background Color Update: The background color will be changed from #F9FDFC to #FAFAFA. This update is intended to significantly enhance the contrast with text and icons, improving readability for all users.

3b. Interactive element identification

Issue: Navigation elements may not be immediately recognizable as interactive to all users, and the focus states for keyboard navigation might not be clear.

Accessibility Concern: Users may encounter difficulty in identifying interactive elements, especially those with visual impairments or who rely on keyboard navigation.


Solution: Enhance the identification and clarity of interactive elements, making them more recognizable to users.

Technique:

  1. Active-state Icon Color Modification: The active-state icon color will be modified to #06413F to ensure a minimum contrast ratio of 4.5:1 against the background.WCAG Success Criterion 1.4.11: Non-text Contrast.

  2. Background-Hovered-state Color Adjustment: Similarly, the background-hovered-state color will be adjusted to #E7F3EF.

  3. Border-current-state Addition: A border with #389991 color will be added to interactive elements in the side-nav menu. This addition aims to provide additional tactile feedback for users with full blindness.

3c. Icon Clarity and Recognition

Issue: Icons within the interface may lack clarity or fail to be easily identifiable, hindering user recognition and navigation, especially for individuals with visual impairments.

Accessibility Concern: The current icons present challenges in terms of clarity and recognizability, impacting user navigation and accessibility, particularly for those with visual impairments.

Ensuring clear and distinguishable icons is essential for facilitating seamless user interaction and adhering to accessibility standards.

Solution: To address the identified issues with icon clarity and recognition, a series of adjustments will be made to replace the existing icons with a new set that prioritizes clarity, consistency, and accessibility.


Technique: The new icons will feature distinct shapes and characteristics to ensure easy recognition and comprehension for all users.


Additionally, each icon will be accompanied by descriptive text or alternative text to enhance accessibility for users who rely on screen readers, adhering to inclusive design principles.

3d. Spacing and Size of Interactive Elements


Issue: The spacing between interactive elements is insufficient.

Accessibility Concern: Inadequate spacing between interactive elements can lead to usability issues, especially for users with fine motor control difficulties or those utilizing touch interfaces.

Insufficient spacing may result in accidental selections or difficulty in accurately targeting specific elements, impeding user navigation and interaction.

Solution: To address the accessibility concerns associated with spacing between interactive elements, adjustments will be made to enhance the spacing consistency and improve user experience.

Technique:

  1. Consistent Spacing Implementation: All interactive elements will undergo adjustment to ensure a consistent spacing of 10 pixels between each other.

  2. Element Size Enhancement: The height of interactive elements will be increased to 50 pixels, surpassing the recommended minimum touch target size of 44x44 pixels.

3e. Semantic Structure and Navigation


Issue: The semantic structure of the navigation menu may not be clear, potentially leading to confusion for users who rely on assistive technologies.

Accessibility Concern: The concern lies in ensuring that the navigation menu's organization and labeling are intuitive and understandable for all users, particularly those using assistive technologies.


Solution: Implemented a navigation structure dividing elements into two sections:

  1. Reports: Contains static information primarily for reading with minimal interaction.

  2. Tools: Houses interactive pages for performing actions rather than data analysis.


Technique: Dividing the elements into distinct sections based on their function and interaction level, users, including those who rely on assistive technologies, can easily understand and navigate the website.

3f. Logo Contrast and Branding


Issue: The prominence of the logo branding might overshadow other elements in the UI, potentially causing distraction and detracting from overall user experience.

Additionally, as the logo is an image, its content might not be accessible to users relying on screen readers without appropriate alternative text.

Accessibility Concern: Logos are central to brand identity, but their visual presentation must not compromise the accessibility of textual content.

Ensuring adequate color contrast within the logo text is crucial for readability, particularly for users with visual impairments.

Solution:
  • Color Adjustment: Implementing a gradient of colors, specifically #009793, to ensure sufficient color contrast within the logo text.
  • Alt Text Provision: Providing descriptive alternative text for the logo to convey its content and purpose to users who use screen readers.

Technique:

3g. Aria Labels


In this example, each link has an aria-label that describes its purpose.

  • The buttons used to expand the submenus have aria-controls to indicate what they control, aria-expanded to indicate whether the submenu is open or closed, and aria-label to describe the action.

  • When a submenu is expanded, aria-expanded would be set to "true" and the hidden attribute would be removed from the corresponding submenu ul.

<nav aria-label="Sidebar">
  <ul>
    <li>
      <a href="/overview" aria-label="Overview - current page">Overview</a>
    </li>
    <li>
      <button aria-controls="reports-submenu" aria-expanded="false" aria-label="Expand Reports submenu">Reports</button>
      <ul id="reports-submenu" hidden>
        <li><a href="/reports/drivers" aria-label="Drivers Report">Drivers</a></li>
        <li><a href="/reports/analyses" aria-label="Analyses Report">Analyses</a></li>
        <li><a href="/reports/lifecycle" aria-label="Lifecycle Report">Lifecycle</a></li>
      </ul>
    </li>
    <li>
      <button aria-controls="tools-submenu" aria-expanded="false" aria-label="Expand Tools submenu">Tools</button>
      <ul id="tools-submenu" hidden>
        <li><a href="/team" aria-label="Team Tools">Team</a></li>
        <li><a href="/personality" aria-label="Personality Tools">Personality</a></li>
      </ul>
    </li>
    <li>
      <a href="/journal" aria-label="Journal">Journal</a>
    </li>
    <li>
      <a href="/comments" aria-label="Comments">Comments</a>
    </li>
  </ul>
</nav>

3h. Updated design

After addressing the identified issues, the side navigation now ensures better usability for people with visual impairments:

Improved Accessibility:

  • Color Contrast: Enhanced to meet WCAG standards, ensuring sufficient contrast for users with color vision deficiencies.

  • Icon Clarity: Icons redesigned to be more distinguishable, particularly for users with red-green color blindness.

  • Text Legibility: Text clarity improved through better color choices and contrast adjustments, catering to users with color blindness.

  • Visual Hierarchy: Clear structure implemented to aid users with visual impairments, ensuring easier navigation and comprehension of content.

TOP NAVIGATION

Quick access to dashboard features.

  1. Top Navigation

The Top navigation as shown across different visions does not fully comply with usability for people with visual impairments for several reasons:


  • Title Clarity and Page Identification: The absence of a descriptive and prominently displayed page title can leave users with visual impairments unable to determine the current page and its purpose.

  • Contrast: The top navigation may lack sufficient color contrast, which is particularly challenging for users with visual impairments, making it hard to discern textual and interactive elements.

  • Search Functionality: The top navigation does not include a search function, omitting a vital tool that users with visual impairments rely on to efficiently find content.

  • Notification Feature: The absence of a notification feature in the top navigation can prevent users with visual impairments from receiving important alerts and updates that are typically highlighted visually.

4a. Title Clarity and Page Identification

Issue: The title "Overview" may not clearly stand out as the page's main header, potentially causing confusion about the page's purpose.

Accessibility Concern: Clear and distinguishable headings are essential for users to quickly understand the structure and content of web pages.


Solution:

  1. Color Contrast Enhancement: Utilizing contrasting colors to separate the title from the navigation background, enhancing its visibility and ensuring it is easily recognizable as the main heading.

  2. Custom Text Integration: Incorporating custom inline text, such as "Company Overview: Review of Latest Analytics," to provide additional context and guide user expectations.

  3. Font Size and Weight Adjustment: Modifying the font size and weight to establish a clear visual hierarchy, ensuring that the title stands out prominently as the main header on the page.

Technique:


Border-color


The choice of color for the decorative border lines is #E0E0E0, ensuring they are distinctive enough to be recognized while maintaining a pleasing aesthetic.

As purely aesthetic elements, decorative border lines are exempt from strict accessibility requirements such as color contrast ratios, as long as they do not convey critical information or functionality.
The choice of color for the decorative border lines is #E0E0E0, ensuring they are distinctive enough to be recognized while maintaining a pleasing aesthetic.

4b. Profile Card-Item Contrast and Accessibility

Issue: The contrast between the elements of the profile card and the background might be insufficient, potentially affecting the readability for users with visual impairments.

Accessibility Concern: Ensuring adequate color contrast is crucial for text visibility, especially for users with visual impairments.

Clear contrast between text and background enhances readability and usability.

Solution:

To address the accessibility concerns, the following adjustments were made:

  • Adjusted primary-text-color to #131313 and secondary-text-color to #515151 to ensure sufficient contrast

  • Modified font-weight from extra-bold to bold for the title and from thin to regular for the subtitle to improve legibility and maintain consistency.

Technique:

4c. Inclusion of Search Functionality

Best Practice: Integrating a search function facilitates users in quickly finding the information they need within the dashboard.


Accessibility issue: The absence of a search function can hinder users, especially those with specific needs or those navigating large datasets, from efficiently accessing relevant content. Providing alternative methods for content discovery is crucial for ensuring inclusivity and usability.

Solution:

  1. Icon Placement: Position the search icon before the text in the input field to align with user expectations.

  2. Color Contrast: Confirm sufficient contrast between text (#4D4D4D) and background (#F6F6F6), ensuring that the icon color (#333333) also meets accessibility standards.

  3. Text Size: Set font size to at least 14px for readability.

  4. Spacing: Provide ample spacing and padding around the input field for touch interaction

Technique:

4d. Notification Feature

Best Practice: Notifications help users stay informed about new information or changes within the dashboard.

Accessibility Concern: Without proper implementation, notifications may not be accessible to all users, particularly those relying on screen readers or users with visual impairments. Ensuring that notifications are perceivable, operable, and understandable by all users is essential for accessibility.

Solution:

  1. Integrate a notification icon: Include a visually distinct icon on the navigation bar to alert users to new information or updates.

  2. Implement ARIA live regions: Ensure that the notification alerts are announced by screen readers without requiring user focus.

  3. High contrast design: Design the notification feature with a high contrast ratio to ensure visibility and readability for users with visual impairments.

Technique:

4e. Aria Labels


  • Each element has an aria-label or an alt attribute to ensure that screen readers can provide a context-rich description to users who rely on them.

  • The aria-describedby is used to associate the notification button with additional descriptive text.

  • The hidden span (id="notification-count") is an example of how we could provide additional context to the notification button which could be dynamically shown or hidden and updated based on the number of new notifications.

<nav aria-label="Top navigation bar">
  <h1 aria-label="Page title">Company Overview: Review of latest analytics</h1>
  <form role="search" aria-label="Site search">
    <input type="search" aria-label="Search surveys, metrics, engagement levels, or insights" placeholder="Search surveys, metrics, engagement levels, or insights">
    <button type="submit" aria-label="Submit search">Search</button>
  </form>
  <div aria-label="User profile">
    <button aria-label="Notifications" aria-describedby="notification-count">
      <span id="notification-count" hidden>0 new notifications</span>
      <!-- Icon for notifications -->
    </button>
    <img src="path-to-user-image.jpg" alt="Profile picture of Anders Munk" />
    <span aria-label="User name and company">Anders Munk, Tech Agency</span>
  </div>
</nav>

3h. Updated design

After implementing the necessary changes to enhance accessibility, the top navigation would be described as follows:

  • Title Clarity and Page Identification: A clear and concise page title is now prominently displayed, providing users with visual impairments a straightforward understanding of the page's content and purpose.

  • Contrast: The top navigation has been updated with high-contrast colors, improving visibility and legibility for users with visual impairments, including those with color vision deficiencies.

  • Search Functionality: A search feature has been integrated into the top navigation, complete with an accessible design and clear labeling, enabling users with visual impairments to navigate and locate information more efficiently.

  • Notification Feature: A notification system has been added to the top navigation, designed to be accessible with visual indicators as well as auditory alerts, ensuring that users with visual impairments are promptly informed of important updates.

CARDS ITEM

Information cards with progressive bars.

  1. Cards Item

The Card-item does not fully comply with usability for people with visual impairments for the following reasons:

  • Clarity of Data Visualization: Users with color vision deficiencies may struggle to differentiate between metrics due to reliance on color alone.

  • Progress Bar and Text Legibility: Progress bars and text may not be discernible by users with color vision deficiencies due to reliance on color.

  • Font Size Issues: Text on the metrics cards may appear too small for comfortable reading.

  • Hierarchy & Borders: Lack of clear font-weight hierarchy and borders makes it difficult to prioritize information.

4a. Clarity of Data Visualization

Issue: Users with color vision deficiencies may struggle to differentiate between metrics due to the reliance on color alone to convey information in data visualization.

Accessibility Concern: Relying solely on color to distinguish between data points can pose challenges for users with color vision deficiencies, potentially leading to difficulty in interpreting the visualized data.

Solution: Ensure that the information conveyed by color is also available in a non-color format, such as text or patterns.

Technique: Ensuring that information conveyed by color differences is also available in text.

4b. Progress Bar and Text Legibility

Issue

  • While the progress bars utilize color to illustrate performance against benchmarks, they rely on color alone, which may not be discernible by users with color vision deficiencies.

  • The text sizes, particularly for the descriptive text, appear small, which may affect readability for users with visual impairments.

Accessibility

  • The progress bars' reliance on color alone to convey information might not be accessible to users with color vision deficiencies and doesn't meet WCAG guidelines for distinguishable visual elements.

  • Text must be legible for all users, including those with low vision.

Solution :
For the progress bars, adding a non-color indicator, like a pattern or hatch marks, could improve differentiation without relying solely on color.

For the text, increasing the size and ensuring that fonts are resizable will cater to a wider range of users.

Technique:

For the progress bars, use techniques such as:

  • WCAG Technique G14: Ensuring that information conveyed by color differences is also available in text.

  • WCAG Technique G182: Ensuring that additional visual cues are available when text color differences are used to convey information.

4c. Font Size Issues

Issue: The text on the metrics cards may appear too small, potentially affecting readability for users.

Accessibility Concern: Text should adhere to font size guidelines to ensure readability for all users, including those with visual impairments.


Solution: Ensure that text size meets or exceeds standard legibility requirements, accommodating users with varying visual abilities.

Technique: While there is no official minimum font size for the web, it is generally agreed upon that 14px and 16px for body text is a good starting point.


4c. Hierarchy & Borders


Issue: The UI lacks clear font-weight hierarchy, leading to difficulty in prioritizing information.

Accessibility Concern: Without visual hierarchy, users, especially those with cognitive disabilities, may struggle to identify key information.
WCAG Success Criterion 1.3.1: Info and Relationships


Solution:

  • Establish varied font-weights to guide users naturally.

  • Use bolder weights for titles and key data, and lighter weights for descriptions.

Technique for Borders: Add subtle borders to interactive elements for clearer boundaries, aiding users with visual impairments.
WCAG Success Criterion 1.4.11: Non-text Contrast


4d. Aria Labels


  • The role="slider" attribute indicates that the element is used as a slider for the visual representation of the score.

  • The aria-valuenow attribute indicates the current value, which is 73 in this case.

  • The aria-valuemin and aria-valuemax attributes define the minimum and maximum values for the slider, which are 0 and 100, respectively.

  • The aria-label provides a text description of the slider's function and current value.

  • The tabindex="0" attribute makes the slider focusable via keyboard interaction, enhancing accessibility.

<div role="article" aria-label="Well-being score card">
  <p aria-label="Current well-being score">73</p>
  <p aria-label="Context of score">Well-being score - Most recent measure</p>
  <div role="slider" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" aria-label="Current well-being score of 73 out of 100, slightly below the average score of 77" tabindex="0">
    <!-- Visual representation of the slider/bar -->
  </div>
  <p aria-label="Score interpretation">Your most recent well-being score of 73 is a little low and could be better compared to the average of 77 across companies.</p>
</div>

4e. Updated design

After implementing the necessary changes to enhance accessibility, the card items now have:

  • Clarity of Data Visualization: Implemented alternative visual cues alongside color to aid differentiation between metrics for users with color vision deficiencies.

  • Progress Bar and Text Legibility: Enhanced progress bars and text legibility to ensure readability for all users, regardless of color vision.

  • Font Size Adjustments: Increased text size on metrics cards for improved readability.

  • Hierarchy & Borders: Implemented clear font-weight hierarchy and borders to aid in prioritizing information and enhancing overall user experience.

INFORMATION PANEL

Summary and Activity Display tab.

  1. Information Panel

The lnformation panel navigation does not fully comply with usability for people with visual impairments for the following reasons:

  • Font-Weight Hierarchy Issue: Uniform font weights hinder quick recognition of informational hierarchy.

  • Text Increment Indicators Issue: The absence of clear markers for data fluctuations can obscure the understanding of trends.

  • Semantic Structure Issue: The menu's semantic layout may be unclear, which can be problematic for assistive technologies and affect navigation ease.


6a. Font-Weight Hierarchy

Issue: Uniform font-weight throughout the information panel hampers the user's ability to quickly identify the hierarchy of information.


Accessibility Concern: A clear visual hierarchy is critical for users with cognitive disabilities or low vision.

Solution: Create visual distinction using varied font-weights; bold for key data, regular for supporting text.


Technique:

6b. Text Increment Indicators

6c. Semantic Structure

Issue: The semantic structure of the information-panel menu may not be clear.

Accessibility Concern: Information and relationships should be easy to recognize for cognitive assistance.

Solution:

Implemented a navigation structure dividing elements into two sections:

  • Company: Contains static information primarily for reading with minimal interaction.

  • Activity: Houses interactive pages for performing actions rather than data analysis.


Technique:

6d. Insights Feature for Cognitive Support

Issue: Users with cognitive disabilities may struggle to interpret complex data sets.

Accessibility Concern: Summarized insights can support cognitive processing and decision-making.

Solution: Implement a feature that provides summarized insights to support users with cognitive disabilities in interpreting complex data sets.

Technique: Though not specified in WCAG, prioritizing adaptable and readable content principles aids users with cognitive disabilities.

Summarizing insights through natural language processing aligns with WCAG's compatibility goal.

6e. Aria Labels


  • The aside tag is used to represent the information panel as a complementary section of the page.

  • The aria-label attribute provides descriptive labels for different sections and elements, which will be read by screen readers.

  • The aria-labelledby attribute references the id of headings to provide context for the following content sections.

  • The numbers and associated text (like "248 Employees") are combined into a single label for clarity. If there's an interactive element to show the changes in percentage (like +20%), this can be included in the aria-label as well.

<aside aria-label="Summary panel with current status and activities">
  <h2 aria-label="Summary">Summary</h2>
  <p aria-label="Description">Current status and latest activities</p>
  <section aria-labelledby="company-info">
    <h3 id="company-info">Company</h3>
    <p aria-label="Number of active employees">248 Employees currently active</p>
    <p aria-label="Average tenure of employees">1.2 Years of tenure for all employee records</p>
    <p aria-label="Average age of active employees">31 Average age currently active</p>
  </section>
  <section aria-labelledby="activity-info">
    <h3 id="activity-info">Activity</h3>
    <p aria-label="Employee response rate with increase">95% Response rate, increased by 20% recently</p>
    <p aria-label="Number of initiatives with decrease">3 Initiatives, decreased by 2% in the last 12 months</p>
    <p aria-label="Number of new hires with increase">45 New hires, increased by 20% in the last 12 months</p>
  </section>
  <section aria-labelledby="insights-info">
    <h3 id="insights-info">Insights</h3>
    <p aria-label="Suggested action to improve team engagement">Implement new initiatives: Consider hosting brainstorming sessions to inspire team engagement and creativity.</p>
  </section>
</aside>

6f. Updated design

The information-panel navigation has been improved for better usability for people with visual impairments, and an insights feature has been added to support users with cognitive disabilities:

  • Font-Weight Hierarchy Improvement: Adjusted font weights now effectively differentiate levels of information for quicker hierarchy recognition.

  • Text Increment Indicators Enhancement: Clear markers and descriptive labels for data trends have been added for improved trend understanding.

  • Semantic Structure Clarification: The menu's semantic organization has been refined for clearer navigation and better support with assistive technologies.

  • Insights Feature Enhancement for Cognitive Support: A new feature that simplifies complex data into easily digestible insights has been introduced, aiding users with cognitive disabilities in interpreting data sets.

CHART

Line chart section

  1. Chart Section


The Chart Section does not fully comply with usability for people with visual impairments for the following reasons:

  • Contrast and Color Differentiation Issue: Insufficient contrast between the color gradients can lead to indistinct data series representation.

  • Tooltip Accessibility Issue: Limited accessibility of tooltips through keyboard navigation and screen readers may exclude users relying on assistive technologies.

  • Data Point Indicator Visibility and Interaction Issue: Indistinct and hard-to-select data points present challenges for users with motor and severe visual impairments.

  • Legibility of Data Points Issue: Small text size at data points may hinder readability, impacting users with low vision.

7a. Axes and Labels Clarity

Issue: The current axes on the chart are not sufficiently labeled, which may impede users, particularly those with cognitive disabilities, from understanding the chart's timeframe and data scale.

Accessibility Concern: Axes and data labels must be perceivable and understandable for all users, as dictated by WCAG guidelines.

Solution: Clearly label the X-axis with months to denote the timeline and the Y-axis with a numerical scale from 1 to 100 to indicate the data's magnitude.

Technique:

  • WCAG 1.3.1: Info and Relationships, to ensure that the information, structure, and relationships conveyed through presentation are programmatically determinable or are presented in text.

  • WCAG 1.4.11: Non-text Contrast, ensuring that essential graphical elements have a contrast ratio of at least 3:1 against adjacent colors.

7b. Color-coded data series are unclear to users with color vision deficiencies

Issue : Charts use color to distinguish between different data series, which can be problematic for users with color vision deficiencies, making it hard for them to interpret the data correctly.

Accessibility Concern: It's important that information is not conveyed by color alone to ensure accessibility for all users.

Solution: Enhance the chart by incorporating distinct patterns or shapes for each data series alongside the existing color coding. This modification allows users to distinguish between data series without relying solely on color.

Technique:

  • WCAG 1.4.1: Use of Color: Introducing non-color cues (patterns/shapes) to convey information, ensuring that the presentation of data is not dependent solely on color perception.

  • WCAG 1.1.1: Non-text Content: By providing text alternatives in tooltips for all non-text content, we ensure that everyone can understand what the visuals represent.

7c. Highlighted Data Series Usability and Accessibility Analysis


Issue: The current visualization highlights a data series, but the clarity and interaction with the highlighted elements may not be sufficient for users with visual or motor impairments.

Accessibility Concern: Highlighted elements in a data visualization should be easily discernible, interactive and easily selectable for users navigating with assistive technologies.

Solution: To improve accessibility, the size of interactive data point markers within the highlighted series is increased, and the border contrast enhanced for better visibility. Additionally, introducing a hover-over or focus effect that further distinguishes the active point.

Technique: Implement WCAG Technique G181, ensuring that interactive elements are not only visible but also easy to select. This includes providing a larger clickable area around the data points and utilizing visual cues.

7d. Aria Labels


  • The role="region" attribute helps screen readers identify the chart as a significant section of the page.

  • The role="img" attribute is applied to the chart container along with an aria-label that describes the overall nature of the chart. This label explains that the chart depicts three metrics, each represented by a different style of line.

  • The role="complementary" attribute on the chart key provides a semantic indication that this section complements the main content, which is the chart.

  • Each metric in the legend is described, noting the style of line that represents it on the chart.

  • The role="button" and tabindex="0" on the Filters div make it accessible as an interactive element.

  • The id="chart-tooltip" is associated with a hidden role="tooltip" that should be dynamically shown with appropriate aria-hidden toggling when data points are interacted with. The content within this tooltip would be updated based on the data point in focus or hovered over.

<div role="region" aria-label="Interactive key metrics chart from September to March, tracking well-being, stress, and eNPS. Use the keyboard or mouse to explore data points for detailed values.">
  <h2 aria-label="Section title">Key Metrics</h2>
  <div role="img" aria-label="Line chart depicting three key metrics. Solid line represents well-being, dashed line represents stress, and dotted line represents eNPS.">
    <!-- Chart implementation -->
  </div>
  <div role="complementary" aria-label="Chart key">
    <ul>
      <li aria-label="Well-being, trend shown by a solid line.">Well-being</li>
      <li aria-label="Stress, trend shown by a dashed line.">Stress</li>
      <li aria-label="eNPS, trend shown by a dotted line.">eNPS</li>
    </ul>
  </div>
  <div aria-label="Chart filter functionality" role="button" tabindex="0">Filters</div>
  <div id="chart-tooltip" role="tooltip" aria-hidden="true">
    <!-- Hidden tooltip content, to be made visible when data points are focused or hovered -->
  </div>
</div>

7e. Updated design

The Chart Section has been enhanced for optimal usability for people with visual impairments, addressing previous concerns:

  • Color and Contrast Optimization: The data series are now distinguishable without reliance on color alone, through the use of contrasting hues complemented by distinct shapes or patterns.

  • Data Point Clarity and Interaction: Data points have been redesigned with increased size and clear labeling, making them easy to select and understand, aiding users with motor or visual impairments.

  • Comparative Data View: An alternative comparative data view, has been implemented to facilitate easier analysis for all users, including those with cognitive disabilities.

RESULT

Summary of the project findings

8a. Conclusion

The comprehensive audit of the dashboard UI underscored the necessity of aligning with accessibility norms.

Notable improvements include:


  • The rectification of color contrasts, augmentation of text hierarchy, and enhancement of icon clarity, which now adhere to WCAG standards.

  • The updated side navigation provides improved legibility and interaction for visually impaired users.

  • Significant strides were made in the areas of semantic structuring and aria-label implementation, bolstering navigability for assistive technology users.


Overall, the design modifications have successfully forged a more inclusive and navigable environment, demonstrating a steadfast commitment to accessibility and setting a new benchmark for future iterations.

8b. Red Green Color Blindness

This is the most common form of color blindness. It affects approximately 8.5% of the population.

8c. Total Color Blindness

This condition is much rarer, affecting roughly 1 in 30,000 to 50,000 people worldwide. Individuals with achromatopsia cannot perceive any color at all and see the world in varying shades of gray.

8d. End Result

The before and after comparison demonstrates an improvement in accessibility, with enhanced color contrast, clear text hierarchies, and interactive elements that comply with WCAG standards, providing an inclusive user experience.

SEE MY OTHER PROJECTS