This project explains the design process of a phonebook application adhering to WCAG guidelines. I have not been commissioned to do so.
Overview of the Website:
The Phonebook application is a user-friendly platform that manages and organizes contacts efficiently. Developed using Angular[ss1] 16, this application allows users to view a list of contacts, add new contacts, and manage existing ones. The interface is designed with accessibility at its core, ensuring that users of all abilities can interact with the application seamlessly. The application adheres to WCAG Level AAA guidelines, providing an inclusive experience for visual, auditory, and motor impairments users.
The Phonebook application is divided into two main pages:
Contact List: This page displays a comprehensive list of all contacts in the phonebook, featuring options to view, and delete individual contacts.
Add Contact: This page allows users to add new contacts by providing details such as name, email, phone number, and address. It also includes form validation to ensure that all required fields are correctly filled out.
Why Design the Website Following WCAG Guidelines?
Designing the Phonebook application to comply with WCAG Level AAA guidelines is crucial for several reasons:
Inclusivity: By following WCAG guidelines, the application becomes accessible to a broader audience, including individuals with various disabilities. This includes those with visual impairments (through screen readers), cognitive impairments (through clear and consistent navigation), and motor impairments (through keyboard navigation).
Legal and Ethical Responsibility: Ensuring accessibility is not only a legal requirement in many jurisdictions but also an ethical responsibility. It demonstrates a commitment to providing equal access and opportunities to all users, regardless of their abilities.
Enhanced User Experience: WCAG compliance contributes to a more intuitive and user-friendly experience. Features such as high-contrast text, clear focus indicators, and responsive design enhance the overall usability of the application.
Broadening Market Reach: Accessible applications can reach a wider audience, including those who might otherwise be excluded. This can lead to increased user engagement and satisfaction.
Future-Proofing: Adhering to high accessibility standards ensures that the application remains relevant and functional as technology and user needs evolve.
UX Research:
Persona
Emapthy Map
SCSS Changes Made to Make the Website WCAG Compliant :
To ensure the Phonebook application meets WCAG Level AAA standards, several SCSS changes were implemented:
Color Contrast and Text Legibility
Background and Text Colors: Ensured that text colors provide sufficient contrast against background colors. For instance, dark text on a light background or light text on a dark background is used to achieve a contrast ratio of at least 7:1.
Hover and Focus States: Applied distinct hover and focus states with high-contrast colors to make interactive elements easily identifiable. For example, links and buttons have a clear visual change when hovered over or focused, using colors that stand out against their backgrounds.
$button-background-color: #3498db; // High contrast for button background
$button-text-color: #ffffff; // Light text for contrast
$focus-outline-color: #e67e22; // Orange for focus indicators
button {
background-color: $button-background-color;
color: $button-text-color;
&:hover, &:focus {
background-color: darken($button-background-color, 10%);
color: $button-text-color;
}
&:focus {
outline: 3px solid $focus-outline-color;
outline-offset: 2px;
}
}
Typography and Spacing
Font Size: Ensured a base font size of at least 18px to accommodate users with low vision. Heading sizes were adjusted to create a clear visual hierarchy, aiding both screen reader users and sighted users.
Line Height and Padding: Increased line height and padding to enhance readability and make content easier to scan.
html {
font-size: 18px; // Ensuring readable base font size
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 15px;
line-height: 1.4;
}
p {
margin-bottom: 20px;
line-height: 1.6; // Improved readability
}
Keyboard Accessibility
Focus Indicators: Applied clear focus outlines to all interactive elements such as buttons and links. This helps keyboard users identify which element is currently in focus.
Keyboard Navigation: Ensured that all interactive elements are navigable using the keyboard alone, providing a logical tab order and focus management.
a, button {
&:focus {
outline: 3px solid $focus-outline-color;
outline-offset: 2px;
}
}Responsive Design
Media Queries: Used media queries to ensure the application is accessible on various screen sizes. The design adapts for mobile devices, with elements resizing appropriately and remaining readable.
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
p {
font-size: 16px;
}
}
Form Accessibility
Form Labels and Inputs: Ensured that all form elements are properly labeled and accessible. Applied styles to labels and inputs to make them clearly visible and easy to interact with. syntax highlighting.
label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
input, select, textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #cccccc;
border-radius: 5px;
}
input:focus, select:focus, textarea:focus {
border-color: $focus-outline-color;
outline: none;
}
Key Components of Information Architecture (IA) for Phonebook Application (WCAG Compliant):
1. Home Page (Contact List)
Main Components:
Header: Includes navigation (e.g., Home, Add Contact)
Contact Table: Displays name, phone, email, and actions (Delete)
WCAG Compliance:
Clear text labels for the buttons.
Keyboard navigability.
Sufficient contrast between the text and background.
Screen-reader compatibility (ARIA attributes like aria-label).
2. Add Contact Page
Main Components:
Header: Navigation similar to the Contact List page
Form Fields:
Name
Phone
Email
Address
Submit Button: Add the contact
Form Validation: Accessible error messages (e.g., "Name is required")
WCAG Compliance:
Input fields labeled clearly with aria-label.
Validation errors are highlighted with clear text and screen reader support.
Focus management (focus returns to form fields after error).
High contrast text and keyboard focus indicators.
3. Delete Confirmation Dialog
Main Components:
Dialog Box: Modal confirming if the user wants to delete the contact
Confirm Button: Proceed with deletion
Cancel Button: Close dialog and return to Contact List
WCAG Compliance:
Dialog should be fully keyboard accessible.
Proper focus management (focus trap inside the modal).
Clear, high-contrast text.
Accessible to screen readers with appropriate aria-role and aria-live for feedback.
WCAG Key Considerations for IA:
Keyboard Navigation: Ensure all elements (links, buttons, forms) are reachable via keyboard alone.
ARIA Roles & Landmarks: Clearly define roles for screen reader users, especially in dynamic areas like modals and forms.
Color Contrast: Ensure that text, buttons, and error messages have high contrast against their backgrounds.
Focus Management: Automatically set focus to critical components like error messages or modals.
Responsive Design: Ensure content reflows properly on mobile devices without loss of accessibility.
Summary
The Phonebook application has been designed with accessibility as a top priority, adhering to WCAG Level AAA guidelines. The application features a color scheme with high contrast, readable typography, clear focus indicators, and responsive design. These enhancements ensure that the application is usable by individuals with various disabilities, providing an inclusive experience for all users.
Comments