BYU-Idaho Online Knowledgebase

Accessibility Guidelines for Web Content

Updated on

The World Wide Web Consortium (W3C) has provided the following guidelines for making all web (online) content accessible. W3C has outlined three levels of accessibility compliance, from "A" to "AAA." At BYU-Idaho, in order to best serve the needs of our students, we strive to meet all "A" and "AA" guidelines, so only those guidelines are included in this document. Items marked with “(AA)” meet that standard. All other guidelines listed here meet the “A” standard. All information in this document is either paraphrased or quoted from W3C’s Web Content Accessibility Guidelines (WCAG) 2.0.

Web Pages and Content

General
  1. Anything that can be seen or heard (including page organization and structure) is also available via text or formatting that can be read/interpreted by assistive technology.
  2. Instructions do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
Columns
  1. If columns are used, content must follow the column format, from top to bottom of the first column, then top to bottom of the second column.
  2. Columns are created using the appropriate HTML formatting, not by using white space characters such as spaces, tabs, returns, etc.
HTML
  1. All components that users interact with (e.g., forms, elements, links, etc.) are built using markup standards that facilitate the use of assistive technology.
  2. Web pages use the appropriate semantic elements (such as HTML attributes) for all structural elements (e.g., headings, bulleted or numbered lists, tables, phrase-level elements, etc.).
  3. The language of the page is identified using the HTML lang attribute.
  4. Markup language (such as HTML) is properly coded. Avoid dirty/messy HTML.
  5.  (AA) Any page content that is in a different language than the main content is identified using the HTML lang attribute.
Titles and Headings
  1. Web pages use the appropriate semantic elements (such as HTML attributes) for all headings.
  2. Headings are in a logical order and don’t skip levels (e.g., H1, H2, H3).
  3. “Web pages have titles that describe topic and purpose.”
  4. (AA) Any headings or labels used on a web page clearly and concisely describe the topic or purpose. This includes interactive components (e.g., zoom in, zoom out).
  5. (AA) Elements and components that appear repeatedly throughout a website should have an identical or at least consistent title or identification every time they appear.
Tables
  1. Tables are created using appropriate HTML formatting, NOT by using white space characters (extra spacing).
  2. Use table headers.
  3. Tables must be created to be read in a linear manner, top to bottom, row by row.
Text
  1. Use formatting to add extra spacing between words or lines as a way of adding white space or visual separation. Do not add extra rows or blank spacing to achieve the affect.
  2. Text that is 14 pt. or smaller has a color contrast ratio of at least 4.5:1 with the background color.
  3. Large text (over 18 pt. or 14 pt. bold) has a color contrast ratio of at least 3:1.
  4. (AA) Users should be able to increase text size up to 200%, without losing any of the content and without using assistive technology. This does not apply to captions or images of text
  5. (AA) Text, rather than an image of text, is used to convey information unless the image of text is customizable by the user or essential to the information being conveyed.
Time Limits
  1. If a page or application has a time limit, the user is given options to turn off, adjust, or extend that time limit.
  2. Exceptions: real-time events, instances where removing the time limit would invalidate the activity, and instances where the time limit is 20 hours or longer.
Images
  1. All images must include alternative text (alt text) that describes the information portrayed in the image.
    • Any image on a course content page, in a PowerPoint, in a document, used as a link or form button, or in an online test or quiz is included in this requirement.
    • If an image is described in detail in the text surrounding the image, no alternative text is necessary.
  2. Images that serve a purpose or require user interaction (such as submit buttons, image maps, or complex animations) must be named or labeled in a way that describes the purpose of the image, so users know what it is and why it is there.
  3. (AA) Text, rather than an image of text, is used to convey information unless the image of text is customizable by the user or essential to the information being conveyed.

Alt Text

  1. If the image can be described using short alt text, it should be written as an alt attribute in HTML.
  2. If long alt text is necessary (to describe a table, infographic, or detailed image), then it should be provided as a link to an accessible document containing the information. (It is best if this info can be provided on the same page as the image—that way it can benefit all users—but if necessary, a link to another document is sufficient.)
  3. Images in online tests or quizzes MUST contain alt text, but if it would give away the answer or make the test null and void, then generic alt text is sufficient (alt=“quiz image”). (Note from Disability Services: In this case, the course syllabus should provide an explanation that instructs students to contact their instructor or Disability Services if they need assistance with the quiz images.)
  4. Decorative images (images that serve no educational, informational purpose) do not need descriptive alt text, but they MUST contain empty alt text (alt=“”).
  5. If an image is meant to be a sensory experience (how you feel or what you think of when you see an image), there is no way to provide that in alt text, but a description of the image should be included.
Videos
  1. Videos are always introduced beforehand with a clear title and/or description.
  2. Videos have no flashing content that flashes more than three times per second (e.g., strobe lights, lightning, muzzle flashes, etc.).
  3. Video that plays automatically for more than three seconds must have a mechanism (separate from the overall system volume level) for stopping or pausing the sound.

Transcripts and Closed-Captioning for Videos

  1. All pre-recorded videos are accompanied by a descriptive (deaf/blind) transcript OR audio descriptions.
  2. Media that is video-only (no audio: no background noise, no music, no spoken words) should be accompanied by a descriptive transcript (for the blind).
  3. BYU-Idaho-owned videos should contain synchronized captions.
  4. (AA) Live video conferences and web casts must contain synchronized captions. (This does NOT apply to two-way multimedia calls between two or more individuals through web apps, such as Adobe Connect or Google Hangouts on Air).
  5. (AA) BYU-Idaho-owned videos contain audio descriptions.
Moving or Flashing Content
  1. Moving, blinking, or scrolling content that “starts automatically, lasts more than five second, and is presented in parallel with other content” can be paused, stopped, or hidden by the user.
  2. Pages contain no flashing content that flashes more than three times per second.
Color Usage
  1. Users should not have to rely on color recognition to understand information, navigate a page, complete a task, or know what action to take. Information conveyed by color differences must also contain textual cues or be available in text.
  2. Text that is 14 pt. or smaller has a color contrast ratio of at least 4.5:1 with the background color.
  3. Large text (over 18 pt. or 14 pt. bold) has a color contrast ratio of at least 3:1.
  4. Links should have a color contrast ratio of 3:1 with surrounding text.
Audio Clips
  1. Audio clips are always introduced beforehand with a clear title and/or description.
  2. Audio that plays automatically for more than three seconds must have a mechanism (separate from the overall system volume level) that allows it to be stopped or paused.

Transcripts for Audio Clips

  1. Pre-recorded clips that are audio-only are accompanied by a transcript of the audio.
  2. (AA) Live broadcast that are audio-only must contain synchronized captions. (This does NOT apply to two-way multimedia calls between two or more individuals through web apps [such as Adobe Connect or Google Hangouts on Air].)
Sound
  1. A text description is provided for any sound used to indicate something (such as a correct answer, a completed task, etc.).
  2. Instructions do not expect users to rely solely on their hearing in order to understand or complete any task.

Digital Documents

Word
  1. Use standard formatting conventions (for titles, headings, bulleted or numbered lists, tables, etc.).
    • Use heading tags to mark all headings and subheadings. Headings should be in a logical order and shouldn’t skip levels (e.g., H1, H2, H3).
    • Use formatting to set consistent page numbers.
    • Lists (bulleted or numbered) should be formatted as such, rather than using spacing, manual numbering, etc. to format a list by hand.
    • Use formatting to add extra spacing between words or lines of text as a way of adding white space or visual separation. Do not add extra rows or blank spacing to achieve the affect.
  2. Columns
    • If columns are used, content must follow the column format, from top to bottom of the first column, then top to bottom of the second column.
    • Columns are created using the appropriate Word formatting, not by using white space characters such as spaces, tabs, returns, etc.
  3. Tables
    • Tables are created using appropriate Word formatting, NOT by using white space characters (extra spacing).
    • Use table headers.
    • Tables must be created to be read in a linear manner, top to bottom, row by row.
  4. Images, hyperlinks, and color usage in Word documents should follow the same guidelines outlined for web pages. See those sections for more details.
PDF
  1. Follow all of the above guidelines for Word documents PLUS these additional guidelines:
  2. Do not use a scanned PDF.
    • Note from Disability Services: Even the most advanced scanners CANNOT create a scan that a screen reader will read. If a scanned PDF must be used, an alternative accessible version of that PDF must be provided.
  3. The title of the PDF is formatted as such.
  4. PDFs must be tagged (bookmarked) in the appropriate reading order. (AA) Long PDFs should contain bookmarks (heading tags) for easy navigation to various parts of the document.
  5. Format links by using Adobe’s Link annotation and the /Link structure element.
  6. If a PDF is in a language besides English, the language is set in the document catalog of the PDF.
PowerPoint

There are no specific WCAG 2.0 requirements for PowerPoints used as online content. However, all of the guidelines for Word documents should be applied to PowerPoints, including standards for tables, lists, images, color contrast, etc.

Note from Disability Services: Please be aware that PowerPoints are not compatible with some screen readers and are not an ideal format for online accessibility. When possible, it's best to build slides in HTML, but if PowerPoints are used, they must be accompanied by an alternative HTML or Word document.

Online Forms

Online Forms
  1. Entering data or filling out a form should not automatically cause a major change in the web page unless the user has been warned that a change will occur.
  2. All forms are built using markup standards that facilitate the use of assistive technology, using appropriate HTML elements or attributes for all features and functions.
  3. The navigation order of form elements is logical and intuitive.
  4. Forms include instructions or labels, so users know what information is expected and where to put it.
  5. Forms contain textual explanations or text alternatives for all fields.
  6. (AA) Forms use headings and labels that clearly and concisely describe each field.
  7. (AA) If a user can change or delete legal, financial, or test data, the changes/deletions can be reversed, checked, or confirmed.

Errors While Filling Out the Form

  1. If an error occurs when a user is filling out a form, it is clearly explained to the user in an error message.
  2. (AA) When a user fills out a form incorrectly, suggestions are provided to help the user correct the error, if possible.

About this article

Responsible: Christy Owens (Quality & Editing Coordinator)

Accountable: OLC in partnership with the BYU-Idaho ADA Office

Consulted: BYU-Idaho ADA Office

Informed: Designers, Review Team

Sharing: Unrestricted

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Still Need Help? Contact Us