Web Accessibility Guidelines

Page Structure 

Source: Web Accessibility In Mind 

Headings create an outline for the page, similar to a term paper outline or table of contents. The H1 describes the page as a whole and is equal to the page title [in Drupal, the H1 tag is the page title]. A page will only have one H1 tag. Headings H2 through H6 represent increasing degrees of "indentation" in our conceptual "outline". As such, it does not make sense to skip heading levels, such as from H2 to H4, going down the page.  

Screen readers and assistive technologies rely on heading tags (H1 to H6) to identify headings. Text that is merely large, bold, or emphasized is not interpreted as a heading unless the H1 - H6 markup is used. 

Use headings only when they represent following content. To highlight or emphasize text that is not a heading, use styles—not heading tags—to achieve visual results.  

Here’s an example of how to structure content properly using headings: 

• H1 (page title): My Favorite Recipes 

  • H2: Quick and Easy 

    • H3: Spaghetti 

    • H3: Hamburgers 

    • H3: Tacos 

      • H4: Beef Tacos 

      • H4: Chicken Tacos 

      • H4: Fish Tacos 

  • H2: Some Assembly Required 

    • H3: Tuna Casserole 

    • H3: Lasagna 

      • H4: Vegetable Lasagna 

      • H4: Beef Lasagna 

Images 

Source: Web Accessibility In Mind 

Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Follow these best practices. 

• Be accurate and equivalent in presenting the same content and function of the image. Functional images, for example, might be part of the website navigation. 
• Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate. Aim for no more than 100-125 characters.
• NOT be redundant or provide the same information as text within the context of the image. 
• NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text. 

Learn more about alt text guidelines.

Hypertext Links 

Source: Web Accessibility In Mind 

Hypertext links are one of the most basic elements of HTML, as its name implies (HTML stands for HyperText Markup Language). As such, making hypertext links accessible is one of the most basic and most important aspects of web accessibility. Follow these best practices. 

• Avoid uninformative link phrases like click here, here, more, read more, link to, or info. These phrases are unnecessary, even if it precedes a more meaningful phrase. For example, a link that says "click here to access today's weather" can be shortened to "today's weather." In some cases it may make sense to precede a link phrase with "more" or "read more about," (e.g. "more about global warming"), but if these extra words can be avoided, it is probably best to avoid them (e.g. "global warming" may convey the same meaning as "more about global warming," depending on the context). 
• Web addresses, or URLs, present challenges around readability and length. URLs are not always human-readable or screen-reader friendly. Many URLs contain combinations of numbers, letters, ampersands, dashes, underscores, and other characters that make sense to scripts and databases but which make little or no sense to the average person. In most cases, it is better to use human-readable text instead of the URL. 

Learn more about hypertext link best practices.

Translations 

Many departments have content that has been manually translated by a vendor. We recommend creating separate child pages for each language, and then adding the new translation component to the top of the parent page to direct users to the translated child pages. In most cases, including the translated content on the English-only parent page will result in a long page and a degraded user experience. Please take care to update the translated pages to reflect that latest version of the English-language content.

For more information on best practices around translated content, visit Digital.gov.

PDFs 

Source: Nielsen Norman Group 

Summary: Forcing users to browse PDF files causes frustration and slow task completion, compared to standard webpages. Use PDF only for documents that users will print. In those cases, following these basic guidelines will minimize usability problems. If you must include a PDF in your experience, follow these guidelines to make it as usable as possible and to lend a smooth transition from a digital to a paper-based experience. Again, a PDF should never be used to display digital content that users will read online. It’s only suitable for print.  

1. Gather evidence to understand whether users need and expect to print out a PDF. It could be appropriate to provide a PDF version of a large document such as a report or manual, or something as simple as a single-page cafeteria menu or sprint calendar for your scrum team. 
2. Make the PDF accessible when you’re creating it. PDFs are not inherently accessible. The text must be searchable, fonts must allow characters to be extracted to text, and form fields must be labeled as interactive and include error messages with proper timing. Users should be able to access bookmarks using the keyboard, and security settings on the PDF must not interfere with screen-reader capabilities. Structural tags on headlines, paragraphs, tables, and other elements need to be set to define reading order, and ALT text must be included on all images. Color should not be used to convey meaning and there must also be proper contrast between foreground and background. For more information, visit Adobe’s help article on PDF accessibility. 
3. Create a gateway page on the website that gives users the information they need, without forcing them to read a PDF in a browser. Gateway pages are HTML web pages that summarize the core messages that are otherwise found in a PDF. They provide sufficient detail right on the landing page so that users don’t have to read the PDF in a browser window to get the information they need. They can still get the key takeaways in a familiar digital format, with the option to download the full PDF. 
4. Consider whether the PDF should open in a new window or tab, the same window or tab, or should directly download. Directly downloading a PDF may be the best option to protect users from the negative experience of reading a PDF in a browser window. 
5. Don’t be too quick to convert your documents to the latest PDF version. As with any software, many users are slow to upgrade when updates become available. There are still many people and organizations that use older PDF readers, so save your documents in an earlier PDF version to help users avoid issues when opening the document. 
6. Strive for the smallest PDF file size without sacrificing quality. Make sure the file size of your PDF isn’t so large that it will take forever to download. Or, even worse, crash the users’ browsers or cause them to use an excessive amount of cellular data. 
7. Remove or archive previous versions of the PDF and update links from the old version to the new. PDFs have a way of perpetuating stale content, and HTML pages always seem more recent and fresher to users. If for some reason an old PDF still needs to live on your site, clearly and legibly state what the most recent version is and where users can find it. Do this on the very first page and throughout the PDF. In addition to the date of the last update, include contact information where users can get help. 
8. Offer multiple formats, not just a PDF. Give users a choice in how they consume your content; don’t just limit them to a PDF. Consider if users will appreciate also having an audio version to listen to, a version that’s specifically formatted for an ereader, or another format altogether that communicates the message while supporting the user’s task and context. 

Find more PDF best practices from the Nielsen Norman Group.