I am using the medical template for a new project and really love the design. I wanted to let you know that I noticed that several of the Font Awesome icons do not have the attribute aria-hidden="true"
When you wrote your blog post about adding the "aria-label" where needed
I hadn't realized when I read it that "aria-hidden"
was not mentioned and for WCAG 2.0 and ADA compliance it is needed for any icon that does not have a function and is purely "cosmetic".
With the Medical template, there are several places just on the homepage that need to be addressed.
There are 3 icons in the top right corner that need to have aria-hidden="true"
The 4 boxes that overlap the slideshow also have icons and those should also have the aria-hidden="true"
For the client reviews, there are font awesome "stars"
which should have the "aria-label"
attribute set so the screen reader knows what they are to be used for.
The contacts particle in the footer, which is the same particle that is used in the header, is also missing the aria-hidden="true"
, but fixing it in the particle will fix it in both places.
I think those are enough examples for you to understand what I'm talking about. I've attached some pictures to better illustrate what I'm referring to.
For better WCAG 2.0 and ADA compliance the aria-hidden="true" should really be added to the templates and particles where necessary.
Any chance you can work towards making these changes in the future?