HTML and CSS Reference
Given these constraints, you need to do the following to make a CSS drop-down menu accessible:
Link to real pages in the top-level menu. Although using dummy links as the trigger
for submenus works better on Android, it makes the menu inaccessible to keyboard
In the landing page from each top-level link, create a secondary navigation menu—such
as the vertical navigation bar in Chapter 10—that replicates the links in the submenu.
It seems we'll have to wait a little longer before CSS drop-down menus become truly accessible.
Masking an Absolutely Positioned Element
The clip property creates a mask through which part of an element is displayed. It works only with absolutely
positioned elements, and the only shape you can use is a rectangle.
You define the area you want to display by supplying four offsets in clockwise order from the top. All the
offsets are calculated from the top left of the element you want to mask, and each must be defined as a length.
You can't use percentages. Figure 11-21 shows how the offsets were measured for the masked image in clip.html.
Figure 11-21. The offsets are calculated from the top left of the element you want to mask
The image is masked using the following styles:
clip: rect(60px, 290px, 135px, 210px);
/* Other styles omitted */
As a result only the water tower is displayed, as shown in Figure 11-22 .