make CSS accessible

[mithru]

Check and fix contrast of different elements on the page

[kemi-itp]

I'll take it... 3 weeks, and with updates

[kemi-itp]

adding these issues here, as they can be fixed by CSS...

Projects cannot be selected with tabs / enter, they are clickable buttons What is the header hierarchy for the Projects landing page? Name of project owner does not have header tag Date doesn’t have a header tag Alt tags all say the same thing (because they are generated,) should we be more descriptive? Links on landing page are low contrast Links on inner pages are low contrast H2 is skipped in hierarchy Should these have header tags? --Project URL --Video URL --Elevator Pitch --Description

Headers on individual project pages start at h4

[kemi-itp]

Some notes....

• Using

  this as a color contrast tool:

http://accessible-colors.com/

• On landing page Keys (wearable, etc)

Change from .keys { color: #a9a9a9; margin-right: 10px; }

.keys:hover { color: #ff5e99; }

To

.keys { color: #707070; margin-right: 10px; }

.keys:hover { color: #DE0051; }

---

On projects inner page New alink, a hover -- #DE0051,

Whats is the fix when there is no image for the project? With images, there is an aria label, can we add the name of the project for the aria label if there aren’t any images?

Landing page Aria labels for :

Wearable Physical Computing Computational Art Storytelling Thesis ---------------------------------- Need to come up with agreed style for: Cards-- H2- H3- H4- Pages /Card Text H1 H2 H3 H4 Right now it is:

Cosmic Forest

Joohyun Park

2018-12

Neural Network, Deep Learning, Immersive, Sound, Web VR, Spatial Audio