Web Accessibility Resources

Principles of Web Accessibility

Ensuring that your course materials are accessible is a key aspect of promoting inclusive education. Accessible course documents support students with various disabilities and improve learning for all students. This guide will help you create accessible course documents that comply with web accessibility standards, making them usable by everyone, including those using screen readers, keyboard navigation, or other assistive technologies.
  1. Perceivable: Information must be presented in ways that all students can perceive, such as through text, images, or audio.
  2. Operable: Interface elements and navigation must be operable by all students, regardless of their abilities or devices.
  3. Understandable: Information must be easy to understand and use, with clear language and well-structured content.
  4. Robust: Content must be compatible with a variety of devices, browsers, and assistive technologies. 

Different file formats have different levels of accessibility. The most commonly used formats for course documents are Word documents, PDFs, PowerPoint presentations, and HTML-based resources.

Microsoft Making Documents Accessible

Making documents accessible | Microsoft 365

Word Documents 

  • Heading Styles: Use built-in heading styles (Heading 1, Heading 2, etc.) for section titles. This helps students navigate the document using assistive technologies.
  • Alt Text for Images: Always provide descriptive alternative text (alt text) for images, charts, and graphs. This helps students using screen readers understand visual content.
  • Tables: If you use tables, ensure they are structured properly. Use headers to indicate the purpose of each column and row.
  • Readable Fonts: Use simple, sans-serif fonts (like Arial or Calibri) at a size of at least 12pt. Ensure proper contrast between the text and background.
  • Hyperlinks: Use meaningful link text that describes the destination (e.g., "Click here for the syllabus" should be avoided. Instead, write "Download the syllabus"). 

For any multimedia content such as images, videos, and audio files, ensure that text equivalents are available. 

Images
Alt Text: Provide a brief and accurate description of the image's content or function. For decorative images, use an empty alt attribute (alt="") to ensure they’re ignored by screen readers. 

Videos
Captions: Provide closed captions or subtitles for videos, ensuring that all dialogue, sounds, and relevant visual content are described.
Transcripts: Offer a transcript for audio content in videos to ensure accessibility for students who are deaf or hard of hearing. 

Audio
Transcripts: Provide transcripts for any audio content, whether it’s a podcast, lecture recording, or audio clip. 

Best Practices for Creating Accessible Headings  

 Use Proper Heading Levels 

  • Use Headings Hierarchically:
  • Heading 1 (H1) is the main title of the document or section.
  • Heading 2 (H2) is used for subheadings under H1.
  • Heading 3 (H3) is used for subheadings under H2, and so on.
  • Avoid Skipping Heading Levels: For example, don’t use H2 followed by H4, as this can create confusion. Maintain a logical order of headings (H1 > H2 > H3 > H4). 

Do Not Use Headings for Formatting 

  • Headings should be used semantically, meaning they must indicate the structure of the content, not just for styling (e.g., making text bold or large).
  • Don’t use heading styles to make text appear larger or bold. Instead, use appropriate formatting tools, such as the font size and weight settings in your word processor or HTML editor. 

Keep Headings Clear and Descriptive 

  • Use concise, meaningful titles for each heading that describe the content in that section.
  • Example: Instead of using "Chapter 1", use "Introduction to Web Accessibility".
  • Be Specific: Avoid vague headings like "Miscellaneous" or "Information." Clearly describe what the section covers. 

Adding Headings in Word:  

  1. Apply Heading Styles:
    • Select the text you want to turn into a heading.
    • In the "Home" tab, choose the appropriate heading style (Heading 1, Heading 2, etc.).
    • Use the built-in styles rather than manually adjusting font size or weight.
  2. Use Outline View:
    • You can view the structure of your document by switching to "Outline View." This shows the hierarchy of headings and allows you to adjust them if necessary.
  3. Review Document Structure:
    • Use the "Navigation Pane" in Word to quickly review the headings and ensure the document follows a logical structure. 

 Word Document Accessibility

Accessible Lists in Word

Adding Accessible Lists in Word:  
Always use the Bullet and Numbering tools to create bulleted and numbered lists, respectively. Lists allow a screen reader users to determine the list length, number, and organization. They also naturally ‘break up’ the document, improving readability for individuals with low vision and/or learning/cognitive challenges. 
Select the type of Bulleted (unordered) or Numbering (ordering) from the Paragraph section on the HOME tab. 

Bullet Lists Accessible

Adding Accessible Tables in Word:  

Tables can be difficult for individuals who use assistive technology to read, especially those using screen readers. Whenever possible, use simple tables (i.e., one row for column headers and one column for row headers). Following the steps below to identify the header rows in tables for MS Office 365. 

  • Select the Insert tab.
  • Click on Table.
  • Choose the table size. 

Accessible Tables in Word

  • Enter all table data.
  • Click in any of the cells to open the Table Design and Table Layout tabs. 

Table Layout Acessible

  • Click on the Table Design tab. In the Table Style Options, check the box for Header Row (column headers) and First Column (row headers), if applicable.

Table Design Acessible

  • Click on the Table Layout tab. Then, click Alt Text. Although not required, Alt Text allows you to provide an alternative description of the table. This is beneficial for complex tables, which may prove difficult for screen reader users to navigate even when it is accessible. 

Alt Text Table

Font and Color 

  • Clear Fonts: Use legible fonts such as Arial or Calibri. Avoid decorative fonts that may be hard to read.
  • Color Contrast: Ensure there is enough contrast between text and background. Use high contrast colors (e.g., black text on white background) to make text easier to read for students with low vision. 

Color Contrast: Links should have a different color from the regular text, with sufficient contrast to make them easily distinguishable. 

Hyperlinks 

  • Meaningful Link Text: Avoid using generic text like "Click here." Link text should describe the destination (e.g., "Read the course syllabus"). 

Accessibility Training

View courses here!

Web Accessibility Policy

View Policy and Procedures here!

Barrier Reporting Form

Report a Web Accessibility Barrier

 

 

Live Webinar Trainings

If you would like to receive individualized or group trainings on web accessibility and/or best practices, please see the contact information below.

 

Contact Information

Danielle Lopez
Director of Accessibility Services
Section 504/Title II Facilities Coordinator
(201) 360-5337
dlopezFREEHUDSONCOUNTYCOMMUNITYCOLLEGE

Karine Davis

Coordinator, Accessibility Services
(201) 360-4163
kdavisFREEHUDSONCOUNTYCOMMUNITYCOLLEGE
https://hccc.campus.eab.com/pal/Jo87zEratS

Journal Square Campus
71 Sip Ave., Room L010/L011
Jersey City, NJ 07306
(201) 360-4157
asFREEHUDSONCOUNTYCOMMUNITYCOLLEGE

North Hudson Campus
4800 John F. Kennedy Blvd., 7th Floor (Room 703P)
Union City, NJ 07087
(201) 360-4157
asFREEHUDSONCOUNTYCOMMUNITYCOLLEGE