My most recent course lessons have been exploring the ins and outs of UI, UX, and Accessibility. How a person interacts with the site, feels when using the site, and their ability to navigate throughout is the backbone of good web design.

Below are the eight steps I performed to make sure that my recent discography website project is accessible and usable for everyone. You can click here to check it out.

Minify Files – Minifying my CSS files helps to remove page-slowing white space. I used the website, CSS Minifier, to compress my files.

Optimize Images – By optimizing images, it helps to keep my the file size of my images small so that the page and images load faster. I used a couple of free sites like Kraken.io and TinyPNG. I did out later on that Google’s PageSpeed Insights will optimize your images for you and put them in a file that you can easily upload.

Check Color Contrast – In my course about accessibility, I learned that color and especially contrasting colors are essential for visually impaired users. Lighthouse, located in the Chrome Dev Tools Audit tab, can help check for contrasting colors as well as other super helpful error checks.

Add Alt Tags – Alt tags are helpful to describe images and links for screen readers. I added alt tags for useful descriptions.

 

Add Table Summary – Tells screen readers what the table is about to help better describe the information that follows.

 

Table Head Scope – This tells screen readers what is a column and what is a row in a table.

Validate Markup – Validating my markup ensures that my website shows up correctly in all uses. I used the W3C CSS and HTML Validation Service tool to check that my code is W3C compliant.

Speed Test – Page load speed is vital in usability and SEO. No one will wait for a page to load before moving on to the next website. I used Google’s PageSpeed tools to test the site to ensure that it’s ready to go live.