The document discusses using CSS to improve accessibility. It describes how CSS can be used to control visual presentation of text while keeping it readable and resizable. CSS rules for properties like font-size, color, and width allow text to be adapted for different users. The document also covers WCAG guidelines for accessibility and techniques for implementing them with CSS, including providing text alternatives and ensuring navigability. However, it warns that CSS should not be used to insert non-decorative content or change the meaning of content by rearranging elements in the DOM.

1. Accessibility with CSS
Lisa Seeman

2. Accessibility – not the “average user”
Getting your content to everyone:
 Disabilities
 Visual disabilities
 Hearing disabilities
 Physical disabilities
 Cognitive or neurological disabilities
 Other interoperability Scenarios
 AT
 Screen readers, brail readers, magnification, key pad etc

3. Our hero
W3C WAI - United approach so that all different player
work together
 WCAG (Web Content Accessibility Guidelines)
 UAG (User Agent Accessibility Guidelines (UAAG)
 ATAG (Authoring tools accessibility guidelines)
 WAI-ARIA (Accessible Rich Internet Applications)
 Other specifications via PF

4. WCAG
 Principles – the idea
 Checkpoints – what
 Success criteria – more detailed what
 Techniques – how
 See WCAG techniques for CSS

5. WCAG 2.0
WCAG 2.0 Guidelines – not for the “average user”, using a flat screen,
mouse …..
 1 Perceivable
 1.1 Provide text alternatives.
 1.2 Alternatives time-based media.
 1.3 Adaptable - without losing information or structure.
 1.4 Distinguishable (such as color contrast).
 2 Operable
 2.1 Keyboard accessible
 2.2 time to read and use content.
 2.3 seizures.
 2.4 navigatable,.
 3 Understandable
 3.1 readable.
 3.2 predictable.
 3.3 Help users
 4 Robust

6. Well formed CSS
A bit like separating form and content
 Text / function / structure in the mark up
 Presentation in CSS
Perceivable, adaptable, operable,
understandable, robust
CSS Techniques - how to do it in CSS
 The good
 The bad

7. CSS is beautiful
 Chapter 1 introduction to accessibility
 1.2 Accessibility and CSS
Key points Tools
• Clear structure in • :before for symbols
mark up via heading • Colors for heading
levels levels
• Easier to follow

8. Using CSS to control visual presentation
of text
Accessible relationships,
Resizable, accessible text
CSS can be used to control the visual presentation of text. This will
allow users to modify, via the user agent, the visual characteristics
of the text to meet their requirement. The text characteristics include
aspects such as size, color, font family and relative placement.
Text within images has several accessibility problems, including the
inability to:
 be scaled according to settings in the browser
 be displayed in colors specified by settings in the browser or rules in
user-defined style sheets
 honor operating system settings, such as high contrast

9. Control visual presentation of text
>h1 class="overlap"><span class="upper">News</span><br />
>span class="byline">today</span></h1>
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; letter-spacing:1em; text-
align:left;}
.byline { color:red; font-style:italic; font-weight:bold; padding-
left:3em; }
---------
>p class="startletter">Once upon a time...</p>
startletter:first-letter { font-size:2em; color:#990000; vertical-
align:middle; }

10. Resizable text
Specifying the size of text containers using em units
#nav_menu { width: 20em; height: 100em }
#nav_list { font-size: 100%; }
input.pick { font-size: 100%; width: 10em; }
Scaling form elements which contain text
p, label, input { font-size: 1em; }
input.geomsize {width: 1.2em;height: 1.2em;} (IE only)

11. Stay on the page
Allows users to view content in such a way that
line length can average 80 characters or less
#main_content {max-width: 70em}

12. Margin and padding
Using CSS margin and padding rules instead of
spacer images for layout design (Non-text
Content)
table {margin: .5em; border-collapse: collapse; }
And better knowledge processing

13. User interface
Using CSS to change the presentation of a user
interface
Component when it receives focus -focus visible,
not reliant on color
#mainnav a:hover, #mainnav a:active, #mainnav
a:focus {
background-color: #DCFFFF;
color:#000066;}

14. Hide and show
 Accessible scripts
 Class = visible / invisible..
 Hide a portion of the link text span
Eg jump to main
}height: 1px; width: 1px; position: absolute; overflow:
hidden; top:10px; }

15. ARIA Accessible Rich Internet
Applications
ARIA exposes what is going on in Applications to Assistive
technology (adds semantics)
 With ARIA States and author-Settable Properties become explicit
in internet applications
 State … Checked, pressed, value, selected
 ARIA states are used to track the state of each control or widget
and expose it to the user device
 In scripts event toggles state and often class for the visual effect
<span class="checkbox" id="chbox1" role="checkbox" aria-checked="true"
onkeydown="return checkBoxEvent(event);" onclick="return
checkBoxEvent(event);" > Include decorative fruit basket </span>
</div>

16. Bad: Inserting non-decorative content
Inserting non-decorative content
By using :before and :after pseudo-elements and the 'content' property in CSS
p.jim:before {content: "Jim: " } p.mary:before { content: "Mary: " }
q:before { content: open-quote } q:after { content: close-quote }
<p class="jim"> <q>Do you think he's going to make it?</q></p>
<p class="mary"> <q>It's not looking good.</q></p>
p.fact:before { content: "Fact: "; font-weight: bold; }
p.opinion:before { content: "Opinion: "; font-weight: bold; }
<p class="fact"> The defendant was at the scene of the crime when it occurred. </p>
<p class="opinion"> The defendant committed the crime. </p>
Inserting non-decorative content
Check pictures are decorative only - with no message or redundant message
NOT CSS as intended

17. Bad: Losing the mark up structure
 >p class=“heading1”>
 >img class=“button”>
CSS is presentation
Accessibility is interoperability

18. Bad: Changing the meaning of content by
positioning information out of the DOM
menu1 { .item1 {
position: absolute; position: absolute;
top: 3em; top: 7em;
left: 0em; left: 0em;
margin: 0px; margin: 0px }
color: red;
background-color: white } .item2 {
position: absolute;
.menu2 { top: 8em;
position: absolute; left: 0em;
top: 3em; margin: 0px }
left: 10em;
margin: 0px;
color: red;
background-color: white }

19. Make sure the DOM makes sense
When style sheets are applied, the data are displayed in two columns of "Products" and
"Locations." When the style sheets are not applied, the text appears in a definition list
which maintains the structure and reading order.
<div class="box">
<dl>
<dt class="menu1">Products</dt>
<dd class="item1">Telephones</dd>
<dd class="item2">Computers</dd>
<dd class="item3">Portable MP3 Players</dd>
<dt class="menu2">Locations</dt>
<dd class="item4">Idaho</dd>
<dd class="item5">Wisconsin</dd>
</dt>
</dl>
</div>
Mark up is content, CSS is the presentation

20. CSS is beautiful – When used for form,
not content
 Chapter 1 introduction to accessibility
 1.2 Accessibility and CSS
Key points Tools
• Clear structure in • :before for symbols
mark up via heading • Colors for heading
levels levels
• Easier to follow