Topic 4 : Hyperlinks

Er. Pradip Kharbuja

▪ The beginning of this slide is incomplete. Please follow the NCC slide for missing section.

‘In-Page’ Hyperlinks

▪ Demo First

• It is also possible to link to a different point in the same document so that user does not have to scroll to view content.

‘In-Page’ Hyperlinks

▪ We can link to a specific point in a separate page by adding a hash mark at the end of the URL.

The Title Attribute

▪ The title attribute can be used to describe the content that will be linked.

▪ Browsers often display the title as a ‘tooltip’.

▪ The title attribute is not visible by default.

Hyperlinks and Valid Documents

▪ The XHTML 1.0 Strict specification defines the <a> element as being an inline element must be nested inside a block level element.

▪ Demo

Invalid

Valid

Hyperlinks and List Elements

Hyperlinks

Active Visited

CSS for Hyperlinks

▪ CSS psuedo-classes allow us to select elements using factors not present in the HTML of a document.

▪ The :visited, :hover and :active psuedo-classes allow us to style hyperlinks based on the state of the hyperlink.

1. :visited – the user has followed this link

2. :hover – the cursor is over the link

3. :active – when the link is being activated (clicked)

CSS for Hyperlinks

▪ Psuedo-classes are commonly used to create rollover effects for links.

▪ The psuedo-classes must appear in the order specified below in order to work correctly.

Accessibility and Hyperlinks

▪ Many disabled people surf the web using their keyboard rather than the mouse.

Using the Tab and Enter keys

▪ Link text should be understandable out of context

Bad example: ‘click here for more information’

Good example: ‘product information’

Skip Links

▪ http://www.un.org/en/

▪ Many websites have large navigation bars.

– Tabbing through these links for keyboard users can be tedious.

▪ A skip link allows the user to jump directly to the content of the page.

– Give a heading element for the content an id attribute

– A hyperlink at the very top of the page links directly to this heading element

Skip Links

– The user does not have to tab through all the navigation options.

▪ Many sites use CSS to visually hide the skip links.

– Screen readers will still read these links out as the first elements on the page.

Access Keys

▪ The access key attribute allows us to associate a specific key with a hyperlink.

▪ Pressing a modifier key and the specified access key will make the browser follow the hyperlink.

– In Firefox, the modifier keys are Alt + Shift.

– In IE and Chrome, the modifier key is Alt.

Access Keys

▪ Access keys suffer from a number of problems– Different browsers use different modifier keys.– Conflict with browser shortcuts▪ Access keys often use numbers to avoid this.

▪ How does the user know what the access keys are?– Provide a list of hyperlinks and their access keys.– Use CSS to underline a specific letter in the link text.

– Indicate the access key after the hyperlinks.

Tab Order

▪ The tabindex attribute can be used to override the default tabbing order in a browser.

▪ The tabindex attribute also has problems.– Can be confusing for user if their tabbing jumps them in an

unexpected order.

Mobile Devices and Hyperlinks

▪ Users with mobile devices often experience similar problems as disabled users.

– E.g. navigating through the keypad

– Skip links can be useful

▪ Use of access keys is often recommended for sites designed for mobile users.

Practical Approaches

▪ Good link names, bad link names

▪ Link together all the examples so far

▪ In page links in the CV

▪ Link to favorite websites in CV example

▪ Skip links – find sites that use them; government sites

End of Topic 4

Any Questions ???