Digital Accessibility Principles
The POUR principles provide a framework for making digital content accessible by ensuring it is perceivable, operable, understandable and robust for all users.
- Perceivable – Information and interface elements must be presented so users can perceive them with their senses.
- Operable – Users must be able to interact with the interface.
- Understandable – Information and the operation of the interface must be clear.
- Robust – Content must work reliably across different technologies, including assistive technologies.
Titles & Headings
- Add a unique title to your web page or document that matches the content of the page.
- Use one <h1> level heading for the title of a document or webpage.
- Use headings in order from <h1> through <h6> without skipping levels.
Color Contrast
- Check the contrast of text and other elements.
- Minimum contrast ratios:
- Normal-size text – 4.5:1
- Large text (18+ point font) – 3:1
- UI elements like icons, buttons, text boxes – 3:1
- Minimum contrast ratios:
- Avoid using images behind text because it can be distracting and make the text more difficult to read.
- Use a solid-color background to get a better contrast ratio with text.
- Avoid relying on color to convey information.
Text Styling
- Use plain, preferably sans serif fonts for paragraph text.
- Use at least 12-point font.
- Keep text styling simple, with minimal bolding, italics, underlines and capitalization.
- Apply title case and sentence case when appropriate; never use all caps.
Magnification
- Use high-quality images that won’t blur when magnified.
- Avoid using images of text, which might pixelate.
- Give content enough space (between paragraphs, between lines of text, around images and other elements, etc.) to support enlarging the content.
Readability
- Use plain language.
- Support content scanning with good headlines, bullet points and content summaries.
- Communicate content sections through visual design.
Alt Text
- Keep alt text to 150 characters or fewer.
- Describe the “why” of the image as well as the “what.”
- Keep alt text and image captions unique.
- Use longer image description for more complex images.
Image Descriptions
- Add longer image descriptions to the main text of the page.
- Describe major themes or takeaways from the image.
Tables
- Set heading rows or columns to label data in the table.
- Avoid complex tables with multiple heading rows.
- Contextualize the table within the content of the page.
Links & Buttons
- Use unique, descriptive text.
- Make links stand out (typically blue and underlined).
- Ensure good contrast between the link and regular text (3:1 contrast ratio minimum).
- Use concise labels for buttons.
- Open new content in the same web browser tab (unless you know a new tab is required).
- Notify users in the text if a link will open a new tab or window.
- Notify users if a link will open or download a special file type like a PDF.
Consistent Help
- Include contact information in a consistent spot in your content.