• Our customers
• Service Agreements
• DDA compliance checks
• See It Right: UseAbility logo
• Disabled user testing
• Accessibility audits
• Accessible documents
• Training and presentations
• Additional services
• Resources
  • Articles
  • Industry news
  • Our news
  • eNation reports
  • eNewsletter
  • FAQ
  • Accessibility A-Z
  • Business case
  • Useful links
  • Useful low cost programs
• Contact the web team

Home > Web Services > Resources > You are here Articles

Article: Hiding Content from View

Introduction

The vast majority of techniques adopted by web developers to make websites more accessible to screen reader users are hidden from view of the visual user. Examples include:

• semantic markup of headings
• alternative text for images
• table summaries
• form labels

These are just some of the techniques that make a website accessible to screen reader users but do not impact on the aesthetics of the website for visual users.

However, it is sometimes the case that accessible markup does have an impact on the aesthetics and usability of the website and as such some simple techniques can be incorporated to ensure that these are hidden from view or only visible in situations where required.

Techniques

One of the techniques to hide content from visual users whilst still providing the information for screen reader users is to hide the content above the viewable area and to shrink the content to a size of 1 pixel. The reason for hiding the content and shrinking it is due to the fact some browsers do not respond to the hiding of the content at the top of the browser window alone. Therefore, by incorporating the second technique in making the element too small to be seen ensures that the content is always hidden from view regardless of the user’s browser or platform.

Example Code 1:

HTML:

<div class=”hidden”>This text will not be seen.</div>

CSS:

.hidden {
position: absolute;
left: 0;
top: -1000px;
width: 1px;
height: 1px;
overflow: hidden;
}

Code Explanation:

The top value in example 1 above is set to -1000px but this can be any value as long as it is out with the viewing area. It is placed to the top rather than to the left or the right in order to eliminate the possibility of display irregularities in some browsers. The width and height are set to 1px instead of 0px due to the fact some screen readers will not read content that does not have a value assigned for width and height. The overflow: hidden ensures that all other browser bugs are eliminated. By utilising all methods enables the technique to work across a range of browsers, platforms and screen readers.

What benefits are there of hiding content?

Hiding content from view but enabling it to be read out by screen readers enables the web developer to provide additional information that is helpful for the screen reader user. This would enable the screen reader user to understand the content of the web page or the way the web page is constructed without compromising on design. This is particularly useful for elements and areas where there is not enough text describing the area or element. For instance hidden text could be utilised to describe a complex menu structure thus enabling the screen reader user to understand how it is set out. This is particularly important if the understanding relies on visual clues alone. Another instance where hidden text may be used is to explain further what a specific element on the page is (for example) an advertisement.

Example Code 2:

HTML:

>>>To be placed before the advertisement<<<
<div class=”hidden”>Advertisement 3 for 2 on all shampoos until September 15th 2007.</div>

CSS:

.hidden {
position: absolute;
left: 0px;
top: -1000px;
width: 1px;
height: 1px;
overflow: hidden;
}

It is important to ensure that the information being provided within the hidden content is as minimal and informative as possible. This will ensure that screen reader users do not have to listen to unnecessary information, ensuring that their browsing experience is not negatively affected by the very techniques that have been utilised to enhance it.

Hiding ‘skip navigation’ links

Whilst some content benefits from being hidden completely from sighted users, there are instances where this technique would significantly reduce the usability of the website. This is particularly relevant where the functionality being provided benefits both visual and non-visual users alike.

It is a common misconception by web developers that ‘skip navigation’ links are only used by non-visual web users accessing websites via screen readers and that they have no benefit to visual users.

Other users benefit from these links

However, it is important to understand that users such as those with mobility impairments who cannot use a mouse or those who are using a laptop or web enabled mobile phone and do not have the use of a mouse also benefit from the functionality to quickly access the main content of the page. If the ‘skip navigation’ link is hidden from view then they cannot utilise the functionality thus resulting in them having to laboriously tab through various menu items in order to reach the main content of the page.

Instead of hiding the ‘skip navigation’ link completely from view, the more optimal solution which benefits both visual and non-visual users alike is to temporarily hide the link until such times as the it receives focus with the tab key. The screen reader user will hear the link be spoken whilst the visual user will see the link when it is given focus. Additionally, from a web developer’s perspective this means that the functionality can be provided without compromising the aesthetics of the web page. To achieve this you would incorporate the following code in your HTML and CSS:

Example Code 3:

HTML:

<div id=”skip”><a href=”#main-content”>Skip to Main Content</a></div>

CSS:

#skip a, #skip a:hover, #skip a:visited{
position: absolute;
left:0px;
top:-1000px;
width: 1px;
height: 1px;
overflow: hidden;
}

#skip a:active, #skip a:focus {
position:static;
width:auto;
height: auto;
}

Code Explanation:

In the above example, two styles are created. The first style hides the skip navigation link from view whilst the second style moves the skip navigation link to the visible area when it receives focus from the tab key.

Conclusion

Hiding content from view can enhance the usability of the website for screen reader users without compromising on design. Visual users will have no indication that these design elements are present resulting in visual and non-visual users having the optimum browsing experience.

However, it is important to remember that not all content benefits from being permanently hidden from view such as ‘skip navigation’ links as these benefit both non-visual and visual users alike. Where content is hidden for the benefit of non-visual users, it is important to ensure that the information provided is succinct and useful to ensure that the usability is not reduced.

• del.icio.us
• Digg
• Reddit
• StumbleUpon

Back to the Articles home page.

For more information:

• Email accessibility@AbilityNet.org.uk
• Phone 0800 269545

Go to Top.