How to Optimise your Web Portal to Follow Accessibility Best Practice

Accessibility for Web Portals Blog Image

Accessibility in regards to web design looks at inclusivity for users with different disabilities and impairments, and how well they can navigate web content. It is a crucial consideration when approaching website design. This includes self-service web portals, which are a great way of allowing external members of your community to interact with your business and securely share your Dynamics 365/Power Apps data.

Why is web accessibility important?

Ultimately, web accessibility is about creating an inclusive space where everyone has equal access to information and functionality. With 1 billion people worldwide affected by inaccessibility, implementing accessibility features into your portal design means that users are better able to consume and understand your content, and actively participate online. It helps users make less mistakes and empowers them to complete tasks without needing your help or support from others. Whether accessibility is required from your organisation for regulatory reasons, or whether you are simply working to improve inclusivity, it is guaranteed to increase user satisfaction.

What accessibility considerations need to be addressed when designing a web portal?

There are four types of disabilities to consider when assessing web design:

  1. Blindness or impaired vision
  2. Deafness or impaired hearing
  3. Motor impairments or difficulties
  4. Cognitive impairments or learning disabilities

Since there are multiple situations where accessibility could be an issue it is important to make all your content as easy to consume as possible. Ensure your web portal takes a multisensory approach, by making all content consumable through visual and audio aids to help those with vision or hearing impairments. For those with motor difficulties, having your web portal completely navigable by keyboard, means they don’t have to use a mouse which requires precise movement. Lastly, plan content to be as easy to understand as possible, and provide descriptive context and instructions to help visitors complete tasks.

What are some practical ways to make a web portal accessible?

Preact works with clients to ensure their self-service web portals are compliant with Web Content Accessibility Guidelines (WCAG 2.1 AA). The steps listed below are just some of the checks that we follow to make that sure new and existing portals are accessible by design.

1. Screen Reader compatible

    Screen Readers translate on screen items such as menus, dialogue boxes, files and icons into spoken word. Since screen readers can only read out what they are told to, ensure all content is accurately marked so they can pick up all the necessary detail. For example, mark important messages, provide error and success messages and write useful instructions regarding required/next actions. Otherwise, poor instructions for forms, images lacking descriptions and inaccurate reading sequences of content will leave users confused and unable to complete tasks they set out to do.

    2. Colour Contrast

      Make sure text stands out against the background. Colours shouldn’t be similar or bleed into each other. Often using one dark and one light colour is good practice.

      3. Keyboard-friendly

      All portal functionality should be accessible through a keyboard, this includes navigating the website, filling in forms and being able to interact with videos and other media. A visible indicator should be used to make users aware of which element they are interacting with.

      4. Remove unnecessary media

        Whether this is decorative images, moving media like widgets or auto-playing video/sounds, unnecessarily complex media should be removed, especially from the reading order for screen readers. Where these media types are needed, descriptive captions/alt text should be put in place, screen readers should have cues for when media elements will move, and video/sounds should only play on command and have transcripts.

        5. Well-designed forms

          Each field should have a meaningful label and provide clear instructions to give users the context they need to complete any form. For example, let users know when a field is mandatory, whether it only accepts certain characters, and what the next step is. Screen readers should be able to provide all this additional information too.

          6. Descriptive text

            Provide well-structured headers, with one main header and multiple detailed sub-headings. All text should be descriptive and not logical, for examples links should describe what the outcome of clicking is i.e. “download instructions” rather than “click here”.

            7. Scalability

              The portal must be responsive and not break when users zoom in on pages. Design must be robust, that will allow users to resize text which will help them read and avoid difficulty completing actions. Inclusivity isn’t just about different features, it’s also making sure anyone on any device can access those features, such as a scalable web portal.

              8. Convenient navigation

                To make navigation as accessible as possible, it’s good to give users options on how they want to explore the website. Sitemaps are a convenient way to skip complex navigation menus and arrive at the desired page with minimal effort. But elements such as a well laid out main menu, navigation breadcrumbs and not opening links in new tabs add to ease of use. For individual pages, it’s important to define different segments of the page, like the main content, banners, forms and navigation. Having a well-structured layout, that is consistent for every page, makes it easier for screen readers to provide keyboard navigation between sections of the page, but also just helps people with different learning disabilities/impairment by keeping content simple to follow.

                How Preact can help you when designing accessible web portals?

                It can be difficult to know where to start or what changes need to be made. When starting a web accessibility project, it’s important to first understand the types of visitors you are likely to have. This way you can make sure you make the relevant changes for portal visitors to easily access everything. Preact has helped others meet the WCAG accessibility standards, and we are confident we can guide you through the process by having consultative conversation where we match together your business needs and accessibility standards.

                If you are looking to deploy a new portal, you have the options of either a standard Power Apps Portal or a custom built Azure Portal. Whilst Power Apps Portals include a series of templates, and therefore can be quicker to build, custom Azure Portals are more cost-effective for licensing and provide more control when designing an accessible portal. We found that custom portals can also provide a more user friendly experience and are more responsive to different devices.

                If you already have a Microsoft portal up and running, we can run accessibility checks and provide reports on where improvements can be made, using resources such as the Accessibility Insights web extension. There are customisation limitations to working with Power Apps portals, however we can create new solutions to optimise them if needed. For example, there can be some limitations regarding screen reader software; certain details and validations won’t be announced correctly. But this can be overcome by implementing custom script to help screen readers provide an accurate spoken narrative, to better inform users.

                Whether building a new web portal or customising an existing portal to improve accessibility, it is essential to conduct thorough testing. It’s all well and good to have great accessibility features, but if they don’t work for everyone, the portal won’t be as inclusive as it could be. As part of our processes, we test portals across multiple screen reader technology, across different devices (desktop, mobile and tablet), as well as in different browsers and operating systems. All to ensure the web portal design is accessible and inclusive for everyone.

                So, whether you already have a portal, or you are looking to deploy one, Preact can take you through the process of identifying accessibility challenges, designing and implementing an inclusive web portal, and thoroughly testing it to ensure all users will have equal access to information and functionality.

                Learn more about Power Apps Web Portals

                Get in Touch

                Fill in the form for information on custom Azure web portals, or to simply start a conversation on accessibility!

                By submitting this form, you agree to Preact's privacy policy and the processing of this data.

                Join our mailing list icon

                Keep up to date! Subscribe to our blog

                Join our mailing list to receive our emails about what's new in Microsoft Dynamics 365 and the Power Platform.

                Subscribe now