Quick Tips
Heading
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 h1, h2.
Challenge: Would you like to try Unsemantic Heading exercise to learn more about heading structure for accessibility?
Images
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.
Challenge: Would you like to try Inaccessible Inline Image exercise to learn more about accessible image? You can also learn about different kinds of images pertain to web accessibility.
Lists
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.
Challenge: Would you like to try Unsemantic List exercise to learn more about accessible list?
Tables
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.
Challenge: Would you like to try Unsemantic Table exercise to learn more about accessible table?
Note: Tips and tutorials are from Teach Access
Evaluation Tools
- Accessibility Bookmarklets (Strongly Recommended)
- WebAIM Color Contrast Checker (Recommended)
- Functional Accessibility Evaluator (FAE)
- AInspector WCAG (Firefox browser add-on)