Website Techniques | University IT

A foundational principle of web accessibility is to prioritize standard, semantic HTML over complex custom components. Standard elements are inherently accessible and require less effort to implement correctly.

For example, a standard <button> is accessible by default, while a custom <div> acting as a button requires significant additional attributes and scripting to replicate the same functionality.

Custom control:

<div role="button" tabindex="0" onclick="event.preventDefault(); doSomething()" onkeydown="if(event.keyCode==13 || event.keyCode==32) { event.preventDefault(); doSomething(); }">Custom Button
</div>

Standard HTML:

<button>Standard HTML Button</button>

HTML techniques

Headings: Using a clear, programmatic heading structure improves accessibility, navigation, readability, and search performance while avoiding common heading misuses.
Images: Alt text is crucial for image accessibility: write concise, meaningful descriptions for informative images, use empty alt text (alt="") for decorative images, and apply the same rules in CMS tools (with extra guidance for complex images, captions, and ARIA when needed).
Resize: Ensure web pages remain fully usable up to 200% zoom by testing that text scales properly, content stays visible without overlap, controls and responsive breakpoints remain accessible, and users can scroll in only one direction (using techniques like allowing meta resizing and relative units such as em/rem).
Web Forms: Make web forms accessible by giving every field a clear label, providing helpful error messages, and ensuring the form can be completed using only a keyboard and a screen reader.
Links and Buttons: Make links and buttons easy to use by writing clear text that describes the action, ensuring they are reachable by keyboard, and providing strong focus and color contrast.
Tables: Accessible data tables require semantic HTML that screen readers can parse—using elements like <caption>, <thead>, <tbody>, and <th> with scope, or for complex tables, techniques such as header/id associations, row/column groups, ARIA semantics, and accessible sticky or layout tables.
Navigation: Accessible page structure and navigation require full keyboard operability with clear focus, a “skip to main content” link, semantic HTML landmarks, and the elimination of keyboard traps.
Screen Reader-Only Content: Several techniques exist to visually hide text while keeping it accessible to screen readers, each with distinct pros and cons.
Media Players: When selecting a media player for your website, you must evaluate it for core accessibility features.
iFrame Titles: Meaningful iFrames need a clear, short, and unique accessible name via the title attribute (or aria-labelledby/aria-label when appropriate) so screen reader users can understand and navigate embedded content.