Hidden CSS
What is hidden CSS?
Tags and attributes that are used by disabled viewers, but may be invisible to regular users
- Images: alt attributes
- Tables:table header tags and table summary tags that tell about the table content
- Forms: labels that are attached to input boxes
Why use hidden text?
text that helps disabled users but that may impair web usability for normal users can be included as hidden text
- This text can be placed off the page above the top of the page
- The text can be placed inside an element that is 1 pixel high and 1 pixel wide.
WebAIM Example
- The style would look like this (borrowed from the WebAIM.org website)::
.hiddentext
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
- Text that explained something important about the page could then utilize this style. It would be read by the screen reader but not visible on the page for non-screen reader-browsing,
<div class="hiddentext">This text is hidden from sight.</div>
- Putting the text above the page gives more reliable results than placing it to the left or rig
- The size could be set to 0, but some browsers would not read an object with no size.
- overflow set to hidden means that any content that extends outside the size of the 1 pixel element will not expand the size of the element.
top
Use hidden text at beginning of new page section
- Create short, descriptive hidden messages at the beginning of major sections of longer pages
- Use the hiddentext class to hide the text, except from disabled users who are using a reading machine or user stylesheets
‹div class="hiddentext"›Begin product menu.‹/div›
...
‹div class="hiddentext"›End product menu.‹/div›
|
top
hidden text for graphic titles
- Graphic titles make more interesting web pages but their use means that the screen reader will skip the page titles
- If you put a span tag inside the image tag that inserts the title graphic, then the screen reader will read it, and the text can tell the user what the header graphic says
- The header tags inserting the title graphic (
- would read:
<h1><img src="cis421.jpg" alt="Logo for CIS 421 class website " height="40" width="300">
<span class="hiddentext">This heading text identifies the web pages for the CIS 421 website.</span>
</h1>
Skip the Navigation hidden link
Disabled viewers may use the tab key to move through a website if they cannot manage a mouse.
A hidden link that lets the user skip navigation areas can be a great convenience to a disabled person. The link is invisible unless someone tabs to it. Then it becomes visible. The only disadvantage is that if a person who is not disabled utilizes the tab key to move around a page, a link may suddenly pop up in an unexpected place.
top
Code for the skip class in CSS stylesheet
#skip a, #skip a:hover, #skip a:visited
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
#skip a:active
{
position:static;
width:auto;
height:auto;
}
|
Insert a div tag before the navigation starts with a link to the main content of the page, identified by an anchor called "content". The person using a screen reader or user style sheet could then read the message and skip reading the navigation links and jump to the named anchor.
‹div id="skip"›‹a href="#content"›
Skip to Main Content‹/a›‹/div› |
Resources
top
