Implement Web App Accessibility Measures (FEA105)


Document Type	Feature Description
Feature	FEA105
Author	Noora Kuikka & Andreas Kjersheim
Version	0.3
Date	23.02.2024

Description

This feature focuses on ensuring that the web application is accessible to users with disabilities. Accessibility measures are crucial for creating an inclusive digital environment. The implementation includes support for assistive technologies such as screen readers and keyboard navigation, following accessibility best practices and guidelines such as WCAG 2.2, conducting accessibility testing, and addressing any identified issues. Additionally, the feature involves incorporating proper semantic markup and ARIA attributes to facilitate accurate interpretation and navigation of content by assistive devices.


Linked Use Cases	Use Case
Linked Requirements	ReqID list

User Story	Description	Affected Feature
US041	As a user, I want the web app to be accessible and usable for people with disabilities, including support for screen readers and keyboard navigation.	FEA105
US042	As a developer, I want to follow accessibility best practices and guidelines, such as WCAG 2.2, to ensure the web app meets accessibility standards.	FEA105
US043	As a developer, I want to conduct accessibility testing and address any accessibility issues identified by users or automated tools.	FEA105
US044	As a user with assistive technologies, I want the web app to have proper semantic markup and ARIA attributes, so that my assistive devices can interpret and navigate the content accurately.	FEA105

Links to issues:

User Interface MockUp

The planned mockup for the web application will showcase a user interface designed with accessibility in mind. It will feature keyboard navigation with visible focus indicators, ensuring seamless interaction for users with mobility impairments. Screen reader compatibility will be demonstrated through clear announcements of UI elements and the proper use of ARIA landmarks.

The mockup will highlight text and background elements with sufficient color contrast, along with options to adjust text size for improved readability. Descriptive alternative text for images will accompany visual content, while properly labeled form fields and accessible error messages will enhance usability for all users.

Semantic HTML elements will be used for document structure, and accessible widgets with keyboard interaction will be integrated throughout the interface. Clear visual focus indicators will aid in navigation, and language attributes will be utilized for improved screen reader pronunciation. Additionally, feedback mechanisms will be incorporated to allow users to report accessibility issues and access support resources.

Implementation

Information will be added when development begins.

Testing / possible approval criteria

Test Case	Description
Acceptance Test Case	Acceptance Test
Functional System Test Case	Test Case
Security Test Case	Test Case

Additional Considerations for Implementation

Color Contrast: Ensure sufficient color contrast between text and background elements to aid users with visual impairments.
Keyboard Accessibility: All functionalities should be operable via keyboard only, without relying on mouse interactions.
Focus Indication: Provide clear visual indication of focus states to assist users navigating through interactive elements.
Alternative Text for Images: Include descriptive alt text for images to convey their content to users who cannot see them.
Language Attributes: Specify the language of each page to assist screen readers in pronunciation and translation.
Semantic HTML: Use semantic HTML elements (e.g., <nav>, <article>, <footer>) to enhance document structure and navigation.
Forms Accessibility: Ensure form fields are properly labeled and provide instructions for users filling them out.

These considerations, along with implementing ARIA attributes, contribute significantly to enhancing web accessibility.