When you are creating content or editing your website, there are a number of things that content creators can do to ensure your sites provide equal access and equal opportunity to people with diverse abilities. How you add photos, links, and text can make a huge difference to the user experience of someone who has a disability or uses assistive technology. This list isn't all-inclusive, but it is a starting point to help make your website more accessible.
Headings
When you add headings for content sections, make sure they’re identified as headings. Styling text to be bigger and bolder than the rest may make it look like a heading, but for people who don’t see that visual change, the text won’t be identifiable as a heading. Also, individuals who are blind or visually impaired often choose to browse a webpage by headings. This gives them a good idea of what is on the page and of what material on the page is most important. It is a far quicker process than reading a page line by line or even link by link. Individuals who can only use the keyboard for navigation can browse a webpage much faster if the page contains proper headings.
- Follow a logical outline in organizing the content on your page and use H2 to H4 hierarchically without skipping heading levels.
- Don't use 'bold' instead of a heading.
- If you have a lot of large blocks of text on your site, consider breaking it up into smaller sections and adding appropriate headers.
- Don't use words in all capital letters instead of the proper heading level.
learn more about headings and page structure
Readability
It is best to avoid large blocks of italic text, colored text, underlined text, decorative fonts and capitalized letters. These formatting choices can make text difficult to read. Justified text (text with alignment on both the left and right margins) should also be avoided because the justification algorithm can cause large space gaps between letters and words. Use familiar language and provide definitions for unusual words and for abbreviations. Screen readers associate strings of capital letters as acronyms. This means they read them out letter by letter instead of reading them as a sentence. If it is appropriate to the site design for a section to display in all caps, that is something that the developer will build into the site. For the same reason, you should not use all capital letters for headings or titles. Instead, use the appropriate heading level.
learn more about plain language, purpose, and readability
List Styles
Use bulleted or numbered list styles to denote list structure. This also ensures consistent formatting and helps screen readers understand content structure and organization. Screen readers have to be given instructions to know how to organize content. Formatting lists provide screen readers with this information and helps visually impaired users navigate through your content more quickly. In order for a screen reader to recognize your list, you need to use the bullet points and numbers provided in your website's WYSIWYG. They will not recognize manually added numbers or asterisks as a list of content.
learn more about headings and page structure
Links
Link text is used to describe the content that you're linking to on your website. Users of screen reader technology can generate a list of the links on your page, have them read alphabetically, and navigate the webpage from there. Since screen reader users often do not read the link within the context of the rest of the page, using descriptive text properly explains the context of links to the screen reader user.
- Don't use vague or generic link text.
- Don't link the actual web address. You should always link text instead of inserting an actual web address.
- Don't only link the file type. For example, don't only link the 'pdf' on each item. Instead, also link the title.
- Remember, buttons are also linked text so all of the rules apply to them too! Avoid 'click here' and 'find out more' button text.
- Avoid describing links by their color or by their position on the page. Don’t say “click the blue button” or “click the link on the right”.
- Links should not open in new tabs or windows.
Alt Text
Images and graphics make content more pleasant and easier to understand for many people, in particular, those with cognitive and/or learning disabilities. They serve as cues for people with visual impairments, including people with low vision, to orient themselves in the content. Adding an image or a graphic to your content without using alt text or empty alt attribute can be extremely frustrating for people with visual impairments navigating your site through assistive technologies. When writing alt text, it should be informative, brief, and should indicate how the photo is related to the other content. Remember, the alt text is being read out loud by a screen-reader and a long, overly descriptive description isn't going to be helpful to the user.
- Informative Images: An image that contains information that is helpful for the user in understanding the content of the page. These images need to have alt text.
- Decorative Images: An image that is present on the page purely to make it look good and doesn't convey any necessary information. These images need to have an empty alt attribute, which is displayed as two quotation marks: ""
learn more about writing alt text
Images with Text
Images with text can negatively affect both your website and the user's experience in many ways. Screen readers can't see text that is in an image. When detecting an image on a website, it will read the alt text, not the text on the image. Also, search engines can't read text on an image. For example, if you put a flyer on your website to advertise an upcoming speaker and someone uses Google to try to find out information about it, Google won't see the flyer.
Images of text also cause issues for users who use screen magnification tools because images can decrease in quality and become pixilated when resized. When a user tries to enlarge the image with text, the readability can be inconsistent and is discouraged. The use of real text instead of images of text also provides easier access to those that require content to be translated into other languages and benefits users who might have an unreliable internet connection where images will not load.
As you've already noticed, there are a few areas on your department sites that have text on images. The reason these sections are still considered accessible is that the text and the image are two separate sections that are layered on top of each other. Because of the way it has been developed, screen readers and search engines can still identify and read the text.
learn more about images with text
Video & Audio
Provide captioning and audio descriptions for your videos. If you are using auto-generated closed captions or transcripts, review them for accuracy. Also, provide a transcript of any audio content.
Keyboard Testing
All web content should be accessible without the user needing to use a mouse. You can perform a keyboard access test yourself by using the Tab, Escape, Return/Enter, and arrow keys, as well as the space bar, on any keyboard. You should be able to access and operate all interactive elements and no elements should trap the cursor without an obvious way to exit or close the element.
Mobile View
Make sure that you look at your website on your mobile device. All content should be visible without using horizontal scrollbars and users should be able to tap with one finger to navigate even if other methods (shake, pinch, etc) are available. Both Android and Apple mobile platforms have their own accessibility technology that can assist with accessibility testing. Some of them include:
- screen readers
- display controls for font size, magnification, and color contrast options
- interaction controls that allow you to control your device with spoken commands or switch access
- caption preferences, live captioning services, sound amplifiers, or hearing aid support
Color Contrast Check
Users with visual disabilities must be able to properly see content on a page. This includes using an acceptable text to background color ratio and a large enough starting font size. There are several free color contrast checkers online:
Other Tools
- Operating system settings can be configured to assess specific accessibility barriers, for example Windows High Contrast Mode.
- On Mac OSX and iOS you also have a very powerful screen reader, VoiceOver, which can be used for specific accessibility checks.