Skip to main content

Accessibility UI Guidelines: Global Settings

1. Global Settings

1.1 Appearance Settings

Define and use consistent color schemes across your web content to enhance readability and aesthetic coherence for users with visual impairments.

1.1.1 Customised themes Consider the possibility that light and dark modes might not address every edge case, leaving some users still struggling with the theme. It may be impractical to account for all potential challenges. To mitigate this, consider adding a settings feature that allows users to customise and save their own theme preferences locally in their browser. Including a reset option for reverting to the default theme would also be beneficial.

1.1.2 Contrast

Ensure sufficient contrast between text and background colors to aid users with low vision or color-blindness.

Automatic Calculation:

The Checkmeister Contrast Checking Tool is an essential utility for ensuring that your website meets the required accessibility standards. Proper contrast between text and background colors is vital for readability, especially for users with visual impairments. This tool helps you evaluate and adjust color combinations to achieve the best possible contrast ratios.

Manual Calculation While using online tools is highly recommended for accuracy, understanding the manual calculation in simpler terms can be beneficial.

Formula:

Contrast Ratio = (Light Color + 0.05) / (Dark Color + 0.05)
MathML version
Contrast Ratio = Light Color + 0.05 Dark Color + 0.05
  • Light Color: The brightness value of the lighter color.
  • Dark Color: The brightness value of the darker color.

How to Calculate Brightness (Relative Luminance):

  • Convert the RGB (Red, Green, Blue) values of the color to a linear format using the WCAG formula:
    • If the RGB value is ≤ 0.03928, divide it by 12.92.
    • If the RGB value is > 0.03928, raise it to the power of 2.4 and multiply by 1.055, then subtract 0.055.
  • Use the formula to find relative luminance: 0.2126 * R + 0.7152 * G + 0.0722 * B, where R, G, and B are the linear RGB values.

Why Tools Are Better:

  • Manual calculations can be tricky and may lead to errors, especially when converting RGB values.
  • Online tools make the process easier by doing the math for you and ensuring precise results.

Tip for Visual Learners: Use visual aids, like sliders or color pickers, to better understand the effect of contrast on accessibility.

1.1.3 Flashing Images Flashing images can trigger seizures and cause significant discomfort for individuals with photosensitive epilepsy, posing serious health risks. To ensure an inclusive and safe environment, avoid using flashing or strobe visuals. If their use is unavoidable, provide advance warnings to users.

1.2 General Settings

1.2.1 Keyboard Access

Implement keyboard-navigable web interfaces to support users who cannot use a mouse.

1.2.2 Skip Links

The user should be able to jump ahead of specific elements such as the navigation and go directly to the main content. This is particularly important for assistive technologies such as screen readers.


<!-- Skip link to the main content -->
<a href="#main-content" class="skip-link">Go to main content</a>
<main id="main-content">
    <!-- Main content goes here -->
</main>

1.2.3 Responsive Design

Responsive design ensures that digital content is accessible and legible across all devices, from desktops to smartphones. By adapting to various screen sizes and orientations, responsive design enhances accessibility for users with mobility limitations who rely on different devices, and improves usability for all users by providing a consistent experience regardless of the device used.

1.3 Localisation

Use the correct language for the document using the lang attribute. If the language changes in any part of the document then state the corresponding language


<!-- Example of setting the document language -->
<html lang="en">
    <body>
        <p>This is a paragraph in English.</p>
    </body>
</html>



<!-- Example of changing language within a document -->
<p lang="en">This is an English text.</p>
<p lang="fr">Ceci est un texte en français.</p>

1.4 Meta Data

1.4.1 Meta Tags

Use <meta> tags to provide essential information about the page to search engines, assistive technologies, and browsers. This includes metadata for character encoding, description, keywords, viewport settings, and more. 


<!-- Example of meta tags -->
<meta charset="UTF-8">
<meta name="description" content="An accessible and inclusive user interface guide.">
<meta name="keywords" content="accessibility, user interface, guidelines">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

1.4.2 Page Title

Ensure each page has a descriptive and meaningful <title> element that clearly conveys its content and purpose. This improves navigation for all users, especially those using assistive technologies. 


<!-- Example of a descriptive title -->
<title>Accessible User Interface Guidelines - Home</title>
1.5 Consistent Layout Consistency in UI layout is essential for creating a seamless, intuitive user experience. When elements like navigation menus, buttons, and interactive components are consistently placed in predictable locations, users can interact with your interface more efficiently, without the mental friction of having to search for familiar features. A sudden shift in where a key element is located or an unexpected layout change can disrupt the user's flow and cause confusion and anxiety. By adhering to consistent placement rules, such as always positioning close buttons in the top right or using uniform modal components, designers should ensure that users feel confident navigating the interface, reducing cognitive load and enhancing overall usability. Predictability is key to building trust and ensuring that users can focus on tasks rather than figuring out how to use the interface.