When designing content, it's essential to ensure that all visitors can fully experience
your creation, regardless of their abilities. This is where the Web Accessibility
Guidelines (WCAG) come into play. These established standards provide a foundation
for inclusivity in web design.
Acronyms
Write out acronyms in a document where it first occurs.
Audio file
Don't play audio automatically.
Provide a transcript.
Background
Avoid contrasts of bright colors and strongly textured backgrounds.
Avoid using backgrounds with images.
Buttons / Icons
Provide a functional label.
Position navigation buttons and icons consistently.
Colors
Do not rely on color to convey information.
Some color blind individuals see green and red as the same color.
Contrast
The text and images are to have sufficient contrast with the background.
Files
Give a meaningful filename.
A link should indicate that it will open a file.
Font
Arial and Verdana fonts are good options, 12 point size.
Keep the usage of italics to a minimum and avoid blinking text.
Forms
The layout of the form should follow a logical pattern.
Frames
Name each frame to facilitate frame identification and navigation.
Describe the purpose of frames and how frames relate to each other if it is not obvious
by frame titles alone.
Images / Graphical Content
Provide a brief text alternative that provides equivalent information in Alt tag.
For some images, an extended text description may be needed.
Graphical contents include: images, text that is part of an image, image map regions,
animated graphics, images used as list bullets, graphical buttons, sound icons
Headers
Use headers to convey document structure.
Do not use bold or other text formatting to convey important information. Screen reading
software handles formatted text in the same as nonformatted text.
Help
Provide detailed help and instructions.
Language
Use the clearest and simplest language appropriate for a site's content.
Tell users when the language on a page changes.
Links
Clearly identify the target of each link.
Replace the page address with words that relate to the webpage that is linked.
Avoid ‘Click Here’ links.
Group related links, and include a ‘Skip Contents" link as the first item in a group
of related links for screen reader users to have the option to skip reading list of
page contents.
Create a logical tab order through links, form controls, and objects.
Mathematical or Scientific Notation
Use the ALT tag to provide a text alternative.
Convert equations in Microsoft Word to MathJax (advanced)
Menus
Use consistent navigation.
Multimedia Elements
Provide a description of the important information of the visual part of a multimedia
presentation.
Page Layout
Provide information about the layout of the site in the form of a site map or table
of contents.
Create a style of presentation that is consistent across pages.
Use consistent navigation on each page.
Page Title
Use a clear page title to describe the topic or purpose.
PDF Files
Use text-based pdf files, making sure that all graphics are labeled.
Links to PDF files should indicate that the link will open a PDF file.
Pop-Ups
Do not cause pop-ups or other windows to appear and do not redirect the current window
without informing the user.
PowerPoint
Convert PowerPoint files to HTML.
Tables
Identify row and column headers in tables. Note that screen readers read from left
to right.
Provide a text alternative that summarizes the content.
When possible provide an alternative equivalent of a table, which may be a linearized
version.
Text
Do not use images of text.
When resizing text it should not be distorted.
Video
Use videos that have captions.
A transcript may be provided and accessed via a link.
Text
Supplement text with graphic or auditory presentations where they will facilitate
comprehension of the page.
Divide large blocks of information into more manageable groups.
