Welcome to The VisEnsemble Choir website! This is a mock-up website for a real choir for visually impaired people in Dublin called 'The Visionaries Choir'. This website hopes to help people become more aware of what the choir is about and motivate other visually impaired people to become members and to increase opportunities for public performances.
Visit The VisEnsemble Live Website here
- Overview
- Features
- User Experience (UX)
- Technologies
- Testing
- Bugs
- Citation of Sources
- Acknowledgements
The aim of this project is to demonstrate skills in HTML and CSS. Some JavaScript is used for interactivity and to make the website more accessible with screen-readers.
It is a mobile-first build and is responsive on tablet, desktop and screens up to 2000px wide. It is also compatible with all popular browsers.
The website is intended to target the visually impaired community, including friends, families and organisations for the blind/visually impaired/disabled as well as event organisers, State bodies, Art Councils and the general public.
They will be able to see the schedule of events, rehearsal times and locations, as well as a way to learn about and contact the choir in order to join, seek further information or book them for an event.
Featured on all four pages, the skip navigation link comes into view when it gets keyboard focus. This allows the returning user to skip the logo and navigation links and go straight to the main content of the page.
Featured on all four pages, the fully responsive header includes:
- A link to the Logo which brings the user to the home page.
- A hamburger button on mobile which opens up a navigation list with links to the Home, About, Events and Contact pages. This helps reduce the clutter on the header by keeping the page links neatly stowed away until the user navigates to the hamburger button. The links have a hover and focus effect to help the user identify them as links.
- Links to the Home, About, Events and Contact pages on tablet and desktop which help the user to easily navigate from page to page without having to revert back to the previous page via the back button. The link to the current page is also underlined to help the user identify the page they are on.
The home page hero on the landing page includes a photograph of the choir with a text overlay which captures the essence of the choir. This section introduces the sighted user to the choir with an eye catching image to grab their attention. The text gives the non-sighted user a very brief introduction to the choir.
iPhone 6/7/8
Laptop width 1024px
- An inspiring quote by Helen Keller which introduces the ethos of the choir presented in a blockquote format with a picture of Helen Keller on the left. This is meant to motivate the user to read on about the vision of the choir.
- The Vision Section allows the user to see the benefits of joining the choir, as well as the benefits of singing overall. It is presented with icons which help the sighted user to distinguish between the different statements presented. Screen readers will ignore these icons completely and move on to the text instead. This should encourage the user to consider joining the choir to help improve their quality of life.
- The Call to Action (CTA) card includes a background image with a thick orange border to draw the eye. The text overlay expresses the call for new members and directs the eye to the bright orange button at the bottom which links to the contact page. The button has a hover and focus effect to make the user aware that it will lead to somewhere. This is meant to give the user a quick and easy way to get to the sign up page at the end. It is placed on the Home page to encourage more users to get in touch.
Galaxy S9
iPhone 12 Pro
Surface Pro 7
Featured on all four pages, the back to top button is placed right before the footer for easy navigation. It is linked with the skip navigation link to bring the sighted user to the top of the page and gives the keyboard navigation user the option to either skip to main content or go through the navigation list in the header. It also has a hover and focus effect to help the user identify it as an interactive asset.
Featured on all four pages, includes icons which when clicked or focused on will bring up a phone number and email address for easy contact with the choir master. Screen readers are able to read out the phone numbers and the email address as well. The social icons are labelled links which will open in a new tab to allow for easy navigation for the user. The footer is valuable to the user as it encourages them to get in touch via phone or email if they prefer that method of contact and it also allows the user to keep connected via social media. (Refer to image above)
- The About page opens with an About Us section which is overlayed on a background image. It displays a paragraph on the history of the choir and a Read More button which when clicked brings up the rest of the choir history. The Read More button was added to reduce the amount of text visible on the page. It is up to the user if they want to find out more about the history of the choir or move on to the next section. The feature has a Read Less button as well which will hide the second chunck of text once read.
- The flip card with a snippet of the Conductor's Biography is an eye catching feature which displays a photo of the conductor with a background of piano keys and information about his qualifications and conducting experience. This is helpful for the user as it gives more information about the conductor as well as links to his social media for more information or to connect.
- The Rehearsal card is a useful feature on which the rehearsal day and time, location and cost are displayed. The icons are accessible by screen readers and have a little tooltip explaining what they are. It also has a link to google maps to aid with finding the location of the rehearsal venue as well as a link to the contact page to encourage the user to sign up.
Samsung Galaxy S20 Ultra
Nokia N9
Back of Flip Card and Rehearsal Card
Laptop L 1440px
- The Audio section provides the user with examples from the choir's repertoire of songs. Although these are temporary arrangments of the songs the choir uses, in the future they will be actual recordings to showcase the choir's talent. This is valuable to both visually impaired and sighted users, and event organisers can have a better idea of what type of events will suit the choir.
- The Testimonials section provides feedback from some of the choir members. This is very useful to the user as it gives them an overview of how the choir works and the benefits people living with sightloss experience when joining the choir.
Audio files on iPhone 12 Pro
Testimonials on Pixel 3 XL
2000px wide screen
- The Events section features cards with the most recent performances the choir has participated in. Each card displays a photo of the venue, the date and time, a link to google maps showing the exact location of the venue and a paragraph about the performance and ticket sales. This section is valuable to the user as it will be updated with the most recent performance dates so they can save the date, map their location and reserve their tickets.
- The Call To Action card is again featured here to encourage users to get in touch.
- The News section features articles written by the conductor himself, or by his helper, to keep the user updated with the most recent news. This is a quick and easy way for the user to read through the most important news if they are not on Facebook.
iPhone XR
Desktop 1440px
This page features a fully accessible contact form with specific fieldsets and a submit button. This enables the user to get in touch with the choir master or his assistant for further information regarding membership subscription or possibility of future events. The user is able to give their contact details, specify if they are interested in becoming a member, if they are an event organiser or other. The user is able to leave comments in the text area to encourage the choir or offer some insights on their performances.
Moto G4
Desktop Width 1440px
- Real name, logo, information, media and links for the Visionaries Choir.
- A Close Navigation symbol on the hamburger button in the header on mobile.
- An archive of past performances, appearances etc for the choir’s followers and members to access from the website itself.
- News cards to look more modern, maybe a skewed effect on an opaque background.
- A donation box for the choir.
- A personalised page that thanks the user for submitting the sign up/contact form with a functioning action which sends the data to a file on the server.
- Information about how the users data will be used (GDPR).
The main goal of the website is to make the public aware of The VisEnsemble Choir. It hopes to motivate more visually impaired people to join as members and increase the number of supporters and followers of The VisEnsemble Choir. The overall objective of this website is to aid in creating a well-established and well-rounded choir and as a result increase the number of ticket sales and performances per year.
This section aims to determine what a user/visitor would expect from interacting with the website. Scenarios of actions each type of visitor wishes to take are listed below.
-
Website User Goals
As a website user:
- I want to easily navigate through the website.
- I want the website to be organised and consistent across all devices.
- I want all external links to be opened in a new tab so I don’t have to find my way back to the main page.
- I want to see consistent behaviour so I have a pleasant journey when navigating through the page.
-
First Time Visitor Goals
As a first time visitor:
- I want to understand immediately what the website offers.
- I want to read about the choir and learn more about who they cater for and how accessible the space for rehearsal and learning is.
- I want to see where and when rehearsals take place so I can check if I am available and how to get there.
- I want to know what the individual members have to say about the choir so I can assess if the atmosphere meets my expectations.
- I want to hear what kind of songs are in the choir’s repertoire so I can decide if I would enjoy singing them.
- I want to hear what kind of songs are in the choir’s repertoire so I can assess if they are appropriate for the event I’m organising.
- I want to hear/see the choir sing in order to assess their level of performance.
-
Returning Visitor Goals
As a returning visitor:
- I want to be able to contact the choir master or his assistant with any queries I may have.
- I want to see the links to social media so I can interact with other followers and see what else is happening.
- I want to see updates in the events section in order to pre-book tickets with the relevant organisations.
-
Frequent Visitor Goals
As a frequent visitor:
- I want to see updated news from the choir master and other members of the choir.
- I want to see different testimonials from newer members of the choir.
- I want to engage with and make my contribution to the choir. I want my opinion to be heard.
A four page website which offers simplicity and consistency within its structure. The Navigation menu displays the choir’s logo and links to the different pages on the website, for easy navigation. This is repeated across all pages. The Footer displays social media links which open in a separate tab for ease of use. The footer is also repeated across all pages to keep the design uniform and for ease of access.
Wireframes were first sketched with pen and paper. This method helped me with brainstorming, deciding the most essential parts for the website and getting a feel for the website as a whole. They were then wireframed in Balsamiq to give a closer indication of the intended design.
Right click to view mobile wireframes in pdf done with Balsamiq
Right click to view desktop wireframes in pdf done with Balsamiq
Note: Through the design phase some elements were changed to allow for a better user experience.
This section defines the visual language of the website.
-
Colour Scheme
The colour orange was chosen as the primary colour for the website as it represents friendliness, enthusiasm and creativity. It was used for the logo and header text, as well as important text and buttons to draw the eye.
ColorMind was used to generate the following colour palette.
The colour Outer Space was used as the dark shade for the header and footer background as well as the website's main typeface.
The colour Green White was used as a light shade for the background on some cards and text color on the contact page.
The colour Edward was used as a light accent with increased or decreased brightness and/or opacity for certain features.
The colour Limed Oak was used with opacity for the body background and the contact page text inputs.
- Typography
Google fonts Roboto and Nunito were chosen for the website. They are both sans-serif fonts which have a higher readability than serif fonts.
- Icons
The icons used throughout the page were taken from Font Awesome. On the Home page in the Our Vision Section, the icons used are mainly decorative, they are eye-catching and identify with the text underneath them. They are hidden from screen readers using aria-hidden="true". The icons on the Footer are interactive links and have an aria-label which gives the relevant information to screen readers to read out to the users. The icons on the Rehearsal card provide a tooltip for sighted mouse users by using the title tag. A span tag was also added to provide the same information in the tool tip for assistive technologies. This is kept visually hidden as the tool tip already provides that information. Unfortunately, at this time it wasn't possible to make them accessible by keyboard navigation without turning them to links or using JS.
- Balsamiq
- GitPod
- GitHub
- Cloudinary
- Am I Responsive
- Can I Use
- Tiny PNG
- YouTube MP3 Converter
- MP3 to OGG Converter
- W3C HTML Validation
- W3C CSS Validation
- Chrome DevTools & Lighthouse
- Firefox DevTools & Accessibility Inspector
- Edge DevTools & Lighthouse
- CSS Autoprefixer Online
No Errors or Warnings to show on either of the four pages.
No Errors found.
Warnings include:
- 'Imported style sheets are not checked in direct input and file upload modes' for the google fonts @import
- 'Due to their dynamic nature, CSS variables are currently not statically checked' for all the variables I used.
- All other warnings are for vendor extension prefixes.
Chrome Browser
| Page | Device | Category | Result | Diagnostics | Comments |
|---|---|---|---|---|---|
| Index | Mobile | Performance | 95% | Serve static assets with an efficient cache policy | |
| Accessibility | 100% | ||||
| Best Practice | 92% | Issues were logged in Devtools | No issues detected so far | ||
| SEO | 100% | ||||
| Desktop | Performance | 99% | Serve static assets with an efficient cache policy | ||
| Accessibility | 100% | ||||
| Best Practice | 92% | Issues were logged in Devtools | Only third-party coookie issues detected so far | ||
| SEO | 100% | ||||
| About | Mobile | Performance | 71% | Serve static assets with an efficient cache policy | Audio files have a Cache TTL of None |
| Minimize main-thread work - 5.3s | JS moved from external script to index.html | ||||
| Accessibility | 100% | ||||
| Best Practice | 92% | Issues were logged in Devtools | No issues detected so far | ||
| SEO | 100% | ||||
| Desktop | Performance | 87% | Serve static assets with an efficietn cache policy | Audio files have a Cache TTL of None | |
| Avoid enormous network payloads -total 4,237KiB | Hero image compressed and webp | ||||
| Accessibility | 100% | ||||
| Best Practice | 92% | Issues were logged in Devtools | Only third-party cookie issues detected so far | ||
| SEO | 100% | ||||
| Events | Mobile | Performance | 95% | Serve static assets with an efficient cache policy | |
| Accessibility | 100% | ||||
| Best Practice | 92% | Issues were logged in Devtools | No issues detected so far | ||
| SEO | 100% | ||||
| Desktop | Performance | 99% | |||
| Accessibility | 100% | ||||
| Best Practice | 92% | Issues were logged in Devtools | Only third-party cookie issues detected so far | ||
| Contact | Mobile | Performance | 60% | Opportunity: Eliminate render-blocking resources 1.02s | Deferred JS scripts |
| Accessibility | 100% | ||||
| Best Practice | 92% | Issues were logged in Devtools | No issues detected so far | ||
| SEO | 100% | ||||
| Desktop | Performance | 90% | Serve Static assets with an efficient cache policy | ||
| Accessibility | 100% | ||||
| Best Practice | 92% | Issues were logged in Devtools | No issues detected so far | ||
| SEO | 100% |
Edge Browser
Issues:
- Button type attribute has not been set on the navigation button - added
- The 'x-ua-compatible' meta element should not be specified as it is not needed - removed
The website was manually tested on Chrome, Edge, Firefox and Safari browsers at different screen sizes as well as on iPhone 6S, Samsung Galaxy S10 Plus, iPhone XS max, iPad Air,Laptop 1280px and Standard HD Screen 1920 x 1080. Responsiveness and functionality worked as expected on all except iPad Air which ran on iOS 12.5.5 where the WebP images were not rendering. Please refer to Images not rendering on old browsers section under Bugs for my solution to this.
Manual Testing with older browsers also showed that the :is() pseudo class selector was not yet supported and thus was removed from the stylesheet and reverted back to the long format.
Functionality was also tested with keyboard navigation and screen reading technology. These work as intended, except for the 'Read More button' on the About Us section, the Flip card and the Contact Form. Please refer to the next section for details or click on the links above.
-
HTML Validator gives warnings that some articles and sections lack headings.
-
Index Page:
Article tag for the quote was changed into an Aside tag. Section for the quote and vision container was changed to a div.
-
About Page:
Section tag for cards container was changed to a div.
-
Events Page:
Section tag for Events was given the heading of "Events". Section tag for News was given the heading of "News".
-
-
CSS Validator gives a parsing error on the following:
html {
@media (prefer-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
font-size: 100%;
}This was corrected by placing the media query on the outside, then the element and the style rule, like so:
@media (prefer-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
html {
font-size: 100%;
}- CSS Validator warned about 'The property clip is deprecated' - MDN web docs__ recommended to use the clip-path property instead. So the following code which is meant to make an element 1px small in order not to be visible on screen
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);was replaced by:
clip-path: polygon(1px, 1px, 1px, 1px);
clip-path: inset(50%);Eventually this was also replaced by absolutely positioning the text off screen as recommended by WebAim
Firefox gave warnings on every page about contrast issues, which the Lighthouse validators on Chrome and Edge did not detect. These were all changed accordingly to suit, except for the 'Skip Navigation link' which is meant to be hidden until it comes into focus.
Firefox gave an accessibility issue with the radio buttons in the Contact form. They were not visible enough. The width and height of the radio buttons was added and set for different screen sizes with media queries.
-
When Lighthouse performance was first checked the report was extremely low for almost all pages. All images had to be resized, compressed and most changed to webP. Media queries were added to resize images according to screen size. After all this, performance improved a little but still not enough. Eventually, all images on the website were moved to Cloudinary. This made it easier to resize the images accordingly. This Guide to responsive image syntax in HTML was very helpful in making the logo and photos responsive and gave instructions on how to use srcset for better performance.
-
iFrames with YouTube videos were also reducing performance of the website. They were converted to mp3s and OGG backups to help with this. The visuals were not needed in this case so it made sense to have them as audio files instead. The real website will have the choir's own recordings. These will be added as audio/video files, or links will be provided to the choir's own YouTube page.
All four pages had a Back to Top button which was meant to appear when scrolling down. This worked on 3 of the 4 pages and manual testing found that it was not always accessible with screen readers. After much trial and error, it had to be scrapped and replaced with the current Back to Top link which works fine for sighted, non-sighted and keyboard users. The Back to Top link brings the user back to the skip navigation link which is quite handy for people with disabilities.
When the read more link was clicked, the whole page jumped down. This was not ideal, so after a few tests an anchor tag was placed in the div container which fixed this problem. This, however, made the read more button less intuitive with screen readers. As the user double-taps on the Read More button, the next swipe jumps to the next section (Our Conductor) rather than the next paragraph in the About Us section. This issue has not yet been fully resolved. I will opt not to use this feature in my future projects until I find an accessible solution for it. For the time being, an aria-label to select and swipe back has been added in order to facilitate the Read More action.
This worked out better than expected and no JavaScript was needed. At first the Flip Card was not rotating when navigating with the keyboard. A quick search on Google brought me to anycodings which had a solution made possible by adding :focus-within rather than just :focus along with :hover on the flip card container.
The only remaining bug is that although voice over can read the back side information, with certain devices it does not always flip to show the back. This is not ideal for visually impaired people who have some sight and use screen readers. More research will be done to fix this.
-
The Contact form works well for sighted users and with keyboard navigation, as errors are visually highlighted when the form is submitted incorrectly. However, the user relying on screen reader has no feedback when errors are displayed. After plenty of searches online it was evident that this could not be done without JS, so a script had to be borrowed from Hidde's blog to make the form more accessible with screen readers.
After testing with different methods,aria-live="assertive"witharia-relevant="additions removals"(to apply the same functionality in reverse) is used to tell the user that a required field is not filled in and a visually hidden note is placed just before the Submit button to tell the user that in order to submit the form they need to get confirmation and review their required fields. -
The text area stretched outside the parent container on small screens and it was not responsive. After a quick search on Google, it was found that box-sizing needed to be set to border-box in order for it to respect its parent container padding and border.
textarea {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}A quick search on Caniuse.com showed that older versions of all browsers, especially Safari, did not support the WebP image format. The picture tag in HTML was added to offer a fallback to a JPG format for these browsers. faqcode4u.com was helpful in figuring this out. HTML for the pages was validated again in the HTML Validator.
For the background images in CSS, it was opted to switch back the Home Page Landing Background Image, The About Us section Background Image and the Flip Card Profile Photo to JPG format again as they were useful for positioning of the other elements. The website was tested again for performance and it was found that there was only a .2s delay for the JPG images. The Contact Page Background Image was left as WebP as the contact form had good contrast without it.
The Audio players on certain iOS devices were not centering properly. It was suggested to pass the CSS through an online Autoprefixer to add vendor prefixes for all popular browsers. This did not solve the problem but it was decided to keep the prefixes in case of other issues.
The Radio buttons do not show up as intended on iOS devices, they are too small and don't respond to the styles written. After some research it seemed that JS was needed to fix this or using a jQuery plug-in. This video shows how to customise them for iOS using only HTML and CSS but this wasn't what I was looking for, for this project.
The project was deployed to GitHub pages by navigating to the Settings tab in the GitHub repository and selecting the Main Branch from the source section drop-down menu. Once the Main branch was selected, the page automatically refreshed to display a detailed ribbon indicating successful deployment.
The live link can be found here - https://monipar.github.io/the-visensemble/
- The fonts used throughout the page were taken from https://fonts.google.com/
- The icons used throughout the page were taken from https://fontawesome.com/icons
- Instructions on how to implement flexbox and a hamburger button were taken from this Conquering Responsive Layouts Course by Kevin Powell
- Instructions on how to use absolute positioning and desing a flip card were taken from this Advanced CSS and SASS Course by Jonas Schmedtmann
- Instructions on how to implement the Skip Navigation, Back to Top links and Accessible, Smooth Scroll to Top Styling was taken from https://ashleemboyer.com/blog
- The quotation on the Home page was taken from https://www.goodreads.com/quotes/420478-the-only-thing-worse-than-being-blind-is-having-sight
- The text for the Conductor's Bio on the About page was taken from http://www.kellymusicservices.com/frankbio.html
- Instruction on how to build a Read More button were taken from https://www.w3schools.com/howto/howto_js_read_more.asp
- Instructions on how to make the Read More button accessible with screen readers was taken from https://jolvera.dev/posts/accessible-read-more-links
- The text for the testimonials section on the About page was inspired from https://www.fightingblindness.ie/news/the-choir-has-a-special-place-in-my-heart-its-my-rock/
- Instructions on how to make the flip card accessible with keyboard navigation were taken from https://stackoverflow.com/questions/62418249/css-flip-card-how-can-i-activate-the-flip-via-tab-so-it-is-keyboard-accessible
- Instructions on how to make icons readable by screen readers were taken from Webaim and Fontwesome
- Instructions on how to write the syntax for responsive images in HTML were taken from https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/
- Instructions on how to optimise images for better Cumulative Layout Shifts (CLS) were taken from https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=devtools#images-without-dimensions
- Instructions on how to style textarea width for the Contact Form was taken from https://davidwalsh.name/textarea-width
- Instructions and JS code on how to convey that an error message has appeared with screen readers were taken from Hidde's Blog
- The VisEnsemble Logo was designed by https://www.circlestrafemedia.com/
- The background image for the Home Hero was taken from the Unsplash open source site
- The public domain image of Helen Keller on the Home page was taken from https://cdn18.picryl.com/photo/2019/10/07/helen-keller-no-8-0bcfc1-640.jpg
- The image of St. Audeon's church on the Events page was taken from Heritage Ireland
- The audio files in the About page were taken from Alfred Music Choral and Hal Leonard Choral YouTube pages and converted into mp3 and ogg files using this YouTube MP3 Converter and this MP3 to OGG Converter
- All other photos and images were taken from the Pexels open source site
- The Image with various screensizes at the start of the README.md file was done using AmIResponsive
A huge thanks goes to my mentor Sammy Dartnall for all the guidance and encouragment she gave me throughout this project. Same goes to the fabulous Student Care Duo Kenan Wright and Kasia Bogucka for their support and help with getting set up and sorted as well as my MSLETBB team mates for the moral and technical l support.
Thank you goes to the CodeInstitute Slack community which had a lot of material I found useful in the various channels.
My friends and little team of screen-reading technology testers Abbie Healy, Edvard Navackas, Victoria Alves de Oliveira and Tim Culhane for testing my website and giving very helpful feedback.
My parents Joe and Lucia Parnis for the encouragment and last but not least my partner Austen Donohoe for the VisEnsemble Logo and for all the dinners and cups of tea.
