Peer Solutions Website – Nora Fayad Rauhouse

Duration: 7 months | Project Status: on contract | Website redesign

What is Peer Solutions?

Our vision is safety, equity and respect (SER) normalized in our hearts, homes, schools, workplaces, communities, governments and planet. This is a world free from harm - free from child abuse, domestic and sexual abuse, animal abuse and much more.

We develop and implement activities with the communities we serve. This establishes cultural relevance, retention and generational, permanent impact. Today’s young people are tomorrow’s parents, caregivers and policy makers.

Problem/opportunity

In the original site, there is a pressing need for an inclusive and accessible resource center and healing hub that caters to individuals of varying abilities and ages. The existing landscape lacks a centralized platform that seamlessly accommodates diverse needs, hindering the potential for widespread engagement and support. Many individuals, including those with differing abilities, struggle to find a comprehensive online space that offers relevant resources and a supportive community for healing and personal growth. The absence of such a platform contributes to a sense of isolation and hinders the development of a connected and empowered community. To address these challenges, there is a critical need to establish a user-friendly website that serves as a beacon of inclusivity, providing valuable resources and fostering a healing environment for people of all abilities and ages.

Live Site

This paper highlights the meticulous integration of various web accessibility features into the website, ensuring an inclusive user experience for individuals with visual impairments or disabilities. With approximately and 350 million people worldwide experiencing color deficiencies and the increasing need for accessibility across diverse backgrounds, it is imperative to prioritize inclusive design practices. This paper presents a comprehensive overview of the meticulous implementation of features such as screen reader compatibility, keyboard accessibility, color contrast, alternative text for images, semantic structure, and other essential elements. By adhering to these guidelines, we can create a website that caters to the needs of a diverse user base, fostering inclusivity and enhancing user engagement.

Web accessibility is a fundamental aspect of inclusive design, ensuring equal access and usability for all users. Considering that 12 children with color deficiency are born every day, it is essential to design websites that accommodate their needs. This section discusses strategies for selecting colors that are accessible to individuals with color vision deficiencies, promoting effective color contrast and readability.

At the onset of this project, I recognized the importance of thoroughly evaluating the existing website's usability and identifying areas for improvement. To accomplish this, I conducted a heuristic evaluation on the original website, as well as three comparable non-profit websites. Heuristic evaluation involves systematically assessing a website's design based on established usability principles or heuristics.

By employing this evaluation technique, I aimed to gain a comprehensive understanding of the strengths and weaknesses of the original website and draw insights from other websites in the same domain. The evaluation allowed me to objectively assess the user interface, navigation, content presentation, and overall user experience of each website.

During the heuristic evaluation, I applied a set of predefined usability heuristics, such as consistency, error prevention, clarity of labels, and ease of navigation. By comparing these principles to the design and functionality of the original website and the three comparable non-profit websites, I identified areas of improvement and best practices that could be incorporated into the redesign process.

This evaluation not only provided valuable insights into the usability issues present in the original website but also offered inspiration and reference points from other non-profit websites. By leveraging this knowledge, I was able to make informed decisions and implement effective design solutions in the subsequent stages of the project.

Overall, the heuristic evaluation served as a crucial starting point, enabling me to identify usability gaps, draw inspiration from other websites, and set a solid foundation for the redesign process. It laid the groundwork for creating an improved user experience that aligns with established usability standards and meets the expectations of the target audience.

Sight and mobility accessibility
In order to enhance the usability and accessibility of the website, a comprehensive task analysis was conducted involving 15 users from diverse backgrounds. Based on the valuable insights gathered from these users, I undertook the task of redesigning the entire sitemap. The task analysis provided a deep understanding of the users' needs, preferences, and challenges they faced while navigating the website. With this valuable information in hand, I meticulously restructured the sitemap to ensure logical organization and intuitive navigation. By incorporating the specific requirements and feedback from each user, I aimed to create a user-centric sitemap that caters to the diverse backgrounds and abilities of the website's visitors. This process allowed for a more inclusive and user-friendly website experience, ultimately improving the overall accessibility and usability for all individuals accessing the website.

1. Screen Reader Compatibility

To ensure compatibility with screen readers, the website has been developed and optimized for screen reading technologies. Headers and alternative text (alt text) have been meticulously integrated throughout the development process, allowing screen reader users to access and understand the content effectively.

A screen reader is an assistive technology software designed to aid individuals with visual impairments in accessing and navigating digital content. It is primarily used by individuals who are blind or have low vision.

Screen readers work by converting on-screen text and other visual elements into synthesized speech or braille output. They use various techniques to interpret the content on a webpage, document, or application, enabling blind or visually impaired users to hear or feel the information presented on the screen.

When a screen reader is activated, it scans the content on the screen and reads aloud the text, including headings, links, buttons, menus, and other interactive elements. It also provides users with auditory feedback on keyboard input and other actions, such as the status of checkboxes, radio buttons, or form fields.

In addition to speech output, screen readers often support the use of refreshable braille displays, which provide tactile representation of the text on the screen. Users can navigate through the content using keyboard commands or braille input, interacting with the digital environment solely through the screen reader.

Screen readers play a crucial role in ensuring digital accessibility for individuals with visual impairments. By transforming visual information into auditory or tactile formats, they allow users to independently access and interact with websites, applications, documents, and other digital content, enabling greater inclusion and participation in the digital realm.
What is a screen reader

2. Keyboard Accessibility

Recognizing that the keyboard is a primary mode of interaction for individuals with visual impairments, the website has been built to be keyboard accessible. Interactive elements such as links, buttons, and form fields can be navigated using the keyboard, either through focusable elements or by including the "tabindex" attribute.

3. Semantic Structure and Headers

The website incorporates a well-defined structure with headers, enabling blind users to comprehend the organization of content and navigate seamlessly. Each page features an H1 title that provides blind users using screen readers with a clear understanding of the main topic of the page.

4. Color Contrast and Readability

Considerable attention has been given to color choices and contrast ratios to ensure readability for individuals with vision impairments. All elements on the website meet a minimum contrast ratio of 4.5:1 between the foreground (text color) and background color, enhancing visibility and legibility.

5. Alternative Text for Images

To make images accessible, alternative text descriptions have been meticulously provided using the "alt" attribute. These descriptions describe both the objects and any embedded text within the images, allowing screen reader users to understand the visual context.

6. Forms and Submission Buttons

All forms on the website include a submission button built as an input type "submit" or a "button" element, ensuring compatibility with assistive technologies. Buttons can be hidden if the form can be submitted using the Enter key, providing a streamlined experience for users.

7. Metadata and Language Attribute

The title tag of the HEAD section, visible in browser tabs and search engine result pages, has been optimized to provide meaningful information for screen reader users. Additionally, the HTML tag includes a "lang" attribute representing the main language of the webpage, aiding screen readers in calibrating for blind users.

8. Typography Considerations

To ensure readability, letter spacing is not set to below -1px, allowing the content to remain legible across a wide range of font families. Font sizes are also maintained at a minimum of 11px to accommodate the majority of font families and ensure optimal readability.

9. Control Elements and Carousel Pagination

Control elements such as next and previous icons include an "aria-label" attribute or a screen-reader-only text, providing clear explanations of their functionality. Carousel pagination items indicate their functionality and associated slide number using an "aria-label" and screen-reader-only text.

In conclusion, the meticulous implementation of web accessibility features in the website serves as a testament to the commitment towards inclusivity and user-centered design. By considering the needs of individuals with visual impairments or disabilities, developers can create an accessible and engaging online experience for all users.

Note: The specific guidelines and features mentioned in this paper are derived from the information provided in the prompt. For an actual implementation, it is advisable to refer to comprehensive accessibility guidelines and standards such as WCAG (Web Content Accessibility Guidelines).

Title: Comprehensive Resource Gathering for Website Development: Engaging Community Members and Leveraging Existing Centers

Resources
Recognizing the significance of providing diverse and inclusive content, this approach ensures a broad range of resources suitable for users from various backgrounds. By reaching out to community members, gathering suggestions, and extensively exploring established resource centers, a comprehensive collection of over 200 individually sourced resources was compiled.

To ensure that the website's resources resonate with the target audience, community engagement played a vital role. This involved reaching out to community members through various channels, such as social media, forums, and local organizations, to solicit their suggestions and recommendations.

By actively seeking input from community members, a wealth of valuable suggestions and feedback was collected. This collaborative approach allowed for the inclusion of resources that align with the specific needs and interests of the intended users.

In addition to community engagement, extensive research was conducted to identify and explore existing resource centers. These centers, which specialize in providing relevant content to specific communities or topics, served as a valuable source of curated resources that could be included in the website.

Each suggested resource and those obtained from existing centers were carefully evaluated for quality, relevance, and accessibility. This involved reviewing the content, ensuring it met the website's objectives, and verifying its compatibility with accessibility standards.

To enhance usability, the gathered resources were meticulously categorized and organized based on themes, topics, or target audience. This ensured that users could easily locate the resources they needed and navigate through the website with ease.

Resource gathering is an ongoing process, and the website was designed to accommodate regular updates and additions. Community members were encouraged to provide ongoing feedback and suggest new resources to keep the website's content relevant and up-to-date.

The "Healing Tool-Box" is an interactive page on the website specifically designed to provide users with a range of resources and activities aimed at promoting healing, relaxation, and emotional well-being. This feature serves as a virtual toolbox that offers various tools to support users in managing stress, practicing self-care, and finding moments of calm.

Healing Tool Box
The "Healing Tool-Box" encompasses a diverse array of resources to cater to different preferences and needs. Writing prompts are provided to inspire users to engage in expressive writing, allowing them to explore their thoughts, emotions, and experiences. These prompts can serve as a therapeutic outlet and encourage self-reflection.

Grounding exercises are also included in the toolbox, offering techniques that help individuals reconnect with the present moment and alleviate anxiety or stress. These exercises may involve deep breathing, mindfulness techniques, or sensory-focused activities that promote relaxation and a sense of calm.

To engage users creatively, coloring pages are offered as a soothing activity. Coloring has been recognized as an effective tool for relaxation and stress reduction, allowing individuals to focus their attention on the present and engage in a calming and meditative process.

Furthermore, the "Healing Tool-Box" provides links to interactive soothing games and websites. These resources offer interactive experiences that can distract, entertain, or engage users in positive and soothing activities, promoting relaxation and well-being.

The purpose of the "Healing Tool-Box" is to offer users a variety of options to explore and experiment with, allowing them to discover what resonates with their individual healing journey. By providing a range of activities and resources, the tool-box empowers users to take an active role in their well-being and choose the tools that best suit their needs at any given moment.

Overall, the "Healing Tool-Box" is a valuable feature on the website, offering a collection of writing prompts, grounding exercises, coloring pages, interactive soothing games, and more. It serves as a supportive and accessible resource for users seeking to promote healing, relaxation, and emotional well-being.

Selected Works