Digital Accessibility is an ADA Requirement
About 25% of U.S. adults, and over a billion people worldwide, live with a disability. The way many people access the web can be impacted by disability. Many will use assistive technology, for example, or make modifications that make web content usable to them.
In order for assistive technology, like screen readers, to work with a website, that website has to be made compatible through the implementation of accessibility best practices and specifications.
The following are the most basic things you can easily do to ensure your page content is accessible. websites.ucr.edu/accessibility also has very good information, and a list of courses if you decide you would like to go further.
Nested Headers and empty Headers
Nested Headers
People using Screen Readers rely on the headings as an outline to help them navigate the page, and is the reason it is important to nest your headers. Check your pages as you work to make sure your Headers are properly nested and that there aren't any empty Headers. Any normal/paragraph text is invisible to Screen Readers. Choose wisely to make your outline informative.
Empty Headers
Say you want to include some space above a header. Intuitively, you would place your cursor at the start of the header and hit return. This creates a new line, but behind the scenes Drupal assigns it the same header. If you look at the source code you will see this:
<h2> </h2>
<h2> </h2>
<h2>Nested Headers and empty Headers</h2>
Empty headers appear on screen readers, with no information inside, and can be very frustrating to someone trying to navigate a site using a screen reader.
Header Examples
Heading 2 - First main section of the site.
Normal content (as named in the Format dropdown list in the editing toolbar), is otherwise known as a paragraph. Anything not assigned a heading size will be a paragraph. Paragraphs are invisible to screen readers. Only the headings are visible to screen readers until explicitly selected to be read. You want your headings to be nested, like an outline. Do not skip numbers.
Heading 3 - a sub-section of heading 2
A paragraph under Heading 3, not assigned any heading, this will be invisible to screen readers until explicitly selected to be read.
Heading 4 - a sub-section of heading 3
A paragraph under Heading 4, not assigned any heading, this will be invisible to screen readers until explicitly selected to be read.
Heading 6
This is done incorrectly for demonstration purposes. You should never skip numbers. HeadingsMap will show you errors in red. Note, the Social Media Links are not something you can change, they come with the Drupal template your site uses. But, you can change your Heading 6 to a Heading 5 and correct the nesting error.
Notice the empty 4 in screenshot #1 ( renders a space on a browser). This occurs if your cursor is in front of text assigned a heading and you decide to add a line above it. People relying on screen readers will come across that and pause, expecting content that isn't there. Please make sure these don't exist on your pages. The correct code to use is <p> </p> (paragraphs are invisible to screen readers). You can see the error circled in red, and the correct code to use circled in blue in the screenshot to the left.
Heading 5
Heading 4 - another sub-section of Heading 3 above
Heading 3 - another sub-section of Heading 2 above
Heading 2 - Second main section of the site
Be sure you choose headings that will create a clean outline, and keep in mind that screen readers don't see paragraph text so do not use it as a section header, whether it be bold or red or underlined. Use a different heading size instead.
The headingsMap tool
This invaluable free tool is an extension available for Chrome and Firefox. It shows nested Header and empty Header errors. Note that if you are logged in, the Admin tabs will appear in the headingsMap. You can ignore all errors above the title of your page. When you save your page, check it with headingsMap to know you are making your pages accessible.
Include alt and title tags in every image and iframe
Images
Preparing your images for the web - video tutorial
When you upload a new image, take the time to enter thoughtful Alternative text and Name. Alternative text is important for Accessibility. The Name is also important for Accessibility as it is automatically used as the title of the image, and is also important for you to help you find the image later. If you use the Bulk Upload feature for images, Drupal automatically uses the file name as the Name of the image:
When you click start to add this image to your page, the filename appears as the Title and search engines will penalize you for Titles that include file extensions like .jpg. Plus, it will be hard to find your image using a keyword. There is nothing descriptive in the filename to tell you what the image is.
If an image is purely decorative and has no importance to the content (an example is the Ray of Light icon used in UCR Branding), then place 2 double quotes in the Alternative text box. Screen readers will know to ignore it.
iframes
If you embed an iframe, always include an Alt tag or a Title tag. iframes are used when you embed profiles from profiles.ucr.edu, when you embed a google calendar, and when you embed a youtube video (although it is better practice to use Drupal's Video Content type for videos because then they are responsive to screen size).
Example of Profiles embed code (the title "Profiles" is added automatically, but you can edit it to be more specific if you want):
<iframe height="100%" id="pe-34b9264a-cac3-52cc-3ec6-da4f0d4325" src="https://profiles.ucr.edu/app/embed?groupId=20959&profilePictureMode=always&viewProfileButtonMode=always&showAlphaLinks=false&showFilter=false&showTitle=false&affiliationFilter=All&viewProfilesMode=cards&enableViewModeButton=false&disableSocialLinks=false&excludeStudentEmployees=false&excludeSecondaryDepartmentEmployees=false&customCssUrl=https%3A%2F%2Fcnas.ucr.edu%2Fthemes%2Fcustom%2Fucr_cnas_1%2Fcss%2Fcnas-profiles.css" title="Profiles" width="100%"></iframe>
Example of Google calendar embed code: (titles are NOT automatically included, please add one manually through the source code)
<iframe frameborder="0" height="600" scrolling="no" src="https://calendar.google.com/calendar/embed?src=ucr.edu_5bok1scp193vhu4p7u7j40%40group.calendar.google.com&ctz=America%2FLos_Angeles" style="border: 0" width="800" title="Event Calendar"></iframe>
Use good Link Text
This article on why descriptive link text is important explains why.
Check your site for dead links
There are numerous free tools to check for dead links on your site. Too many dead links can lower your SEO score. Links can go bad when sites don't take the time to redirect pages that have edited URLs. This happens frequently with news articles. A news article that is front page news one day can be moved into archives with a new link later, creating a dead link on your site if because you are still linking to the front page news URL. It is a good practice to periodically check for and repair dead links on your site.