Project TTM
in category Projects -> Web Development -> Project TTM. Updated at Thu, 06 Mar 2025 03:46:13 EST
Screenshots of the Drupal 9 project and info.
TTM is a computer board, advanced PCB, manufacturer located in California.
I did most of the front-end coding, javascript and Drupal templates and views for this project in 2021-2022. Originally there were 3 of us coders but the other 2 were dropped a short while after I came onboard due to too many coding issues and lack of timely completion of work from both of them. I had one real good partner, our team lead, on this site who managed things from the client end (opinions on design etc) but mostly didn't code.. he did a great job of always being available, kept a very professional critical eye on the back end code, and managed both the web servers and repo. He knew how to read the code and in a few places took the opportunity to hone things to his liking. He managed the English to Chinese translations. The 2 of us finished the work ourselves. Later that year I went back at the client's request and did full WCAG/ADA compliance for this website. Typically that gets done with the original coding but they didn't want to spend the money upfront, they weren't fully informed about ADA compliance. Then the site was audited by an external entity and lack of full accessibility became an issue.
This was a big project. We spent 6-7 months building up front and the WCAG itself took about 4-5 months to fully code and test. This is a multi-language Drupal website. I was even actually able to get the aria-labels and other screen reader code items translated for the Han Chinese version of the site.
I did not do the basic design for this site. TTM bought the design in very basic html template form, from another design group. I did have to change some things ever so slightly from the original layout to make everything work real good together with Bootstrap and Drupal. I also added little items as needed, like the icons and the cookie consent pop-up, re-designed form layouts and added javascript events to improve the user experience.
I used bootstrap4 grid for the layouts, font awesome for the icons, with some regular ecma2020 javascript and JQuery for various actions and events.
We spent an enormous amount of time bringing things into full WCAG2/ADA compliance at this website which really pays off for this client to this day. He has zero worries about lawsuits or penalties. This is a screenshot of the initial keyboard tabbing link so that blind people can use the site without having to run through the entire menu when they land on a page. That is my custom skip to main css that I typically use everywhere. It works good, it can be styled as desired. It's not the built-in Drupal skip-to-main link.
When you click the accessibility button near top right, it turns blue and the page text is boldened, with black/white block backgrounds in the slider and other places where contrast isn't so hot.
Page text goes from normal to bold for visually impaired users. That's jquery and css working together to make that happen. The javascript switches the css back and forth from the original style sheet to a different style sheet that only uses black and white text and adds the bold face fonts.
This is a good project. I'm fully confident that Eric, my excellent team lead who remains as the Drupal admin for TTM, will make sure that no one mangles the code for this website.
Keywords
Drupal, bootstrap, multi-language drupal, Drupal ADA WCAG 2