The Web Content Accessibility Guidelines (WCAG) 2.1 provide detailed information about standards for presenting accessible content.
As set forth by WCAG, web content should adhere to these principles:
- It must be perceivable, either alone or through assistive technology.
- It must be operable by all individuals, including those who use assistive technologies or have visual, hearing, motor or other impairments.
- It must be readable and understandable, and the website should operate in predictable ways.
- It must be robust, even when accessed through a variety of assistive technologies.
The World Wide Web Consortium (W3C) publishes detailed Web Content Accessibility Guidelines (WCAG) 2.1 that outline how websites can meet each of these principles.
Listed below are some common accessibility issues that are found with websites. We recommend you consult this list as you review websites for accessibility compliance.
Each webpage must have a default language attribute declared in the HTML, e.g., <html lang="en"> or more specifically <html lang="en-us">. This information helps search engines return language-specific results and it is also used by screen readers that switch language profiles to provide the correct accent and pronunciation. Learn more about the webpage language declaration.
All webpages must have unique page titles. The page title is shown in browser tabs or windows, shown in search engine results, used in page bookmarks/favorites and read aloud by screen readers.
The title tag is an HTML element that specifies the title of a webpage in the <head> section of HTML, e.g., <title>"About Us – Lenoir-Rhyne University"</title>. When a page title is blank, the URL is listed in the browser tab or window and read aloud by screen readers. Review all pages on a website to determine that a page title is present and unique in each instance. Learn more about the webpage title requirement.
Image Alternate Text
Alternate text (alt text) provides a description of what can be seen in a image. Alternate text should be meaningful and descriptive so it can be understood by the visually impaired using screen readers and other assistive technologies–people who do not see the image, but need to know its meaning or purpose. The alt text is read aloud by screen readers. Learn more about alternate text descriptions for images.
Automated accessibility scans using tools like WAVE can tell you if alt text is missing, but to determine if the alternate text is appropriate, you need to see the image and judge it in context. Simply using "pic," "myphoto," "img7865," etc. as alt text would pass an automated test, but fail a manual review.
Search engines like Google also index images based on what is found in the alternate text attribute.
Please note: Using alt text which duplicates link text in the same link or the following link results in screen readers stuttering as the same text is read out twice. Avoid this kind of duplication when writing alt text descriptions.
Heading 1 & Properly Structured Headings
All webpages should have a Heading 1 or <h1>. This also impacts SEO as search engines like Google use this information in search. There is only one <h1> per page. After an <h1> tag, pages should have a proper hierarchy of heading tags with <h2> tags appearing below a single <h1>, <h3> appearing below an <h2>, and an <h4> appearing below an <h3>. Headings that are out of order are flagged as an accessibility error. Accessibility tools like WAVE will identify all headings on a page. Learn more about structuring webpages with headings.
Skip Links "Skip to Main Content"
Skip Links like "Skip to Main Content" allow visitors using screen readers to skip over redundant content on a webpage, e.g., skip over the navigation to access the main content of a page. This feature should be present and working on all webpages. Learn more about bypass blocks and skip to links.
All webpages and their content must be fully navigable and operable using only keyboard controls and shortcuts. This includes accessing all navigational links and content on a page as well links in dropdown menus, form fields, etc. Learn more about navigating a website with keyboard controls.
Focus Indicators are clear on-screen highlights or outlines of interactive elements on a webpage, including links, buttons, form fields, tooltips, etc. For any element on a page that you can interact with using a mouse, you should also be able to use a keyboard to perform the same actions and this interaction should show visible focus.
All form fields must have corresponding labels and form submission errors must be clear and accessible. Form fields that do not have corresponding labels do not provide a description noting the purpose of the field. Learn more about providing proper form labels and instructions.
Avoid Displaying Text in Images
Use CSS to style text separate from an image. Including text as part of images presents issues not only for the visually impaired, but those using screen magnifiers to view webpages as well as those who are dyslexic or have other cognitive disabilities. Learn how to avoid displaying images as text.
Tables are used for the display of tabular data. Content in data cells is associated with headers and rows. Data table captions and summaries are used where appropriate. Learn how to create accessible tables.
All prerecorded videos must have captions before they appear on Lenoir-Rhyne websites or associated social media websites, e.g., Facebook, Twitter, Instagram, YouTube, Vimeo, etc.
All posted audio files must have a text transcript available for the hearing impaired. This includes transcripts for audio podcasts.
Avoid Using Nondescriptive Links
Link prompts like "click here," "here," "read more," "learn more" and other similar ones are not descriptive enough since all links are read aloud by screen readers without context. These kinds of links should be avoided as they are flagged as an accessibility error. For example, instead of saying, "to register for the event, click here," use more descriptive links like, "Visit our calendar to buy tickets for this performance. Learn more about the link purpose requirement.
Avoid Displaying URLs in Text
Avoid posting URLs as text in webpages since these URL links are read aloud by screen readers. For example, instead of saying, "Visit Admission and Financial Aid at https://www.lr.edu/admission to request more information," you should link the descriptive words or phrases, e.g., "Visit Admission and Financial Aid to request more information." Learn how to avoid posting URLs as links.
Contrast & Color
For both webpages and document attachments there must be sufficient contrast between the text and the background. Most text should have a contrast ratio no less than 4.5:1, and large text (larger than 18-point or 14-point bold) should have a contrast ratio no less than 3:1. Elements with background images must have a background color defined that provides adequate contrast when images are disabled or unavailable.
If a person without any visual disabilities finds a document hard to view because of poor contrast, in all likelihood the document will also be hard to view for those with some kind of visual impairment like low vision or color blindness.
File Attachments & Documents
All PDFs, Microsoft Office documents (Word, Excel, PowerPoint, etc.) also must comply with accessibility requirements. The newest versions of Microsoft Office for Windows and Mac have built-in accessibility checkers.
Adobe Acrobat DC has a built-in accessibility checker and accessibility reporting tool. Listed below are common checkpoints to look for when evaluating accessibility compliance in PDF files.
- All document properties are populated
- Document title is selected for display
- English is set as the language
- All images have alternate text descriptions, purely decorative elements are hidden
- Document is properly tagged throughout
- A logical reading order is specified
- Proper headings are applied throughout the document
- A manual check is done for possible contrast issues
No scanned documents should ever be posted to the website, i.e., documents scanned from a photocopier or output/printed as a PDF. Files should be saved as PDF files from the original source file. If you only have a scanned version of a document, such as an archival document, then optical character recognition or OCR must be used in Adobe Acrobat DC as well as the other accessibility requirements noted above. Learn about document accessibility.