Fazle Rahman
ยทimprovementAt Hashnode, we are continuously committed to making our platform more accessible to everyone. We believe that accessibility is a critical aspect of user experience and we want to ensure that our platform is user-friendly for all.
Here's an in-depth look at the various ways we have improved accessibility:
One of our primary focuses has been on enhancing color contrast throughout Hashnode, resulting in a notable improvement in overall accessibility. This particular change has improved readability, particularly for individuals with visual impairments or color blindness. We've also implemented an update to differentiate the background color of the main navigation header from that of the main content area. This adjustment has helped clarify the visual hierarchy of our platform, thereby facilitating smoother navigation for users.
Furthermore, we've made enhancements to the background in dark mode to elevate the user experience. Now, when a modal window is activated, it appears against an overlay with enhanced contrast, which serves to direct attention towards the modal content. This refinement not only enhances text legibility but also works towards reducing eye strain, particularly in low-light settings and it looks something like this:
We have put a focus on improving keyboard navigation across Hashnode. This allows users who prefer to or need to use the keyboard for navigation to move around our platform more easily.
The first step was to identify which elements needed focus. Previously, some parts of Hashnode lacked clear focus indicators, making it hard to determine where the focus was. For instance, this was the case with the main navigation headers on our blogs and community site. Now, every focusable element has a clear design indicator, making it easier to navigate the blogs.
Additionally, some focusable buttons and links previously lacked suitable labels. These labels assist screen reader users in understanding the context they are navigating. Efforts have been made to improve these labels, especially where they were not very descriptive or completely missing.
One of the things that has helped improve accessibility is the adoption of an accessible component library with radix-ui. This aligns Hashnode with built-in accessibility by adhering to widely accepted patterns for various components. For example, it ensures that keyboard focus is contained within a Dialog (modal) component when open and restores focus to a dropdown trigger (button) when closed.
With these changes, we have been able to get a score of 100 on lighthouse ๐
Design fixes for iframe - Some web embeds were not displaying correctly on certain screen sizes. They have now been updated to render correctly on all screen sizes.
Design fixes for Subscribers Modal UI - In this update, we revamped the UI for the Signup Modal and Newsletter Subscribers Modal. We added a default placeholder image for cases where the publication logo is absent. Additionally, we modified the modal backdrop for consistency with the rest of the platform. We also updated the internal components to enhance accessibility on both web and mobile screen sizes.
Here's the updated look: