Altinn Forside Accessibility: A Deep Dive

Nov 13, 2025 by Alex Johnson 42 views

Welcome! Let's dive into optimizing the Altinn Forside, focusing on accessibility improvements identified during a recent user experience (UU) review. We'll explore specific areas where we can enhance the user experience for everyone, making the platform more inclusive and user-friendly. We'll be looking at code, design, and content, and how we can make improvements in all these areas to make the Altinn Forside more accessible to everyone. The goal is to make sure that the website is accessible to people with disabilities, and that everyone can use it easily and efficiently.

Addressing the "Double Main" Issue and Code Structure

One of the initial observations from the UU review highlighted a "double main" structure in the code. This is a common issue that can cause problems for screen readers and other assistive technologies. Having multiple main elements can confuse these tools, making it difficult for users to navigate the content effectively. To address this, it is necessary to identify the root cause of the duplicate main tags and refactor the code to ensure a single, well-defined main element that accurately reflects the primary content of each page. This will involve reviewing the HTML structure, identifying redundant elements, and streamlining the code to ensure a clear and logical hierarchy. Correcting this will significantly improve navigation and content comprehension for users relying on assistive technologies, making the website much more accessible.

In addition to the double main issue, the review also identified opportunities to improve the overall code structure, ensuring that it is clean, well-organized, and semantically correct. This involves using the appropriate HTML elements for their intended purpose, avoiding unnecessary nesting, and ensuring that the code is easy to understand and maintain. By focusing on code quality, we can create a more robust and efficient website that is easier to update and modify over time.

Code Optimization Strategies

The optimization strategies include:

Refactoring HTML: Review and refactor the HTML structure to eliminate the double main issue and ensure a single, clear main element.
Semantic Correctness: Ensure that HTML elements are used semantically, with proper use of headings, paragraphs, and other relevant tags.
Code Clarity: Improve code readability and maintainability through better organization and commenting where necessary.

These changes will contribute to a more accessible and user-friendly Altinn Forside, and ensure that all users can easily access and understand the information. These code optimizations are critical to creating a website that is not only accessible but also robust and easier to maintain. By following best practices, we can significantly improve the user experience and ensure that the website remains a valuable resource for all users. The main goal is to create a digital environment that is inclusive and supportive for everyone.

Enhancements for Forms and Services

Let's move on to the improvements needed for all forms and services, focusing on user-friendly design and accessibility.

Replacing Header Elements and Removing Redundant `div` Elements

Within all forms and services, the review suggested replacing HTML header elements (H tags) with paragraph or label elements from the design system. This is an important step towards ensuring consistent visual styling and maintaining a clear hierarchy of information. Furthermore, eliminating the outer div elements, especially those that contain <a> tags, can simplify the code and improve focus handling. If an <a> tag can directly handle its own focus styling, there's no need for an inner div to manage focus, making the code cleaner and the website more responsive. This also makes the website easier to maintain and update. By simplifying the code and removing unnecessary elements, we can reduce the complexity of the website and make it easier for users to navigate and interact with.

Implementation steps:

Design System Integration: Integrate paragraph or label elements from the design system in place of H tags to ensure consistent styling and user experience.
div Element Removal: Remove the outermost div elements, especially those enclosing <a> tags, to streamline the code and improve focus handling.
Focus Styling: Ensure that focus styling is properly applied to <a> tags, maintaining visual cues for users navigating the site.

By following these steps, we can significantly improve the user experience and make the Altinn Forside more accessible to everyone. The main goal is to create a digital environment that is inclusive and supportive for all users.

Simplifying Start and Drive Section

Optimizing Headings and Link Labels

In the "Start and Drive" section, the review recommends removing H3 tags and using labels from the design system (or paragraphs) instead. When this change is implemented, the aria-label attribute on the links becomes redundant because the link text itself will accurately convey the purpose of the link. This simplifies the HTML and avoids unnecessary repetition. The goal is to make the website easier to navigate and more user-friendly.

For links where the text clearly describes the link's destination, there is no need for an aria-label. This change not only reduces the complexity of the code but also improves the overall user experience by eliminating the unnecessary aria-label. The focus should be on ensuring that the link text itself is descriptive and provides context to the user. This means carefully reviewing each link and ensuring that the text accurately reflects the destination of the link.

By implementing this optimization, we can create a website that is both accessible and user-friendly. The main goal is to make it easy for users to find the information they need and to navigate the website effectively.

Removing Redundant Elements and Utilizing CSS for Focus

The review also addressed the use of a div element for focus handling on links. If the link text itself sufficiently describes the link, this div is unnecessary. By removing this extra element and using CSS for focus styling, we can streamline the code and improve the user experience. This also simplifies the code and reduces the potential for errors. The main goal is to make the website easier to navigate and more user-friendly. By removing the unnecessary div element, we can simplify the code and reduce the potential for errors.

Here's how to implement this:

CSS Focus Styling: Use CSS to style the focus state of the links. For instance, using .header:focus-within to style the focus and .header a { ... } to remove focus styles.
Element Removal: Remove the redundant div elements around the links.
Aria Attributes: Ensure correct use of aria-hidden on icons, if necessary.

Implementing these changes simplifies the code and enhances accessibility. This ensures that users can easily identify the currently focused element. By focusing on simplifying the code, we make it easier to maintain and update. The focus should be on the user and providing the best possible experience.

Enhancements for Illustrations and Decorative Content

Optimizing Image Alt-Text

For illustrations in the "Topp" and "Start and Drive" sections, the recommendation is to remove the alt text. Decorative images, which don't convey essential information, should not have alt text. This ensures that screen readers don't attempt to describe the images, preventing unnecessary audio output and enhancing the user experience. This also ensures that screen readers focus on the relevant content. By removing the alt text from decorative images, we can streamline the user experience and prevent unnecessary audio output. The focus is to make sure that the website is easy to use and accessible to everyone.

Implementation

Image Review: Review all images used in the "Topp" and "Start and Drive" sections to identify decorative illustrations.
Alt-Text Removal: Remove the alt text from the identified decorative images.

By removing the alt text from decorative images, we can streamline the user experience and prevent unnecessary audio output. This is an important step in making the Altinn Forside more accessible to people with disabilities. The focus should be on providing a clear and concise experience for all users.

Conclusion and Next Steps

The optimizations discussed above are crucial for improving the accessibility and overall usability of the Altinn Forside. By addressing the "double main" issue, refining the code structure, simplifying forms and services, and optimizing images, we can create a more inclusive and user-friendly experience for all users. The next steps include detailed code reviews, design system integration, and thorough testing to ensure that all changes meet accessibility standards. The focus is on providing a clear and concise experience for all users.

These changes are essential to make the platform accessible to everyone and also improve the user experience for all users, including those using assistive technologies. By taking these steps, Altinn can enhance its platform and ensure that it is accessible to everyone.

For more detailed information on image and graphic accessibility, consult the guidelines provided by the Norwegian Digitalization Agency (Digdir). This will help in understanding the best practices and ensuring compliance.