Golden High School Case Study
Accessibility testing is designed to identify elements and components that present challenges or barriers for those who interact with the web content via assistive technologies and resolve these issues in order to provide an equivilent experience to those who do not use assistive technologies.
Accessibility Issues Identified
Through CSS Testing, issues such as; poor text contrast, components that were not operable with a keyboard, and lack of visible keyboard focus were identified.
Through manual screen reader testing, issues such as; unlabeled links, improper use of headings, unlabeled buttons, unlabeled input fields, missing or meaningless alt text, illogical reading order in portions of the page, and improper use of tables.
*Note: Testing on some pages is still in progress.
Recommendations were made to increase the contrast between text and background where applicable. Advised of best practies to ensure components are operable using a keyboard. In addition, information was provide so developers would best know how to visibly show keyboard focus as the user tabs through focusable elements. Best practices were provided to show how; links, buttons, and input fields can be properly labeled. Finally, advice was provided on correcting the reading order in various locations on the page.
In order to provide accurate recommendations for resolving these issues, it is important to have substantial knowledge of HTML, CSS, Web Accessibility Guidelines, and WAI-ARIA Authoring practies. In addition, it is important to understand how a screen reader or other assistive technologies interact with the web content. For example, looking at the order in which elements are coded into the DOM, it is possible to see the order in which a screen reader will read the content.
On pages where the recommendations have been implimented, the user experience has been improved for all users. With better contrast, everyone can read the text much easier. In addition, the keyboard focus indicator is clearly visible on any part of the page. By coding elements in the appropriate order within the DOM, screen readers now read in a logical order. Finally, Labels, input fields, and buttons are now programmatically associated so assistive technology users know what the field button or link is for.
* This testing is still underway.