CSS for Visually Impaired people

css

So while I was learning HTML I encountered CSS. It's interesting because with CSS you can make a webpage cool or more beautiful. But since it's more about colors, designs, styles etc., I can't know the results of my CSS codes. As someone who is visually impaired, why should I learn CSS if sighted people can always design a webpage better than me because they can see?

  1. Are there blind programmers here who write CSS? How did you do it?
  2. Should I disregard CSS all together and leave it to sighted programmers? Or there are some things in CSS that I can do without asking people to look at my page to know if it has good design?

Best Answer

CSS is a general styling language, and includes properties for aural markup as well. While none of this is implemented by mainstream browsers, it might be useful to screen readers (but I don't know if any implement that, considering that aural markup isn't common “in the wild”).

I, as a seeing person, write CSS in a tight feedback loop where I change a bit of CSS and then watch how the page changes. If this feedback is not possible or very difficult, we have to fall back to design principles, and hope that they work out all right.

  • Proportions are easier to manage when we think of the page as a grid. A common division is to use the top row for navigation and headlines, and the right column for related content. The left column is used for the main content, and is roughly two to three times as wide as the right column. This is roughly how the Stack Exchange sites are rendered. In CSS, this can be implemented with display: table and related display styles of table-row and table-cell, or with the newer flexbox model. The exact ratios are surprisingly unimportant.

  • A page looks better when it's horizontally centered.

  • One doesn't have to use much colors: There is a background color (usually something bright and unsaturated) and a text color (usually something dark and saturated). We can reduce the brightness contrast to de-emphasize text like footnotes, bylines or other details. Using the HSV color model should be a lot easier than RGB for this. A number of color palettes exist that can be used if plain grey is too boring. Color should be used, but sparingly.

  • Font size can also be used to indicate importance – steps of 2pt and never below 9pt seems sensible. For normal text, a font size of 14pt should not be exceeded. Together, font size and contrast of text are similar to volume of speech.

  • CSS offers not only absolute units of measurements like px or cm but also relative units like em and keywords like thin or medium. Using relative measurements and these keywords is often easier.

  • Text shouldn't be any wider than 40em.

  • Browsers come with default stylesheets. They are not pretty, but you don't have to override everything. Choosing a simple webfont and setting a maximum width for text elements are the two most important things. Writing semantic HTML is important for the default styles to work.

With this, it should be possible to style a simple blog or such. However:

  • Debugging code is difficult, even more so if you can't see what you're doing. I don't get things right on my first try. But how would you even know when things look “right”?

  • Some things require precise placement of elements, e.g. in a pop-up menu.

  • Images and icons can add much depth to a design, but would be difficult for you to choose.

  • The CSS box model is horrible and often hard to simulate in your head.

I would assume that you would be able to write a bit of CSS, but it would be incredibly frustrating. I don't know what assistive technologies exist, but I assume that tactile feedback would allow you to design a general layout. Maybe pair-programming with somebody with eyesight might be a good solution for smaller details?

Related Topic