NetServ started the engagement with the Requirement Elicitation Phase. Some of the key information gathered and analysed to get to the root of the problem were:
Towards the end of the requirement elicitation phase a high level report was submitted highlighting the gaps in the client layer that will address the basic Accessibility issues.
Post the Requirement Elicitation Phase a comprehensive Test Plan document was submitted for signoff detailing the Scope of work, Solution approach, Resource requirements, Tools & technology selection, Timelines and Deliverables with the aim to achieve WCAG 2.0 Level AA standards.
NetServ with expertise appreciates that Accessibility testing is not limited to verifying implementation against requirements, it involves design suggestions, engineering recommendations and adherence to guidelines proposed.
We used a combination of automated with manual testing to ensure the goal is achieved.
Over 450 accessibility issues were identified and reported across job seekers and job posters applications. Some of the major accessibility improvements suggested can be categorized as below:
Recommendations: Removal of auto play animations across the portal and suggested to use static images
Problems Identified: Pop-ups designed for confirmations and user alerts were displayed with a thin borders and were modeless in behaviour. This caused irritation due to overlapping text for visibly impaired users mostly due to thin border used and ability to click outside the pop-up.
Recommendations: Proposed model overlays with shadowed background for all such confirmatory questions with choices and user alerts across the application.
Problems Identified: Identified form fields/controls getting highlighted with green on getting focus and highlighted in red when the mandatory fields lost focus without having any data fed. This was challenging for visually impaired users to interpret or infer any action until submission of the form when they would be displayed with appropriate messages.
Recommendations: We suggested use of patterns instead of colours to highlight both these conditions. Form Fields/Controls getting focus was highlighted with a preceding pattern suggesting users that the field was highlighted. Mandatory fields losing focus was suggested to be filled with pattern to attract user’s attention.
Problems Identified: Pagination used for navigating through huge set of job listings for job seekers and profile listings for job posters was monolithic in nature and users with mortar impairment had trouble navigating through various pages in sequential manner.
Recommendations: Suggested to provide an edit box along the pagination bar, allowing users to enter a page number to navigate users to specific page of their choice.
Problems Identified: Pop-ups used across the application for both job posters and seekers to view candidate profiles and job details respectively. Pop-up caused disturbance in viewing for visually impaired users and also caused problems for users with mortar impairment. Pop-ups closed due to accidental clicks outside the real-estate of the details viewer pop-ups.
Recommendations: Replacement of all pop-ups with accordions across the application solved the issue.
Problems Identified: Identified use of small actionable Icons with appropriate images across the application. The size of these icons were inappropriate for users with mortar impairment. The images used on the icons were pretty unintuitive for visibly impaired users.
Recommendations: We suggested replacing those with bigger sized buttons along with supporting text suggesting the action description. We suggested use of SVG images with embedded text so that screen readers could read them when the icon/button gets focus.
Problem Identified: Since the time the application was designed and developed, some of the form fields used were not so disability friendly, having smaller actionable real-estate, like radio buttons and check boxes. This created resistance among users with mortar impairment during our testing.
Recommendations: We proposed use of bigger buttons with appropriate size and space, supporting suggestive images/icons along with supporting text for all such control with an idea to keep the form look simple and easy for all kinds of users.
Problems Identified: All controls, images and components across the application was tab ordered. However there was no clarity in terms of web component that had focus at any point of time. For form fields, we already had suggested use of patters, however this would be invalid for static contents with text and images. Although the screen readers would read out the content based on focus but users with visual issues had difficulty identifying what area of the static content is being read out.
Recommendations: We recommended use of dotted patter around the boundary of component that had current focus on all static content, to enable visually challenged users.
NetServ being a true partner to their customer extended the support beyond testing in addressing the reported issues using the expert team of UI/UX engineers. Portal was subjected to continuous regression test till the desired accessibility standards were met.
Post the release of updated portal into production a constant analysis on its usage was performed which reported: