Malhar ’21, our very own college festival, was held online last year for the first time. With it being held online, it was clear that a great website had to be built to facilitate all users and provide them with all information.
The Computer Department team was responsible for building and managing the Malhar 2021 Website and to make sure that we cater to all the users, we as part of the Computer team, jointly took on the responsibility of making the Website Accessible.
What is Web Accessibility?
The foundation and the basic keystone of any website is to make every information accessible to all the users irrespective of any disabilities. By making the website accessible, we ensure that all users, including people with disabilities, are easily able to access all the information on the website. For example,blind users and people with low vision use assistive technologies like Screen Readers to browse the website.and we need to design the website with all these challenges in mind.
Making Our Website Accessible
Planning
We started meeting regularly in the evenings to discuss the several tasks that were required to be undertaken so as to ensure that the website complied with the W3C (World Wide Web Consortium) WCAG (Web Content Accessibility Guidelines) accessibility standards. In the brainstorming sessions, we discussed the steps to be taken to improve the user experience for people with disabilities.
We used Git (A Distributed Version Control System) along with GitHub as our medium of collaboration, hosting the code, sharing ideas, issue tracking and much more.
Steps Taken
- HTML5 & ARIA : Most web content can be made accessible by just using the correct HTML elements for the correct purpose always. Accessible Rich Internet Applications (ARIA) is a set of attributes added to HTML elements to improve accessibility. Semantic HTML along with ARIA is considered the building blocks of web accessibility. So, we implemented basic HTML5 tags and ARIA attributes in our website to ensure maximum accessibility.
- Semantic Landmarks : Semantic landmarks improve the navigation experience for people who use assistive technologies. Clear landmarks must be present to inform the users about the structure and layout of the website. For this reason, we provided semantic landmarks and labels to the various regions on the pages so that the user can quickly navigate and jump around the website. Along with this, we made use of skip links which made it easier to navigate the website.
- Alternative Text : ALT text or Alternative Text is an invisible description of images which are read aloud to people who use screen readers to access online content. We added Alt Text to all the images on our website. For example, the events, workforce etc.
- Interactive Elements : The website used various interactive elements for navigation. We provided descriptive text to those interactive elements so as to provide a better and meaningful user experience.
- Visual Indicator : Another issue was that the interactive elements did not have a visual indicator when focused upon by the user. This made it difficult for keyboard users to navigate through the website. We tackled this issue by adding visual indicators to the focusable items so that it is easier for keyboard users to navigate and understand the various clickable elements on the website.
Accessibility Testing
We performed a series of both automated and manual tests of the website so that the final output complied with the W3C WCAG Guidelines for digital accessibility.
- Lighthouse : We used Google Chrome’s Developer tool, Lighthouse to inspect the accessibility issues in our website. It provided a list of best practices to improve the overall user experience.
- SortSite : We also used SortSite, an online Website Usability and Accessibility Checker to retrieve a comprehensive list of issues and violations for the website as a whole.
User Testing : Finally, the website was also tested practically with the user. We used screen readers to navigate through the website to make sure that all the information was clear and accessible.
