topic 04 : hyperlinks
DESCRIPTION
TRANSCRIPT
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 ???