Accessibility Issues Within The Platform

While traverseing the platform, there are some issues directly or indirectly related to accessibility

Checkboxes violate Success Criterion 2.5.8 Target Size (Minimum)

• The size of the Checkboxes is 21 by 21 CSS pixels. This affects users with tremors and physical impairements as well as those in shaky environments.

Focus indicator Obscured at uploading deployment logo

• There are two options for uploading a deployment logo the upload area and the chose photo button. The focus indicator is Obscured in the first one.

Share button, Language options, have no focus indicator with keyboard

• This violates the Success Criterion 2.4.11 Focus Not Obscured (Minimum)
• When you go to Map or Data View and use the tab or tab + shift keys, the focus indicator never goes to the these areas. This makes keyboard users unable to access these areas.

Form Fields Placeholders Fail Color Contrast

• Placeholders Fail Color Contrast (opens in a new tab)- This reource outlines why using a placeholder is not great from an accessibility standpoint and how to use a placeholder attribute successfully.
• The default color of a placeholder in a form field is light grey, which often doesn’t pass the Web Content Accessibility Guidelines (WCAG) Success Criteria (SC) 1.4.3 guideline.
• Placeholders confuse many users. In particular, people with cognitive disabilities tend to have issues understanding placeholder text because they think it is pre-populated text and will try to submit the form without entering their specific information.
• For the placeholder to pass successful color contrast requirements, proper CSS must be used:

::-moz-placeholder {
	color: #333;
	opacity: 1;
}

::-webkit-input-placeholder {
	color: #333;
}

The Platform-client pages have no Working skip to content link.

• Go to any page on the platform-client and click the tab key. There is no working skip to content link.
• This creates a barrier to keyboard users hence violating Keyboard Accessible.

Note: The platform should have a working skip to content Link.

The Focus Indicator disappears.

• Open the Platform in the browser and tab through it. Notice that at the end of the content links, you need to press tab + shift four or more times to start navigating back.
• This also violates the Keyboard Accessible

Form validation for Keyboard users

• Go to a form for example Using the keyboard (tab-key), navigate to settings, then general and and try submittiong when the required fields are empty.
• The submit button will be disabled and without navigating the user to the areas that need to be corrected.
• This makes keyboard users take a long time while working with forms.

At some point the title field of the Basic post displays a false redundant entry.

• Redundant entry is not properly used in within the forms. This does not comform to the agreed standards. While testing for redundant entry, there is a noticeable popup that suggests a password on the title field of the Basic post form.

Save button overlaps with the Whatsapp Chart button

• Both the save-button of the Basic post form and the Chart-button are clickable(interactive) elements.
• According to the image below, these buttons overlap. A user might end-up clicking one of them instead of the other.

Low Contrast on Ushahidi Platform

When testing the platform using The Wave Evaluation Tool some issues with contrast ration are evident enough

Violations

The Ushahidi platform shows a contrast ratio of 1.6:1 on normal text, not meeting WCAG AA requirements, affecting readability for visually impaired users. Absence of fallback colors for background images also detracts from accessibility. Urgent improvements in contrast and fallback background color implementation are recommended.

Accessibility Issues found using Lighthouse CLI

Lighthouse easily made a good catch on the accessibility issues on the Platform

Violations

Names and labels

• Buttons do not have an accessible name
• Document doesn't have a "title" element
• Links do not have a discernible name

ARIA

• button, link, and menuitem elements do not have accessible names.
• ARIA input fields do not have accessible names

Heading levels skiped in some parts of the platform

Go to Help & Support and investigate the Heading levels

Violations

• A heading level is skipped.
• Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.

Change deployment Credentials

Go to settings, click on General and observe the form.

Violations

Site language field

• this field has no guiding default value
• The drop-down covers the field when the there is no space below the field
• Mouse click or keyboard enter dose not close the drop-down

Location field

• The latitude and longitude fields values can not be manually entered.

Default base layer field

• The drop-down covers the field when the there is no space below the field
• Mouse click or keyboard enter dose not close the drop-down

Navigation within Settings

Go to settings, click on Data soures, click on SMSSync. Try to go back and chose email instead.

Violations

• The UI has not button or element to aid navigation
• The user has to use the backward arrows of the browser or forge their way-out

Users (search by name) field is not copletely funtional

Go to settings then Users. Make sure you have three or more users then click on search by name button

Violations -If you search for any user apart from admin, the results are not narrowed down to that that single user. -On keyboard enter, the field remains focused and does not show interacrivity with keyboard keys.

Add translations button for Add category is non functional.

Go to settings, click on categories, then click on add category. Then click on the add translations button next to the languages drop-down. Select a language like french and add. Go back down to the language drop-down and change language to french. Notice the changes in the form

Violations

• When you change language, the default values and validation messages disappear from Add category form.

Basic Post form (Lat and Lng fields)

Go to Add new post, click basic post. Notice the Lat and Lng fields of the form

Violations

• Latitude and Longitude values cannot be manually entered
• The delete/cancel (X-button) are not interactive in states like hoover
• These make the cancel button on either of them cancel the values in both.

The Search post by keyword field on Map and data view.

Go to Map or Data view and clik on the field with the default value Search Post by keyword. Try searching for any keyword that does not exist and click enter.

Violations

• There is no visual feedback that the no results were found for that search input

Help & Support links are not interactive

Go to Help & Support and mouse hover the links to the various resources.

Violations These links are do not get focused in anyway to show that they are interactive elements. In this way, they don't prompt the user to click them for action.

Filters, Translations and Account settings buttons are non interactive.

Go to Map view then go the top-right, these three buttons are there

Violations Mouse hovering on these does not change the background color or put them to fucus inorder to prompt users to go for some actions