Accessibility Top 6 examples

Headings

• Headings provide a meaningful structure overview

• “Fake” headings created with style changes (like bold font) are not recognized by screen readers
• Headings are in hierarchical order, no skipping
• Heading <h1> is the page title; start with h2

Bad heading examples

Heading

Etiam iaculis nunc ac metus. Proin faucibus arcu quis ante. Curabitur nisi. Sed lectus. Nam commodo suscipit quam.

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Praesent venenatis metus at tortor pulvinar varius. In auctor lobortis lacus. Vivamus laoreet. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Heading 5

Etiam iaculis nunc ac metus. Proin faucibus arcu quis ante. Curabitur nisi. Sed lectus. Nam commodo suscipit quam.

Heading using bold

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Praesent venenatis metus at tortor pulvinar varius. In auctor lobortis lacus. Vivamus laoreet. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Good heading examples

Heading 2

Etiam iaculis nunc ac metus. Proin faucibus arcu quis ante. Curabitur nisi. Sed lectus. Nam commodo suscipit quam.

Maecenas tempus,

tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. 

Heading 3

Etiam iaculis nunc ac metus. Proin faucibus arcu quis ante. Curabitur nisi. Sed lectus. Nam commodo suscipit quam.

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Heading 4

Praesent venenatis metus at tortor pulvinar varius. In auctor lobortis lacus. Vivamus laoreet. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.

Hyperlink text 

Good 

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Praesent vestibulum dapibus nibh. Pellentesque auctor neque nec urna. Read more about our descriptive hyperlink text

Bad

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Praesent vestibulum dapibus nibh. Pellentesque auctor neque nec urna. Read more or Click here

Files

Good

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Praesent vestibulum dapibus nibh. Pellentesque auctor neque nec urna. 
handbook guide for drupal 8 platform

Bad

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Praesent vestibulum dapibus nibh. Pellentesque auctor neque nec urna. 

Image Alternative Text

VS.

Tables

Presenting information like this

vs.

Year 1: Math 51; Math 52; Math 53; CS 103
Year 2: Math 104 or 113; Stats 116; WIM course
Year 3: CS 107; MS&E 211; CME 108; Stats 200; Elective (#1)
Year 4: Stats 191 or 203; MS&E 221; Elective (#2); Elective (#3)

If the information does not need to be a table, the latter is preferred.  

Multimedia with captioning

VS.