Create Accessible Web Pages 

Cascading Style Sheets, or CSS, do the heavy lifting when it comes to website accessibility. CSS style elements are designed to be accessible. That’s why you must use them.  In addition to using styles, you’ll need to pay special attention to these areas, so every page you edit stays accessible.   

Put Headings in Order

Visitors use headings to skim pages for useful information. Heading styles, from H1 on down, organize content in an outline hierarchy. Sighted visitors recognize differences between heading styles and visitors using screen readers should have the same advantage.

That’s why you must use heading styles properly. Assign headings in outline order. Otherwise, a screen reader will not decipher the heading structure correctly. In your high school term paper outline you wouldn’t skip from a Heading 1 to a Heading 3, would you? 

The basics:

  • The only H1 on a web page is the page title.
  • Headings below the title start with H2 and cascade from there according to the relationship of one to the next.
  • Never skip a heading. For example, you must use an H3 under an H2, even if the H4 formatting looks nicer.
  • Most pages don’t need a heading structure that goes beyond H3. You’ll notice that this page has one H1, followed by six H2’s. The H2 “Create Descriptive Hyperlink Text ” has one H3 under it.
  • Do not apply a heading tag just to draw emphasis to text. Only use it to identify the content that follows.

Describe Images with Alt Text

Images need meaningful alternative text so that assistive technology can describe the image and/or function of the image. See WebAIM’s alt text page for guidelines on writing alt text.

Remember, writing good alt text is as much an art as a science. For starters, keep these points in mind:

  • It’s all about context: a picture’s alt text depends upon the text that is around it
  • Think of a person who can’t see the picture: What should they read, in addition to what’s already in the text, to get the same meaning?
    • EX: Using the file name or location, such as “HD:Users:aperson:Desktop:Clients:SomeFolder:random file name ver3.jpg”, does not help someone understand what the picture is about, or how it relates to or enhances the text.
  • Don’t write “image of….” The screen reader announces this.
  • If the image contains text, that text should also be in the alt text. For example, the following MCC logo image has the alt text, “MCC shield logo with text: Monroe Community College, State University of New York”.
    MCC shield logo with text: Monroe Community College, State University of New York
  • Decorative pictures that don’t present important content are just eye candy. They should have an empty alt tag: alt= ” “.

For additional information, consider these alt-text guidelines by CommonLook to craft a helpful and relevant description.

Insight Into Images

I know many people love to jazz up content with cool graphics and photos, but are we really helping the reader understand the information we’re trying to convey? Some images can actually confuse or even frustrate the reader, especially if the images are not directly related to the subject. This article, “Research insight: accessibility of images,” discusses reactions by a group of disabled users that might change what images you add to a webpage or how many.

Foreground/Background Contrast

While we spend a great deal of time ensuring an equal experience for disabled visitors, we can’t neglect our sighted visitors. When adding images that contain text, we need to be mindful of the contrast between the foreground (the text) and the background (the image behind the text). If the foreground is too light or too similar to the background, it makes the text difficult to read. Tools, such as WebAIM’s Color Contrast Checker and Who Can Use, let you test the contrast levels. This article about ensuring high contrast for text over images offers tips on how to improve your image.

Create Descriptive Hyperlink Text

A screen reader enables visitors to scan only the links on a page to decide where they want to go next. That’s why links with descriptive text are important. “Click here” says nothing about the destination. Neither does “Learn More” or “article“. On the other hand, “You can complete our criminal justice program in 18 months,” is descriptive.

Try This: If someone were to list all of the link text on your page, would they know what those links were for?

Hyperlinked text should indicate the content of the page to which it is linked. If the title on the hyperlink’s destination page gives an accurate summary of what is on the page, consider using it for the hyperlink text. For example, this hyperlink text matches the title on the destination page: Templates and Themes for Office Online.

Important: If there are multiple similar links on the same page that go to different locations, do not use the same link text. For example, if you have registration links to three different meetings, all of the links can’t read, “Register for Zoom Meeting” to “Register for Information Session.” Each needs unique link text such as illustrated below:

Link Titles

Link titles give important information to visitors who use assistive technology such as screen readers. When properly written, link titles tell users whether the link will open in the current or a new window, whether the destination is on our site or an external site, and what type of media will open.

Use one of these phrases:

  • Opens internal link in current window
  • Opens internal link in new window
  • Opens external link in new window
  • Opens PDF in new window
  • Opens window for sending email
  • Directs viewer to a section on this page
  • Opens video in new window
  • Opens audio player in new window

Applying hyperlinks correctly can be tricky. Refer to TYPO3 Links for instructions. 

Use Lists Instead of Tables

In many cases, lists work better than tables. They add important hierarchical structure to a page. Screen readers announce a list, so visitors know what’s coming. Plus, they’re easy to format. 

Use the Numbered List or Bullet List formatting options to provide the proper structure. Never use the tab key to make a list. Screen readers won’t recognize it.

Numbered lists present a group of items that follow a sequence:

Directions to theater

  1. Turn right on Main St.
  2. Travel for 3 blocks
  3. Turn left on North St.
  4. Travel for 5 blocks
  5. Turn right into parking lot

Bullet lists present a group of items without a sequence:

Shopping list

  • Sugar
  • Flour
  • Salt
  • Coffee

Keep Your Tables Simple

Editors get into trouble when using tables to lay out a page. What works in Microsoft Word doesn’t work on the web. Use tables for tabular data only. The simpler, the better.

  • Think of the table as a grid, with simple row and column headers
  • Avoid creating complex, multi-tiered row or column headers that span cells. Screen readers cannot decipher complex tables without special instructions.
  • Limit your tables to three or four columns. Mobile users won’t want to slide across long tables.
  • Add a brief descriptive caption before or after a table. Most screen readers announce the content of a caption. 

Would you like to become an accessible tables expert? Take this W3G Table Concepts tutorial.

Don’t Change Text Color

Visitors with low vision and anyone using their phone in bright sunlight have trouble reading text that doesn’t stand out from the background of the page. WCAG 2.0 Level AA requires a contrast ratio of at least 4.5:1 for normal text. Luckily, our CSS ensures that text color is compliant.

So, let the style sheets do the work:

  • Always use TYPO3 toolbar options to apply styles
  • Never edit the HTML to change the color, even if you think it will look nicer
  • For emphasis, use compliant formatting styles such as Blockquote and buttons