Accessibility and SUNY Libraries

Web Accessibility Standards as presented by SUNY Electronic & Information Technology (EIT) Accessibility, annotated by SLS:

Page Structure:

• Heading structure is logical = don't use headings for formatting but instead use them for organization of information.
• Heading structure includes an H1 tag and does not skip levels = your H1 should be the name of the page, and you shouldn't have more than one on a page. You shouldn't have an H5 after an H3 with no H4 in between.
• Reading order is logical and intuitive = verify reading order using tab key.
• Information and relationships that are implied by visual or auditory formatting are conveyed in accessible ways = don't use color to organize your information because a visually impaired person wouldn't see those connections.

Navigation:

• Provide a method to skip repetitive navigation = create a link to where your content starts on the page so that users can click a link to skip over header links, navigation bar, etc. If you're using LibGuides, this functionality is part of their header code and you can test it by opening a page and hitting tab. The skip link should be the first thing that you see.
• The option to skip links is the first option when tabbing = make sure that your skip link is at the top of the page, otherwise it's not very useful.
• All links are available using the keyboard = don't make people have to use the mouse to get to a link to click on it. You can test this by tabbing through the page and making sure that you can get to all of the content only using your keyboard.
• There are no "keyboard traps" = make sure that you don't have content like a Twitter feed where you can't get out of it except for by clicking somewhere else on the page.
• The tabbing order is logical = you want to make sure that when you tab through the page, it goes in an order that makes sense. For example, if you've set up two columns of information, make sure that it's organized so that the tab goes through it in the order that you want.
• Keyboard focus is visible = you control this in CSS styling. Make sure that when you tab through your page you should be able to see a box around each element that you find. This helps visually impaired people track where they are on the page.
• Presentation, layout, and navigation are consistent for repeated content = keep your organization consistent so that it doesn't confuse people using assistive technology, i.e. don't redesign navigation tabs on different pages on your site.
• Make sure that you have something in your header that links to your home page and explicitly mark it as "home" = you might have to use CSS to make a hidden class and then use that class in a span next to your logo if you logo isn't explicitly marked as going to your homepage. Eg: <a href="your homepage url"><img src="your logo image"><span class="hidden">Library Home Page</span></a>

Links:

• Link text describes the destination of the link = avoid using "click here" or "learn more," e.g. if you're linking to another library, make that library name the link to help users know that that's where they're going when linking.
• All links are distinguishable = don't style links the same way you style other content on the page. If you use blue underlined text for links, don't use that style on anything that's not a link, and avoid underlining anything else just for emphasis.
• Try to avoid making links open in a new window = There's usually no warning to let people know that this is going to happen and it can be challenging to close the new window and go back to the content if you're using assistive technology.

Miscellaneous:

• Every page contains a link to an accessibility statement that provides contact information to get help if needed = this can go in the footer of the page.
• The page is readable and functional when text size is doubled = make sure when enlarging the page that your formatting is responsive.
• Use readable fonts and sizes, color contrast, and keep number of fonts used to a minimum
• The page has a descriptive page title = try to be specific whenever possible so that people can tell your pages apart when using assistive technology.
• The language of the page is identified using the HTML lang attribute = this can be done with your metadata tags. If you're using LibGuides it should already be done for you.
• Instructions do not rely solely on size, shape, color, or visual location = make sure that someone using assistive technology is able to follow your instructions.
• No content flashes more than 3 times per second
• If a page has a timing, the user is given options to turn off, adjust or extend the timing
• Multiple ways are available to find other web pages on the site = examples would be breadcrumbs, search box, etc.
• When appropriate, the language of sections of content that are in different languages are identified, for example, by using the lang attribute

Web Accessibility Standards as presented by SUNY Electronic & Information Technology (EIT) Accessibility:

• Color is not the only means used to convey information - Required
• There is sufficient contrast between foreground and background text - Required
• There is sufficient contrast when color is used to convey information - Strongly Recommended 

Color checking:

• axe — "the Accessibility Engine is an open-source JavaScript accessibility rules library that is fast, returns no false positive errors or duplicate results, and is publicly available as a GitHub repository, browser plugin, or framework integration" - Deque University
• Colour Contrast Analyser  — "a free application available for Windows and Mac where testers can conduct manual color contrast analyses of web content and non-HTML content (e.g., document files, email) and simulate certain visual conditions" - Deque University
• Colour Contrast Analyzer by Paciello Group
• Color Contrast Checker by WebAIM
• Note: Automated color contrast tools may produce false positive and require manual evaluation in some instances. For example, the automated tools cannot identify when a background image or a gradient is used in place of a solid color.

Web Accessibility Standards as presented by SUNY Electronic & Information Technology (EIT) Accessibility

Provide meaningful alt text for all images, except cases described below:

• Use null alt text for decorative images (alt="")
• Images used as links (without accompanying text description) have alt text indicating link target
• If the same visual presentation can be made using text alone, an image is not used to present that text
• When a text link and image link with the same URL are grouped, use a single < a > element and a null alt tag for the image
• Graphs, charts and maps include contextual or supporting details in text surrounding the image

In addition:

• Try to avoid images of words, unless you plan to write out the words in the alt tag. For example, if you're posting a copy of hours signage on your website, save the poster as something that can be read by screen reader software (PDF) and not as an image (png, jpg, etc.) that has to be seen to be understood

Formulas:

• For web pages, use an equation editor that outputs MathML. (e.g., MathType)
• For documents and presentations, use an equation editor that supports accessibility (e.g., MathType)

Related Links:

Web Accessibility Standards as presented by SUNY Electronic & Information Technology (EIT) Accessibility with explanations from SLS:

• All form controls are properly labeled
• All tables are properly labeled
• Table header rows and columns are assigned
• When possible, information is displayed in a linear format not as a table
• Avoid split cells, empty cells, merged cells, and embedded tables
• Frames and iFrames have appropriate titles
• In addition, don't use tables for layout, only for data

If you're using a table for layout, you should add role="presentation" to the table code, Don't use <caption> or <th> code because the system will think that this is a data table. You can just put the title above the table using regular <p></p> tags.

Resources:

• WC3 Forms accessibility tutorial

Web Accessibility Standards as presented by SUNY Electronic & Information Technology (EIT) Accessibility:

• Establish a timely process for requesting synchronized captions for multimedia - Required
• Provide synchronized captions for all public audio-video content - Required
• Provide transcripts for audio-only content - Required
• Provide descriptive audio for prerecorded audio-video and video-only content, when needed - Strongly recommended
• Ensure audio and video does not begin playing on page load - Required
• Provide synchronized captions for live audio-video content - Strongly recommended

• All documents need to be checked for accessibility before posting. Microsoft Office programs and Adobe Acrobat have built in accessibility checkers that can help you fix any outstanding issues.
• If you can avoid using documents in webpages, FAQs, etc., it's best to do that. Attaching a document requires the user to have software to access it, it slows down access to information, and it requires you to assess accessibility outside of your web environment. Any global fixes to accessibility or design on your web platform won't impact content pulled in from outside of your web environment like PDFs, Word docs, etc.
• Use different titles for each presentation slide
• Fillable documents (forms) are labeled appropriately
• Use built-in accessibility checkers in various software tools (e.g., Microsoft Office, Adobe Acrobat)

While checking content for accessibility, it makes sense to also check to make sure that you've set your content up within the standards of responsive design. A page or element that's been designed responsively will scale appropriately for whatever device is used to view it. Platforms like Springshare use code that does this for you, but if you add content incorrectly, that can break the built-in responsiveness. For example, if you add an image that has a hard-coded width dimension, it won't scale down properly if someone looks at that content on a phone.

Best practices for responsive design include:

• Images: control width of an image with percentages rather than hard-coded pixel numbers. E.g., make the width 80% rather than 660 pixels. The height will take care of itself as a scaled connection with the width, so leave that attribute empty
• Tables: avoid using tables for layout whenever possible. Use divs and width of div be percentage where possible

Resources:

• W3 Schools HTML Responsive Design
• Google Developer Network Responsive Design Basics