Since not everyone has the same abilities or equal use of the same senses, one of the keys to accessibility is ensuring that information is transformable from one form into another. Some general guidelines:
- Text should remain text and not be replaced by images.
- Images must be described with alternate text (“alt” attribute).
- Sound files must be accompanied with a transcript.
- Video files must be captioned.
- There should be sufficient contrast between text and background.
Accessibility Guidelines for all Digital Media
- Every image must have alt text added.
- Describe the information, not the picture. Ex: not just "credit cards, or logos, but which ones?"
- Active images require descriptive alt text. (Describe what the image is doing, Ex: fading in and out, blinking etc. )
- Images that contain information require descriptive alt text. (Describe picture and information)
- Decorative images should have empty alt text. alt="" needs to be placed within the code, or select decorative if an option instead of alt.
- No alt text should have the word "image" or photo" as screen readers already read it as such.
- Alt text should not be redundant or have the same information as the body text. If so, it can be considered a "decorative" image see Rule 5.
- Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content. (EX: social media icons should say "dsa facebook")
Contrast is a measure of the difference in perceived brightness between two colors, typically text and the background color. It is expressed as a ratio ranging from 1:1 — white text on a white background — to 21:1 — black text on a white background. To give a frame of reference, on a white background: Graphic illustrating visual vibrance and balanced contrast.
- UNT Green has a ratio of 4.74:1
- Light Blue has a ratio of 2.29:1
- Pure Red has a ratio of 4:1
- The measure of the contrast ratio can affect readability. For example, black text on a white background — ratio of 21:1 — is the most readable, but white text on a UNT gray background, a ratio of 5.17:1, and is less readable.
- When designing graphics, emails or posting on social media, consider how the contrast ratio will affect the delivery of the message and how will it be perceived by those who are color blind or have low vision.
- Industry standards call for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. To test the contrast ratio of two colors, visit the WebAIM Contrast Checker.
Email and Digital Documents:
- When designing graphics, emails, or posting on social media, consider how the contrast ratio will affect the delivery of the message and how will it be perceived by those who are color blind or have low vision. To test the contrast ratio of two colors, visit the WebAIM Contrast Checker.
- All images should have alt text and as a best practice, they should not be sent as the main body content. For example, type out the information that is on an image such as a flyer within the body of the email so that it is accessible to all.
- When using Outlook, Word, PDFs or PowerPoint, click on "Review" and then "Check Accessibility" to check for any accessibility issues. By default, PowerPoints are best for meeting accessibility standards. Make sure to add alt text to all images inside of the documents along with graphs.
Web Accessibility Checklist
- Headers should be in order 1,2,3 etc. (Titles are automatically set as 1).
- Add alt text to all images see (Digital Alt text guidelines).
- Flyers should not be used as the main body of your page. Instead, type out the information that is on your flyer and/or attach it to an accessible pdf document.
- All links should have an Advisory Title or Long Description URL (in Advanced section of Drupal Linking).
- Tables should read left to right.
- All PDFs should be accessible (See Accessible PDF trainings). When possible, copy and paste information onto a webpage instead of linking to a pdf.
- Copy text from word docs and pdfs onto a webpage if possible, for best accessibility results.
- Check contrast WebAIM Contrast Checker.
- Utilize webforms when possible or fillable pdfs for any forms.
- Tab through your site to see if it is accessible to users without mouse capability.
- All videos should be embedded from YouTube with closed captioning.
- Any Iframes or Interactive Content should have alt text and a link to accessible information.
- Check for mobile responsivity by F12 on Chrome or increase zoom to 200% to see if all information is still visible and navigation is correct.
- Use consistent navigation menus and avoid on page navigation.
Additional DSA Web Accessibility Training and Resources can be found at https://studentaffairs.unt.edu/docs or on the DSA Web Editor’s Team page.
- UNT Web Accessibility Trainings & Standards for Web, Social and Email: https://identityguide.unt.edu/build-your-project/web-email-social-media/accessibility-requirements
- DSA Web Accessibility Training and Resources can be found at https://studentaffairs.unt.edu/docs or on the DSA Web Editor’s Team page.
- Intro to Accessibility: webaim.org/intro
- Website Evaluation Tool: wave.webaim.org
- Accessibility Examples: https://www.w3.org/standards/webdesign/accessibility
- Contrast Checker: https://webaim.org/resources/contrastchecker/
- UNT Color Contrast Grid Checker: https://identityguide.unt.edu/unt-color-contrast-grid
- JAWS Keyboard Shortcuts:https://webaim.org/resources/shortcuts/jaws
- UNT Identity Guide Accessibility Requirements: https://identityguide.unt.edu/build-your-project/web-email-social-media/accessibility-requirements