Creating Accessible User Interfaces & Techniques to Ensure Accessibility
Creating Accessible User Interfaces & Techniques to Ensure Accessibility
Importance of accessibility
The importance of accessibility in the context of the web cannot be overstated. Accessibility refers to designing and developing digital content and online services in a way that ensures equal access and usability for individuals with disabilities. This includes people with visual, hearing, cognitive, and motor impairments, as well as those with temporary disabilities or situational limitations.
Understanding Digital Accessibility Standards
The international standards for coding and accessibility are the Web Content Accessibility Guidelines (WCAG), the WCAG is developed through the W3C process having as a goal to provide a single shared standard for web content accessibility that meets the needs of individuals, organizations and governments internationally. The WCAG have two completed versions WCAG 2.0 and WCAG 2.1 and WCAG 2.2 version on draft mode that is scheduled to be finalized in 2023. The WCAG standards have 12-13 guidelines and are based on four principles and three levels of conformance.
The Four Principles
Perceivable: Information and user interface (UI) components must be presented in a way that is easily processed by users.
Operable: UI components and navigation must be operable by all users, such as with a keyboard rather than a mouse.
Understandable: Users must be able to perceive and use a website, but they also must be able to understand it—the content and navigation cannot be beyond understanding.
Robust: Content must be robust enough that it can be interpreted by a variety of platforms, browsers, and devices, as well as assistive technologies.
The Three Levels of Conformance
Level A: For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.
Level AA: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.
Level AAA: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.
Key reasons why accessibility is crucial
Inclusivity and Equal Opportunity: Accessible websites enable people with disabilities to participate fully in the digital world. It promotes inclusivity by removing barriers and providing equal opportunities for everyone to access information, goods, and services online. It helps bridge the digital divide and ensures that individuals with disabilities can enjoy the same benefits and opportunities as others.
Ethical and Social Responsibility: Ensuring web accessibility is a matter of ethical and social responsibility. Technology has the power to break down barriers and empower individuals, and by neglecting accessibility, we deny people with disabilities the same opportunities and rights as others. Creating an inclusive online environment is a reflection of a more equitable and just society.
Enhanced User Experience: Accessibility improves the overall user experience for all users, not just those with disabilities. Designing websites with accessibility in mind leads to cleaner and more structured code, making them faster and easier to navigate. It benefits users in various situations, such as those using mobile devices, low-bandwidth connections, or older technologies.
Expanded Target Audience: By making websites accessible, businesses and organizations can reach a broader audience. Approximately 15% of the global population has some form of disability, and they represent a significant consumer base. Ignoring accessibility means missing out on potential customers, readers, or users who might turn to competitors with more accessible websites.
SEO and Search Rankings: Accessibility practices often align with search engine optimization (SEO) best practices. Search engines prioritize websites that are well-structured, have descriptive titles, alternative text for images, and clear navigation. By making websites accessible, they become more discoverable by search engines, leading to improved organic search rankings.
How to create an accessible menu
Creating an accessible menu involves using proper HTML structure, implementing keyboard navigation and adding ARIA (Accessible Rich Internet Applications) attributes.
ARIA attributes provide additional information to assistive technologies, such as screen readers, to understand the purpose, behavior, and state of interactive elements on a web page. ARIA attributes can be applied to various HTML elements and help bridge the gap between the intended user experience and the experience of users with disabilities.
ARIA attributes for an accessible menu:
role: Specifies the role or type of the element, helping assistive technologies understand its purpose. For example, role="button" indicates an element acts as a button.
<div role="button" tabindex="0">Click me!</div>aria-label: Provides a concise label or name for an element that is not adequately described by its visible text. It helps screen readers announce the element correctly.
<button aria-label="Close">×</button>aria-expanded: Indicates the expanded or collapsed state of an element, such as an accordion or menu. It helps screen readers convey the current state to users.
<button aria-expanded="true" aria-controls="accordion-content">Expand/Collapse</button>
<div id="accordion-content" role="region" aria-hidden="false">
<!-- Content goes here -->
</div>aria-hidden: Specifies whether an element should be visible or hidden to assistive technologies. It is useful for hiding decorative or irrelevant elements from screen readers.
<p>This text is visible.</p>
<p aria-hidden="true">This text is hidden from assistive technologies.</p>tabindex: Makes the HTML elements focusable, allows and prevents them from being sequentially focusable and determines their relative ordering for sequential focus. TabIndex accepts an integer as value, a negative value “-1” means that the element is not reachable via keyboard navigation. Assigning “0” as value means that the element should be focusable in sequential keyboard navigation while adding positive values determines the order of the next focusable HTML element.
aria-haspopup: Indicates the availability and type of an interactive popup element. The aria-haspopup value can be assigned as menu, listbox, tree, grid, dialog and true indicating what element triggers the popup and what kind of popup will be displayed.
aria-orientation: Specifies whether an element is oriented horizontally or vertically.
Accessible Menu Markup
<nav role="navigation">
<ul role="menubar" aria-orientation="vertical">
<li>
<a href="#column2" tabindex="0" aria-haspopup="true" aria-expanded="false">Explore</a>
<ul role="menu" aria-hidden="true">
<li><a href="#home" role="menuitem" tabindex="-1">Home</a></li>
<li><a href="#about" role="menuitem" tabindex="-1">About</a></li>
<li><a href="#services" role="menuitem" tabindex="-1">Services</a></li>
</ul>
</li>
<li>
<a href="#column1" tabindex="0" aria-haspopup="true" aria-expanded="false">Discover</a>
<ul role="menu" aria-hidden="true">
<li><a href="#contact" role="menuitem" tabindex="-1">Contact</a></li>
<li><a href="#portfolio" role="menuitem" tabindex="-1">Portfolio</a></li>
<li><a href="#blog" role="menuitem" tabindex="-1">Blog</a></li>
</ul>
</li>
</ul>
</nav>The <nav> element has the role attribute set to "navigation" to indicate its purpose as a navigation section.
The outer <ul> element has role="menubar" to indicate that it represents a menu bar and the orientation of the menu is set by the aria-orientation set to “vertical” .
The <a> elements representing the column headers have the tabindex attribute set to "0" to include them in the natural tab order.
The submenu items have the tabindex attribute set to "-1" to exclude them from the natural tab order until the corresponding column header is activated.
The role attributes menu and menuitem are applied to the appropriate elements to provide semantic meaning for assistive technologies.
ARIA attributes like aria-haspopup, aria-expanded, and aria-hidden are added to indicate the presence and state of submenus.
It's important to note that ARIA should be used in combination with proper HTML semantics, as incorrect or excessive use of ARIA attributes can potentially introduce confusion or create accessibility issues. It's recommended to follow the W3C's ARIA Authoring Practises guidelines for best practices and to ensure proper usage of ARIA attributes.
Find more about the ARIA attributes at: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
Best practices ( Semantic HTML, colors, contrast, responsive design, text for images, Form Accessibility)
Semantic HTML:
Heading Hierarchy: Headings should be used in a hierarchical order <h1> being the highest level and <h6> being the lowest. This hierarchy helps convey the organization and structure of your content to both users and search engines.
Page Structure: The main heading of a webpage should typically be represented by <h1>, reflecting the main topic or purpose of the page. Subsections or major sections can use lower-level headings (<h2>, <h3>, etc.) to provide a clear and logical structure.
Screen Readers and Navigation: Screen reader users heavily rely on headings to navigate through a webpage. They use heading levels to understand the document structure and move between sections easily. Properly structured headings ensure a seamless experience for screen reader users.
Visual Hierarchy and Design: Headings contribute to the visual hierarchy of your webpage. They help users quickly scan and understand the content by visually differentiating sections and emphasizing important information. Applying appropriate styles (e.g., font size, font weight) to headings can enhance the visual design.
SEO Considerations: Search engines interpret heading tags to understand the context and importance of different sections on a webpage. Using headings in a logical and meaningful way can positively impact search engine optimization (SEO) efforts, improving the visibility and relevance of your content.
Additional Accessibility Considerations: When using headings, it's important to follow some accessibility best practices:
Ensure each page has only one <h1> as the main heading and maintain a logical heading hierarchy without skipping levels (e.g., going from <h2> to <h4> without <h3>).
Use headings to reflect the content structure and avoid using them solely for visual formatting purposes
Use semantic elements like <nav>, <header>, <main>, and <footer> to define the purpose and structure of specific sections on your webpage.
<header>: Represents the introductory or navigational content at the top of a webpage.
<nav>: Indicates a section of navigation links.
<main>: Represents the main content of a webpage, excluding header and footer.
<section>: Defines a thematic grouping of content within a webpage.
<article>: Represents a self-contained composition or document within a webpage.
<footer>: Contains the footer information for a webpage.
Colors and Contrast:
Choose color combinations that have sufficient contrast between the text and background. Low-contrast text can be difficult to read for people with visual impairments or in different lighting conditions.
Use tools like color contrast checkers to ensure that the contrast ratio meets accessibility standards.
Additionally, avoid using color alone to convey important information or instructions. Use other visual cues such as icons, symbols, or text labels to ensure accessibility for users who are color-blind or have visual impairments.
Responsive Design:
Responsive design ensures that your website adapts and works well across different devices, screen sizes, and orientations.
Use fluid grids, flexible images, and CSS media queries to create a responsive layout that adjusts to different screen resolutions.
Test your website on various devices, browsers, and screen sizes to ensure a consistent and accessible experience for all users.
Text for Images:
Include descriptive alternative text (alt text) for images using the alt attribute. Alt text should convey the purpose, meaning, or information conveyed by the image.
If an image is purely decorative and doesn't convey any meaningful content, use empty alt text or CSS techniques (alt="" or role="presentation") to indicate it as decorative.
For complex images or infographics, consider providing longer descriptions using the longdesc attribute or by linking to a separate accessible page.
Form Accessibility:
Use the <label> element to associate labels with form fields. This ensures that screen readers can correctly announce the purpose of each form element.
Make sure form fields have clear and meaningful names or placeholders that accurately describe the expected input.
Provide additional instructions or error messages in an accessible manner, such as using descriptive text or using ARIA attributes like aria-describedby.
Techniques for testing and ensuring accessibility
There are several techniques that can be employed to test and ensure accessibility. By implementing accessibility testing techniques, developers can identify and address potential accessibility issues early in the development process, leading to a more inclusive and user-friendly product.
Manual Testing: Manual testing involves a thorough review and interaction with the website or application using assistive technologies like screen readers and keyboard navigation. By testing for keyboard accessibility, screen reader compatibility, and overall usability, developers can identify any barriers that might hinder users with disabilities from accessing and using the product effectively.
Automated Accessibility Testing: Automated accessibility testing tools can be used to scan websites or applications for common accessibility issues. These tools quickly identify accessibility violations and provide guidance on how to fix them. Using tools like Axe, Lighthouse, and Wave, developers can perform comprehensive accessibility checks, ensuring that the product meets the necessary accessibility standards.
CI pipelines to catch accessibility issues early in the development process.
CI pipelines, or Continuous Integration pipelines, have become an essential part of modern software development workflows. They allow developers to automate the building, testing, and deployment of their applications, ensuring that code changes are integrated smoothly and quickly. While CI pipelines are commonly used for tasks such as unit testing and code quality checks, they can also be leveraged to catch accessibility issues early in the development process.
You can easily implement a CI pipeline by choosing an automated accessibility testing tool (mentioned in the previous section).
Define Accessibility Testing Criteria: Determine the specific accessibility criteria you want to test for in your CI pipeline. This may include checking for proper semantic HTML markup, colour contrast, keyboard accessibility, ARIA implementation, and more. Align these criteria with relevant accessibility standards and guidelines.
Specify Acceptance Criteria for Accessibility Tests: Define the acceptance criteria for your accessibility tests. For example, you may specify that a certain percentage of tests should pass or that specific types of accessibility violations must be fixed before code can be merged or deployed.
Configure Accessibility Tests as a Step in Your CI Pipeline: Set up a dedicated step in your CI pipeline to run the automated accessibility tests. This step should be triggered after your code is built and deployed but before it is deployed to production. You can use tools like Jenkins, Travis CI, or GitLab CI/CD to configure and orchestrate your pipeline.
Generate Reports and Notifications: Configure your CI pipeline to generate accessibility reports and notifications when violations are found. These reports can provide detailed information about the accessibility issues, allowing developers to address them promptly. Reports can be in the form of HTML reports, JSON files, or integrated into your CI dashboard.
Track and Prioritize Accessibility Issues: Integrate the accessibility issues found in your CI pipeline into your issue tracking system or project management tool.
Useful Sources Regarding Web Accessibility
Web Content Accessibility Guidelines (WCAG):
Technical standards and recommendations for creating accessible web content, covering aspects like perceivability, operability, understandability, and robustness.
Resources, tutorials, and evaluation tools to help improve web accessibility, providing practical guidance and training services.
Community-driven initiative providing resources and tools to make web accessibility more accessible, covering HTML, CSS, JavaScript, and inclusive design principles.
Resources and articles on web accessibility, providing insights, guidelines, techniques, testing tools, and case studies.
Guidance material on implementing Accessible Rich Internet Applications (ARIA) roles, states, and properties with examples and code snippets.
Conclusion
In conclusion, accessibility in web development is a fundamental aspect that should be prioritized throughout the entire development process. By creating websites and applications that are accessible to all users, we can foster inclusivity and provide equal opportunities for individuals with disabilities to access and interact with digital content. Implementing accessibility best practices and staying up to date with the latest guidelines are all crucial steps in achieving a more inclusive web.
However, it's important to recognize that accessibility is not a one-time task. It requires continuous effort, testing, and improvement to address evolving standards and user needs. Web developers and designers should strive to cultivate a mindset of accessibility and integrate it into their workflows from the early stages of development. By embracing accessibility as an ongoing process, we can create a digital landscape that is accessible to everyone, ensuring that individuals with disabilities can fully participate and engage in the online world.