Learn

Accessibility isn’t only about being able to read text or see elements on a web page. Another facet of accessibility is providing context clues to users to show them additional information about the elements they are viewing. For instance, information or concepts comprised of multiple words is often abbreviated (e.g., CSS stands for Cascading Style Sheets). As a provider of the information, a web page should make the full definition available to users. This can be done using the <abbr> element. Hovering over the text contained in this element will display an alternative name for it to the user.

<abbr title='Cascading Style Sheets'>CSS</abbr>

Another simple way to convey interactivity is with links. Styling links in a unique way allows users to discern them from other text that may surround them. One way to do this is by underlining links. It is generally advisable to leave underline styling on links to provide clarity.

a { text-decoration: underline; }

Plain text isn’t the only source of information on pages, however. Interactive elements such as buttons can also exist. To indicate that something is interactive on a page, users should be given contextual clues in addition to design-based clues. The most common way to denote interactivity is with the cursor. Using the cursor property, the mouse cursor can be changed to show a visual representation of potential interactivity.

.button { cursor: pointer; }

Instructions

1.

In the instruction paragraph at the top of the survey, find the mention of the abbreviation ‘CSS’. Replace the abbreviation with an <abbr> element, setting the title text to ‘Cascading Style Sheets’.

2.

Add an underline to all <a> elements.

3.

Add a new pseudo-class selector for the .btn class. Once added, set the displayed cursor of the .btn‘s :hover pseudo-class to pointer.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?