What is Web Accessibility?
Web accessibility means designing your pages so that people with disabilities — including visual, auditory, motor, or cognitive impairments — can use them effectively. Beyond being the right thing to do, accessibility is increasingly required by law (such as the ADA in the US and EN 301 549 in the EU) and can improve your SEO.
Core Accessibility Principles (WCAG)
The Web Content Accessibility Guidelines (WCAG) are the international standard for accessibility. The key principles are:
Perceivable – All content must be available to users' senses. Provide text alternatives for images (alt text), captions for videos.
Operable – All interactive elements (buttons, links, forms) must work with a keyboard, not just a mouse.
Understandable – Content and navigation should be clear and predictable.
Robust – Content should work across different browsers and assistive technologies like screen readers.
Practical Steps for Psyke Pages
Alt Text for Images
Add descriptive alt text to every image in the Psyke editor. Describe what the image shows, not just what it is called. For decorative images with no informational value, leave the alt text empty rather than omitting it — this tells screen readers to skip the image.
Colour Contrast
Text must have sufficient contrast against its background to be readable by people with low vision or colour blindness. Use a tool like WebAIM Contrast Checker to verify your colour choices. Aim for at least a 4.5:1 ratio for body text.
Keyboard Navigation
Check that all links, buttons, and form fields can be reached and activated using the Tab key. Avoid designs that rely solely on hover effects.
Clear Headings and Structure
Use heading levels (H1, H2, H3) in logical order — do not skip from H1 to H4. This helps screen reader users navigate the page by heading.
Form Labels
Every form field should have a visible label. Do not rely only on placeholder text, as it disappears when someone starts typing.
Testing Your Pages for Accessibility
Google Lighthouse – Built into Chrome DevTools (press F12, go to the Lighthouse tab). Run an accessibility audit to get a score and a list of issues.
WAVE – A free browser extension at wave.webaim.org that highlights accessibility errors directly on your page.