Technical Support - Detail
Q. Does JAWS support cascading style sheets (CSS)?
A. Yes, JAWS does support cascading style sheets (CSS). CSS is a way of marking up text using styles that are inherited by applying a set of style rules to a page without having to change the actual page content. For example, you can link an HTML document to a style sheet that displays all level one headings in red. There are some issues that authors of Web pages should be aware of when using CSS to ensure the page is accessible.
When a page loads and JAWS processes the HTML code, it also processes linked and inline style information to determine which elements should be rendered. Any elements that use a style with the attributes "visibility:hidden" or "display:none" are not included in the JAWS rendering of the page.
Exceptions are span tags within anchors, which are sometimes hidden but contain screen reader specific text. This is true for the JAWS 8.0 update, expected out early 2007. JAWS 8.0 doesn't care about when you hide or make visible, it will correctly determine what is and what is not visible. This can be changed without user interaction in 8.0 as well and JAWS will still detect the changes. Changes which are detected by JAWS 8 include property changes, class name changes, innertext/innerHTML changes.
With JAWS 7.10, however, if the page has elements shown when it first loads, but then dynamically hides these elements without user intervention after the page loads, JAWS does not detect that this has occurred and may still show the hidden content. Conversely, if a page hides content when it first loads but then dynamically shows this content after the page loads, JAWS does not announce the new content.
The safest course of action when developing Web pages is to hide anything in the HTML when the page first loads that should not be shown. Then, only hide or display content when the user interacts with the page (such as by clicking a link or item with the onClick attribute). When the user clicks text, links, images, and so on, JAWS asks Internet Explorer for the HTML again, and updates the page.
A JAWS user can press INSERT+ESC to refresh the page content in the virtual document. However, the source that is passed to JAWS by Internet Explorer should represent the current visible state of the page. This does not occur if the HTML source code does not reflect the true visibility status because of scripting. If that is the case, JAWS still does not have an accurate view of the document.
JAWS uses style information to try to determine the font name, font size, font attributes, colors, and text alignment. This information is provided to the user when he or she presses INSERT+F.
Other than visibility and text attributes, style information is not interpreted any further. JAWS does not indicate Index levels.
Q: Does JAWS support the "media" attribute, within the link tag, for cascading style sheets (CSS)?
A: Partially. JAWS supports "@media" for display. All other media types are currently ignored. Thus, it should be possible to create style sheets specifically for Braille output devices by indicating the media type through the "media" attribute. Since media types other than display are ignored, you can't create a Braille output only page since it won't be rendered. Also, with JAWS 7.10 and higher, JAWS does not look at the media attribute but instead follows Internet Explorer's rendering of the page directly.
Q: Are there any tools I can use to help me troubleshoot CSS pages?
A: Yes. With the release of JAWS 6.10 in April 2005, a new feature related to CSS has been added. JAWS 6.10 through 7.1 allows you to control how style sheets are processed. This can be a useful tool to use to debug Web pages which may not be rendered correctly by JAWS. JAWS 8.0 and higher does not have any style sheet options since it gets its rendering from Internet Explorer directly.
Do the following if you experience problems with a particular Web site:
- In Internet Explorer, press INSERT+V.
- Use the arrow keys to select "Style Sheet Processing."
- Press the SPACEBAR to choose "Top Level Style Sheets."
- Go to the Web page where you were experiencing problems. If the page is
working correctly with JAWS, you can press INSERT+SHIFT+V and change the Style
Sheet Processing option to "Top Level Style Sheets" as well. This
applies the new setting to all pages in the Web site domain. The setting is
saved so you do not have to change it each time you visit the Web site.
- If the page still does not read correctly, press INSERT+V, select "Style Sheet Processing," and press the SPACEBAR until you choose "Ignore All." Return to the Web site again and attempt to read the content. The "Ignore All" setting suppresses all style sheet information, so certain text attributes, layout information, and other details may be unavailable. If this setting allows you to read the page correctly, you can press INSERT+SHIFT+V to save it as described in step 4.
NOTE: With JAWS version 6.10, the "Imported Style Sheets" option has the best results with Web pages that use cascading style sheets. When you use this option, JAWS reads top level style sheets as well as style sheets imported using the "@import" directive.
JAWS has three levels of processing in order to resolve Internet Explorer crashing on some pages when you ask for the imported style sheets. You can disable this, making the style sheet processing approximately equivalent to JAWS 5.10 behavior. Refer to Knowledge Base Article: When reading Web pages, Internet Explorer unloads the page or stops responding (crashes).
Q. What are the types of CSS page styles and how does JAWS handle them?
A. The types of styles are as follows:
- Inline (element level styles) - JAWS has always processed these (at least
to deduce visibility).
- Top level style sheet - The <STYLE> tag is placed in the page header.
Style sheets linked using the link directive are also top level style sheets
with JAWS 5.0 through 7.0.
- Imported style sheets - A linked style sheet may use the "@import"
directive to import another style sheet. This is true with JAWS 5.0 through
Note: JAWS 7.10 and higher supports the final rendering of the page rather than looking at individual style. That is, JAWS asks Internet Explorer for the final computed style rather than parsing the inline, top level or imported styles directly and then trying to interpret them.
For more information about JAWS and HTML, check out the topic "Tips on HTML code and expected behavior from JAWS."
Version: 5.0 plus