There is an
alt attribute that describes what can be seen in the image. This description can be used by assistive technology so that information provided by images is not lost. But
alt attributes can also be useful for people with slow network connections that have disabled the loading of images. Useful tips about the usage of the
alt attribute can be found in this article about the alternate text attribute from The A11Y Project.
A practical approach to designing a website is to start from mobile screen sizes and to work your way up. This so-called mobile-first approach ensures that a website works on the device with the most limitations in terms of screen size and network bandwidth first. As the development continues and the screen size grows features can be added if necessary. This design process feels more natural than going form big screen sizes to small screens and often leads to better results than other approaches.
In terms of accessibility this means that the page uses an appropriate font size for smaller displays, links or buttons are big enough to be tapped on a touchscreen, and the site is also usable with a slow network connection.
It is a privilege to have access to a fast network connection and a website should not be built in a way that renders it useless when accessed via a slower connection.
In my quest to make my website small I abstained from using big CSS frameworks or custom fonts. Additionally, I decided to generate this website statically which reduces the response time of the server.
A website without colors can look pretty dull. But colors should not be chosen carelessly. There are many forms of color blindness and colors should be chosen to still be distinguishable from each other for people with such disabilities. Another requirement for colors is their contrast. The contrast between background and foreground must be high enough so the can be distinguished from each other.
Because there are a lot of things to consider it is important to test if there are no errors that negatively influence the accessibility of the website. To do so there are automatic tools that can identify accessibility problems like WAVE, the Accessibility Inspector built into the Firefox developer tools, or Google Lighthouse. Unfortunately, not everything can be tested automatically and it is a good practice to do some additional manual testing. For example try to navigate the website with the keyboard only, use a screen reader to explore the website, surf around with a throttled network connection, and check if everything works on an older smartphone.
So in the spirit of questioning everything please let me know if you find any accessibility issues or other problems with the redesign of my website. Hopefully this article helped you to lear a bit more about web accessibility and don't forget to apply the things you learned to websites you build yourself.