Headings provide structure to a page. A person using a screen reader can navigate a page quickly using headings on the page if the headings used are semantic. Semantic headings include real heading tags such as
Unsemantic Heading exercise to learn more about heading structure for accessibility?Challenge: Would you like to try
Screen readers interact with text on the screen. So, to convey the meaning of an image to screen reader users, we put an accessible text label in the HTML. If an image is decorative, we can hide it from screen reader users by giving it an empty label (
alt=""). After the completing the exercise below, you can learn a lot more about writing good alt text for images by checking out WebAIM’s resource on the topic.
Inaccessible Inline Image exercise to learn more about accessible image? You can also learn about different kinds of images pertain to web accessibility.Challenge: Would you like to try
Semantic lists help screen readers understand the type of the element and the number of items in the element, and provide easier navigation via list commands specific to screen readers.
Unsemantic List exercise to learn more about accessible list?Challenge: Would you like to try
Tables help screen readers process information presented in a tabular format. When information is presented using table markup, screen reader users can read down columns and across rows, and even hear column and row headings as they do so. HTML provides many elements and attributes to create fully accessible tables.
Unsemantic Table exercise to learn more about accessible table?Challenge: Would you like to try
Note: Tips and tutorials are from Teach Access
- Accessibility Bookmarklets (Strongly Recommended)
- WebAIM Color Contrast Checker (Recommended)
- Functional Accessibility Evaluator (FAE)
- AInspector WCAG (Firefox browser add-on)