WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: CSS usage

for

Number of posts in this thread: 8 (In chronological order)

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Mon, Nov 04 2013 9:07AM
Subject: CSS usage
No previous message | Next message →

Hi Listers,

As a blind person how much CSS should I need. Since this is just for the visual appearance it appears to me a sighted person would be more efficient at this. I am specifically talking about getting things to line up on the page even though the font letters are different sizes.




This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.

From: Nathalie Sequeira
Date: Tue, Nov 05 2013 12:47AM
Subject: Re: CSS usage
← Previous message | Next message →

Hi Susan,

If you serve up a bareboned HTML page, each browser has default CSS
styles to display it.
That gives you different font sizes for headings, list stylings for
lists, colors and underlines to mark links etc.
So you do have the lining up as well as useful visual cues without any
specific CSS of your own.

There are however a few problems that the default browser styles present
for sighted readers:
- the lines of text will just run straight across the screen, making
them very long and hard to read
- also, usually the default font in browsers often is a serif font,
which is also harder to read for some people.
- if you use tables, sometimes the borders won't be displayed, making it
hard for sighted users to understand table structure.

While you can resolve the first two by setting the width of the body to
something around 30em and the font-family to a sans-serif font,
especially the tables would do well to be styled by a sighted person.

HTH!
Nathalie


Am 04.11.2013 17:07, schrieb Stanzel, Susan - FSA, Kansas City, MO:
> Hi Listers,
>
> As a blind person how much CSS should I need. Since this is just for the visual appearance it appears to me a sighted person would be more efficient at this. I am specifically talking about getting things to line up on the page even though the font letters are different sizes.
>
>
>
>
> This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.
> > > >
>

From: Jonathan Metz
Date: Tue, Nov 05 2013 7:45AM
Subject: Re: CSS usage
← Previous message | Next message →

Hi Natalie,

You could use normalize.css (https://github.com/necolas/normalize.css/) to
reset the browser css to allow for other code. Just add it prior to
everything and then move forward with your own css, and fix those pesky
default browser issues you mention from there.

Hope that helpsŠ

Jon

On 11/5/13 2:47 AM, "Nathalie Sequeira" < = EMAIL ADDRESS REMOVED = > wrote:

>Hi Susan,
>
>If you serve up a bareboned HTML page, each browser has default CSS
>styles to display it.
>That gives you different font sizes for headings, list stylings for
>lists, colors and underlines to mark links etc.
>So you do have the lining up as well as useful visual cues without any
>specific CSS of your own.
>
>There are however a few problems that the default browser styles present
>for sighted readers:
>- the lines of text will just run straight across the screen, making
>them very long and hard to read
>- also, usually the default font in browsers often is a serif font,
>which is also harder to read for some people.
>- if you use tables, sometimes the borders won't be displayed, making it
>hard for sighted users to understand table structure.
>
>While you can resolve the first two by setting the width of the body to
>something around 30em and the font-family to a sans-serif font,
>especially the tables would do well to be styled by a sighted person.
>
>HTH!
>Nathalie
>
>
>Am 04.11.2013 17:07, schrieb Stanzel, Susan - FSA, Kansas City, MO:
>> Hi Listers,
>>
>> As a blind person how much CSS should I need. Since this is just for
>>the visual appearance it appears to me a sighted person would be more
>>efficient at this. I am specifically talking about getting things to
>>line up on the page even though the font letters are different sizes.
>>
>>
>>
>>
>> This electronic message contains information generated by the USDA
>>solely for the intended recipients. Any unauthorized interception of
>>this message or the use or disclosure of the information it contains may
>>violate the law and subject the violator to civil or criminal penalties.
>>If you believe you have received this message in error, please notify
>>the sender and delete the email immediately.
>> >> >> >>
>>
>
>>>

From: Jukka K. Korpela
Date: Tue, Nov 05 2013 8:05AM
Subject: Re: CSS usage
← Previous message | Next message →

2013-11-05 16:45, Jonathan Metz wrote:

> You could use normalize.css (https://github.com/necolas/normalize.css/) to
> reset the browser css

CSS Resets are snake oil and tend to cause more problems than they
solve, though Normalize.css isn't nearly as bad as many other CSS
Resets. Their very approach is contrary to accessibility principles: we
want different browsers to render pages differently, since different
people need different presentations, and browser defaults may help here.
User style sheets help, too, and CSS Resets fight against them as well.

Problems presented in the original question cannot be meaningfully
addressed without more information. It refers to "getting things to
line up on the page even though the font letters are different sizes",
and I really cannot guess what it means. Does it relate to differences
in font size, or, as it seems to say, to differences between sizes of
characters, or glyphs, within a font, like the lowercase "i" being much
smaller than the uppercase "M" in the same font? Either way, why would
this be a problem?

The basic principle should be to design the layout to accommodate texts
in different font sizes, instead of forcing fixed widths. If you set the
width of some element to 200 pixels, then it obviously cannot contain a
large amount of text, or even a fairly small amount of text in large
font size. And for accessibility, some partially sighted people may need
font sizes that are much bigger than most designers dream of.

Yucca

From: Greg Gamble
Date: Tue, Nov 05 2013 8:52AM
Subject: Re: CSS usage
← Previous message | Next message →

None ... I believe a site should still be readable and usable without CSS.


Greg


From: Nathalie Sequeira
Date: Tue, Nov 05 2013 10:47AM
Subject: Re: CSS usage
← Previous message | Next message →

Am 05.11.2013 16:05, schrieb Jukka K. Korpela:
> Problems presented in the original question cannot be meaningfully
> addressed without more information. It refers to "getting things to
> line up on the page even though the font letters are different sizes",
> and I really cannot guess what it means.
Ha, interesting, the different interpretations of Susan's question!

I understood it as Susan being blind and building web pages, wanting to
know what sighted users may need ... ;)
But of course, I may be wrong -- Susan, please let us know if we're way
on the wrong track!

> The basic principle should be to design the layout to accommodate texts
> in different font sizes, instead of forcing fixed widths.

Absolutely.
Which is why I recommended setting an em-based width -
30 em usually works fine for achieving a line length that is still
readable - and it scales along with the increased text size of enlarged
text :)

Cheers!
Nathalie

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Tue, Nov 05 2013 11:27AM
Subject: Re: CSS usage
← Previous message | Next message →

The whole thing started when they wanted the red asterisk to stick out from the text on phone number. Underneath the phone number is the fax number which is not required. When I made a one space before the "f" of fax number the "p" of phone number was not right above the "f" of fax number. I made it a little better by changing my one space to two spaces. My section 508 coordinator who knows a lot about html said for proper alignment I could use CSS. I don't know CSS yet. I have been taken off this assignment because they didn't have a sighted person to assist me in looking at the page. I am writing JSP code which is then rendered into html. Isn't CSS only used for making things pretty? Should I be learning it and if so why?

Susie

From: Carol E Wheeler
Date: Tue, Nov 05 2013 11:55AM
Subject: Re: CSS usage
← Previous message | No next message

On 11/5/2013 13:27, Stanzel, Susan - FSA, Kansas City, MO wrote:
Isn't CSS only used for making things pretty? Should I be learning it
and if so why?

Well, "pretty" in the sense of appearance, yes, but also positioning on
the page. With the many screen sizes available now, CSS can also be use
to adapt the display to the screen size. So, yes, visual concerns, which
is the notion behind the HTML is for content and CSS is for display
mantra. Not always so simple, of course.

-- cew

*Carol E. Wheeler*

Web Co-ordinator
American Institute for Cancer Research
1759 R Street NW
Washington DC 20009

Direct Dial: 202-600-3001
Tel: 202-328-7744
Fax: 202-328-7226

= EMAIL ADDRESS REMOVED =
http://www.aicr.org