HTML: Accessibility Best Practices

HTML Accessibility Guide.

Headings: Use Properly Formatted Headings to Structure Page Content

Rationale: Headings help to organize content, making it easier for everyone to read. Headings are also a primary way for people using screen reading software to navigate a page of text.

Lists: Use Ordered/Unordered Lists to Group Related Items

Rationale: Logical organization of content is conveyed to all users, along with other useful information for assistive technology users about the number of items listed. Mobile users also benefit as information is presented as it is meant to be presented.

Tables: Use Tables for Tabular Data and Provide Column and/or Row Headers

Rationale: Screen readers linearize content and read tables from left to right, top to bottom, one cell at a time. If cells are split or merged, it can throw the reading order off and make the table difficult to comprehend by users who are blind and using a screen reader to navigate.

Images: Use Alt Text for Informative Images

Rationale: Alt text is read by a screen reader. It should adequately describe what is displayed and its purpose. This allows screen reader users to benefit from information conveyed by the image, even if they cannot see it.

Links: Use Meaningful Text for Links

Rationale: Headings help to organize content, making it easier for everyone to read. Headings are also a primary way for people using screen reading software to navigate a page of text.

Keyboard: Check Keyboard Access

Rationale: Users with visual and mobility impairments rely on the keyboard, rather than a mouse, to access and navigate online content. If content is not keyboard accessible, it restricts who can learn from that content.

Color: Use Sufficient Color Contrast

Rationale: Without sufficient color contrast between font and background, people who are color blind and low vision may not perceive the content. Additionally, using color alone to convey meaning (e.g., items in red indicate a deficit) excludes color blind or blind users. To check color contrast, use the Paciello Group’s Color Contrast Analyzer: https://www.paciellogroup.com/resources/contrastanalyser/

Video/Audio: Provide Captioning for Video and Text Transcripts for Audio

Rationale: Captions are essential for those who are deaf and hard of hearing, but they also benefit non-native speakers, those unfamiliar with the vocabulary, and viewers with some learning disabilities or in a noisy environment. Audio transcripts are essential for those who are deaf or hard of hearing, but also assist others who can easily read or search the transcripts.

Math: Write Math and Science Equations Accessibly

Rationale: For web pages, use an equation editor that outputs MathML, a markup language that allows equations to be stored as structured text that is compatible with many assistive technologies. With screen readers, for example, blind users can navigate and review parts of an equation, such as the top portion of a complex fraction. For more information on MathML, see the W3C Math guide: https://www.w3.org/Math/.

Resources http://webaim.org/intro/#principles



KeywordsHTML, Accessibility, Accessibility Guides   Doc ID124887
OwnerHanna F.GroupSchool of Information Sciences
Created2023-03-16 08:26:10Updated2023-07-28 11:58:09
SitesUniversity of Illinois School of Information Sciences
Feedback  0   0