Stan's blog

19^th of September 2021 - UI coding challenge

I've begun a UI coding challenge to try and improve my HTML and CSS skills. CSS fundamentals are getting difficult but it's enjoyable to play around with different settings to see how things interact. CSS feels like a jigsaw puzzle, in that you have a design you are trying to copy and you write code to see how you can fit all the pieces together nicely to build the design.

I was informed of another interesting organisation that specialises in CSS and making all websites accessable to all. Often certain headings need to be added in HTML for the website to make sense to a screen reader. These are often marked up as

display:none;

in CSS which means that they are not recognised by the screen reader. The A11y (accessability) project is all about allowing anyone to have access to the web. They suggest using the following code to change certain elements so that they aren't seen by the average user but are recognised by the screen reader:

.visually-hidden {
                    clip: rect(0 0 0 0);
                    clip-path: inset(50%);
                    height: 1px;
                    overflow: hidden;
                    position: absolute;
                    white-space: nowrap;
                    width: 1px;
                  }

A link to their website is in the useful links section.