Accessibility might be a familiar yet intimidating concept for web developers crafting graphical user interfaces (GUI) for their applications.
Integrating accessibility into a GUI can seem to be difficult. It involves:
- Reading extensive guidelines
- Adding numerous HTML attributes
- Potential aesthetic sacrifices
- Significant time and financial investment
This article breaks down accessibility into a handful of core principles. Also, it gives practical guidance on designing an accessible GUI from the outset.
These simple principles can help avoid common pitfalls that render GUIs inaccessible.
Four Core Principles of Accessibility
Accessible user interfaces adhere to these four fundamental principles:
1. Perceivable information and user interface:
Ensuring that all content on the site is viewable and coherent.
2. Operable user interface and navigation:
Facilitating especially abled users to navigate the GUI and use all essential functions.
3. Coherent information and user interface:
Presenting information clearly and predictably, offering guidance, and assisting users in rectifying errors.
4. Robust content and reliable interpretation:
Ensuring compatibility with current and future tools (e.g., different browsers and assistive tech).
Now that we have covered the four main principles, let us explore some tips for creating accessible GUIs.
These may align differently from the principles above. However, it is crucial to ensure that any additions to the GUI adhere to at least the first three principles.
Essential DOs and DON’Ts for Accessible GUIs
Mandatory Requirement: Use a GUI Framework
First and foremost, avoid coding the site solely in plain HTML.
Many frameworks and widget libraries offer useful and accessible widgets such as boolean buttons and swap-selects.
When selecting a framework, ensure it meets these three requirements:
- Widgets are customizable through CSS.
- Widgets are keyboard-navigable.
- Generated HTML code includes ARIA meta elements.
Colors and Shapes
Emphasize high contrast between foreground and background colors.
Imagine viewing the site on a subpar projector in a brightly lit room. That elegant light blue icon on a dark blue background becomes nearly invisible.
However, changing the icon’s color to white greatly improves visibility. Why? This is because white contrasts with dark blue more than light blue.
High contrast is essential for users with limited vision (recall the first principle).
Rather than diving into complex contrast ratios for various text sizes, remember these practical guidelines:
- Consider the ‘bad projector analogy’ when selecting element colors.
- Opt for a very dark or bright background, using a contrasting font color.
- After selecting colors, verify foreground/background contrast using a contrast checker tool.
Avoid relying solely on color to convey information (and, if used, provide corresponding shapes).
You have designed a status icon as a pleasing small sphere: green for ‘all clear’ and red for ‘trouble.’ But what about users with red-green color blindness ? They cannot discern ‘trouble’ solely from color.
According to an article by Clinton Eye Associates,
While color-coding elements can aid most users in understanding GUIs more quickly, color should not be the sole distinguishing factor. Include supplementary text or assign a corresponding shape to each color. In the example mentioned, the red status icon could be an exclamation mark instead of a sphere.
Note: Users should be able to distinguish element meanings visually without relying on tooltips. Tooltips require users to navigate to the element for clarification.
This principle also applies to links.
Links should be easily identifiable for users with limited vision. They can achieve this using bold or underlined text (or both). Also, they can select a link color contrasting with plain text and the background, although the latter can be challenging.
Avoid using bitmap images:
Apart from appearing dated, bitmap images pose accessibility challenges, including:
- Fixed size, resulting in aliasing artifacts when scaled.
- Fixed colors and often gradients, complicating integration into different contexts while preserving contrast.
- Larger file sizes, potentially slowing the site and cluttering users’ devices.
While not strictly an accessibility concern, these drawbacks provide ample reasons to opt for vector-based images with a single color.
Benefits of vector-based images include:
- Images look good at higher zoom levels, commonly used by users with limited vision.
- Allows selection of colors with appropriate contrast and flexibility in different contexts.
- Compatible with the operating system’s ‘high contrast mode,’ aiding users with limited vision. Bitmap images do not adapt to this mode, whereas vector images do.
Ensure each image on the site has an ‘alt’ attribute with descriptive text.
Semantic HTML:
When crafting HTML, focus on more than just the visual outcome. Consider this example: a <div> element styled to resemble a button with JavaScript functionality may seem sufficient when creating a button. However, what about keyboard activation or conveying to a screen reader that it is a button? These aspects must be addressed.
Key rules for semantic HTML include:
- Avoid using tables for layout; use dedicated structural elements like <header>, <footer>, <nav>, <main>, and <article> for page layout.
- Structure text content with elements like <h1>, <h2>, and <p> rather than using individually styled <div> elements with numerous <br> tags.
- Use the <button> element for buttons.
- Use the <label> element to assign text labels to input elements.
- Refrain from using empty ‘pseudo links’ to mimic behavior (e.g., <a href=’#’ onclick=’…’>); opt for dedicated elements (e.g., <button>) instead.
- Use additional WAI-ARIA markup to add semantic elements that standard HTML lacks, such as search, tab group, tab, or tree.
Also Read: 2023’s Top 5 Programming Languages for Game Development
Summing Up
In this complete guide, we have explored essential strategies for web developers. This ensures that their graphical user interfaces are accessible to all users.
By –
- breaking down accessibility into four core principles,
- addressing color and shape considerations,
- opting for vector-based images, and
- emphasizing semantic HTML,
we have provided valuable insights and practical tips for designing inclusive user experiences.
These not only benefit users with disabilities but also enhance usability for everyone. By implementing these principles and practices, developers can create digital interfaces that are welcoming, functional, and future-proof.
Accessibility should be at the forefront of web development, and this guide equips you with the knowledge to make it a reality.
