Accessibility - sgml/signature GitHub Wiki

Accessibility Specific Bugs

1. Focus Management Failures

• Description: Improper or missing focus transitions between interactive elements.
• Examples:
  • Modal dialogs that don’t trap focus.
  • Focus lost to non-visible or non-interactive elements.
• Impact: Breaks tab navigation, impairs screen reader workflows, and violates WCAG 2.1 guidelines.

2. Key Event Handling Ambiguities

• Description: Inconsistent or missing handling of keydown/keyup/keypress events.
• Examples:
  • Enter key not submitting forms.
  • Arrow keys failing to navigate dropdowns or menus.
• Impact: Functional breakage for keyboard-only users; often missed in mouse-centric QA.

3. Accesskey and Shortcut Collisions

• Description: Conflicts between custom keyboard shortcuts and browser/system-level shortcuts.
• Examples:
  • Alt+S triggering both browser save and site-specific action.
• Impact: Unpredictable behavior, especially across platforms and locales.

4. Tabindex Misuse or Neglect

• Description: Incorrect use of tabindex values or missing tabindex on custom widgets.
• Examples:
  • tabindex="-1" on interactive elements.
  • Non-sequential tab order due to manual overrides.
• Impact: Navigation confusion, accessibility violations, and user frustration.

5. Hidden or Offscreen Interactive Elements

• Description: Elements that are visually hidden but still focusable.
• Examples:
  • Offscreen buttons receiving focus.
  • CSS visibility: hidden vs display: none inconsistencies.
• Impact: Traps focus, breaks expected navigation flow, and confuses assistive tech.

6. Keyboard Trap Conditions

• Description: Scenarios where users cannot escape a component using keyboard alone.
• Examples:
  • Custom dropdowns or modals without Escape key support.
• Impact: Lock-in behavior, especially problematic for screen reader users.

7. Form Submission and Validation Edge Cases

• Description: Keyboard-only form submission paths not triggering validation or JS hooks.
• Examples:
  • Pressing Enter bypasses client-side validation.
• Impact: Data integrity issues, inconsistent UX, and security bypasses.

8. Platform-Specific Key Mapping Bugs

• Description: Inconsistent behavior across OS/browser combinations.
• Examples:
  • Meta key on macOS vs Ctrl on Windows.
• Impact: Breaks cross-platform consistency; often missed in monoculture testing environments.

DevOps Tools

https://kb.iu.edu/d/atey

https://bolonio.medium.com/automating-the-accessibility-tests-of-your-source-code-with-github-actions-63590cdc6860

OSX

Implement the contract of the role-specific protocol (NSAccessibilityButton, NSAccessibilityImage, NSAccessibilityGroup, etc) within the NSAccessibility protocol that best matches the behavior of the GUI element being rendered.

• https://developer.apple.com/documentation/appkit/nsaccessibility?language=occ
• https://www.apple.com/voiceover/info/guide/_1133.html
• https://support.apple.com/guide/iphone/operate-iphone-using-voiceover-gestures-iph3e2e2329/ios
• https://dequeuniversity.com/assets/pdf/screenreaders/voiceover-ios-guide.pdf

Linux / BSD

For GNOME applications, the GNOME Accessibility Implementation Library (GAIL) bridges GNOME widgets and the Accessibility Toolkit (ATK). ATK bridges to the Assistive Technology Service Provider Interface (AT-SPI). AT-SPI is currently used by GTK2, Java and OpenOffice.

Windows

Microsoft Windows SDK includes all the tools necessary for MSAA and/or UI Automation. The IAccessibleEx interface the bridges between the two worlds.

Browser Devtools

• https://www.linkedin.com/blog/engineering/accessibility/automated-accessibility-testing
• https://developer.chrome.com/docs/devtools/accessibility/reference/
• https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools
• https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/

Consoles

• https://www.boia.org/blog/xbox-accessibility-guidelines-provide-best-practices-so-more-gamers-can-play

Chrome OS

http://www.chromevox.com/next_keyboard_shortcuts.html

https://www.perkinselearning.org/technology/blog/my-experiences-chromebook

https://medium.com/@sheribyrnehaber/handling-accessibility-demand-letters-a10107566e3e

https://medium.com/@sheribyrnehaber/this-week-in-accessibility-gomez-v-gnc-89fee5f26b5f

Focus

https://boom-bath.glitch.me/tabindex.html

Semantics

https://blog.hubspot.com/website/how-to-bold-in-html

https://www.tempertemper.net/blog/bold-and-italics-arent-read-by-screen-readers

Captions

• https://support.google.com/youtube/answer/2734796

• https://developer.mozilla.org/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions

• https://support.google.com/youtube/answer/100078

• https://support.google.com/drive/answer/1372218

• https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video

• https://hacks.mozilla.org/2014/07/adding-captions-and-subtitles-to-html5-video/

Transcripts

https://oit.colorado.edu/tutorial/captioning-making-captions-transcripts-youtube

https://support.google.com/youtube/answer/2734799?hl=en

https://knowbility.org/blog/2022/open-web-pioneer-molly-holzschlag-to-keynote-accessu

https://meryl.net/molly-e-holzschlag/

WCAG Techniques

https://www.w3.org/WAI/GL/WCAG20/TECHS-SUBMIT/

Courses

https://www.edx.org/course/web-accessibility-introduction

References

• https://developer.ibm.com/tutorials/build-accessible-applications-equal-access-toolkit/

• https://www.w3.org/TR/core-aam-1.2/

• https://www.w3.org/TR/graphics-aria-1.0/

• https://www.w3.org/TR/wai-age-literature/

• https://chromium.googlesource.com/chromium/src.git/+/master/docs/accessibility/overview.md

• Using tabindex

• Lists and Safari

• Screen Readers

• HTML5 Accessibility Tests

• Windows Automation API SDK Tools – Microsoft Windows UI Automation Blog

• Cross-Browser Testing: Accessibility

• Orion/Accessibility - Eclipsepedia

• NSAccessibility - AppKit | Apple Developer Documentation

• Introducing ATK, AT-SPI, GAIL and GTK+

• https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox

• https://www.w3.org/TR/core-aam-1.1/#mapping_conflicts

• https://www.w3.org/WAI/ER/tools/

• https://github.com/filipelinhares/WAI-ARIA-cheatsheet

• https://wicg.github.io/aom/spec/

• https://blog.webix.com/accessible-web-components-for-the-web-with-modern-javascript-frameworks/

• https://github.com/reactjs/reactjs.org/issues/78

• https://inclusive-components.design/#components

• https://webaim.org/projects/screenreadersurvey7/#mobilekeyboard

• http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/accessibility/accessible-line/

• https://material.io/guidelines/usability/accessibility.html#accessibility-sound-motion

• https://material.io/guidelines/style/imagery.html#imagery-ui-integration

• https://blogs.opentext.com/interview-with-media-access-australia-what-is-pdfua-and-why-it-is-important/

• https://pdfaccessibilityblog.wordpress.com

• https://help.eclipse.org/luna/index.jsp?topic=%2Forg.eclipse.platform.doc.user%2Fconcepts%2Faccessibility%2Faccessmain.htm

• https://medium.com/@andreasmcd/creating-an-accessible-tab-component-with-react-24ed30fde86a

• https://simplyaccessible.com/article/react-a11y/

• https://blog.usejournal.com/getting-started-with-web-accessibility-in-react-9e591fdb0d52

• https://medium.com/@svinkle/creating-accessible-react-apps-38dc1c2775cf

• https://kryogenix.org/code/browser/everyonehasjs.html

• https://www.deque.com/axe/

• https://www.deque.com/blog/accessibility-testing-nvda-screenreader/

• http://www.webaxe.org/category/testing/

• https://tink.uk/using-the-aria-application-role/

• https://docs.servicenow.com/bundle/london-release-notes/page/administer/accessibility-508-compliance/reference/r_VPAT.html

• http://www.weba11y.com/blog/2015/02/24/creating-and-editing-captions/

• https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html

• https://docs.microsoft.com/en-us/microsoft-edge/accessibility/test

• https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/elements/accessibility

• https://www.archives.gov/files/global-pages/accessibility.html

• https://webaim.org/blog/alexa-100-update-2/

• https://www1.nyc.gov/assets/doitt/downloads/pdf/nyc-web-accessibility-report.pdf

• https://www.wccusd.net/cms/lib/CA01001466/Centricity/Domain/2414/Accessibility%20Webinar%20Deck.pdf

• https://core.ac.uk/download/pdf/157730417.pdf

• https://www.uottawa.ca/respect/sites/www.uottawa.ca.respect/files/fss-fixing-accessibility-errors-in-pdfs.pdf

• https://blog.sourcerer.io/building-web-accessibility-in-2019-b4bf16ef5754

• https://www.doe.in.gov/sites/default/files/assessment/accessibility-and-accommodations-guidance-1819-07-25-18-final.pdf

• https://knowbility.org/assets/accessu/2018/presentations/Moore-Michael-Accessibility_Testing_for_the_Rest_of_Us.pdf

• https://ictaccessibilitytesting.org/docs/Proceedings%20of%20the%202018%20ICT%20Accessibility%20Testing%20Symposium.pdf

• https://www.w3.org/2018/03/wot-f2f/slides/TPG_AccessibilityUseCases.pdf

• https://www.d2l.com/wp-content/uploads/2018/10/D2L-Brightspace-CORE-10.8.x-VPAT%C2%AE2.2-August-2018-1.pdf

• https://www.d2l.com/wp-content/uploads/2018/10/D2L-Brightspace-CORE-10.8.x-WCAG-2.0-Checklist-August-2018-1.pdf

• https://arxiv.org/ftp/arxiv/papers/1808/1808.09885.pdf

• https://help.surveymonkey.com/servlet/servlet.FileDownload?file=01530000003DuoA

• https://www.btaa.org/docs/default-source/library/accessibility-reports/gale-ecco-9_11_2017.pdf?sfvrsn=348a4cf3_5

• https://www.btaa.org/docs/default-source/library/accessibility-reports/btaa-pubmed-accessibilityreview.pdf?sfvrsn=be5b4af3_4

• https://medium.com/@WebReflection/web-standards-are-dead-long-life-web-standards-7420548709bd?source=---------3------------------

• https://www.grahamlea.com/2013/07/10-reasons-you-shouldnt-have-senior-developers-tech-leads-or-architects/

• https://www.24a11y.com/2018/accessibility-pro-certified/

• https://www.accessibilityassociation.org/wascertification

• https://a11yproject.com/

• https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/

• https://hugogiraudel.com/2016/10/13/css-hide-and-seek/

• https://www.smashingmagazine.com/2018/12/voiceover-screen-reader-web-apps/

• https://webaim.org/techniques/tables/

• https://www.apple.com/voiceover/info/guide/_1131.html

• https://www.tetchi.ca/a11y-tables-and-borders

• https://github.com/h5bp/main.css/issues/12

• https://medium.com/@schofeld/apple-voice-over-absolute-positioning-read-order-bug-6c59d59f4a33

• https://bbc-news.github.io/accessibility-news-and-you/accessibility-and-testing-with-voiceover-ios.html

• https://webaim.org/techniques/css/invisiblecontent/

• https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

• https://codepen.io/scottohara/pen/LjyYbm

• https://www.powermapper.com/tests/screen-readers/tables/table-summary/

• http://accessibleculture.org/articles/2011/08/responsive-data-tables-and-screen-reader-accessibility/

• https://webaim.org/articles/voiceover/

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced

• https://www.hassellinclusion.com/blog/accessible-accordions-part-2-using-details-summary/

• https://support.brightcove.com/using-screen-reader-brightcove-player

• https://support.google.com/docs/answer/6282736?co=GENIE.Platform%3DDesktop&hl=en

• https://www.oomphinc.com/notes/2019/01/images-alt-tags-out-loud-experience-oomph-inc/

• https://knowbility.org/programs/accessu/2019/mobile-web-accessibility-with-voiceover-and-talkback/

• https://developers.google.com/web/fundamentals/accessibility/how-to-review

• https://guides.emberjs.com/release/reference/accessibility-guide/

• https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page

• https://www.w3.org/TR/wai-aria-practices/examples/landmarks/contentinfo.html

• https://www.nomensa.com/blog/2010/what-are-wai-aria-document-landmark-roles

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/

https://webaim.org/techniques/keyboard/

https://www.deque.com/blog/accessible-focus-indicators/

https://developer.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/

https://a11yproject.com/posts/never-remove-css-outlines/

http://www.outlinenone.com/

blog

https://coolblindtech.com/

https://blogs.microsoft.com/accessibility/

vendors

http://teachingcommons.cdl.edu/access/procurement_process/demonstration.shtml

aria-live

http://whatsock.com/training/#hd24

https://cccaccessibility.org/web/web-developer-tutorials/using-aria-live

https://bitsofco.de/using-aria-live/

https://www.w3.org/TR/WCAG20-TECHS/ARIA19.html

aria + IDs

https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships

https://developer.salesforce.com/blogs/2018/01/promote-equality-building-accessible-content.html

https://vuejs.org/guide/best-practices/accessibility.html#semantic-forms

Forms

• https://webaim.org/techniques/forms/controls
• https://www.quirksmode.org/dom/forms/cssvalidation.html
• https://designsystem.digital.gov/components/form-controls/
• https://www.quirksmode.org/book/examplescripts/forms/
• https://www.quirksmode.org/dom/domform.html

NVDA

Tables

• Add <summary> to read a screen-reader only table

• http://davidguttman.github.io/react-pivot/

• https://datatables.net/examples/styling/semanticui.html

Icons

• Add role="img" to read an aria-label attached to a visual icon

Accessibility Object Model (AOM)

Spec

• https://github.com/WICG/aom/blob/gh-pages/caniuse.md

• https://www.accessibilityassociation.org/resource/IAAP_CPACC_BOK_March2020

Bugs

• https://stackoverflow.com/questions/57621912/creating-form-tooltip-is-not-read-by-screen-reader-the-first-time

• https://stackoverflow.com/questions/53576998/focus-reverts-to-text-input-on-first-attempt-to-transfer-it-to-another-element

Accesskey

• https://www.hobo-web.co.uk/uk-gov-access-keys/
• https://webaim.org/techniques/keyboard/accesskey
• https://www.w3.org/WAI/PF/HTML/wiki/Talk:Access/access_key_requirements
• https://www.w3.org/WAI/UA/TS/html401/cp0101/0101-ACCESSKEY-BUTTON.html
• https://validator.w3.org/accesskeys.html

Tools

• https://keycode.info/
• https://developers.google.com/web/tools/chrome-devtools/accessibility/reference
• https://hacks.mozilla.org/2019/10/auditing-for-accessibility-problems-with-firefox-developer-tools/
• https://blog.mozilla.org/press/2019/10/mozillas-accessibility-inspector-helps-developers-to-make-websites-and-content-accessible-for-all/
• https://developer.paciellogroup.com/blog/2019/02/accessibility-testing-tools-we-use/
• https://arstechnica.com/information-technology/2019/10/vivaldi-mobile-review-can-everyones-favorite-power-browser-work-on-phones/
• https://blogs.opera.com/desktop/2019/04/opera-60-reborn-3-web-3-0-vpn-ad-blocker/
• https://support.microsoft.com/en-us/help/4000734/windows-10-microsoft-edge-ease-of-access