HTML.co.uk

Just like that of search engines, the frames play mayhem with the audible browsers and screen readers. This thing means that if the frames are used, your page might not be readable at all by your customers.

As the popularity of HTML frames grows, they make the web very difficult to view or read by some people and in this; the sad thing is that it is not too difficult to solve the problem. Nowadays, most of the governments are steeping into the arena of web in order to specify the accessibility guidelines for WebPages and often this includes the usage of HTML frames.

Here are a few suggestions on how to make your framed WebPages more accessible to the people.

1.Do not make use frames in your WebPages
Most of the people are not fond of frames. Whatever problems arise from the frames can often be solved using better layout or CSS. Therefore, you have to consider the implications before deciding a frame to your website.
2.make use of noframes tag
This is one of the simplest solutions available and yet most of the WebPages do not use the option of noframes or else their noframes page will say something very much useless like “this page uses the frames and nor please upgrade your browser.
3.Use minimal frames
As the technology is getting developed in a better manner and the screen readers that were used to not being able to read the frames can now be able to read some of the websites with frames but it is readable if there are a few frames. The option two is always recommended but this option can be used if you absolutely have to use it.
4.in every frame, keep the navigation
make sure that in each frame, the navigation is around your website and in this way even if the customers is not making use of the frames, the customers will be able to get around the site easily.

If you want to use the frames design, make sure that you make use of noframes tag. The best and easiest ways to create the noframes page is by just putting up a link to actual content of the page and usually the main frame. This means that, the customers with some disabilities will be able to read the content. Of course, this optimal solution is used to reproduce the content in noframes page and therefore they have it right in the page.

Do not wait until you are forced to
As it is mentioned above, most of the governments are taking a role in the field of internet and thus the making the requirements for more accessibility on the WebPages that is very much similar to brick and mortar stores. If at all, your website sells something. It may become very much liable for more accessibility standards that are set by your respective governments. However, if you are already accessible, then you will be ahead of the game.

Frame naming and targeting is used when the developer wants to associate the link of one frame with the output of another frame. For example, suppose there are two vertical frames. The left one consists of all the links and whenever the user clicks any one of them then the HTML document associated with that link is displayed on the right hand side frame without opening up a new window or affecting the contents of the left side frame. That means the left side contents remain static and the content of the right side frame changes.

These types of frames are very useful and are used to make web site navigation user friendly and interactive. One thing to be noted is that frame targeting cannot be done without naming the frame. The name is necessary because it becomes the identity of the frame and is used by the other frames.

How to do naming and targeting?

The naming of the frame is done using the NAME attribute and the targeting is done with the help of TARGET attribute. The frames can be targeted in different styles. It can be done on an A (Anchor) element, on a BASE element, on an AREA element and on a FORM element.

Targeting for Anchor (A) element:

The Anchor tag (A) which is used at the time of defining hyperlinks in the HTML document is also used while targeting the frames. It specifies the linked document which is to be displayed after the user clicks on a particular link in the frame. For example:

<HTML>
<frameset rows=45%,10%,45%>
<frame name=”upper”>
<frame name=”middle” source=”doc1.html”>
<frame name=”bottom”>
</frameset>
</HTML>

Now the following HTML code has to be written for the doc1.html document

<HTML>
<UL>
<LI><A target=”upper” HREF=”http;//www.italics.in”> Italics Home Page </A></LI>
<LI><A target=”lower” HREF=”http://www.contentmantra.com”> Content Mantra Home Page </A></LI>
</UL>
</HTML>

Whenever the user will click on the Italics Home Page then the web page will get displayed in the upper frame and if he clicks on the Content Mantra Home Page then the relevant web site will be displayed in the lower frame.

Targeting for a BASE element

In this the TARGET attribute uses a default window_name and target all the links towards the same window.

<BASE target=”window_name”>

Targeting for the AREA element

The AREA element type is defines by the Internet-Draft of Client-Side image maps. It is used with the image maps and defines a particular area on the client side image map. It associates a link with that area containing all the details and when the TARGET element is used then the output of the link can be directed towards a separate window.

<AREA shape=”shape” COORDS=”x,y,z…..” HREF=”URL” target=”window_name”>

Targeting for the FORM element

Without any defined target window the FORM element displays the output of the form submission in the same window used to submit the form. The TARGET attribute can be used to direct this output to another window.

<FORM Action=”URL” target=”window_name”>

Frames are used to divide a window into two or more scrollable sections. In each section different documents can be displayed or various parts of the same document can be linked together. Like any other HTML element each frame can be given a name, its dimensions can be set, its alignment can be defined, the borders and shades can be applied and finally a particular HTML file can be linked with it which is to be displayed. Apart from this some advanced operations such as defining the loading/unloading behavior, scroll behavior, style sheets etc. can be also performed on the frames.

HTML frames use the following attributes to behave in a particular manner and display the desired document:

• Name: It is used to link the frame to any addressable object. When a name is assigned to a frame then it can be targeted by the links in other documents. However it is not mandatory to use this attribute. By default all the windows are unnamed, but if you want to target the contents of the frame then the name attribute are necessary.

• Source: This attribute is used to display the desired HTML page in the frame.

• frameborder: This is used to set or unset the border between the frames. If the value of this attribute is 1 then a border will appear and if the value is 0 then there will be no border.

• marginwidth and marginheight: These two attributes are used to specify the frame margins both sideways and vertically respectively.

• noresize: It is used to restrict the end user from resizing the frame.

• scrolling: This one is used to define the scrolling mode of the frame. If its value is yes, then the frame will have a scroll bar. If the value is no, then the frame will have no scroll bar, and if its value is auto, then the frame will have the scroll bar only if the document size is larger than the frame.

Because of these attributes different types of frames can be created. For example:

• Static Frames: These types of frames are fixed and display only static documents. They are used to display that information which the user can see all the time, such as logos, copyrights, buttons, graphics etc. The user cannot affect the behavior of such frames by doing any activity.

• Live Frames: These frames responds according to the user’s input. They are very interactive in nature and generally contain interactive forms, videos, audio and multimedia content.

• Functional Table of Contents: These types of frames are used to display interactive table of contents on one side and when the user clicks on any topic the document linked to that link is displayed in the adjacent frame.

• Single Page Query and Answer Displays: These types of documents have two sections, one containing the query from which has to filled by the user and the other section displays the answers to the query interactively.

Apart from these, several other types of frames can be designed and customized using different attributes according to the requirements.

As discussed earlier, whenever the TARGET attribute is used to direct the output to a new window then the Window_name has to be specified. Whether the developer is targeting for the AREA element, BASE element or the FORM element, the window_name has to be used. A general rule with respect to the window_name says that it must begin with an alphabet. However there are some predefined special window_names which begins with an underscore sign ‘_’. Below is a list of such special window_names and their associated functions:

• _blank: When used, it directs the output to a new window. This name forces the target attribute to load the HTML document associated with the link in a separate unnamed window.

• _self: Whenever this is used the output is displayed in the same frame the user clicks in. In other words the linked document gets loaded in the same frame as the anchor. One crucial point to be noted is when the _self name is used it overrides the BASE target assigned globally.

• _parent: It can be used whenever the linked document has to be loaded into the immediate FRAMESET parent of the document. If there is no parent, then it works like the _self.

• _top: This will make the linked document to get loaded in a full browser window.

Preparing alternate document for the non-frame web browsers

In order to make the frames work properly it is essential that the web browser supports the frames. Sometimes it happens that the web client is incompatible with the frames or it has been configured not to load them. In that case an alternate document has to be prepared so that if the web browser cannot handle the frames then instead of showing an error it loads the alternate documents containing the information.

The alternate document can be prepared very easily with the help of the BODY element and the NOFRAMES tag which follows the outermost FRAMESET element. The content of the BODY element is ignored by those browsers which can read frames. Apart from this all the attributes of the NOFRAMES tag is also ignored.

Below is the HTML code which shows the usage of the NOFRAMES tag.

<HTML>

<frameset cols=”50%,50%”>
<frameset rows=”50%,50%”>
<frame src=”doc.html” >
<frame src=”doc1.html”>
</frameset>
<frameset>
<frame src=”doc2.html”>
<frame src=”doc3.html”>
<frame src=”doc4.html”>
</frameset>
</frameset>
<body>
<noframes>
This section is for those whose web browser is not compatible with frames. It will be ignored automatically if the web browser is set to read the frames. This is an excellent option to avoid any kind of errors.
</noframes>
</body>
</HTML>

As shown in the above code the NOFRAMES tag can be used at the end of the code with all the description and text which has to be displayed without the frames. Above the NOFRAMES tag, there is the normal HTML coding representing the use of nested frames and will be automatically considered when the web browser can support the frames.