Accessibility upgrades in Surrogacy Learning Center πŸ§‘πŸ½β€πŸ’»

Submitted to Things to Know

We’re excited to share some of the changes we’ve made to improve accessibility in the Surrogacy Learning Center community.

Assistive technologies help people with disabilities navigate online environments. Below is a demo video on how screen reader software and accessible technologies work. 



You may not have even noticed anything that looks much different in the community from a visual perspective, but our team of developers has been making great strides behind the scenes with new accessibility features.

Decorative icons have been hidden from assistive technology. Certain decorative icons (ie. icons that do not provide additional value in improving the “presentation” of information on the page) have been hidden so they are not read out by assistive technology. This includes the points icon on the profile page, the icons for badges on the profile page, and the triangle icon on all dropdown menus. 



Asterisk indicating required fields is now explained. We now provide a “legend” anywhere that we use an asterisk to indicate a required field. This is to ensure that all users understand why the asterisk is present, instead of assuming knowledge of this web convention.

The informative icon [also known as the little red dot] on notifications now has an alternative. The notifications link now has alternative text that informs users whether there are new notifications - this was previously only conveyed by the icon. 

Unordered lists are now marked as unordered lists, so that screen readers convey that structure to users. Examples are the sort, profile dropdown, and mobile menus.

Links now visually indicate that they open in a new window. An icon will now be displayed after text links that open in a new window, to ensure that users are aware of the link behaviour before clicking on it (since it can be disorienting to open in a new window, and not know it, and then not be able to click back). 


Error messages are no longer displayed for a short period of time. There is a new error block that appears when a user has not filled out required fields. This block shows up above the form content, and contains links that when clicked, take the user to the required sections.

This is just a sampling of the enhancements done by our team to improve accessibility over the past few months - thanks to our developers for this great work!