Access Granted
Access Granted - GitHub repository: GitHub repository
Visit the deployed site: Access Granted
This project aims to create websites that are accessible and usable by everyone, regardless of their abilities or disabilities. Inclusive web design incorporates accessibility best practices, ensuring that websites are perceivable, operable, understandable, and robust for users with diverse needs, including those who use assistive technologies like screen readers, voice recognition software, or specialized input devices.
This project aims to empower developers to implement features and structures that adhere to accessibility standards (such as WCAG), making digital content inclusive for all users.
The "Access Granted" project aims to make the web more accessible for all users, focusing on features like voice assistance, dyslexia-friendly fonts, and high-contrast modes for users with visual impairments. The site incorporates customizable accessibility settings, including font size adjustments, dyslexia-friendly fonts, colorblind modes, and high-contrast themes to enhance the user experience. It is dedicated to breaking down barriers and creating an inclusive, user-friendly digital environment.
-
We have designed an immersive and intuitive user interface, ensuring that our design is not only visually distinctive but also delivers a smooth and engaging user experience.
-
The success of our project is a result of careful planning and execution. We leveraged GitHub Projects for effective organization and complemented this with a detailed README.md to ensure transparency and keep our development on track.
-
Our work is strongly aligned with the Hackathon's theme, presenting forward-thinking and creative solutions that push the boundaries of innovation. This project sets a new standard, paving the way for future developments.
-
We’ve created a responsive, accessible, and well-tested application, emphasizing user experience across various devices and catering to diverse accessibility requirements.
-
Our project introduces unique features and functionality, adding significant value and fostering engagement.
-
A key strength of our project lies in the collaborative effort of our team. Through active involvement, inclusive practices, and a shared commitment to excellence, we’ve cultivated an environment of mutual support and high-quality outcomes.
- Access Granted
- Project Overview
- Criteria
- Goal & UX
- Website Structure
- Wireframes
- Development Process
- Features
- Future Adding
- Prerequisites and Deployment
- Acknowledgements
As a visually impaired user, I benefit from the high contrast mode and larger text options, making the site easier to read.
- The "Accessibility Features" dropdown menu allows me to toggle these options without any hassle.
- I can also switch to the OpenDyslexic font, reducing visual stress while reading the content.
As a user with color blindness, I appreciate the built-in colorblind modes like deuteranopia, protanopia, and tritanopia filters.
- I can see and differentiate the content, images, and icons by selecting the appropriate filter.
- As someone who relies on voice commands, I can easily enable the Voice Control feature.
- This allows me to navigate the site hands-free, making it convenient for individuals with mobility impairments.
As a user exploring the site for resources, I find the navigation menu intuitive and straightforward.
- The links to the "Resources," "About," and "Contact" pages are visible and accessible.
- The "Skip to main content" link at the top ensures that I can bypass repetitive navigation and quickly access the core content.
As a person who values inclusive design, I am delighted to see the comprehensive range of accessibility options.
- I can customize the theme (light, dark, high contrast) and font themes to suit my preferences, making my browsing experience more comfortable.
- I can fill out a simple form, providing my name, email, and message, and expect a prompt response from the team.
- The site's address and contact information are also clearly listed, offering multiple ways to get in touch.
- This page offers helpful tips and information on using the website's features effectively, demonstrating the project’s commitment to inclusivity.
- The header includes a logo, navigation links, and an accessibility button that opens an off-canvas menu with settings.
- The navigation bar is responsive and features icons for clarity.
- Accessibility Settings Panel:
- Font Size: Users can choose between small, medium, or large font sizes.
- Dyslexic Font: A toggle switch for enabling a dyslexia-friendly font.
- High Contrast Mode: A toggle to enhance visibility.
- Colorblind Modes: Options for Deuteranopia, Protanopia, and Tritanopia, using SVG filters for color adjustments.
- The section features an illustration and a brief introduction to the purpose of the site, emphasizing its commitment to accessibility.
- Features Showcase:
- Voice Assistant: Enables hands-free navigation.
- OpenDyslexic Font: Enhances readability for users with dyslexia.
- High Contrast Mode: Improves visibility for users with visual impairments.
- Contains links to resources, social media profiles, and a site map.
- Includes a "Back to Top" button for easier navigation.
- Accessibility Enhancements:
The page includes an SVG filter section for color adjustments based on the selected colorblind mode. Buttons and form elements have descriptive icons and ARIA labels for better screen reader support.
- A welcoming banner with a headline introducing the purpose of the page.
- Includes a brief description emphasizing the importance of web accessibility.
- A Bootstrap-based image carousel highlighting key concepts of accessibility, each with a caption and description.
- Three slides are included, each emphasizing different benefits of accessible design (e.g., user experience, inclusion).
-The page features three main articles, each dedicated to a specific accessibility feature:
Help Buddy is a voice-enabled assistant that helps you perform tasks like checking the weather, making calculations, and managing notes using voice commands. This guide will help you get started and use all the features effectively.
Before you can use voice commands, you need to allow permissions for both microphone and location access.
- When prompted, click "Allow" to grant permission for Help Buddy to use the microphone for voice commands.
- To use the weather feature, grant location permission when prompted.
Help Buddy supports a variety of voice commands. Below are the main categories and examples of how to use them.
- Say "start listening" to activate voice recognition.
- Say "stop listening" to deactivate voice recognition.
- Current Weather: Say: "What's the weather like?" or "Show me the current weather."
- Weather Forecast: Say: "What's the weather tomorrow?" or "Give me the forecast."
- Note: Weather information is based on your current location. Make sure location access is enabled.
You can use Help Buddy for basic arithmetic calculations. Here are some examples:
- Addition: Say: "What is 12 plus 5?" or "Calculate 15 and 25."
- Subtraction: Say: "What is 30 minus 10?" or "Subtract 8 from 20."
- Multiplication: Say: "Multiply 7 by 6." or "What is 8 times 9?"
- Division: Say: "Divide 50 by 5." or "What is 40 divided by 8?"
- Tip: If you make a mistake or the command is not recognized, simply repeat your request.
Help Buddy allows you to create, edit, and manage notes with reminders.
- Create a Note: Say: "Create a note." Follow the prompts to provide content for your note.
- Add a Reminder: Say: "Set a reminder for this note tomorrow at 10 AM."
- View Notes: Say: "Show my notes."
- Delete a Note: Say: "Delete note number 3."
- Note: You can also edit notes using the on-screen "Edit" button if needed.
While voice commands are the primary way to interact, you can also use the interface manually:
- Click the Calculator button to perform calculations directly.
- Use the Organizer to view, edit, or delete notes without voice commands.
- Click the Weather button to get weather information if voice recognition is not active.
- Voice Commands Not Recognized: Ensure that your microphone is enabled and the browser has permission to access it.
- Weather Not Displayed: Make sure location access is granted, and you have an active internet connection.
- Speech Recognition Stops Unexpectedly: Say "start listening" to restart voice recognition.
Your notes and preferences are stored locally in your browser's localStorage. Location and microphone data are used only for their respective features and are not shared. With Help Buddy, you can easily access useful features through simple voice commands. Enjoy your hands-free assistant experience!
- Explains the font switch for dyslexia-friendly text display, aiding users who struggle with standard fonts.
- Details a toggle for high-contrast visuals to assist users with color blindness or low vision.
- Who it helps
- How it works
- Why it matters
- Utilizes Bootstrap tabs to provide information about various accessibility guidelines:
- WCAG (Web Content Accessibility Guidelines) Link
- ARIA (Accessible Rich Internet Applications) Link
- Section 508 (U.S. federal requirements for accessible electronic content) Link
- Features interactive buttons allowing users to simulate various accessibility challenges (e.g., color blindness, low vision, screen reader use). This helps users understand the importance of inclusive design.
- Provides useful links, a social media section, and a sitemap.
- A “Back to top” link enhances navigation, allowing users to quickly return to the top of the page.
- Welcome to Access Granted! We are a dynamic team of passionate developers and innovators with a shared vision: to make the web more accessible and inclusive for everyone. Our project is a testament to the power of collaboration, bringing together diverse skills and perspectives to create an online experience that truly caters to all users, regardless of their abilities.
- Access Granted is driven by a mission to create a more inclusive digital world. We believe the internet should be a space where everyone feels welcomed and empowered. Our focus on accessibility, usability, and inclusivity aims to ensure that no user is left behind. We are committed to incorporating innovative solutions that address the needs of all individuals, including those with disabilities, through thoughtful design and user-friendly features.
- Our talented team is the heart and soul of Access Granted. Each member brings a unique set of skills and expertise, contributing to the success of our project in their own special way.
- Vernell ensures our team remains on track and focused. As our SCRUM Lead, he coordinate team efforts, facilitate meetings, and help resolve any obstacles. Vernell expertise in agile methodologies has been key to our project's timely and organized progress.
- GitHub: VCGithubCode
- LinkedIn: Vernell's LinkedIn
- Nikola has played a pivotal role in developing our voice assistant feature, making our website more accessible for users with visual impairments or those who prefer audio navigation. His innovative thinking and dedication to enhancing user experience have been invaluable.
- GitHub: nlekkerman
- LinkedIn: Nicola's's LinkedIn
- Benjamin’s expertise in research and design has helped shape the overall look and feel of our site. His attention to detail and commitment to accessibility principles ensure our content is both aesthetically pleasing and user-friendly.
- GitHub: benschaf
- LinkedIn: Beni Schäfer's LinkedIn
- Angela has been instrumental in maintaining clear and concise project documentation. Her organizational skills have kept our team aligned, and her contributions have ensured that our project is thoroughly documented for future developers and users.
- GitHub: Angela-Sin
- LinkedIn: Angela's LinkedIn
- Ashraf’s creative vision was instrumental in bringing our project to life. His beautifully crafted avatars not only showcase the diversity of our team but also embody our mission of inclusivity. Beyond design, Ashraf played a vital role as a supportive team member throughout the web structure development process, ensuring a cohesive and user-centered experience.
- GitHub: PATH-HIVE
- LinkedIn: Ashraf's LinkedIn
- Alison’s creativity truly shines in her work on our custom 404 error page, turning a potential setback into a friendly and engaging user experience. Her innovative approach adds a unique and memorable touch to the project. Beyond her design expertise, Alison was a key team player, providing valuable support throughout the development process.
- GitHub: ali-moss-24
- LinkedIn: Alison's LinkedIn
- James meticulously crafted our website footer, delivering a seamless and intuitive navigation experience. His commitment to accessibility ensures that users can easily find the information they need, enhancing the overall user-friendliness of the site. In addition to his design expertise, James also provided valuable support to other team members throughout the web development process.
- GitHub: JamesBracken
- LinkedIn: James LinkedIn
- Ahmad took the lead in designing and creating this very page. His dedication to highlighting the team's contributions and presenting a cohesive narrative has made the About Us section a central part of our website’s storytelling.
- GitHub: AhmadAlHindi
- LinkedIn: Ahmad's LinkedIn
Our Commitment to Accessibility At Access Granted, we believe in the importance of inclusivity. We have implemented various accessibility features, such as:
Voice Assistant: For users who prefer auditory navigation. High Contrast Mode: For improved readability. Dyslexic Font Option: A font designed to be easier for dyslexic users to read. Colorblind Modes: Filters for users with different types of color vision deficiencies. These features reflect our ongoing commitment to creating an environment where everyone can interact with ease.
Join Us on Our Journey We are excited about the future of Access Granted and the possibilities for making the web a more inclusive place. We invite you to explore our site, share your feedback, and join us in this mission.
Let’s make the internet accessible for all — together.
The page provides a user-friendly Contact Us form along with accessibility features, making it easy for users to get in touch while ensuring a smooth experience for people with different accessibility needs. The layout is responsive, thanks to Bootstrap, and includes tools to adjust the design for better accessibility.
The website is fully responsive, providing a seamless experience on devices of all sizes, from smartphones to desktops. Please visit Link
Also contains sidebar!
For smaller screens including mobile header contains burger menu!
The development of our project is guided by a structured yet adaptable approach, allowing us to respond to changes and feedback while staying focused on our objectives. Our methodology prioritizes collaboration, iterative progress, and transparency, both within the development team and with our stakeholders. Canvas Linka Timetable-Spread-Sheet
At the beginning of each sprint, our team conducts Sprint Planning to set the course for the upcoming work. This process includes:
- Prioritizing the Product Backlog: We ensure the most important tasks are addressed first, focusing on features and improvements that bring the most value to users.
- Setting Sprint Goals: Clear goals are established, aligned with project milestones, to provide direction and ensure we stay on track.
- Assigning Tasks: Tasks are distributed based on each team member’s expertise and workload to promote efficiency and collaboration. Throughout the sprint, we carefully manage trade-offs between scope, quality, time, and resources. Our aim is to deliver high-quality work while meeting deadlines and user needs. By adopting Agile methodologies, we remain adaptable, focused, and committed to continuous improvement.
Tasks are organized using the MOSCOW method, which helps us prioritize and manage our work effectively:
- Must Have: Essential features or tasks that are critical for the success of the project and must be completed in the current sprint. Should Have: Important tasks that are not essential but should be completed if possible, as they will improve the user experience or functionality.
- Could Have: Tasks that are nice to have but are not critical. These may be included if there is time available after the must-have and should-have tasks are completed.
- Won’t Have: Tasks that are not a priority for the current sprint and will be deferred or removed from the current scope. This prioritization technique allows us to focus on the most important tasks first, ensuring that we are always addressing the highest-value work.
Our first team meeting took place with Vernell, Nicola, and Ben, where we introduced ourselves and discussed the project's objectives. In this session, we:
- Planned the project schedule.
- Decided on a team name. Initially, it was "Access Ok," but after a team vote, it was changed to "Access Granted."
- Brainstormed ideas for our project’s page. The first suggestion was to create a platform for people with visual impairments, incorporating voice control and vision accessibility. Vernell later proposed expanding the concept to include options for individuals with dyslexia, enhancing the project's inclusivity.
The following day, new team members joined us. During this meeting, we:
- Introduced ourselves and shared our skills and availability.
- Assigned tasks and responsibilities to ensure a smooth workflow and alignment of efforts across the team.
After the initial meetings, our team continued with two daily sessions:
-
Sprint Planning Meeting (10:00 AM): During this meeting, we:
-
- Provide status updates on tasks.
-
- Assign or reassign tasks based on each team member’s progress and workload.
- Retrospective Meeting (6:00 PM):
-
- At the retrospective, we reflect on the sprint, evaluate what went well, and identify areas for improvement to ensure smoother workflows and a more efficient development process.
Throughout the day, team members can meet informally and make decisions without the presence of the full team or SCRUM lead. These meetings are facilitated through Slack, where status updates on tasks are shared, and decisions are communicated to keep the project board updated.
To manage and visualize the workflow, we use a Kanban board. This tool helps us track the progress of tasks across different stages of development. Tasks are moved through the following columns:
- To Do: Tasks that need to be started.
- In Progress: Tasks that are currently being worked on.
- Review: Completed tasks that are being reviewed or tested.
- Done: Fully completed tasks. By using the Kanban board, we ensure that tasks are organized and transparent, making it easy for team members to see the overall project status and ensure that work is progressing smoothly.
In the early stages, the team worked towards creating a Minimum Viable Product (MVP). As the team adjusted to working together, we found our balance, rhythm, and flow state. Over time, we transitioned from working individually to collaborating more closely, solving problems together, and helping each other complete tasks effectively.
The team used Slack for quick collaboration purposes and Github projects to track User Stories, Bugs and Time plan.
The Team used slack team channel Canvas to ensure everyone stayed updated on project progress and discussions. canvas
| Source | Location | Notes |
|---|---|---|
| Git | Across website | used for version control.(git add, git commit, git push) |
| GitHub | Across website | used for secure online code storage. |
| Gitpod | Across website | used as a cloud-based IDE for development. |
| VSCode | Across website | used as a local IDE for development. |
| HTML | Across website | used for the main site content. |
| CSS | Across website | used for the main site design and layout. |
| JavaScript | Across website | used for user interaction on the site. |
| YouTube | Across website | Tutorial for troubleshouting |
| Font Awesome | Across website | Inspiration for icons |
| Fonts Google | Across website | Font selection |
| Coolors | Across website | Colour palette selection |
| W3Schools | Across website | Various help pages |
| Lucid.App | Across website | Wireframes creation |
| Bootstrap | Across website | used as the front-end CSS framework for modern responsiveness and pre-built components. |
| Email.js | Across website | For replying to users contact |
| tiny.png | Across website | For image convertion |
| Bootstrap | Across website | Responcivness |
| ChatGPT | Across website | Used to help debug, troubleshoot, and explain things. |
| DeepAI | Across website | Website for creation Avatars |
| cloudconvert | To convert jpg pictures | |
| Lucid.app | Across website | Used to create Wireframes |
| Termsfeed.com | Across website | For privacy policy |
- Allow users to create profiles where their accessibility settings (e.g., font size, colorblind mode, high contrast) can be saved and applied automatically when they visit the site. Multi-device Syncing: Enable users to sync their accessibility preferences across different devices (mobile, tablet, desktop). Voice Assistant Enhancements:
- Extend the voice assistant (Mikey the Mic) to support multiple languages, making it accessible to a wider audience. Advanced Voice Commands: Implement more specific voice commands for easier navigation, such as "Go to Resources" or "Activate Colorblind Mode."
- Implement a real-time text-to-speech feature that can read out any text on the website, providing an immersive experience for users with visual impairments.
- Develop a more robust content reader for users with dyslexia or other reading difficulties, including options for text highlighting, word spacing, and reading speed adjustments.
- Use AI to provide real-time suggestions to improve accessibility based on the user’s behavior and preferences (e.g., suggesting font changes or offering an easy-to-read mode based on the user’s interactions).
- Offer a live chat feature specifically focused on accessibility, where users can quickly reach support for technical issues or learn more about the available accessibility options.
- Create a mobile app that mirrors the website’s accessibility features, allowing users to customize their experience and access the site through their smartphones or tablets.
- Build interactive guides that walk users through the various accessibility features of the site, helping them make the most of the tools available.
- Implement a system where users can provide real-time feedback about the accessibility features, helping to improve future versions of the site.
- Integrate the site with third-party assistive technologies such as screen readers, braille displays, or eye-tracking devices for users who rely on them.
- The site was developed in VS Code/Gitpod, stored in GitHub as the local repository. Github Pages was used to deploy the live website. The instructions to ac- hieve this are below.
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not the top of the page), locate the "Settings" Button on the menu.
- Alternatively, Click Here for a GIF demonstrating the process starting from Step 2.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now-published site link in the "GitHub Pages" section.
-
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not the top of the page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
-
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to where you want the cloned directory to be made.
- Type
git clone, and then paste [https://github.com/YOUR-USERNAME/YOUR-REPOSITORY] in. - Press Enter. Your local clone will be created.
- $ git clone [https://github.com/YOUR-USERNAME/YOUR-REPOSITORY]
- Cloning into
CI-Clone... - remote: Counting objects: 10, done.
- remote: Compressing objects: 100% (8/8), done.
- remove: Total 10 (delta 1), reused 10 (delta 1)
- Unpacking objects: 100% (10/10), done.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
- Sign up for a EmailJS account in the EmailJS website.
- Create an email service in your EmailJS dashboard.
- Install EmailJS Library. You can do this by including the EmailJS script in your HTML file or by installing it via npm if you're using a package manager like npm or yarn.
npm install --save @emailjs/browser
or
$ yarn add @emailjs/browser
- In your EmailJS dashboard, navigate to the "API Keys" section and copy your API key.
- Add this code snippet before your closing tags. Making sure you have added your public key.
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>
<script type="text/javascript">
(function(){
emailjs.init({
publicKey: "YOUR_PUBLIC_KEY",
});
})();
</script>- Create an email template in your EmailJS dashboard. This template will define the content and structure of the emails you'll send.
- Write JavaScript function to send email using EmailJS. Below is a basic syntax for the code:
emailjs.send(serviceID, templateID, templateParams, options);
- Call your function whenever you want to send an email.
-
Special Thank You Note for Hackathon Organizers
-
Bootstrap Team for their responsive framework.
-
OpenDyslexic project for the dyslexia-friendly font.
-
Community testers who provided valuable feedback.
-
Our team also deserves special mention as a whole. We learned a lot from each other, dove headfirst into new technologies, and were helpful in times of need to resolve coding issues.