This project was part of Udacity Front-End Nanodegree. In this project I coverted a static webpage to a mobile-ready web application. The static design that lacks accessibility is given and I converted the design to be responsive on different sized displays and accessible for screen reader use. I also converted this to a Progressive Web Application by caching some assets for offline use.
The site is fully responsive. All of the page elements are usable and visible in any viewport, including desktop, tablet, and mobile displays. Images are not overlap, and page elements should wrap when the viewport is too small to display them side by side.
The final result is:
The site is accessible.
alt attributes are present and descriptive for images. I added screen-reader-only attributes when appropriate to add useful supplementary text. Also I used semantic markup where possible, and aria attributes when semantic markup is not feasible.
The static site is cached for offline use. Using Cache API and a ServiceWorker, cache the data for the website so that any page (including images) that has been visited is accessible offline.