▪ The beginning of this slide is incomplete. Please follow the
NCC slide for missing section.
▪ 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
▪ 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
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 theTab and Enter keys
▪ Link text should be understandable out of context
Bad example: ‘click here for more information’
Good example: ‘product information’
▪ Many websites have large navigation bars.
– Tabbing through these links for keyboard users can be
▪ A skip link allows the user to jump directly to the content of the
– Give a heading element for the content an id attribute
– A hyperlink at the very top of the page links directly to this
– The user does not have to tab through all the navigation
▪ 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.
▪ 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 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.
▪ 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
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.
▪ 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