Accessibility on Web Design

This is assignment is for accessibility on the web design. From the WCAG(Web Content Accessibility Guidelines), we know that WCAG aims at two aspects: 1) natural information such as text, images, 2)sounds and code or markup that defines structure, presentation, etc. Though we have clear guidelines, in the practice, we still can not develop a holistic accessibility on one website. From a view of a front-end developer, I think it might be a problem that our visual design, performance, and animation are not primarily aimed for the disabled. Thus, what we are doing about the accessibility is like fixing bugs from the peripheral. As for the accessibility of the website, I think if there were an ultimate solution it should be a new design language, patterns that servers for them. Back to practice, we can take a look at the p5.js Website.

Test with Color and Contrast

Since the p5js's main site is quite complexed in some extents, I sampled two color contrast analyser result from this site. We can see that in most cases, this color contrast works fine except for the AAA standard and AA standard in some situation. This variation may because of the changing background that makes the readability keep changing.

Voice Over

As for this part, I could say this website gives me a relatively good feedback with the voiceover. At least, I can get necessary information from the voiceover and most images, svgs and icons have a alt to describe what it is. However, some links are kinda of confusing, like there is a hyperlink named easy yo interact and jumps to the example. This might be a little hard to understand with some people. Also there is a hidden button in the main website, it won't be seen but voice over can detect it which also lead to some misleading. Also the outer iframe is leak of description and confuses users with the structure of the website.

Hidden Button

Overall, I think the accessibility is not only about how to develop the website friendly with the new HTML5 tags and attributes that help the voiceover works better. But it is more about how to do some extra design that let the website has a solution that is friendly with the disabled. We should pay more attention onto the design choice and paradigm.