HTML and CSS Reference
In-Depth Information
the contents of the
alt
attribute to the user. However, if you leave this attribute blank or don't include it, the screen
reader skips the image. If the image is an important part of your content, this can be confusing to the user.
The following code is one of the
<img>
elements you used on your Menu page. Notice that the value of the
alt
at-
tribute provides a detailed description of the image.
<img src="
img/pepperoni-pizza.jpeg
"
alt="A pepperoni pizza presented on a wooden chopping board."
width="240" height="180">
Load up your
menus.html
file in your web browser and let your screen reader read through the page content.
Notice how the screen reader speaks the text contained within the
alt
attribute when it encounters the image.
Making Links Accessible
You can make your hyperlinks accessible in two ways for users who rely on assistive technologies. You should aim
to use both methods whenever possible.
The first method for making your links accessible is to simply use some good anchor text; this is the text contained
between the
<a>
element tags. The anchor text should make sense if it was taken out of the context of the page. This
means that “Click here” and “Read more” are off limits, I'm afraid. When a screen reader encounters a link, it reads
out the anchor text.
The second method is to use the
title
attribute on an
<a>
element to provide a description of the page that you
are linking to. Screen readers do not necessarily use this text, but it displays in a tooltip if the user hovers the mouse
cursor over the link. That can be useful for giving your users more information about the page at the other end of the
link.
Here is an example of how you can make your hyperlinks more accessible using these two methods:
<a href="about.html"
title="Discover more information about Joe's Pizza Co.">
Find out more about Joe's Pizza Co.
</a>
This example uses descriptive text in both the anchor text and the
title
attribute. Notice that even though we don't
have any of the page content, this link still makes sense. A simple “More info” link would not have been very useful.
Try navigating the Joe's Pizza Co. home page with your screen reader. Notice that every time a link is encountered,
the screen reader says Link or Visited link to let you know that the text about to be read belongs to a link. This beha-
vior may vary slightly depending on which screen reader you are using.
Testing Accessibility
It's great to know these design principles for building an accessible website, but how do you actually test your code?
This section shows you a few different ways that you can test your web pages for accessibility.
Testing with Screen Readers
The best way to test your web pages is by using the actual assistive technologies that your users will use. If you
haven't already installed at least one screen reader on your computer, now's the time. Make sure you've read the
